Create a 🧑💼Profile Card using HTML & CSS, step-by-step from scratch.
Markup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Profile Card | HTML CSS</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<section>
<div class="personal">
<span class="pro">Pro</span>
<img src="/img/Avatar.jpg" alt="">
<h1 class="name">Sarah Smith</h1>
<p class="country">UK</p>
<p class="stack">Full Stack Developer</p>
<button class="primary">Message</button>
<button class="secondary">Following</button>
<div class="social">
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-youtube"></i></a>
</div>
</div>
<div class="skills">
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>React</li>
<li>NodeJS</li>
<li>Express</li>
<li>Mongodb</li>
</ul>
</div>
</section>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');
*{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
font: 'Poppins', sans-serif;
background-color: #28223f;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
min-height: 100vh;
color: #b3b8cd;
}
section{
width: 30rem;
position: absolute;
box-shadow: 2px 10px 20px -10px rgba(0,0,0,0.75);
}
.personal{
background-color: #231e39;
padding: 2.5rem 0 1.5rem 0;
text-align: center;
}
.personal .name{
margin-top: 1.3rem;
}
.personal .country{
font-size: 1.3rem;
margin: 0.2rem;
}
.personal .stack{
font-size: 1.6rem;
margin-top: 1.5rem;
}
.personal button{
border: 1px solid #03bfcb;
padding: 0.8rem 1.8rem;
border-radius: 0.3rem;
font-size: 1.3rem;
cursor: pointer;
margin: 0.5rem;
}
.personal button.primary{
background-color: #03bfcb;
color: #231e39;
}
.personal button.secondary{
background-color: transparent;
color: #02899c;
}
.personal .pro{
background-color: #febb0b;
color: #231e39;
border-radius: 0.2rem;
font-size: 1.4rem;
padding: 0.1rem 0.8rem;
position: absolute;
top: 1rem;
left: 2rem;
}
.personal img{
width: 12rem;
height: 12rem;
border-radius: 50%;
border: 0.2rem solid #03bfcb;
}
.social i{
font-size: 1.8rem;
margin: 1rem 0.4rem;
color: #b3b8cd;
transition: color 0.5s
}
.fa-linkedin-in:hover{
color: #0a66c2;
}
.fa-twitter:hover{
color: #1da1f2;
}
.fa-instagram:hover{
color: #c32aa3;
}
.fa-github:hover{
color: #171515;
}
.fa-youtube:hover{
color: #ff0000;
}
.skills{
background-color: #1f1a36;
padding: 1.6rem 1rem;
}
.skills h2{
text-transform: uppercase;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.skills ul li{
display: inline-block;
list-style-type: none;
font-size: 1.2rem;
border: 2px solid #272240;
padding: .4rem;
border-radius: 0.2rem;
margin: 0.2rem 0.1rem;
}
🛴 Follow me on, for more like this⬇️:
📺Youtube: https://bit.ly/3oBQbc0
✔️Facebook: https://bit.ly/3cp2S5W
Top comments (0)