Skip to content

Instantly share code, notes, and snippets.

@gormus

gormus/index.html

Created May 15, 2017 21:46
Show Gist options
  • Save gormus/9333d1bb8b11ca426947e7dc3336e893 to your computer and use it in GitHub Desktop.
Save gormus/9333d1bb8b11ca426947e7dc3336e893 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/luruboc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style id="jsbin-css">
#ccc-resources {
background: #212c65;
margin: 0;
padding: 1em 0;
list-style: none;
line-height: 1;
}
#ccc-resources li {
padding: 0.5em 1.5em;
}
#ccc-resources li a {
color: #FFF;
}
#ccc-resources li a svg {
display: none;
}
#ccc-resources li a .ccc-resource-icon {
display: inline;
}
#ccc-resources li a .ccc-resource-label {
display: inline;
text-transform: uppercase;
}
@media (min-width: 769px) {
#ccc-resources {
background: transparent;
display: flex;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
}
#ccc-resources li {
flex: 1 1 170px;
}
#ccc-resources li a {
position: relative;
width: 170px;
display: block;
text-align: center;
color: #212c65;
}
#ccc-resources li a svg {
display: block;
width: 100%;
vertical-align: top;
}
#ccc-resources li a svg .hexagon {
fill: #212c65;
stroke: none;
}
#ccc-resources li a .ccc-resource-icon {
position: relative;
color: #FFF;
display: block;
}
#ccc-resources li a .ccc-resource-icon > .fa {
font-size: 100px;
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
#ccc-resources li a .ccc-resource-label {
line-height: 1.2;
display: block;
padding: 0.5em 0;
font-size: 18px;
}
#ccc-resources li a:hover {
color: #c52033;
}
#ccc-resources li a:hover .hexagon {
fill: #c52033;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul id="ccc-resources">
<li><a href="http://example.com/?link-1">
<div class="ccc-resource-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 520.5 600" enable-background="new 0 0 520.5 600" xml:space="preserve">
<polygon class="hexagon" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" points="520.5,449.295 260.5,599.102 0.5,449.295 0.5,149.683
260.5,-0.124 520.5,149.683 "/>
</svg>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>
<div class="ccc-resource-label">Apply Now</div>
</a>
</li>
<li><a href="http://example.com/?link-1">
<div class="ccc-resource-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 520.5 600" enable-background="new 0 0 520.5 600" xml:space="preserve">
<polygon class="hexagon" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" points="520.5,449.295 260.5,599.102 0.5,449.295 0.5,149.683
260.5,-0.124 520.5,149.683 "/>
</svg>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>
<div class="ccc-resource-label">Library</div>
</a>
</li>
<li><a href="http://example.com/?link-1">
<div class="ccc-resource-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 520.5 600" enable-background="new 0 0 520.5 600" xml:space="preserve">
<polygon class="hexagon" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" points="520.5,449.295 260.5,599.102 0.5,449.295 0.5,149.683
260.5,-0.124 520.5,149.683 "/>
</svg>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>
<div class="ccc-resource-label">Facilities &amp; Hours</div>
</a>
</li>
<li><a href="http://example.com/?link-1">
<div class="ccc-resource-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 520.5 600" enable-background="new 0 0 520.5 600" xml:space="preserve">
<polygon class="hexagon" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" points="520.5,449.295 260.5,599.102 0.5,449.295 0.5,149.683
260.5,-0.124 520.5,149.683 "/>
</svg>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>
<div class="ccc-resource-label">Transportation</div>
</a>
</li>
<li><a href="http://example.com/?link-1">
<div class="ccc-resource-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 520.5 600" enable-background="new 0 0 520.5 600" xml:space="preserve">
<polygon class="hexagon" fill="#FFFFFF" stroke="none" stroke-miterlimit="10" points="520.5,449.295 260.5,599.102 0.5,449.295 0.5,149.683
260.5,-0.124 520.5,149.683 "/>
</svg>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>
<div class="ccc-resource-label">Cougar Connect</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script id="jsbin-source-css" type="text/css">#ccc-resources {
background: #212c65;
margin: 0;
padding: 1em 0;
list-style: none;
line-height: 1;
li {
padding: 0.5em 1.5em;
a {
color: #FFF;
svg { display:none }
.ccc-resource-icon { display: inline; }
.ccc-resource-label { display: inline; text-transform: uppercase; }
}
}
@media (min-width: 769px) {
& {
background: transparent;
display: flex;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
li {
flex: 1 1 170px;
a {
position: relative;
width: 170px;
display: block;
text-align: center;
color: #212c65;
svg {
display: block;
width: 100%;
vertical-align: top;
.hexagon {
fill: #212c65;
stroke: none;
}
}
.ccc-resource-icon {
position: relative;
color: #FFF;
display: block;
& > .fa {
font-size: 100px;
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
}
.ccc-resource-label {
line-height: 1.2;
display: block;
padding: 0.5em 0;
font-size: 18px;
}
&:hover {
color: #c52033;
.hexagon { fill: #c52033; }
}
}
}
}
}
}
</script>
</body>
</html>
Raw
jsbin.luruboc.css
#ccc-resources {
background: #212c65;
margin: 0;
padding: 1em 0;
list-style: none;
line-height: 1;
}
#ccc-resources li {
padding: 0.5em 1.5em;
}
#ccc-resources li a {
color: #FFF;
}
#ccc-resources li a svg {
display: none;
}
#ccc-resources li a .ccc-resource-icon {
display: inline;
}
#ccc-resources li a .ccc-resource-label {
display: inline;
text-transform: uppercase;
}
@media (min-width: 769px) {
#ccc-resources {
background: transparent;
display: flex;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
}
#ccc-resources li {
flex: 1 1 170px;
}
#ccc-resources li a {
position: relative;
width: 170px;
display: block;
text-align: center;
color: #212c65;
}
#ccc-resources li a svg {
display: block;
width: 100%;
vertical-align: top;
}
#ccc-resources li a svg .hexagon {
fill: #212c65;
stroke: none;
}
#ccc-resources li a .ccc-resource-icon {
position: relative;
color: #FFF;
display: block;
}
#ccc-resources li a .ccc-resource-icon > .fa {
font-size: 100px;
display: block;
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
}
#ccc-resources li a .ccc-resource-label {
line-height: 1.2;
display: block;
padding: 0.5em 0;
font-size: 18px;
}
#ccc-resources li a:hover {
color: #c52033;
}
#ccc-resources li a:hover .hexagon {
fill: #c52033;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment