Social Media Icon Gallery using HTML & CSS

-


Social Media Icon Gallery Using HTML & CSS 


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">
    <link rel="stylesheet" href="css/social_gallery.css">
    <title>Social Media Gallery</title>
</head>
<body>
    <div class="gallery-container">
  <div class="gallery">
    <div class="gallery-item">
      <img src="img/Facebook.png" alt="Social Media Icon 1">
      <div class="gallery-item-description">
        <h3>Facebook</h3>
        <p>Connect with friends and the world around you on Facebook.</p>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/Twitter.jpg" alt="Social Media Icon 2">
      <div class="gallery-item-description">
        <h3>Twitter</h3>
        <p>Join the conversation. Follow your interests and get real-time updates on Twitter.</p>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/Instagram.png" alt="Social Media Icon 3">
      <div class="gallery-item-description">
        <h3>Instagram</h3>
        <p>Bringing you closer to the people and things you love. — Instagram from Facebook</p>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/LinkedIn.png" alt="Social Media Icon 4">
      <div class="gallery-item-description">
        <h3>LinkedIn</h3>
        <p>Manage your professional identity.</p>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/Youtube.jpg" alt="Social Media Icon 5">
      <div class="gallery-item-description">
        <h3>YouTube</h3>
        <p>Enjoy the videos and music only on Youtube.</p>
      </div>
    </div>
    <div class="gallery-item">
      <img src="img/Spotify.jpg" alt="Social Media Icon 6">
      <div class="gallery-item-description">
        <h3>Spotify</h3>
        <p>Mood toh tabhi banega, jab <b>Spotify</b> chalega</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

CSS CODE :-

h3{
    font-size: 25;
    color: rgb(251, 255, 0);
}

.gallery-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.gallery-item {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}

.gallery-item:hover {
transform: scale(1.05);
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

.gallery-item-description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
transition: bottom 0.2s ease;
}

.gallery-item:hover .gallery-item-description {
bottom: -50px;
}

.gallery-item-description h3 {
font-size: 1.2rem;
margin-bottom: 5px;
}

.gallery-item-description p {
font-size: 0.9rem;
line-height: 1.2;
}

.social-media-icons {
position: absolute;
top: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 50px;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
transition: right 0.2s ease;
}

.gallery-item:hover .social-media-icons {
right: 0;
}

.social-media-icons a {
display: block;
width: 30px;
height: 30px;
margin-bottom: 10px;
background-color: #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.2s ease;
}

.social-media-icons a:hover {
transform: scale(1.1);
}

.social-media-icons a svg {
width: 20px;
height: 20px;
fill: #000;
}

Comments

Post a Comment

Popular posts from this blog

Frontend Project Ideas

-
  Frontend Project Ideas Beginner Level ideas Portfolio Website To-Do List App Weather App Calculator Blog Website Timer/Stopwatch Image Slider Quote Generator Countdown Timer Responsive Nabar Contact Form Currency Converter Login/Register Form Interactive QuiZ Card Memory Game Interactive Maps Recipe Finder Music Player Social Media Profile E-Commerce-Product Intermediate Level ideas CHAT APPLICATION EXPENSE TRACKER WEATHER DASHBOARD PORTFOLIO CMS BLOG CMS INTERACTIVE MAPS DATA WEATHER-APP GEOLOCATION TASK MANAGEMENT APP ONLINE QUIZ PLATFORM CALENDAR APP SOCIAL-MEDIA DASHBOARD STOCK MARKET TRACKER TRAVEL PLANNER ONLINE CODE EDITOR MOVIE DATABASE RECIPE-SHARING PLATFORM PORTFOLIO GENERATOR INTERACTIVE-DATA VISUALIZATION POMODORO TIMER WEATHER FORECAST APP Advanved Level ideas E-COMMERCE WEBSITE SOCIAL NETWORK ONLINE LEARNING PLATFORM MUSIC STREAMING SERVICE REAL ESTATE LISTINS PROJECT MANASE-MENT TOOL CHATBOT INTERFACE JOB BOARD WEATHER FORECAST WITH A1 STOCK PLATFORM IOT DASHBOARD...
Read more

Unlocking the Power of Blockchain Technology: How it's Disrupting Finance, Supply Chain Management, and Voting for a Better Future

-
Image
   Introduction : Blockchain technology is a revolutionary innovation that underpins cryptocurrencies like Bitcoin and Ethereum. However, its potential extends beyond just digital currencies, and it has the power to revolutionize industries such as finance, supply chain management, and voting. In this article, we will explore the technology that underpins blockchain, its current and potential uses, and how it can transform these industries for the better. What is Blockchain Technology ? Blockchain is a decentralized, digital ledger that records transactions across multiple computers. It was first introduced in 2008, in a whitepaper by an anonymous individual or group of individuals using the pseudonym Satoshi Nakamoto. The idea behind blockchain was to create a secure and transparent system for recording transactions without the need for intermediaries like banks or governments. How Does Blockchain Work ? Blockchain technology works by creating a digital ledger of transactions...
Read more