Skip to content

Instantly share code, notes, and snippets.

@ZaynahGiti

ZaynahGiti/dailycssimages-social-colors.markdown

Created May 24, 2017 06:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZaynahGiti/094a441c4e2bc0e4dfc9d235fe5accab to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZaynahGiti/094a441c4e2bc0e4dfc9d235fe5accab to your computer and use it in GitHub Desktop.
Download ZIP
#DailyCSSImages: Social Colors
Raw
index.html
<html>
<!-- social colors -->
<body>
<div class="main-container">
<!-- social list colors Line1 -->
<div class="line1">
<ul>
<li class="social1">
<div class="inner">
<span>Facebook</span>
</div>
</li>
<li class="social2">
<div class="inner">
<span>Messenger</span>
</div>
</li>
<li class="social3">
<div class="inner">
<span>Twitter</span>
</div>
</li>
<li class="social4">
<div class="inner">
<span>LinkedIn</span>
</div>
</li>
<li class="social5">
<div class="inner">
<span>Skype</span>
</div>
</li>
<li class="social6">
<div class="inner">
<span>Dropbox</span>
</div>
</li>
</ul>
</div>
<!-- social list colors Line2 -->
<div class="line2">
<ul>
<li class="social1">
<div class="inner">
<span>Wordpress</span>
</div>
</li>
<li class="social2">
<div class="inner">
<span>Vimeo</span>
</div>
</li>
<li class="social3">
<div class="inner">
<span>SlidShare</span>
</div>
</li>
<li class="social4">
<div class="inner">
<span>VK</span>
</div>
</li>
<li class="social5">
<div class="inner">
<span>Tumblr</span>
</div>
</li>
<li class="social6">
<div class="inner">
<span>Yahoo</span>
</div>
</li>
</ul>
</div>
<!-- social list colors Line3 -->
<div class="line3">
<ul>
<li class="social1">
<div class="inner">
<span>Google+</span>
</div>
</li>
<li class="social2">
<div class="inner">
<span>Pinterest</span>
</div>
</li>
<li class="social3">
<div class="inner">
<span>Youtube</span>
</div>
</li>
<li class="social4">
<div class="inner inner-large">
<span>StumbleUpon</span>
</div>
</li>
<li class="social5">
<div class="inner">
<span>Reddit</span>
</div>
</li>
<li class="social6">
<div class="inner">
<span>Quora</span>
</div>
</li>
</ul>
</div>
<!-- social list colors Line4 -->
<div class="line4">
<ul>
<li class="social1">
<div class="inner">
<span>Yelp</span>
</div>
</li>
<li class="social2">
<div class="inner">
<span>Weibo</span>
</div>
</li>
<li class="social3">
<div class="inner inner-large">
<span>ProductHunt</span>
</div>
</li>
<li class="social4">
<div class="inner inner-large">
<span>HackerNews</span>
</div>
</li>
<li class="social5">
<div class="inner inner-large">
<span>SoundCloud</span>
</div>
</li>
<li class="social6">
<div class="inner">
<span>Blogger</span>
</div>
</li>
</ul>
</div>
<!-- social list colors Line5 -->
<div class="line5">
<ul>
<li class="social1">
<div class="inner">
<span>WhatsApp</span>
</div>
</li>
<li class="social2">
<div class="inner">
<span>WeChat</span>
</div>
</li>
<li class="social3">
<div class="inner">
<span>Line</span>
</div>
</li>
<li class="social4">
<div class="inner">
<span>Medium</span>
</div>
</li>
<li class="social5">
<div class="inner">
<span>Vine</span>
</div>
</li>
<li class="social6">
<div class="inner">
<span>Slack</span>
</div>
</li>
</ul>
</div>
<!-- to be continued -->
</div>
<div class="text-credit">
<h5>@ZeinaChallenges</h5>
</div>
</body>
</html>
Raw
style.scss
// social colors:
$facebook-color:#3b5999;
$messenger-color:#0084ff;
$twitter-color:#55acee;
$linkedin-color:#0077B5;
$skype-color:#00AFF0;
$dropbox-color:#007ee5;
$wordpress-color:#21759b;
$vimeo-color:#1ab7ea;
$slideshare-color:#0077b5;
$vk-color:#4c75a3;
$tumplr-color:#34465d;
$yahoo-color:#410093;
$google-plus-color:#dd4b39;
$pinterest-color:#bd081c;
$youtube-color:#cd201f;
$stumble-upon-color:#eb4924;
$Reddit-color:#ff5700;
$quora-color:#b92b27;
$yelp-color:#af0606;
$weibo-color:#df2029;
$productHunt-color:#da552f;
$hackersNews-color:#ff6600;
$soundcloud-color:#ff3300;
$blogger-color:#f57d00;
$whatsapp-color:#25D366;
$wechat-color:#09b83e;
$line-color:#00c300;
$medium-color:#02b875;
$vine-color:#00b489;
$slack-color:#3aaf85;
$social-size:120px;
$spanText-color:rgba(255,255,255,.5);
div{
position:absolute;
}
.main-container{
position:relative;
width:1200px;
height:800px;
background:none;
border:2px solid none;
margin:auto;
}
ul{
list-style: none;
margin: 10px 190px;
padding: 0;
list-style-position: inside;
}
ul li {
display: inline-block;
}
.inner{
//background: red;
width: 30px;
height: 20px;
margin-top:50px;
margin-left:20px;
vertical-align: middle;
display: inline-block;
z-index:9;
}
.inner-large{
margin-left:5px;
}
span{
color:$spanText-color;
font-size:20px;
}
.social1{
width:$social-size;
height:$social-size;
background:$facebook-color;
list-style-position: inside;
}
.social2{
@extend .social1;
background:$messenger-color;
}
.social3{
@extend .social1;
background:$twitter-color;
}
.social4{
width:$social-size;
height:$social-size;
background:$linkedin-color;
}
.social5{
@extend .social1;
background:$skype-color;
}
.social6{
@extend .social1;
background:$dropbox-color;
}
.line2{
top:125px;
.social1{
background:$wordpress-color;
}
.social2{
background:$vimeo-color;
}
.social3{
background:$slideshare-color;
}
.social4{
background:$vk-color;
}
.social5{
background:$tumplr-color;
}
.social6{
background:$yahoo-color;
}
}
.line3{
top:250px;
.social1{
background:$google-plus-color;
}
.social2{
background:$pinterest-color;
}
.social3{
background:$youtube-color;
}
.social4{
background:$stumble-upon-color;
}
.social5{
background:$Reddit-color;
}
.social6{
background:$quora-color;
}
}
.line4{
top:375px;
.social1{
background:$yelp-color;
}
.social2{
background:$weibo-color;
}
.social3{
background:$productHunt-color;
}
.social4{
background:$hackersNews-color;
}
.social5{
background:$soundcloud-color;
}
.social6{
background:$blogger-color;
}
}
.line5{
top:500px;
.social1{
background:$whatsapp-color;
}
.social2{
background:$wechat-color;
}
.social3{
background:$line-color;
}
.social4{
background:$medium-color;
}
.social5{
background:$vine-color;
}
.social6{
background:$slack-color;
}
}
.text-credit{
position:asbolute;
top:92%;
left:40%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment