Learn to create a simple profile card design using HTML and CSS.
Simple Profile Card Design, HTML CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Profile card</title>
<!-- fontawesome files -->
<link rel="stylesheet" href="./css/all.min.css">
<!-- internal CSS -->
<style>
/* to make enteir element to center */
body {
margin: 0;
padding: 0;
height: 100vh;
display: grid;
place-items: center;
background: #1e1e1e;
}
/* Add the below CSS code for mobile device */
/* Add the below CSS code for laptop display */
</style>
</head>
<body>
<div class="container">
<img src="./pic-00.png" alt="">
<div class="content">
<h2>Shiva Kumar</h2>
<p class="position">Full-Stack Web Developer</p>
<p class="desc">
I'm have 4+years of experience as a Full-Stack Web Developer. My Speciality is custom layout designs and I have designed eCommerce, Materimonial and services based Websites.
</p>
<ul class="icons">
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-facebook"></i></li>
<li><i class="fa-brands fa-instagram"></i></li>
<li><i class="fa-brands fa-github"></i></li>
<li><i class="fa-brands fa-dribbble"></i></li>
</ul>
</div>
<div class="details">
<ul>
<li>📞 +91-23235 45456</li>
<li>📧 info@btechiot.com</li>
<li>📍 Vijayawada, A.P</li>
</ul>
</div>
</div>
</body>
</html>CSS code for mobile responsive design:
img {
width: 100%;
}
.container {
background-color: rgb(18, 40, 56);
max-width: 425px;
border-radius: 1.5rem;
margin: 1rem;
padding: 1rem;
color: white;
border: 4px solid #d7d4d4;
}
h2 {
font-size: 2rem;
text-align: center;
margin: 0;
color: rgb(255, 200, 0);
}
p.position {
font-size: 1rem;
margin: 0;
text-align: center;
}
.position {
border-bottom: 2px solid rgb(255, 191, 0);
}
p.desc {
font-size: 0.8rem;
text-align: center;
padding: 10px;
}
ul.icons {
padding: 0;
text-align: center;
}
ul.icons li {
list-style-type: none;
display: inline-block;
color: yellowgreen;
border-radius: 50%;
margin: 0 10px;
}
ul.icons li:hover,
.details ul li:hover {
cursor: pointer;
border-bottom: 1px solid yellowgreen;
}
.fa-brands {
font-size: 20px;
}
ul {
padding: 0;
text-align: center;
}
ul li {
list-style-type: none;
line-height: 1.5rem;
display: inline-block;
font-size: 0.8rem;
padding: 0 0.4rem;
}CSS code for desktop design:
@media only screen and ( min-width: 550px) {
.container {
max-width: 800px;
display: flex;
border-radius: 140px 20px 20px 140px;
align-items: center;
padding: 20px;
}
.container:hover {
box-shadow: 0 0 32px #028ffb;
}
img {
width: 250px;
position: relative;
bottom: 16px;
}
.content {
padding: 20px 40px 20px 0;
margin: auto 0;
max-width: 300px;
}
.position {
width: 180px;
}
h2,
p.position,
ul.icons {
text-align: left;
}
p.desc {
text-align: justify;
padding: 0;
}
.details {
margin: auto 0;
padding: 10px;
border-left: 4px solid yellowgreen;
}
.details>ul>li {
display: block;
font-size: 1rem;
text-align: left;
padding: 10px 0;
}
}Want to learn to design more web design templates, subscribe our news letter.
