<section id="header" class="head">
<div class="collection">
<a href="https://codepen.io/jagsweb/pen/KpJjZv" target="_parent" class="prev">← Step 2 Add Pulsating Ring To Background </a><br>
<a href="https://codepen.io/jagsweb/pen/rVRVXz" target="_parent" class="next">← Animated SVG Logo</a>
</div>
<div style="position: relative">
<div class="container">
<div class="background">
<circle cx="0" cy="0" r="50" fill="url(#radialGradient)">
<animateTransform id="a0" attributeType="XML" attributeName="transform" type="scale" from="0.1" to="9" dur="2s" calcMode="spline" keySplines="0 0 0.2 1" keyTimes="0;1" begin="0s;a0.end+1s"/>
<animate id="a1" attributeType="CSS" attributeName="opacity" from="100" to="0" dur="2s" begin="0s;a1.end+1s" fill="freeze"/>
</circle>
<div class="hex-row">
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
</div>
<div class="hex-row even">
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex hover" id="prog"><span>PRODUCTION MANAGEMENT</span></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex hover" id="prog"><span>PROGRAM MANAGEMENT</span></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
</div>
<div class="hex-row">
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three" id="pow-par"><div class="hex hover" id="pow"><span>SUPPLY CHAIN</span></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three" id="stud-par"><div class="hex hover" id="stud"><span>PROCUREMENT</span></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
</div>
<div class="hex-row even">
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three" id="env-par"><div class="hex hover" id="env"><span>ENVIRONMENTAL</span></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three" id="pow-par"><div class="hex hover" id="pow"><span>POPULATION DISBRSEMENT</span></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three" id="pow-par"><div class="hex hover" id="pow"><span>AGILE METHODOLOGIES</span></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
</div>
<div class="hex-row">
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three" id="env-par"><div class="hex hover" id="env"><span>ENVIRONMENTAL</span></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item three" id="gen-par"><div class="hex hover" id="gen"><span>CONSUMER BEHAVIOR</span></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three" id="con-par"><div class="hex hover" id="con"><span>CONSTRUCTION MANAGEMENT</span></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
</div>
<div class="hex-row even">
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three" id="gen-par"><div class="hex hover" id="gen"><span>GENERATIONAL</span></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item four" id="pow-par"><div class="hex hover" id="pow"><span>POWER DELIVERY</span></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
</div>
<div class="hex-row">
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three" id="pow-par"><div class="hex hover" id="pow"><span>POWER DELIVERY</span></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
</div>
<div class="hex-row even">
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item one" id="con-par"><div class="hex hover" id="con"><span>CONSTRUCTION MANAGEMENT</span></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item one"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item two"><div class="hex"></div></div>
<div class="lab_item three"><div class="hex"></div></div>
<div class="lab_item four"><div class="hex"></div></div>
</div>
</div>
</div>
</div>
</svg>
</section>
@charset "utf-8";
body{
background-color: #C2D7EE;
margin:0;
overflow-x: hidden;
font-family: Lato, sans-serif;
}
svg {
display: block;
margin: 0 auto
}
.container {position: absolute;
overflow: visible;
width: 140%;
right: -140px;
left: -40px;
top: -60px;
z-index: 999;
}
.wrapper {position: absolute; width: 988px; left: 50%; margin-left: -133px;z-index: 9999;}
.content { position: relative; width: 110%; color: #222; margin: -33px 0px -25px 0px; padding: 30px; z-index: 999999; box-shadow:inset 0px 0px 17px #000000;
box-shadow:inset 0px 0px 17px #000000;
box-shadow:inset 0px 0px 17px #000000; color: #fff; text-shadow:1px 1px 5px #000000; }
.hex:before {
content: " ";
width: 0; height: 0;
border-bottom: 30px solid #73a642;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
position: absolute;
top: -29px;
left: 0;
}
.hex {
display: inline-block;
margin-top: 30px;
width: 104px;
height: 62px;
background-color: #f37126;
position: absolute;
text-align: center;
color: #fff;
white-space: normal;
overflow: visible;
font-family: Lato, sans-serif;
font-size: 12px;
line-height: 1.2;
border-radius: 2.1px;
transform: scale(3,3,3);
transform: scale3d(3,3,3);
transform: scale3d(3,3,3);
}
.hex:after {
content: "";
width: 0; height: 0;
position: absolute;
bottom:-29px;
left: 0px;
border-top: 30px solid #2bb4e8;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
z-index: 99999;
}
/*.logo .hex, .logo .hex:before, .logo .hex:after { border: none;}*/
.one .hex {background-color: #2bb4e8}
.one .hex:after { border-top: 30px solid #2bb4e8;}
.one .hex:before { border-bottom: 30px solid #2bb4e8;}
.two .hex {background-color: #73a642}
.two .hex:after { border-top: 30px solid #73a642;}
.two .hex:before { border-bottom: 30px solid #73a642;}
.three .hex {background-color: #f37126}
.three .hex:after { border-top: 30px solid #f37126;}
.three .hex:before { border-bottom: 30px solid #f37126;}
.four .hex {background-color: #d5158a}
.four .hex:after { border-top: 30px solid #d5158a;}
.four .hex:before { border-bottom: 30px solid #d5158a;}
.hex-row {
white-space: nowrap
}
.hex-row.even {
margin-left: 68px;
white-space: nowrap;
}
.hex.hover:hover {
background-color: #666;
cursor: pointer;
}
.hex.hover:hover:after {
border-top: 30px solid #666;
}
.hex.hover:hover:before {
border-bottom: 30px solid #666;
}
.hex.hover span {
top: 20px;
position: relative;
}
.lab_item {
width: 130px;
height:110px;
position: relative;
display: inline-block;
font-weight: 600;
}
.lab_item_main {
width: 130px;
height:110px;
position: relative;
display: inline-block;
}
.lab_item_main:hover {
z-index: 999999!important
}
section.head {
width:100%;
height:50%;
z-index: 9999999!important
}
section.content-body{
position: absolute;
top: 450px;
left: 0px;
background: #eee;
width: 100%;
height: 2600px;
box-shadow: 0 -4px 10px #333, 0 4px 10px #333;
padding: 25px 0 0 20%;
z-index: 4;
}
div.footer{
position: absolute;
top: 2860px;
left: 0px;
height: 60px;
width: 100%;
background: #6f7985;
z-index: 0;
}
.wrapper{
width: 80%;
}
span.title{
font-family: Lato, sans-serif;
font-weight: 600;
color: #0769ad;
font-size: 40px;
}
p{
font-family: Lato, sans-serif;
font-weight: 600;
color: #333;
font-size: 14px;
}
p a{
text-decoration: none;
color: #0769ad;
}
p code{
background: #dee7f7;
border-radius: 3px;
padding: 2px 6px 2px 6px;
border: 1px solid #cdd6e6;
font-size: 13px;
margin-top: 15px;
}
p.sub{
margin-left: 35px;
}
ul li{
font-family: Lato, sans-serif;
font-weight: 600;
color: #333;
font-size: 13px;
margin-top: 5px;
}
.collection {
position: fixed;
margin-left: 30px;
top: 0;
width: 100%;
z-index: 10000;
a {
display: block;
background: rgba(0,0,0,0.6);
color:#fff;
text-decoration: none;
font: 700 12px Lato, sans-serif;
@include transition(all 250ms linear);
.prev {text-align: center;float: left;}
.next {text-align: center; position: fixed; top:5px; right: 5px;}
}
// comment out due to webkit transform perspective bug
//CSSPlugin.defaultTransformPerspective = 600;
// use perspective property instead on .hex parent
TweenMax.set(".lab_item, .logo-cont", {css:{perspective:600}});
TweenMax.staggerFromTo(".background .hex", .5, {scale:0, rotation: -90, autoAlpha: 0,
transformOrigin:"50% 50%"}, {scale:1.2, rotation: 0, autoAlpha: .7,
transformOrigin:"50% 50%"}, .015);
$(".hex.hover").mouseover(function(){
TweenMax.to(this, 1, {scale:1.4, autoAlpha: 1,
transformOrigin:"50% 50%", ease:Elastic.easeOut});
});
$(".hex.hover").mouseout(function(){
TweenMax.to(this, .5, {scale: 1.2, autoAlpha: .7, transformOrigin:"50% 50%", ease:Elastic.easeOut});
});
$("#prog").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#prog-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle1", .8, {height: 350, display: "block"});
TweenMax.to("#toggle2", 0, {height: 0, display: "none"});
TweenMax.to("#toggle3",0, {height: 0, display: "none"});
TweenMax.to("#toggle4", 0, {height: 0, display: "none"});
TweenMax.to("#toggle5", 0, {height: 0, display: "none"});
TweenMax.to("#toggle6", 0, {height: 0, display: "none"});
TweenMax.to("#toggle7", 0, {height: 0, display: "none"});
});
$("#stud").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#stud-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle2", .8, {height: 350, display: "block"});
TweenMax.to("#toggle1", 0, {height: 0, display: "none"});
TweenMax.to("#toggle3", 0, {height: 0, display: "none"});
TweenMax.to("#toggle4", 0, {height: 0, display: "none"});
TweenMax.to("#toggle5", 0, {height: 0, display: "none"});
TweenMax.to("#toggle6", 0, {height: 0, display: "none"});
TweenMax.to("#toggle7", 0, {height: 0, display: "none"});
});
$("#env").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#env-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle3", .8, {height: 350, display: "block"});
TweenMax.to("#toggle1", 0, {height: 0, display: "none"});
TweenMax.to("#toggle2", 0, {height: 0, display: "none"});
TweenMax.to("#toggle4", 0, {height: 0, display: "none"});
TweenMax.to("#toggle5", 0, {height: 0, display: "none"});
TweenMax.to("#toggle6", 0, {height: 0, display: "none"});
TweenMax.to("#toggle7", 0, {height: 0, display: "none"});
});
$("#gen").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#gen-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle4", .8, {height: 350, display: "block"});
TweenMax.to("#toggle1", 0, {height: 0, display: "none"});
TweenMax.to("#toggle2", 0, {height: 0, display: "none"});
TweenMax.to("#toggle3", 0, {height: 0, display: "none"});
TweenMax.to("#toggle5", 0, {height: 0, display: "none"});
TweenMax.to("#toggle6", 0, {height: 0, display: "none"});
TweenMax.to("#toggle7", 0, {height: 0, display: "none"});
});
$("#pow").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#pow-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle5", .8, {height: 350, display: "block"});
TweenMax.to("#toggle1", 0, {height: 0, display: "none"});
TweenMax.to("#toggle2", 0, {height: 0, display: "none"});
TweenMax.to("#toggle3", 0, {height: 0, display: "none"});
TweenMax.to("#toggle4", 0, {height: 0, display: "none"});
TweenMax.to("#toggle6", 0, {height: 0, display: "none"});
TweenMax.to("#toggle7", 0, {height: 0, display: "none"});
});
$("#con").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#con-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle6", .8, {height: 350, display: "block"});
TweenMax.to("#toggle1", 0, {height: 0, display: "none"});
TweenMax.to("#toggle2", 0, {height: 0, display: "none"});
TweenMax.to("#toggle3", 0, {height: 0, display: "none"});
TweenMax.to("#toggle5", 0, {height: 0, display: "none"});
TweenMax.to("#toggle4", 0, {height: 0, display: "none"});
TweenMax.to("#toggle7", 0, {height: 0, display: "none"});
});
$("#geo").click(function(){
TweenMax.to(".lab_item", 0, {zIndex: 9999});
TweenMax.to("#geo-par", .8, {zIndex: 9999999});
TweenMax.to(".hex", 1, {autoAlpha: .7, color: "#fff"});
TweenMax.to("#toggle7", .8, {height: 350, display: "block"});
TweenMax.to("#toggle1", 0, {height: 0, display: "none"});
TweenMax.to("#toggle2", 0, {height: 0, display: "none"});
TweenMax.to("#toggle3", 0, {height: 0, display: "none"});
TweenMax.to("#toggle5", 0, {height: 0, display: "none"});
TweenMax.to("#toggle6", 0, {height: 0, display: "none"});
TweenMax.to("#toggle4", 0, {height: 0, display: "none"});
});
// Draggable.create(".container", {type:"scroll", bounds:window, throwProps:false});
External CSS
This Pen doesn't use any external CSS resources.