Hey, developers welcome to Day 22 of our 90Days 90Projects challenge. And in Day 22 we are going to create a Responsive Social Media Profile Card using HTML and CSS
So to run the code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Social Media Profiles </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- All Body Contents Goes Here -->
<h2> Social Media Profiles </h2>
<div class="social-container">
<!-- Facebook Container Starts from Here -->
<div class="social-items">
<div class="item">
<a href="https://www.facebook.com" target="_blank">
<i class="fa-brands fa-facebook-f"></i>
</a>
</div>
<h2 class="item-heading fb"> Faceboook </h2>
<h3 class="socialDescription"> Follow us on faceboook</h3>
</div>
<!-- Facebook Container Ends Here -->
<!-- Instagram Container Starts from Here -->
<div class="social-items">
<div class="item">
<a href="https://www.instagram.com/raju_webdev" target="_blank">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
<h2 class="item-heading insta"> Instagram </h2>
<h3 class="socialDescription"> Follow us on Instagram</h3>
</div>
<!-- Instagram Container Ends Here -->
<!-- Twitter Container Starts from Here -->
<div class="social-items">
<div class="item">
<a href="https://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter"></i>
</a>
</div>
<h2 class="item-heading twitter"> Twitter </h2>
<h3 class="socialDescription"> Follow us on Twitter</h3>
</div>
<!-- Twitter Container Ends Here -->
<!-- YouTube Container Starts from Here -->
<div class="social-items">
<div class="item">
<a href="https://youtube.com/@geekshelp" target="_blank">
<i class="fa-brands fa-youtube"></i>
</a>
</div>
<h2 class="item-heading yt"> YouTube </h2>
<h3 class="socialDescription"> Subscribe us on YouTube</h3>
</div>
<!-- YouTube Container Ends Here -->
</div>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
h2 {
margin: 2rem 0;
font-size: 2rem;
text-align: center;
}
.social-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.social-items {
width: 15rem;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
margin: 1rem .5rem;
padding: 2.5rem 1rem;
transition: all .5s;
box-shadow: 0 0 2px #00000073;
border-radius: 5px;
}
.social-items:hover {
box-shadow: 0 0 13px #00000073;
}
.item i {
padding: 2.5rem;
border: 2px solid;
width: 50px;
height: 50px;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
.item-heading {
font-size: 1.5rem;
margin: 2rem 0;
}
.socialDescription {
color: rgb(76, 69, 69);
margin-bottom: 1rem;
font-size: 1.1rem;
}
a {
text-decoration: none;
}
.fb,
.fa-facebook-f {
color: blue;
}
.insta,
.fa-instagram {
color: rgb(255, 0, 225);
}
.yt,
.fa-youtube {
color: red;
}
.twitter,
.fa-twitter {
color: blue;
}
