<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 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/simeydotme/pen/zKplC?depth=everything&limit=all&order=popularity&page=17&q=text&show_forks=false" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic,700italic);
body,
html {
font-family: Lato;
padding: 0;
margin: 0;
min-height: 100%;
height: 100%;
color: #333;
background-size: cover;
background-position: center;
}
.header {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
height: 100%;
}
.header__dev {
font-family: Lato, Arial, sans-serif;
text-shadow: 0 1px 1px rgba(42, 43, 61, 0.5);
font-size: 86px;
height: 90px;
line-height: 90px;
font-weight: 300;
position: absolute;
top: 50%;
left: 120px;
margin: -45px 0 0;
-webkit-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
z-index: 2;
}
@media screen and (max-width: 1000px) {
.header__dev {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
}
@media screen and (max-width: 850px) {
.header__dev {
-webkit-transform: scale(0.65);
transform: scale(0.65);
}
}
@media screen and (max-width: 700px) {
.header__dev {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
.dev__slash {
color: #A82336;
font-weight: 300;
position: absolute;
top: -5px;
left: 70px;
margin-left: 5px;
-webkit-transform: scale(1.6);
transform: scale(1.6);
z-index: 5;
}
.dev__fe, .dev__ux {
top: 50%;
margin-top: -90px;
position: absolute;
width: 180px;
height: 180px;
overflow: hidden;
-webkit-transform: rotateZ(22deg);
transform: rotateZ(22deg);
}
.dev__fe i, .dev__ux i {
font-style: normal;
top: 0;
left: 0;
position: absolute;
width: 180px;
height: 180px;
line-height: 180px;
-webkit-transform: rotateZ(-22deg);
transform: rotateZ(-22deg);
}
.dev__fe {
text-align: right;
direction: rtl;
margin-left: -99px;
}
.dev__fe i {
text-indent: -15px;
}
.dev__ux {
margin-left: 100px;
}
.dev__ux i {
text-indent: -15px;
}
.dev__developer {
font-weight: 300;
position: absolute;
top: 0;
left: 225px;
}
.dev__fe, .dev__ux, .dev__fe i, .dev__ux i, .dev__developer, .dev__slash {
-webkit-transition: all 0.6s cubic-bezier(0.555, -0.375, 0, 1.615);
transition: all 0.6s cubic-bezier(0.555, -0.375, 0, 1.615);
}
.header__dev--open .dev__fe i, .header__dev--open .dev__ux i {
text-indent: 15px;
}
.header__dev--open .dev__developer {
-webkit-transform: translateX(30px);
transform: translateX(30px);
opacity: 0.2;
}
.header__dev--open .dev__slash {
-webkit-transform: scale(1.6) rotateZ(-22deg);
transform: scale(1.6) rotateZ(-22deg);
}
.header__dev--slow .dev__fe, .header__dev--slow .dev__ux, .header__dev--slow .dev__fe i, .header__dev--slow .dev__ux i, .header__dev--slow .dev__developer, .header__dev--slow .dev__slash {
-webkit-transition: all 1.2s cubic-bezier(0.555, -0.375, 0, 1.615);
transition: all 1.2s cubic-bezier(0.555, -0.375, 0, 1.615);
}
body {
background-image: url(http://wallpoper.com/images/00/26/06/21/gaussian-blur_00260621.jpg);
}
</style></head><body>
<header class="header" id="header">
<h2 class="header__dev header__dev--open">
<b class="dev__fe"><i>FE</i></b>
<span class="dev__slash">/</span>
<b class="dev__ux"><i>UX</i></b>
<b class="dev__developer">Developer</b>
</h2>
</header>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
// look, click me!!
$("#header").on({
"click.header": function() {
$(".header__dev").toggleClass("header__dev--open");
}
});
setTimeout( function() {
$(".header__dev").addClass("header__dev--slow").removeClass("header__dev--open");
},1000);
setTimeout( function() {
$(".header__dev").removeClass("header__dev--slow");
},2400);
//# sourceURL=pen.js
</script>
</body></html>
