<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.