submissions/ThierryRakotomanana.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My card Portfolio</title>
</head>
<style>
  * {
      margin : 0;
      padding : 0;
      box-sizing : border-box;
      font-family : sans-serif;
  }
  .ecran{
    width: 100%;
    heigth: 100vh;
    back-ground-position : center;
    back-ground-size : cover;
    display : flex;
    align-items: center;
    justify-content: center;
  }
  .card{
    width: 90%;
    max-width: 440px;
    background-color : darkslateblue;
    color : peru;
    text-align: center;
    padding: 50px 30px;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .card svg{
    width: 200px;
    border-radius: 50%;
  }
  .card h2{
    font-size: 50px;
    font-weigth: 600px;
    margin-top: 20px;
  }
  .card p{
    font-size: 20px;
    margin: 10px auto;
    max-width: 330px;
  }
  .gingerbread .body {
    fill: #cd803d;
  }

  .gingerbread .eye {
    fill: white;
  }

  .gingerbread .mouth {
    fill: none;
    stroke: white;
    stroke-width: 2px;
  }

  .gingerbread .limb {
    stroke: #cd803d;
    stroke-width: 35px;
    stroke-linecap: round;
  }
  
</style>
<body>
  <div class="ecran">
    <div class="card">
      <svg class="gingerbread" width="200" height="200" viewBox="-100 -100 200 200">
        <circle class="body" cx="0" cy="-50" r="30" />

        <circle class="eye" cx="-12" cy="-55" r="3" />
        <circle class="eye" cx="12" cy="-55" r="3" />
        <rect class="mouth" x="-10" y="-40" width="20" height="5" rx="2" />

        <line class="limb" x1="-40" y1="-10" x2="40" y2="-10" />
        <line class="limb" x1="-25" y1="50" x2="0" y2="-15" />
        <line class="limb" x1="25" y1="50" x2="0" y2="-15" />

        <circle class="button" cx="0" cy="-10" r="5" />
        <circle class="button" cx="0" cy="10" r="5" />
      </svg>
      <h2>Thierry Rak</h2>
      <p>I am JavaScript developer and Ilove coding</p>
    </div>
  </div>
  <script>
    //Here the script
  </script>
</body>
</html>