<head>
  <title>My ID</title>
  <link href="https://fonts.googleapis.com/css?family=Leckerli+One|Ubuntu|Anonymous+Pro" rel="stylesheet"> 
<script src="https://use.fontawesome.com/c1c4646d1b.js"></script>
</head>

<body>
  <div id="my-id-wrap">
    <div id="my-id-pic">
      <div id="my-pic-bg"></div>
      <img id="my-pic" src="https://s2.postimg.org/nu7zkjqih/Kawaii_kitty_i_by_riair-d41q2nj.png" alt="">
    </div>
    <div id="my-id-details">
      <span id="name">Freia Van Loon</span>
      </br>
    <span id="studies">First-year student</span></br>
    <span id="languages">C# | HTML/CSS | Vector images</span>
    </div>
    <div id="my-id-contact">
      <a href=""><i class="fa fa-codepen" aria-hidden="true"></i></a>
      <a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
      <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
    </div>
  </div>
</body>
body {
  background-color: pink;
  background-image: url('https://media.giphy.com/media/O5aGxCiXwzGhO/giphy.gif');
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#my-id-wrap {
  background-color: rgba(255, 255, 255, 0.60);
  border-radius: 2vh;
  height: 60vh;
  width: 90vh;
  margin: auto;
  padding: 5vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}

#my-id-pic {
  margin-bottom: 2vh;
}
#my-pic {
  height: 12vh;
  margin: 3vh 0 5vh 0;
  position: relative;
  z-index: 5;
}
#my-pic-bg {
  height: 20vh;
  width: 20vh;
  position: absolute;
  top: 5vh;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  border-radius: 10vh;
  background-color: rgba(255, 198, 219, 0.80);
}
#my-id-details {
}

#name {
  font: 5vh 'Leckerli One', cursive;
  color: #37383a;
}

#studies {
  font: 3vh 'Ubuntu', sans-serif;
  color: #545456;
}

#my-id-contact i{
  font-size: 5vh;
  margin: 2vh;
  color: rgba(0,0,0,0.70);
}

#languages{
  display: block;
  margin: 3vh;
  font: 3vh 'Anonymous Pro', sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.