<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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/matthewwilliams/pen/PmXWgX?depth=everything&order=popularity&page=18&q=icon+box&show_forks=false" />
<style class="cp-pen-styles">html {
overflow: hidden;
}
body {
overflow: hidden;
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: 'Raleway';
}
.light {
font-weight: 300;
}
.landing-sect span {
cursor: default;
opacity: 0;
transition: opacity 8s;
-webkit-transition: opacity 8s;
}
.landing-sect .title {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
top: 30%;
text-transform: uppercase;
font-size: 30pt;
letter-spacing: .5em;
color: #51b6e5;
font-weight: 300;
padding-left: 53px;
z-index: 5;
}
.landing-sect .title .highlight {
color: #0e76bc;
font-weight: 700;
}
.landing-sect .tag-box {
position: absolute;
bottom: 30%;
z-index: 99;
color: #fff;
text-transform: uppercase;
letter-spacing: .3em;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
font-size: 14pt;
font-weight: 300;
}
.landing-sect .tag-box .center {
margin: 0 70px;
}
.landing-sect.shutter {
display: none;
}
.clouds.inverse {
filter: brightness(90%);
opacity: 0.1;
z-index: 99;
position: absolute;
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
.clouds.inverse .cloud {
pointer-events: none;
top: -100vh;
}
.clouds .cloud {
height: 50vh;
width: 8000px;
left: -2000px;
position: absolute;
}
.clouds .cloud-1 {
background: url("https://image.ibb.co/nOkuLv/clouds1.png");
background-repeat: repeat-x;
background-position: bottom left;
animation: drift 150s linear infinite;
-webkit-animation: drift 150s linear infinite;
z-index: 3;
}
.clouds .cloud-2 {
background: url("https://image.ibb.co/fQKbYF/clouds2.png");
background-repeat: repeat-x;
background-position: bottom left;
animation: drift 200s linear infinite;
-webkit-animation: drift 200s linear infinite;
z-index: 2;
}
.clouds .cloud-3 {
background: url("https://image.ibb.co/jnTELv/clouds3.png");
background-repeat: repeat-x;
background-position: bottom left;
animation: drift 500s linear infinite;
-webkit-animation: drift 500s linear infinite;
background-color: #2f98b6;
margin-top: -1px;
z-index: 1;
}
.square {
text-align: center;
color: #333;
background: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
height: 16%;
width: 16%;
}
.square .logo {
cursor: pointer;
height: 8vw;
max-height: 110px;
min-height: 81px;
min-width: 81px;
position: absolute;
top: -2px;
bottom: 0;
left: 0;
right: 0;
margin: auto auto;
z-index: 99;
transition: filter .4s linear;
-webkit-transition: -webkit-filter .4s linear;
}
.square .logo:hover {
-webkit-filter: saturate(200%);
filter: saturate(200%);
}
.square .logo.shake {
animation: shake 8s infinite;
-webkit-animation: shake 8s infinite;
}
.pane {
position: absolute;
cursor: pointer;
-ms-transform: -ms-transform .3s;
-webkit-transition: -webkit-transform .3s;
transition: transform .3s;
}
.pane .header {
font-size: 30pt;
letter-spacing: .2em;
position: absolute;
font-weight: 700;
text-transform: uppercase;
opacity: 1;
transition: opacity .1s, left .15s, right .3s;
}
.pane.p1 {
background: #1894b8;
background-image: -moz-linear-gradient(72deg, #1789aa 0%, #189eae 100%);
background-image: -webkit-linear-gradient(72deg, #1789aa 0%, #189eae 100%);
background-image: -ms-linear-gradient(72deg, #1789aa 0%, #189eae 100%);
position: absolute;
z-index: 16;
-webkit-transform: translateX(42%);
transform: translateX(42%);
top: 0;
width: 100%;
height: 42vh;
transition: opacity .1s, transform .3s, right .3s;
-webkit-transition: opacity .1s, -webkit-transform .3s, right .3s;
}
.pane.p1 .header {
color: #A9EDFF;
left: 35px;
bottom: 25px;
}
.pane.p1.shutter {
-ms-transform: translate(0, -100%);
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
.pane.p1.extend {
-ms-transform: translate(0, 0);
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.pane.p1.retract {
-ms-transform: translate(42%, -100%);
-webkit-transform: translate(42%, -100%);
transform: translate(42%, -100%);
}
.pane.p2 {
background: #0e566b;
background-image: -moz-linear-gradient(-48deg, #0e566b 0%, rgba(14, 86, 107, 0.78) 43%, rgba(17, 124, 137, 0.4902) 100%);
background-image: -webkit-linear-gradient(-48deg, #0e566b 0%, rgba(14, 86, 107, 0.78) 43%, rgba(17, 124, 137, 0.4902) 100%);
background-image: -ms-linear-gradient(-48deg, #0e566b 0%, rgba(14, 86, 107, 0.78) 43%, rgba(17, 124, 137, 0.4902) 100%);
z-index: 15;
right: 0;
bottom: 0;
width: 42%;
height: 100%;
}
.pane.p2 .header {
color: #49B9C0;
top: 47%;
left: 30px;
}
.pane.p2.shutter {
-ms-transform: translateX(100%);
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.pane.p3 {
pointer-events: all;
background: #20c2f1;
background-image: -moz-linear-gradient(75deg, #20aaf1 0%, #20c2f1 56%, #7fe1fd 100%);
background-image: -webkit-linear-gradient(75deg, #20aaf1 0%, #20c2f1 56%, #7fe1fd 100%);
background-image: -ms-linear-gradient(75deg, #20aaf1 0%, #20c2f1 56%, #7fe1fd 100%);
z-index: 13;
bottom: -20%;
width: 100%;
-webkit-transform: translateX(-42%);
transform: translateX(-42%);
height: 62vh;
transition: opacity .1s, transform .3s, right .3s;
-webkit-transition: opacity .1s, -webkit-transform .3s, right .3s;
}
.pane.p3 .header {
color: #1778AE;
top: 25px;
right: 35px;
opacity: 1;
}
.pane.p3.extend .header {
left: auto;
}
.pane.p3.extend {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.pane.p3.start .header {
opacity: 0;
}
.pane.p3.shutter {
-ms-transform: translate(-42%, 100%);
-webkit-transform: translate(-42%, 100%);
transform: translate(-42%, 100%);
}
.pane.p3.start {
cursor: default;
-ms-transform: translateY(-13%);
-webkit-transform: translateY(-13%);
transform: translateY(-13%);
}
.pane.p4 {
background: #b1e1ee;
background-image: -moz-linear-gradient(138deg, #a2dbea 0%, #d2fdff 71%);
background-image: -webkit-linear-gradient(138deg, #a2dbea 0%, #d2fdff 71%);
background-image: -ms-linear-gradient(138deg, #a2dbea 0%, #d2fdff 71%);
z-index: 12;
left: 0;
top: 0;
width: 42%;
height: 100%;
}
.pane.p4 .header {
color: #208DAC;
right: 35px;
top: 47%;
}
.pane.p4.shutter {
-ms-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.clear .header {
opacity: 0 !important;
}
@keyframes drift {
0% {
transform: translateX(0);
}
100% {
transform: translateX(1920px);
}
}
@keyframes toBottomFromTop {
49% {
transform: translateY(100%);
}
50% {
opacity: 0;
transform: translateY(-100%);
}
51% {
opacity: 1;
}
}
@keyframes toBottomFromTop {
49% {
transform: translateY(100%);
}
50% {
opacity: 0;
transform: translateY(-100%);
}
51% {
opacity: 1;
}
}
@keyframes shake {
0% {
transform: translate(2px, 1px);
}
95% {
transform: translate(2px, 1px) rotate(0deg);
}
95.5% {
transform: translate(-1px, -2px) rotate(-1deg);
}
96% {
transform: translate(-3px, 0px) rotate(1deg);
}
96.5% {
transform: translate(0px, 2px) rotate(0deg);
}
97% {
transform: translate(1px, -1px) rotate(1deg);
}
97.5% {
transform: translate(-1px, 2px) rotate(-1deg);
}
98% {
transform: translate(-3px, 1px) rotate(0deg);
}
98.5% {
transform: translate(2px, 1px) rotate(-1deg);
}
99% {
transform: translate(-1px, -1px) rotate(1deg);
}
99.5% {
transform: translate(2px, 2px) rotate(0deg);
}
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
</style></head><body>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<section class="landing-sect">
<span class="title">matthew<span class="highlight">williams</span></span>
<div class="tag-box">
<span>responsive design</span>
<span class="center">front-end developer</span>
<span>single page apps</span>
</div>
</section>
<div class="pane shutter p1" id="1">
<span class="header">connect</span>
</div>
<div class="pane shutter p2" id="2">
<span class="header">about me</span>
</div>
<div class="pane start p3" id="3">
<span class="header">projects </span>
</div>
<div class="pane shutter p4" id="4">
<span class="header">skills</span>
</div>
<div class="square" id="square">
<img class="logo shake" src="https://image.ibb.co/iVL0tF/mylogo.png">
</div>
<div class="clouds">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
</div>
<div class="clouds inverse">
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="cloud cloud-3"></div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script >$(document).ready(function(){
//PANE TRANSITIONS
$('.landing-sect span').css('opacity','1');
$('.p1').on('click', function(){
if ($(this).hasClass('active')) return;
$('.icon-box').show();
$('.icon').addClass('pop-in');
$('.connect').addClass('active');
$('.p1').addClass('extend');
$('.p2, .p4').addClass('shutter');
$('.p3').addClass('clear extend');
});
$('.p2').on('click', function(){
if ($(this).is('.active, .clear')) return;
$('.about-box').fadeIn();
$('.myface').hide();
setTimeout(function(){
$('.myface').show();
}, 700);
shutterPanels(this.id);
});
$('.p3').on('click', function(){
if ($(this).is('.active, .clear, .start')) return;
$(this).addClass('extend');
$('.projects').show();
$('.projects').addClass('active');
shutterPanels(this.id);
});
$('.p4').on('click', function(){
if ($(this).hasClass('active')) return;
$('.box').show();
$('.p1').addClass('retract');
$('.p2').addClass('clear');
$('.p3').addClass('shutter');
});
$('.pane').on('click', function(){
if ($(this).hasClass('start') || $(this).hasClass('clear')) return;
if ($('.pane').hasClass('active')) {
returnPanels();
} else {
$(this).toggleClass('active');
}
});
$('.logo').on('click', function(){
$(this).removeClass('shake');
if ($('.p1, .p2, .p3, .p4').hasClass('shutter')) {
returnPanels();
} else {
$('.p3').addClass('start');
$('.clouds.inverse').fadeIn(300);
shutterPanels(0);
}
});
function shutterPanels(id) {
console.log(id)
id = parseInt(id);
if (!id) $('.landing-sect').removeClass('shutter');
var n = id;
for (var i = 0; i < 4; i++) {if (window.CP.shouldStopExecution(1)){break;}if (window.CP.shouldStopExecution(1)){break;}
n += 1;
if (n === 5) n = 1;
if (n === id) continue;
$('#'+n).addClass('shutter');
}
window.CP.exitedLoop(1);
window.CP.exitedLoop(1);
}
function hideClouds() {
setTimeout(function(){
$('clouds').hide();
},300);
}
function returnPanels() {
$('.clouds.inverse, .box').hide();
setTimeout(function(){
$('.about-box').hide();
$('.icon').removeClass('pop-in');
},300);
$('.landing-sect').addClass('shutter');
$('section').removeClass('active');
$('.pane').removeClass('shutter clear extend retract start active');
}
});
//# sourceURL=pen.js
</script>
</body></html>
