<div class="container">
<div id='cover_image' class="cover_image">
<div class="cover_image_overlay">
<div class="cover_image_content">
<div class="flex">
<div class="left">
<h1>Jane Doe</h1>
<p>Product Designer</p>
</div>
<div class="right">
<div id='arrow_button' class="icon_cover" role='button'>
<i class="fa fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='detail_content' class="detail_content hidden">
<div class="circular_image">
<img class="profile_image" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Avatar">
</div>
<h1>Jane Doe</h1>
<p>Product Designer</p>
<p class='job_description'>Sr. UI/UX Design Manager @sakspro formerly Interactive Director at @enlab</p>
<hr>
<div class="follow">
<div class="flex">
<div class="followers">
<h2>3239</h2>
<p>Followers</p>
</div>
<div class="following">
<h2>3239</h2>
<p>Following</p>
</div>
</div>
<button id='follow_button' class='button'>Follow</button>
</div>
</div>
</div>
body {
background-color: #6786ff;
display: flex;
justify-content: center;
}
h1,
h2 {
margin: 0px;
padding: 0px;
margin-bottom: 10px;
}
p {
margin: 0px;
padding: 0px;
}
button {
cursor: pointer;
}
.container {
width: 300px;
height: 400px;
background-color: white;
}
.cover_image {
position: relative;
background-image: url(https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80);
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.cover_image_overlay {
background-color: rgba(0, 0, 0, 0.1);
width: 100%;
height: 100%;
}
.cover_image_content {
position: absolute;
color: white;
bottom: 0;
margin-bottom: 35px;
margin-left: 25px;
}
.flex {
display: flex;
}
.icon_cover {
background-color: rgba(0, 0, 0, 0.5);
width: 20px;
height: 20px;
padding: 10px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 25px;
cursor: pointer;
}
.detail_content {
padding: 20px;
position: relative;
}
.job_description {
color: gray;
margin-top: 15px;
margin-bottom: 15px;
}
.detail_content h1 {
color: #6786ff;
}
.circular_image {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 50%;
margin-top: 10px;
margin-bottom: 10px;
}
img.profile_image {
width: 100%;
height: auto;
}
.button {
background-color: #6786ff;
width: 100%;
border: 0px;
color: white;
padding: 15px;
margin-top: 20px;
}
.following {
margin-left: 20px;
}
.hidden {
display: none;
}
console.log("Hello World");
var rightArrow = document.getElementById("arrow_button");
var topCard = document.getElementById("cover_image");
var bottomCard = document.getElementById("detail_content");
var followButton = document.getElementById("follow_button");
rightArrow.addEventListener("click", function () {
topCard.classList.add("hidden");
bottomCard.classList.remove("hidden");
console.log("Hide top card and show bottom card.");
});
followButton.addEventListener("click", function () {
topCard.classList.remove("hidden");
bottomCard.classList.add("hidden");
console.log("Hide bottom card and show top card.");
});
View Compiled
