Amazing Profile Card in HTML and CSS | Project Series Day - 19 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Profile Card with the help of HTML and CSS. It is Project Series Day 18. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple image gallery step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
We first have to put the link in the head section. then start coding in the body. we have made div for every item.
<head>
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i|Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
</head>
<body>
<div class="background"></div>
<div class="outer-div">
<div class="inner-div">
<div class="front">
<div class="front__bkg-photo"></div>
<div class="front__face-photo"></div>
<div class="front__text">
<h3 class="front__text-header">John Doe</h3>
<p class="front__text-para"><i class="fas fa-map-marker-alt front-icons"></i>Earth</p>
<span class="front__text-hover">Hover For Details</span>
</div>
</div>
<div class="back">
<div class="social-media-wrapper">
<a href="#" class="social-icon"><i class="fab fa-codepen" aria-hidden="true"></i></a>
<a href="#" class="social-icon"><i class="fab fa-github" aria-hidden="true"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="social-icon"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</body>CSS🎈( step - 2)
Now let's design the divs and make an attractive profile card
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: lato;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url("https://images.unsplash.com/photo-1447433589675-4aaa569f3e05?ixlib=rb-0.3.5&s=4222852e25e0f57d9485f7889957e99a&auto=format&fit=crop&w=2000&q=80");
background-size: cover;
background: #ccc;
background-position: 0 50%;
background: #DEB493;
}
.background:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0);
}
.outer-div,
.inner-div {
height: 450px;
max-width: 300px;
margin: 0 auto;
position: relative;
}
.outer-div {
perspective: 900px;
perspective-origin: 50% calc(50% - 18em);
}
.inner-div {
margin: 0 auto;
border-radius: 5px;
font-weight: 400;
color: #071011;
font-size: 1rem;
text-align: center;
transition: all 0.6s cubic-bezier(0.8, -0.4, 0.2, 1.7);
transform-style: preserve-3d;
}
.inner-div:hover .social-icon {
opacity: 1;
top: 0;
}
.outer-div:hover .inner-div {
transform: rotateY(180deg);
}
.front,
.back {
position: relative;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
cursor: pointer;
height: 100%;
background: #fff;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 5px;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.front__bkg-photo {
position: relative;
height: 150px;
width: 300px;
background: url("https://images.unsplash.com/photo-1511207538754-e8555f2bc187?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88672068827eaeeab540f584b883cc66&auto=format&fit=crop&w=1164&q=80") no-repeat;
background-size: cover;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.front__bkg-photo:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.front__face-photo {
position: relative;
top: -60px;
height: 120px;
width: 120px;
margin: 0 auto;
border-radius: 50%;
border: 5px solid #fff;
background: url("https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8N3x8fGVufDB8fHx8&w=1000&q=80") no-repeat;
background-size: cover;
overflow: hidden
}
.front__text {
position: relative;
top: -55px;
margin: 0 auto;
font-family: "Montserrat";
font-size: 18px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.front__text .front__text-header {
font-weight: 700;
font-family: "lato";
text-transform: uppercase;
font-size: 20px;
}
.front__text .front__text-para {
position: relative;
top: -5px;
color: #000;
font-size: 14px;
letter-spacing: 0.4px;
font-weight: 400;
font-family: "lato", sans-serif;
}
.front__text .front-icons {
position: relative;
top: 0;
font-size: 14px;
margin-right: 6px;
color: gray;
}
.front__text .front__text-hover {
position: relative;
top: 10px;
font-family: lato;
font-size: 10px;
color: tomato;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border: 2px solid tomato;
padding: 8px 15px;
border-radius: 30px;
background: tomato;
color: #fff;
}
.back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #071011;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.social-media-wrapper {
font-size: 36px;
}
.social-media-wrapper .social-icon {
position: relative;
top: 20px;
margin-left: 5px;
margin-right: 5px;
opacity: 0;
color: #fff;
transition: all 0.4s cubic-bezier(0.3, 0.7, 0.1, 1.9);
}
.social-media-wrapper .social-icon:nth-child(1) {
transition-delay: 0.6s;
}
.social-media-wrapper .social-icon:nth-child(2) {
transition-delay: 0.7s;
}
.social-media-wrapper .social-icon:nth-child(3) {
transition-delay: 0.8s;
}
.social-media-wrapper .social-icon:nth-child(4) {
transition-delay: 0.9s;
}
.fab {
position: relative;
top: 0;
left: 0;
transition: all 200ms ease-in-out;
}
.fab:hover {
top: -5px;
}All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.