How to Align Social Media Icons Vertically on Left Side using HTML CSS & JavaScript?
Last Updated :
24 Jul, 2024
Improve
In this article, we will learn how to create vertically aligned social media icons on the left side of a webpage using HTML, CSS, and JavaScript. We will use HTML to create the basic structure, CSS for styling, and JavaScript for added functionality.
Prerequisites
Approach
- We are using HTML to give the basic structure to this project using tags like <h1>,<p>,<div>, and <img> for cards div and headings
- Then, give the styling to the app using CSS, and add properties like flex, position, and padding to beautify the project giving proper formatting, height, width, and color.
- Hover Effect while pointer moves towards cards and gives box-shadow
- We have used the font awesome icons to add social media icons using the CDN link.
- Using JavaScript to give functionality to the search bar while pressing the "Enter" key to the course items searched.
Example: Here we first design the structure of our project and given styling then we will code for the functionality.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="style.css">
<title>Social Media Items</title>
</head>
<body>
<div class="items">
<a href="https://www.facebook.com/geeksforgeeks.org/">
<i class="fa fa-facebook-official"
style="font-size: 24px; color: #fff">
</i>
</a>
<a href="https://www.instagram.com/geeks_for_geeks/">
<i class="fa fa-instagram"
style="font-size: 24px; color: #fff;">
</i>
</a>
<a href="https://in.linkedin.com/company/geeksforgeeks">
<i class="fa fa-linkedin-square"
style="font-size: 24px; color: #fff">
</i>
</a>
<a href="https://www.youtube.com/geeksforgeeksvideos">
<i class="fa fa-youtube-play"
style="font-size: 24px; color: #fff">
</i>
</a>
<a href="https://twitter.com/geeksforgeeks">
<i class="fa fa-twitter-square"
style="font-size: 24px; color: #fff">
</i>
</a>
</div>
<div class="content">
<h1>GeeksforGeeks</h1>
<h2>Hello, What Do You Want To
Learn?</h2>
<div class="search-bar">
<input type="text"
placeholder="Write Something..."
class="searchbar" />
</div>
<div class="outer-cards">
<div class="cards">
<div id="card1">
<img src=
"https://media.geeksforgeeks.org/auth-dashboard-uploads/read.png" />
<h4>
How will you print
numbers from 1 to
100 without using a
loop?
</h4>
<p>
If we take a look at
this problem
carefully, we can
see that the
idea of "loop" is to
track some cou...
</p>
</div>
<div id="card2">
<img src=
"https://media.geeksforgeeks.org/auth-dashboard-uploads/practice.png" />
<h4>Explore Practice
Problems</h4>
<p>
Solve DSA Problems.
Filter based on
topic tags and
company tags. Get
curated problem
lists by GFG ex...
</p>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/* style.css */
body {
background-color: #3b3b3b;
}
.items {
display: flex;
flex-direction: column;
justify-content: center;
height: 500px;
position: fixed;
}
i {
margin-top: 8px;
}
.content h1,
h2 {
text-align: center;
}
.content h1 {
color: green;
}
.content h2 {
color: white;
}
.search-bar {
display: flex;
justify-content: center;
}
.search-bar input {
width: 50%;
margin-left: 40px;
height: 37px;
border: none;
border-radius: 9px;
}
.search-bar input::placeholder {
margin-left: 100px;
}
input:focus {
outline: none;
}
.outer-cards {
display: flex;
justify-content: center;
height: 500px;
}
.cards {
display: flex;
justify-content: center;
background-color: #262626;
border-radius: 20px;
flex-wrap: wrap;
height: 200px;
color: white;
padding: 20px 10px;
margin-left: 100px;
margin-top: 30px;
gap: 15px;
}
.cards #card1 {
width: 350px;
background-color: #1e1e1f;
border-radius: 7px;
color: white;
transition-duration: 0.2s;
}
#card1:hover {
box-shadow: 0px 0px 10px rgb(255, 255, 255);
}
#card2:hover {
box-shadow: 0px 0px 10px rgb(255, 255, 255);
}
.cards #card2 {
background-color: #1e1e1f;
color: white;
border-radius: 7px;
width: 350px;
transition-duration: 0.2s;
}
img {
border-radius: 7px;
width: 350px;
}
h4 {
margin-top: 2px;
padding: 3px 3px;
}
p {
margin-top: -15px;
padding: 3px 3px;
color: #a5a5a5;
}
@media screen and (max-width: 850px) {
.cards {
height: 90%;
width: 50%;
}
.search-bar input {
margin-left: 55px;
}
}
@media screen and (max-width: 710px) {
.cards {
height: 450px;
}
.cards #card1,
#card2 {
width: 200px;
}
.cards #card2 {
width: 200px;
}
img {
border-radius: 7px;
width: 200px;
}
.search-bar input {
margin-left: 90px;
}
}
@media screen and (max-width: 360px) {
.cards {
height: 500px;
}
.cards #card1,
#card2 {
width: 150px;
}
.cards #card2 {
width: 150px;
}
img {
border-radius: 7px;
width: 150px;
}
}
// script.js
let searchbar =
document.getElementsByClassName("search-bar")[0];
let cards =
document.getElementsByClassName("cards");
searchbar.addEventListener("keydown", (e) => {
if (e.keyCode === 13) {
console.log("clicked");
cards.innerHTML = "Course is Commint soon";
for (let i = 0; i < cards.length; i++) {
cards[i].innerHTML = "Course is Coming soon";
}
}
});
Output
