How to Make Responsive Follow Me On Social Media by a different way with HTML , CSS

in #programming6 years ago



Hi Everyone


I thinking how to make Responsive Follow Me On Social Media by a different way


1.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


2.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


3.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


4.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


5.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


6.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


7.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


8.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


9.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


10.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


11.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


12.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


13.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


Code HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Follow Me On Social Media</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Follow Me On Social Media</h1>
        </header>
        <ul class="accordion">
            <li class="tab">
                <div class="social youtube">
                    <a href="https://youtube.com/123" target="_blank">Youtube</a>
                </div>
                <div class="content">
                    <h1>YouTube</h1>
                    <p>Follow me on YouTube for tutorials with the latest technology in web 
                             development</p>
                </div>
            </li>
            <li class="tab">
                <div class="social twitter">
                    <a href="https://twitter.com/123" target="_blank">Twitter</a>
                </div>
                <div class="content">
                    <h1>Twitter</h1>
                    <p>Follow me on Twitter for video and course updates, article & blog shares and more</p>
                </div>
            </li>
            <li class="tab">
                <div class="social facebook">
                    <a href="https://facebook.com/123" target="_blank">Facebook</a>
                </div>
                <div class="content">
                    <h1>Facebook</h1>
                    <p>Follow me on Facebook to stay up to date and get notified of new videos,</p>
                </div>
            </li>
            <li class="tab">
                <div class="social linkedin">
                    <a href="https://www.linkedin.com/in/123" target="_blank">LinkedIn</a>
                </div>
                <div class="content">
                    <h1>LinkedIn</h1>
                    <p>Connect with me on a professional level on Linkedin</p>
                </div>
            </li>
            <li class="tab">
                <div class="social instagram">
                    <a href="http://instagram.com/123" target="_blank">Instagram</a>
                </div>
                <div class="content">
                    <h1>Instagram</h1>
                    <p>Follow me on Instragram for a more personal look into my life and work</p>
                </div>
            </li>
            <li class="tab">
                <div class="social github">
                    <a href="http://github.com/123" target="_blank">Github</a>
                </div>
                <div class="content">
                    <h1>Github</h1>
                    <p>Check out my Github for code, my personal projects and more</p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


Code CSS


* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: #222;
  font-family: Arial, Helvetica, sans-serif;
}

@font-face {
  font-family: 'Genericons';
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot");
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff") 
       format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular
         -webfont.eot") 
       format("truetype");
}

.container {
  margin: 50px auto;
  width: 90%;
}

header h1 {
  color: #fff;
  margin-bottom: 10px;
  text-align: left;
}

.accordion {
  background: #333;
  min-width: 800px;
  display: inline;
  list-style-type: none;
  overflow: hidden;
  font-size: 0;
}

.tab {
  display: inline-block;
  background-color: #444;
  border-right: #333 1px solid;
  width: 80px;
  height: 200px;
  overflow: hidden;
  position: relative;
  margin: 0;
  transition: all 0.5s ease-in-out 0.1s;
}

.tab:hover {
  width: 450px;
}

.tab:hover .social a:before {
  margin-left: -100px;
}

.tab:hover .social a:after {
  margin-left: -5px;
}

.tab .content {
  background: #fff;
  width: 360px;
  height: 200px;
  margin-left: 80px;
  padding: 50px 0 0 15px;
  position: relative;
}

.tab .content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.tab .content p {
  font-size: 0.85rem;
  line-height: 1.4rem;
  padding-right: 30px;
}

.social a:after,
.social a:before {
  transition: all 0.4s ease-in-out 0.1s;
  width: 80px;
  height: 200px;
  position: absolute;
  text-indent: 0;
  padding-top: 90px;
  padding-left: 25px;
  display: block;
  font: normal 30px Genericons;
  color: #fff;
}

.social a:after {
  font-size: 48px;
  padding-left: 20px;
  padding-top: 80px;
  margin-left: 85px;
}

.youtube a:before,
.youtube a:after {
  content: '\f213';
}
.youtube a:after {
  background-color: #ff0000;
}

.twitter a:before,
.twitter a:after {
  content: '\f202';
}
.twitter a:after {
  background-color: #6dc5dd;
}

.facebook a:before,
.facebook a:after {
  content: '\f204';
}
.facebook a:after {
  background-color: #3b5998;
}

.linkedin a:before,
.linkedin a:after {
  content: '\f208';
}
.linkedin a:after {
  background-color: #00a9cd;
}

.instagram a:before,
.instagram a:after {
  content: '\f215';
}
.instagram a:after {
  background-color: #6dc993;
}

.github a:before,
.github a:after {
  content: '\f200';
}
.github a:after {
  background-color: #6e5494;
}

@media (max-width: 950px) {
  .container {
    width: 70%;
  }

  header h1 {
  text-align: center;
}

  .tab {
    display: block;
    width: 100%;
    border-bottom: 3px #333 solid;
  }

  .accordion {
    display: block;
    min-width: 450px;
    height: auto;
  }

  .tab .content {
    width: 85%;
  }

  .tab:hover {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .container {
    width: 95%;
  }

  .accordion {
    width: 100%;
    min-width: 350px;
  }
}

DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

🎄Thanks and have a nice day🎄

DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

Sort:  

Congratulations @mohamedmoussa! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Congratulations @mohamedmoussa! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 5000 upvotes. Your next target is to reach 6000 upvotes.

Click here to view your Board of Honor
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

The Meet the Steemians Contest is over - Results are coming soon ...

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @mohamedmoussa! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Do not miss the last post from @steemitboard:

SteemitBoard - Witness Update
Do not miss the coming Rocky Mountain Steem Meetup and get a new community badge!
Vote for @Steemitboard as a witness to get one more award and increased upvotes!

Coin Marketplace

STEEM 0.15
TRX 0.16
JST 0.028
BTC 67807.24
ETH 2423.65
USDT 1.00
SBD 2.33