<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<body>
<div id="container">
<div id="profilecontainer">
<div id="part1"> <button id="dropdown">
<hr class="hr">
<hr class="hr">
<hr class="hr"></button> <img id="person" src="https://crizaze.com/wp-content/uploads/2013/12/professional-model-200x300.jpg">
<p id="name">Alessandra Benoit</p> <button id="web" class="skill">Web</button> <button id="graphic" class="skill">Graphic</button> <button id="ui" class="skill">UI / UX</button> <a href="#"><i class="fab fa-facebook fa-lg"></i></a> <a href="#"><i class="fab fa-twitter fa-lg"></i></a> <a href="#"><i class="fab fa-instagram fa-lg"></i></a> <a href="#"><button id="follow">FOLLOW</button></a>
</div>
<div id="part2">
<p id="txt1">Projects</p>
<p id="txt2">12</p>
<p id="txt3">Followers</p>
<p id="txt4">2538</p>
<p id="txt5">Following</p>
<p id="txt6">429</p>
</div>
<div id="next"> <a href="#"><i id="cross2" class="fas fa-times fa-2x"></i></a> <img id="person2" src="https://crizaze.com/wp-content/uploads/2013/12/professional-model-200x300.jpg">
<p id="name2">Alessandra Benoit</p>
<p id="phone"><i class="fas fa-mobile-alt"></i><span id="code">+91</span> 95748-62178</p> <a href="#"><button id="project" class="button">Projects</button></a> <a href="#"><button id="resume" class="button">My Resume</button></a> <a href="#"><button id="hire" class="button">Hire Me</button></a> <a href="#"><button id="message" class="button">Message Me</button></a>
</div>
</div>
</div>
</body>
body {
margin: 0;
padding: 0
}
#container {
margin: 0;
padding: 0;
height: 650px;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .3)), url("https://images.pexels.com/photos/1363876/pexels-photo-1363876.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940")
}
#profilecontainer {
width: 350px;
height: 450px;
background-color: white;
border-radius: 8px;
position: relative;
top: 100px;
left: 38%;
box-shadow: 0 0 25px black
}
#part1 {
width: 350px;
height: 300px;
background-color: #FF9299;
border-top-left-radius: 8px;
border-top-right-radius: 8px
}
.hr {
border: 1px solid black;
margin-bottom: -7px
}
#dropdown {
width: 40px;
height: 0;
border: none;
background-color: transparent;
cursor: pointer;
position: relative;
top: -45px;
left: 15px
}
#person {
width: 100px;
height: 100px;
border-radius: 50%;
border: 5px solid white;
position: relative;
top: 50px;
left: 21.5%;
cursor: pointer
}
#name {
font-family: 'Rubik', sans-serif;
position: relative;
top: 55px;
text-align: center;
font-size: 20px;
color: white
}
.skill {
position: relative;
top: 45px;
left: 24.5%;
color: gainsboro;
background-color: transparent;
border: none;
font-family: 'Rubik', sans-serif;
font-size: 15px
}
#graphic,
#ui {
border-left: 1px solid gray
}
.fa-facebook,
.fa-twitter,
.fa-instagram {
position: relative;
top: 75px;
left: -20.5%;
color: #F1F3F5;
margin-left: 15px
}
.fa-facebook:hover {
color: #3B579D
}
.fa-twitter:hover {
color: #2CAAE1
}
.fa-instagram:hover {
color: #C22660
}
#follow {
position: relative;
top: 100px;
left: 29%;
height: 50px;
width: 150px;
font-size: 20px;
font-family: 'Rubik', sans-serif;
background-color: white;
box-shadow: 0 0 15px;
border: none;
border-radius: 25px;
cursor: pointer;
color: #FF9299
}
#follow:hover {
background-color: cadetblue;
color: white;
transition: 0.5s
}
#txt1,
#txt2,
#txt3,
#txt4,
#txt5,
#txt6 {
font-family: 'Rubik', sans-serif;
font-size: 16px
}
#txt1 {
position: relative;
top: 50px;
left: 10%;
color: gray
}
#txt2 {
position: relative;
top: 45px;
left: 16%
}
#txt3 {
position: relative;
top: -30px;
left: 37%;
color: gray
}
#txt4 {
position: relative;
top: -35px;
left: 41%
}
#txt5 {
position: relative;
top: -110px;
left: 68%;
color: gray
}
#txt6 {
position: relative;
top: -115px;
left: 74%
}
#next {
width: 280px;
height: 450px;
background-color: rgb(20, 20, 35);
position: relative;
top: -540px;
left: 0%;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
display: none
}
#cross2 {
position: relative;
top: -5px;
left: 15px;
color: white
}
#cross2:hover {
color: red;
transition: 0.5s
}
#person2 {
width: 80px;
height: 80px;
border-radius: 50%;
border: 5px solid white;
position: relative;
top: 30px;
left: 24.5%;
cursor: pointer
}
#name2,
#phone {
font-family: 'Rubik', sans-serif;
position: relative;
top: 35px;
text-align: center;
font-size: 17px;
color: gainsboro
}
#phone {
position: relative;
top: 25px
}
.fa-mobile-alt,
#code {
margin-right: 10px
}
.button {
width: 100%;
height: 40px;
margin-bottom: 10px;
font-size: 20px;
font-family: 'Rubik', sans-serif;
color: white;
background-color: transparent;
border: none
}
.button:hover {
color: cadetblue;
background-color: rgb(20, 70, 35);
font-size: 25px;
transition: 0.3s;
border-left: 6px solid darkred
}
#project {
margin-top: 35px
}
@media only screen and (max-width:830px) {
#profilecontainer {
position: relative;
left: 20%
}
}
@media only screen and (max-width:620px) {
#profilecontainer {
position: relative;
left: 10%
}
}
@media only screen and (max-width:530px) {
#profilecontainer {
position: relative;
left: 4%
}
}
$(document).ready(function(){
document.getElementById("cross2").onclick= function(){
document.getElementById("next").style.display = "none";
};
document.getElementById("dropdown").onclick = function(){
document.getElementById("next").style.display = "block";
};
});