<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="container">
<section class="section one active">
<div class="nav-main-container primary">
<div class="nav-item-border discover">
<div class="nav-item-content">
<div class="nav-item-icon discover">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="55px" height="55px" viewBox="0 0 55 55" enable-background="new 0 0 55 55" xml:space="preserve">
<path fill="#00A6A0" d="M54.347,48.923L41.065,35.641c1.174-1.599,2.166-3.34,2.931-5.186
c0.112-0.27-0.015-0.573-0.281-0.686c-0.269-0.108-0.573,0.019-0.684,0.283c-0.713,1.722-1.632,3.34-2.717,4.838l-2.567-2.565
c2.301-3.383,3.516-7.331,3.516-11.445c0-11.238-9.143-20.38-20.382-20.38C9.643,0.5,0.5,9.642,0.5,20.88
c0,11.238,9.143,20.379,20.381,20.379c3.68,0,7.286-0.99,10.431-2.866c0.13-0.075,0.391-0.383,0.124-0.758
c-0.265-0.375-0.933,0.02-0.933,0.02c-2.918,1.676-6.237,2.56-9.622,2.56c-10.661,0-19.335-8.674-19.335-19.334
c0-10.661,8.674-19.335,19.335-19.335c10.662,0,19.337,8.674,19.337,19.335c0,4.044-1.235,7.918-3.575,11.202
c-0.149,0.208-0.125,0.492,0.056,0.673l2.978,2.977c-2.523,3.185-5.839,5.729-9.619,7.298c-0.267,0.11-0.394,0.416-0.282,0.683
c0.085,0.202,0.277,0.322,0.482,0.322c0.066,0,0.135-0.013,0.199-0.038c1.848-0.769,3.587-1.758,5.187-2.936l13.286,13.285
c0.099,0.099,0.23,0.154,0.37,0.154s0.271-0.056,0.369-0.154l4.68-4.684C54.551,49.457,54.551,49.126,54.347,48.923 M40.42,36.476
l8.516,8.517l-3.941,3.941l-8.514-8.517C37.933,39.254,39.256,37.93,40.42,36.476 M49.299,53.236l-3.563-3.563l3.94-3.942
l3.562,3.562L49.299,53.236z M31.312,38.393c0.13-0.075,0.344-0.461,0.124-0.758c-0.271-0.37-0.933,0.02-0.933,0.02" />
<path fill="none" stroke="#00A6A0" stroke-miterlimit="10" d="M54.347,48.923L41.065,35.641
c1.174-1.599,2.166-3.34,2.931-5.186c0.112-0.27-0.015-0.573-0.281-0.686c-0.269-0.108-0.573,0.019-0.684,0.283
c-0.713,1.722-1.632,3.34-2.717,4.838l-2.567-2.565c2.301-3.383,3.516-7.331,3.516-11.445c0-11.238-9.143-20.38-20.382-20.38
C9.643,0.5,0.5,9.642,0.5,20.88c0,11.238,9.143,20.379,20.381,20.379c3.68,0,7.286-0.99,10.431-2.866
c0.13-0.075,0.391-0.383,0.124-0.758c-0.265-0.375-0.933,0.02-0.933,0.02c-2.918,1.676-6.237,2.56-9.622,2.56
c-10.661,0-19.335-8.674-19.335-19.334c0-10.661,8.674-19.335,19.335-19.335c10.662,0,19.337,8.674,19.337,19.335
c0,4.044-1.235,7.918-3.575,11.202c-0.149,0.208-0.125,0.492,0.056,0.673l2.978,2.977c-2.523,3.185-5.839,5.729-9.619,7.298
c-0.267,0.11-0.394,0.416-0.282,0.683c0.085,0.202,0.277,0.322,0.482,0.322c0.066,0,0.135-0.013,0.199-0.038
c1.848-0.769,3.587-1.758,5.187-2.936l13.286,13.285c0.099,0.099,0.23,0.154,0.37,0.154s0.271-0.056,0.369-0.154l4.68-4.684
C54.551,49.457,54.551,49.126,54.347,48.923 M40.42,36.476l8.516,8.517l-3.941,3.941l-8.514-8.517
C37.933,39.254,39.256,37.93,40.42,36.476 M49.299,53.236l-3.563-3.563l3.94-3.942l3.562,3.562L49.299,53.236z M31.312,38.393
c0.13-0.075,0.344-0.461,0.124-0.758c-0.271-0.37-0.933,0.02-0.933,0.02" />
</svg>
</div>
<span class="nav-item-text discover">Discover</span>
</div>
</div>
<div class="nav-item-border create">
<div class="nav-item-content">
<div class="nav-item-icon create">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="51.397px" height="55.001px" viewBox="0 0 51.397 55.001" enable-background="new 0 0 51.397 55.001" xml:space="preserve">
<path fill="#BA006E" d="M0.813,48.072c-0.183-0.026-0.355-0.105-0.497-0.232
c-0.258-0.232-0.37-0.58-0.292-0.916l2.508-11.12c0.037-0.161,0.115-0.311,0.223-0.429l24.655-27.21
c0.356-0.394,0.959-0.415,1.342-0.067c0.39,0.352,0.42,0.952,0.066,1.342L4.332,36.463l-2.08,9.219l8.883-3.048l24.491-27.025
c0.356-0.393,0.961-0.414,1.342-0.066c0.39,0.35,0.422,0.952,0.066,1.34L12.38,44.093c-0.108,0.118-0.245,0.21-0.397,0.262
L1.258,48.029C1.113,48.08,0.959,48.093,0.813,48.072" />
<path fill="#BA006E" d="M9.557,38.425c-0.183-0.028-0.355-0.106-0.5-0.236
c-0.39-0.353-0.42-0.952-0.066-1.342l22.577-24.918c0.355-0.394,0.961-0.414,1.341-0.066c0.39,0.351,0.422,0.952,0.067,1.341
L10.398,38.122C10.176,38.367,9.857,38.467,9.557,38.425" />
<path fill="#BA006E" d="M39.086,14.464c-0.18-0.026-0.356-0.104-0.499-0.235l-8.538-7.738
c-0.19-0.169-0.302-0.405-0.312-0.655c-0.013-0.254,0.075-0.501,0.246-0.685l4.382-4.839c0.355-0.394,0.959-0.414,1.342-0.067
l8.54,7.738c0.185,0.169,0.298,0.405,0.31,0.655c0.015,0.253-0.074,0.5-0.243,0.685l-4.385,4.839
C39.707,14.408,39.388,14.51,39.086,14.464 M32.027,5.722l7.131,6.461l3.107-3.431l-7.13-6.462L32.027,5.722z" />
<path fill="#BA006E" d="M50.446,55.001H1.497c-0.525,0-0.951-0.426-0.951-0.95
c0-0.525,0.426-0.951,0.951-0.951h48.95c0.526,0,0.951,0.426,0.951,0.951C51.397,54.575,50.973,55.001,50.446,55.001" />
</svg>
</div>
<span class="nav-item-text create">Create</span>
</div>
</div>
<div class="nav-item-border negotiate">
<div class="nav-item-content">
<div class="nav-item-icon negotiate">
<img src="https://www.danyuschick.com/codepen/ibm-contract-lifecycle/background-negotiate.png" alt="Negotiate" />
</div>
<span class="nav-item-text negotiate">Negotiate</span>
</div>
</div>
<div class="nav-item-border execute">
<div class="nav-item-content">
<div class="nav-item-icon execute">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64.168px" height="55px" viewBox="0 0 64.168 55" enable-background="new 0 0 64.168 55" xml:space="preserve">
<path fill="#22AEE4" d="M25.031,55C14.852,55,5.509,48.65,1.782,39.198
c-2.481-6.298-2.368-13.077,0.322-19.09c2.173-4.854,6.726-9.346,9.266-10.983c1.422-0.917,2.968-1.714,4.468-2.305
c2.941-1.159,6.021-1.746,9.16-1.746c7.898,0,15.405,3.798,20.081,10.157l1.004,1.366L62.046,0.372C62.282,0.131,62.594,0,62.926,0
c0.33,0,0.64,0.127,0.876,0.358c0.483,0.477,0.489,1.265,0.01,1.752L26.338,40.191c-0.312,0.318-0.486,0.375-0.736,0.375
l-0.149-0.005c-0.325,0-0.641-0.13-0.865-0.356L9.233,24.849c-0.483-0.482-0.482-1.271,0.003-1.758
c0.228-0.226,0.541-0.355,0.873-0.355c0.332,0,0.646,0.129,0.883,0.365l14.453,14.463l18.794-19.093l-0.66-0.979
c-4.191-6.219-11.15-9.933-18.616-9.933c-2.812,0-5.573,0.526-8.207,1.565c-5.585,2.201-9.979,6.446-12.375,11.957
c-2.394,5.512-2.497,11.625-0.29,17.214C7.499,46.936,15.717,52.52,25.028,52.52c2.812,0,5.575-0.524,8.212-1.561
c7.72-3.049,13.116-10.063,14.084-18.31c0.077-0.629,0.599-1.09,1.233-1.09c0.051,0,0.102,0.003,0.152,0.009
c0.323,0.038,0.618,0.203,0.825,0.463c0.204,0.261,0.297,0.583,0.258,0.909c-1.083,9.156-7.076,16.942-15.644,20.321
C31.228,54.415,28.159,55,25.031,55" />
</svg>
</div>
<span class="nav-item-text execute">Execute</span>
</div>
</div>
<div class="nav-item-border manage">
<div class="nav-item-content">
<div class="nav-item-icon manage">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="49.61px" height="55px" viewBox="0 0 49.61 55" enable-background="new 0 0 49.61 55" xml:space="preserve">
<path fill="#7F1C71" d="M24.835,0c-1.816,0.003-3.295,1.481-3.296,3.298
c0.001,1.817,1.48,3.296,3.296,3.296c1.698,0,3.264-1.466,3.264-3.341C28.099,1.175,26.394,0.003,24.835,0 M24.835,5.491
c-1.208,0-2.191-0.984-2.193-2.193c0.001-1.207,0.987-2.192,2.193-2.193c1.211,0.001,2.195,0.985,2.195,2.193
C27.03,4.507,26.045,5.491,24.835,5.491" />
<path fill="#7F1C71" d="M49.247,15.019c-0.831-1.614-2.821-2.254-4.438-1.425
c-1.616,0.831-2.256,2.822-1.426,4.437c0.775,1.511,2.793,2.233,4.462,1.376C49.693,18.458,49.958,16.407,49.247,15.019
M44.364,17.527c-0.553-1.075-0.126-2.399,0.949-2.953c1.074-0.55,2.399-0.124,2.952,0.949c0.553,1.078,0.127,2.403-0.947,2.955
C46.241,19.03,44.917,18.603,44.364,17.527" />
<path fill="#7F1C71" d="M48.779,40.862c0.875-1.592,0.294-3.601-1.295-4.479
c-1.593-0.876-3.603-0.296-4.479,1.294c-0.821,1.487-0.292,3.565,1.349,4.471C46.174,43.151,48.024,42.226,48.779,40.862
M43.972,38.21c0.583-1.057,1.921-1.442,2.98-0.861c1.056,0.585,1.443,1.923,0.86,2.98c-0.585,1.061-1.923,1.446-2.979,0.862
C43.773,40.608,43.387,39.27,43.972,38.21" />
<path fill="#7F1C71" d="M24.833,55c1.816-0.015,3.285-1.504,3.274-3.32
c-0.013-1.815-1.503-3.286-3.318-3.273c-1.698,0.011-3.252,1.486-3.24,3.362C21.562,53.847,23.274,55.007,24.833,55 M24.797,49.51
c1.207-0.009,2.197,0.97,2.207,2.179c0.008,1.206-0.972,2.198-2.179,2.207c-1.21,0.009-2.202-0.97-2.209-2.178
C22.608,50.508,23.587,49.519,24.797,49.51" />
<path fill="#7F1C71" d="M0.5,40.482c0.866,1.597,2.869,2.196,4.468,1.333
c1.599-0.862,2.197-2.867,1.335-4.466c-0.807-1.494-2.84-2.174-4.49-1.283C-0.015,37.053-0.238,39.109,0.5,40.482 M5.332,37.875
c0.574,1.062,0.175,2.396-0.888,2.972c-1.063,0.572-2.397,0.173-2.972-0.889c-0.575-1.066-0.176-2.398,0.887-2.974
C3.424,36.41,4.757,36.809,5.332,37.875" />
<path fill="#7F1C71" d="M0.368,14.77c-0.833,1.614-0.201,3.607,1.412,4.444
c1.614,0.835,3.608,0.201,4.443-1.41c0.782-1.508,0.2-3.571-1.465-4.434C2.912,12.414,1.087,13.387,0.368,14.77 M5.243,17.295
c-0.556,1.072-1.882,1.493-2.957,0.938c-1.071-0.556-1.493-1.884-0.938-2.956c0.558-1.074,1.885-1.496,2.957-0.94
C5.379,14.894,5.799,16.221,5.243,17.295" />
<path fill="#7F1C71" d="M41.868,18.5c-0.142-0.27-0.473-0.374-0.745-0.231l-8.122,4.282
c-1.59-2.619-4.395-4.414-7.631-4.605V8.828c0-0.305-0.246-0.551-0.552-0.551c-0.305,0-0.552,0.247-0.552,0.551v9.117
c-3.235,0.189-6.04,1.986-7.629,4.606l-8.123-4.283c-0.271-0.143-0.604-0.04-0.746,0.231C7.626,18.769,7.73,19.103,8,19.245
l8.119,4.28c-0.555,1.211-0.872,2.551-0.873,3.966c0.001,1.413,0.318,2.75,0.871,3.958L8,35.729
c-0.27,0.143-0.373,0.476-0.231,0.746c0.099,0.188,0.291,0.294,0.489,0.294c0.086,0,0.174-0.021,0.257-0.062l8.12-4.28
c1.589,2.622,4.395,4.418,7.632,4.604v9.114c0,0.305,0.247,0.552,0.552,0.552c0.306,0,0.552-0.247,0.552-0.552V37.03
c2.348-0.131,4.539-1.097,6.218-2.774c0.555-0.556,1.022-1.172,1.421-1.826l8.114,4.277c0.082,0.042,0.17,0.062,0.257,0.062
c0.198,0,0.39-0.106,0.488-0.294c0.143-0.271,0.039-0.604-0.23-0.746l-8.113-4.276c0.562-1.23,0.867-2.57,0.867-3.961
c0-1.416-0.317-2.756-0.872-3.966l8.118-4.28C41.907,19.103,42.011,18.769,41.868,18.5 M30.807,33.474
c-1.6,1.599-3.725,2.479-5.983,2.479h-0.011c-4.664,0-8.46-3.796-8.463-8.462c0.002-4.666,3.8-8.466,8.467-8.472
c4.672,0.006,8.473,3.806,8.471,8.472C33.288,29.75,32.406,31.875,30.807,33.474" />
</svg>
</div>
<span class="nav-item-text manage">Manage</span>
</div>
</div>
<div class="nav-item-accent left"></div>
<div class="nav-item-accent center"></div>
<div class="nav-item-accent right"></div>
</div>
</section>
</div>
<script id="animation-container" type="x-handlebars-template">
<div class="animation-container">
<h3>{{theTitle}}</h3>
</div>
</script>
<script id="animation-back-arrow" type="x-handlebars-template">
<div class="animation-back-button-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="25.514px" height="25.512px" viewBox="0 0 25.514 25.512" enable-background="new 0 0 25.514 25.512" xml:space="preserve">
<path clip-path="url(#SVGID_2_)" fill="#404041" d="M17.842,11.845H9.893l3.376-3.389c0.358-0.364,0.358-0.952-0.004-1.316
c-0.366-0.364-0.953-0.364-1.318,0v0.002l-4.944,4.967c-0.174,0.176-0.271,0.414-0.271,0.662c0.002,0.246,0.1,0.481,0.274,0.659
l4.976,4.944c0.365,0.361,0.952,0.359,1.315-0.004c0.364-0.365,0.364-0.957-0.004-1.318L9.93,13.709c0,0,7.614,0,7.912,0
s0.941-0.177,0.941-0.954C18.783,11.974,18.136,11.845,17.842,11.845" />
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#484748" stroke-miterlimit="10" d="M12.757,0.707l12.05,12.049
l-12.05,12.049L0.707,12.756L12.757,0.707z" />
</svg>
<span>Lifecycle</span>
</div>
</script>
<script type="text/javascript" src="https://fast.fonts.net/jsapi/b01da11a-8674-4b25-8242-deaeb0e3cdeb.js"></script>
@-webkit-keyframes fading {
0%, 20% {
opacity: 1;
}
80%, 100% {
opacity: 0;
}
}
@-moz-keyframes fading {
0%, 20% {
opacity: 1;
}
80%, 100% {
opacity: 0;
}
}
@keyframes fading {
0%, 20% {
opacity: 1;
}
80%, 100% {
opacity: 0;
}
}
section {
position: relative;
overflow: hidden;
}
#container {
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.section {
display: none;
height: 700px;
margin: 0 auto;
}
@media screen and (min-width: 320px) {
.section {
width: 100%;
}
}
@media screen and (min-width: 480px) {
.section {
width: 480px;
}
}
@media screen and (min-width: 768px) {
.section {
width: 768px;
}
}
@media screen and (min-width: 1024px) {
.section {
width: 1024px;
}
}
.section.active {
display: block;
}
.nav-main-container {
position: relative;
left: 50%;
height: 450px;
z-index: 3;
background: url(https://www.danyuschick.com/codepen/ibm-contract-lifecycle/icon-cycle.png) no-repeat center;
}
@media screen and (min-width: 320px) {
.nav-main-container {
width: 320px;
margin: 0 0 0 -160px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container {
width: 480px;
margin: 0 0 0 -240px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container {
width: 500px;
margin: 0 0 0 -250px;
}
}
.nav-main-container:after {
content: url("https://www.danyuschick.com/codepen/ibm-contract-lifecycle/shadow.png");
height: 40px;
width: 500px;
position: relative;
top: 505px;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary {
background-size: 65px 60px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary {
background-size: 85px 80px;
}
}
.nav-main-container.primary .nav-item-border {
position: absolute;
border: 3px solid transparent;
text-align: center;
cursor: pointer;
bottom: 0;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border {
width: 80px;
height: 80px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border {
width: 100px;
height: 100px;
}
}
.nav-main-container.primary .nav-item-border .nav-item-text {
font-family: "ITCLubalinGraphW01-Demi";
opacity: 0;
text-transform: uppercase;
}
.nav-main-container.primary .nav-item-border .nav-item-text.discover {
-webkit-animation: fading 3s alternate-reverse infinite;
-moz-animation: fading 3s alternate-reverse infinite;
animation: fading 3s alternate-reverse infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-text.create {
-webkit-animation: fading 3s 0.75s alternate-reverse infinite;
-moz-animation: fading 3s 0.75s alternate-reverse infinite;
animation: fading 3s 0.75s alternate-reverse infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-text.negotiate {
-webkit-animation: fading 3s 1.5s alternate-reverse infinite;
-moz-animation: fading 3s 1.5s alternate-reverse infinite;
animation: fading 3s 1.5s alternate-reverse infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-text.execute {
-webkit-animation: fading 3s 2.25s alternate-reverse infinite;
-moz-animation: fading 3s 2.25s alternate-reverse infinite;
animation: fading 3s 2.25s alternate-reverse infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-text.manage {
-webkit-animation: fading 3s 3s alternate-reverse infinite;
-moz-animation: fading 3s 3s alternate-reverse infinite;
animation: fading 3s 3s alternate-reverse infinite;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border .nav-item-text {
font-size: 14px;
line-height: 74px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border .nav-item-text {
font-size: 16px;
line-height: 94px;
}
}
.nav-main-container.primary .nav-item-border .nav-item-content {
display: inline-block;
position: relative;
overflow: hidden;
opacity: 1;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border .nav-item-content {
width: 80px;
height: 80px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border .nav-item-content {
width: 100px;
height: 100px;
}
}
.nav-main-container.primary .nav-item-border .nav-item-icon {
position: absolute;
z-index: 2;
width: 100%;
height: auto;
text-align: center;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border .nav-item-icon {
padding-top: 5px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border .nav-item-icon {
padding-top: 12px;
}
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border .nav-item-icon svg {
width: 50%;
height: auto;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border .nav-item-icon svg {
width: 55px;
height: auto;
}
}
.nav-main-container.primary .nav-item-border .nav-item-icon img {
margin-top: 15px;
}
.nav-main-container.primary .nav-item-border .nav-item-icon.discover {
-webkit-animation: fading 3s alternate infinite;
-moz-animation: fading 3s alternate infinite;
animation: fading 3s alternate infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-icon.create {
-webkit-animation: fading 3s 0.75s alternate infinite;
-moz-animation: fading 3s 0.75s alternate infinite;
animation: fading 3s 0.75s alternate infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-icon.negotiate {
-webkit-animation: fading 3s 1.5s alternate infinite;
-moz-animation: fading 3s 1.5s alternate infinite;
animation: fading 3s 1.5s alternate infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-icon.execute {
-webkit-animation: fading 3s 2.25s alternate infinite;
-moz-animation: fading 3s 2.25s alternate infinite;
animation: fading 3s 2.25s alternate infinite;
}
.nav-main-container.primary .nav-item-border .nav-item-icon.manage {
-webkit-animation: fading 3s 3s alternate infinite;
-moz-animation: fading 3s 3s alternate infinite;
animation: fading 3s 3s alternate infinite;
}
.nav-main-container.primary .nav-item-border.discover {
border-color: #00a6a0;
left: 50%;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border.discover {
top: 73px;
margin-left: -40px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.discover {
top: 38px;
margin-left: -50px;
}
}
.nav-main-container.primary .nav-item-border.discover span {
color: #00a6a0;
}
.nav-main-container.primary .nav-item-border.create {
border-color: #b91e70;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border.create {
top: 138px;
left: 200px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-border.create {
top: 138px;
left: 280px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.create {
top: 118px;
left: 302px;
}
}
.nav-main-container.primary .nav-item-border.create span {
color: #b91e70;
}
.nav-main-container.primary .nav-item-border.negotiate {
border-color: #8cc640;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border.negotiate {
top: 253px;
left: 181px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-border.negotiate {
top: 253px;
left: 265px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.negotiate {
top: 263px;
left: 278px;
}
}
.nav-main-container.primary .nav-item-border.negotiate span {
color: #8cc640;
}
.nav-main-container.primary .nav-item-border.execute {
border-color: #24afe5;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border.execute {
top: 253px;
left: 61px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-border.execute {
top: 253px;
left: 140px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.execute {
top: 263px;
left: 125px;
}
}
.nav-main-container.primary .nav-item-border.execute span {
color: #24afe5;
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-border.execute .nav-item-icon {
padding-top: 13px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.execute .nav-item-icon {
padding-top: 20px;
}
}
.nav-main-container.primary .nav-item-border.manage {
border-color: #7d287c;
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-border.manage {
top: 138px;
left: 42px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-border.manage {
top: 138px;
left: 122px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.manage {
top: 118px;
left: 100px;
}
}
.nav-main-container.primary .nav-item-border.manage span {
color: #7d287c;
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-border.manage .nav-item-icon {
padding-top: 11px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-border.manage .nav-item-icon {
padding-top: 20px;
}
}
.nav-main-container.primary .nav-item-accent {
display: inline-block;
position: absolute;
width: 139px;
height: 102px;
opacity: 1;
background: url(https://www.danyuschick.com/codepen/ibm-contract-lifecycle/background-unit-accents.png) no-repeat;
}
.nav-main-container.primary .nav-item-accent.left {
background-position: top left;
display: inline-block;
-webkit-transition: left 1s 0.25s;
-moz-transition: left 1s 0.25s;
transition: left 1s 0.25s;
-webkit-animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
-moz-animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-accent.left {
display: none;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-accent.left {
display: inline-block;
top: 184px;
left: 15px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-accent.left {
top: 193px;
left: 0;
}
}
.nav-main-container.primary .nav-item-accent.center {
background-position: 0 -103px;
left: 50%;
margin-left: -75px;
-webkit-transition: bottom 1s 0.25s;
-moz-transition: bottom 1s 0.25s;
transition: bottom 1s 0.25s;
-webkit-animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
-moz-animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-accent.center {
bottom: 20px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-accent.center {
bottom: 25px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-accent.center {
bottom: 2px;
}
}
.nav-main-container.primary .nav-item-accent.right {
background-position: 0 -206px;
display: inline-block;
-webkit-transition: right 1s 0.25s;
-moz-transition: right 1s 0.25s;
transition: right 1s 0.25s;
-webkit-animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
-moz-animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
animation-timing-function: cubic-bezier(0.35, 0.33, 0.33, 0.93);
}
@media screen and (min-width: 320px) {
.nav-main-container.primary .nav-item-accent.right {
display: none;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.primary .nav-item-accent.right {
display: inline-block;
top: 201px;
right: 15px;
}
}
@media screen and (min-width: 768px) {
.nav-main-container.primary .nav-item-accent.right {
top: 210px;
right: 0;
}
}
.nav-main-container.secondary {
background-size: 1px,1px;
}
.nav-main-container.secondary .nav-item-border {
width: 12px;
height: 12px;
top: 413px;
background: none;
position: absolute;
border: 1px solid transparent;
cursor: pointer;
-webkit-transform-origin: center;
-moz-transform-origin: center;
-ms-transform-origin: center;
-o-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
}
.nav-main-container.secondary .nav-item-border.discover {
border-color: #00a6a0;
}
@media screen and (min-width: 320px) {
.nav-main-container.secondary .nav-item-border.discover {
left: 102px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.secondary .nav-item-border.discover {
left: 190px;
}
}
.nav-main-container.secondary .nav-item-border.discover.active {
background: #00a6a0;
}
.nav-main-container.secondary .nav-item-border.create {
border-color: #b91e70;
}
@media screen and (min-width: 320px) {
.nav-main-container.secondary .nav-item-border.create {
left: 129px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.secondary .nav-item-border.create {
left: 217px;
}
}
.nav-main-container.secondary .nav-item-border.create.active {
background: #b91e70;
}
.nav-main-container.secondary .nav-item-border.negotiate {
border-color: #8cc640;
}
@media screen and (min-width: 320px) {
.nav-main-container.secondary .nav-item-border.negotiate {
left: 156px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.secondary .nav-item-border.negotiate {
left: 244px;
}
}
.nav-main-container.secondary .nav-item-border.negotiate.active {
background: #8cc640;
}
.nav-main-container.secondary .nav-item-border.execute {
border-color: #24afe5;
}
@media screen and (min-width: 320px) {
.nav-main-container.secondary .nav-item-border.execute {
left: 183px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.secondary .nav-item-border.execute {
left: 271px;
}
}
.nav-main-container.secondary .nav-item-border.execute.active {
background: #24afe5;
}
.nav-main-container.secondary .nav-item-border.manage {
border-color: #7d287c;
}
@media screen and (min-width: 320px) {
.nav-main-container.secondary .nav-item-border.manage {
left: 210px;
}
}
@media screen and (min-width: 480px) {
.nav-main-container.secondary .nav-item-border.manage {
left: 298px;
}
}
.nav-main-container.secondary .nav-item-border.manage.active {
background: #7d287c;
}
.nav-main-container.secondary .nav-item-content {
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.nav-main-container.secondary .nav-item-accent {
position: absolute;
width: 139px;
height: 102px;
opacity: 0;
background: url(https://www.danyuschick.com/codepen/ibm-contract-lifecycle/background-unit-accents.png) no-repeat;
-webkit-transition: all 0.75s ease-in;
-moz-transition: all 0.75s ease-in;
transition: all 0.75s ease-in;
}
.nav-main-container.secondary .nav-item-accent.left {
background-position: top left;
top: 195px;
left: -500px;
}
.nav-main-container.secondary .nav-item-accent.center {
background-position: 0 -103px;
bottom: -500px;
left: 50%;
margin-left: -75px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.nav-main-container.secondary .nav-item-accent.right {
background-position: 0 -206px;
top: 212px;
right: -500px;
}
.animation-container {
position: absolute;
height: 350px;
overflow: hidden;
z-index: 5;
top: 0;
left: 50%;
border: 1px solid #333;
-webkit-animation: fading 1s reverse;
-moz-animation: fading 1s reverse;
animation: fading 1s reverse;
}
@media screen and (min-width: 320px) {
.animation-container {
margin: 0 0 0 -160px;
width: 320px;
}
}
@media screen and (min-width: 480px) {
.animation-container {
margin: 0 0 0 -240px;
width: 480px;
}
}
@media screen and (min-width: 768px) {
.animation-container {
margin: 0 0 0 -250px;
width: 500px;
}
}
.animation-container h3 {
text-align: center;
font-weight: bold;
text-transform: capitalize;
}
.animation-back-button-container {
position: absolute;
overflow: hidden;
cursor: pointer;
opacity: 1;
z-index: 3;
-webkit-animation: fading 1s reverse;
-moz-animation: fading 1s reverse;
animation: fading 1s reverse;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
@media screen and (min-width: 320px) {
.animation-back-button-container {
top: 435px;
left: 50%;
margin-left: -53px;
}
}
@media screen and (min-width: 1024px) {
.animation-back-button-container {
top: 406px;
left: 314px;
}
}
.animation-back-button-container svg {
float: left;
margin-right: 8px;
-webkit-transition: margin-right 0.5s ease-in-out;
-moz-transition: margin-right 0.5s ease-in-out;
transition: margin-right 0.5s ease-in-out;
}
.animation-back-button-container span {
font-family: 'HelveticaNeueW01-55Roma';
font-size: 14px;
line-height: 25px;
color: #484748;
text-transform: uppercase;
}
.animation-back-button-container:hover svg {
margin-right: 5px;
}
/**
* IBM Software Solutions - Collaboration
* Centerline Digital - www.centerline.net
* Interactive Developer
* June 2015
* FULL VERSION HERE:
* http://centerlinebeta.net/5406/
**/
(function(window, document, $) {
"use strict";
var theNavButton = $(".nav-item-border"),
isAnimationOpen = false;
var theApp = {
init: function() {
$(theNavButton).click(function() {
isAnimationOpen = true;
theApp.slideEdgeDesigns();
theNav.updateActiveItem(this);
theNav.restyleNavItems();
theAnimation.removeExistingAnimationTemplate();
theAnimation.buildTheAnimationTemplate(this);
theAnimation.buildTheBackButton();
});
$("body").on("click", ".animation-back-button-container", function() {
isAnimationOpen = false;
theApp.slideEdgeDesigns();
theNav.restyleNavItems();
theNav.updateActiveItem();
theAnimation.removeExistingAnimationTemplate();
theAnimation.removeTheBackButton();
});
},
slideEdgeDesigns: function() {
if (isAnimationOpen) {
$(".edge-container").addClass("slide");
} else {
$(".edge-container").removeClass("slide");
}
}
},
theNav = {
updateActiveItem: function(theItem) {
$(theNavButton).removeClass("active");
$(theItem).addClass("active");
},
restyleNavItems: function() {
if (isAnimationOpen) {
$(".nav-main-container").attr("class", "nav-main-container secondary");
} else {
$(".nav-main-container").attr("class", "nav-main-container primary");
}
}
},
theAnimation = {
buildTheAnimationTemplate: function(theItem) {
var theAnimationDetails = {
"discover": {
animationMp4: "",
animationOgg: "",
demoUrl: "",
demoText: ""
},
"create": {
animationMp4: "",
animationOgg: "",
demoUrl: "",
demoText: ""
},
"negotiate": {
animationMp4: "",
animationOgg: "",
demoUrl: "",
demoText: ""
},
"execute": {
animationMp4: "",
animationOgg: "",
demoUrl: "",
demoText: ""
},
"manage": {
animationMp4: "",
animationOgg: "",
demoUrl: "",
demoText: ""
}
},
theSelectedItem = $(theItem).attr("class"),
theSelectedItem = theSelectedItem.replace("nav-item-border ", "").replace(" active", ""),
theSource = $("#animation-container").html(),
theTemplate = Handlebars.compile(theSource),
theContext = {
theTitle: theSelectedItem,
animationMp4: theAnimationDetails[theSelectedItem]['animationMp4'],
animationOgg: theAnimationDetails[theSelectedItem]['animationOgg'],
demoUrl: theAnimationDetails[theSelectedItem]['demoUrl'],
demoText: theAnimationDetails[theSelectedItem]['demoText']
},
theHTML = theTemplate(theContext);
$(".section.one").append(theHTML);
},
removeExistingAnimationTemplate: function() {
$(".animation-container").fadeOut("slow", function() {
$(this).remove();
});
},
buildTheBackButton: function() {
if ($(".animation-back-button-container").length < 1) {
var theSource = $("#animation-back-arrow").html(),
theTemplate = Handlebars.compile(theSource);
$(".section.one").append(theTemplate);
}
},
removeTheBackButton: function() {
$(".animation-back-button-container").fadeOut("slow", function() {
$(this).remove();
});
}
};
$(document).ready(function() {
theApp.init();
});
}(this, this.document, this.jQuery));
