Skip to content

Instantly share code, notes, and snippets.

Created January 1, 2015 20:13
Show Gist options
  • Save anonymous/6286dca3200ae5f4a9e8 to your computer and use it in GitHub Desktop.
Save anonymous/6286dca3200ae5f4a9e8 to your computer and use it in GitHub Desktop.
Modern CSS Tags
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="colors">
<li style="background: #000;"></li>
<li style="background: #022c87;"></li>
<li style="background: #790548;"></li>
<li style="background: #ff0000;"></li>
<li style="background: #4f4f4f;"></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-4 text-center">
<h3 id="title">Choose from over 100 courses!</h3>
</div>
<div class="col-lg-8">
<ul class="tags">
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw purple"></span> HTML</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw blue"></span> CSS</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw yellow"></span> SASS</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw dark-blue"></span> LESS</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw light-purple"></span> HAML</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw pink"></span> RUBY</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw green"></span> COFFEESCRIPT</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw cyan"></span> yeoman</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw purple"></span> angular.js</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw yellow"></span> grunt</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw blue"></span> yaml</li></a>
<a class="grow" href=""><li class="tag"><span class="fa fa-circle fa-fw dark-blue"></span> javascript</li></a>
</ul>
</div>
</div>
</div>
/* this uses fontawesome & bootstrap 3 */
$(document).ready( function() {
$(".colors li").click(function() {
var color = $(this).css("background-color");
$(".tag").css("background-color",color);
$("#title").css("color",color);
});
});
/* justincron.com */
@import url(http://fonts.googleapis.com/css?family=Patua+One);
body {
background-color:#2D3339;
color:#fff;
}
.container {
max-width:980px;
}
.row {
margin:20px 0;
}
h3 {
font-family: 'Patua One', cursive;
letter-spacing:1px
}
.tags>a>li:hover {
color:#fff;
background-color: #262626;
}
.tags li {
list-style:none;
display:inline-block;
background-color:#F0F2F4;
border-radius:5px;
padding:5px 10px;
font-size:18px;
font-family: 'Patua One', cursive;
color:#B2BAC2;
box-shadow:0px 0px 7px black;
margin:3px 1px 3px 1px;
line-height:27px;
text-transform:uppercase;
}
.purple {
color:#913B53;
font-size:13px;
}
.blue {
color:#39ADD1;
font-size:13px;
}
.yellow {
color:#E0AB18;
font-size:13px;
}
.dark-blue {
color:#2570A8;
font-size:13px;
}
.light-purple {
color:#9D8AC7;
font-size:13px;
}
.pink {
color:#E15258;
font-size:13px;
}
.orange {
color:#F9845B;
font-size:13px;
}
.green {
color:#51B46D;
font-size:13px;
}
.cyan {
color:#53BBB4;
font-size:13px;
}
.colors {
list-style:none;
}
.colors li{
display: inline-block;
width:15px;
height: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment