<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<section>
<div class="cover">
<p class="stack">Computation</p>
</div>
</section>
/* using meyers reset */
/* Box-Sizing */
box-sizing {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Web Font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);
body {
background-color: black;
font-size: 100%;
width: 80%;
margin: 2em auto 0;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
}
section {
/*overflow: hidden;*/
width: 60em;
margin: 0 auto;
}
p {
margin: 0;
}
.cover {
color: white;
width: 40%;
margin: 0;
padding: 1% 7% 1% 10%;
float: left;
margin-right: 2em;
display: block;
/* box-shadow: 0em 0em 5em rgba(10,10,10,0.7); */
}
.stack {
text-transform: uppercase;
font-size: 12em;
line-height: 0.7em;
word-wrap: break-word;
overflow-wrap: break-word;
}
span {
position: relative;
}
/* C */
.char1 {
margin-left: -.2em;
z-index: 4;
text-shadow: 0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}
/* O */
.char2 {
z-index: 3;
margin-left: -.175em;
top: 0.08em;
text-shadow: -0.02em 0.02em 0.2em rgba(10,10,10,0.9);
}
/* M */
.char3 {
z-index: 9;
margin-left: -.125em;
text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}
/* P */
.char4 {
z-index: 5;
margin-left: -.175em;
text-shadow: 0.02em -0.02em 0.2em rgba(10,10,10,0.9);
}
/* U */
.char5 {
z-index: 2;
margin-left: -.125em;
top: 0.08em;
text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}
/* T */
.char6 {
z-index: 10;
margin-left: -.125em;
top: -0.04em;
text-shadow: 0em 0em 0.2em rgba(10,10,10,0.9);
}
/* A */
.char7 {
z-index: 8;
margin-left: -.3em;
top: 0em;
text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}
/* T */
.char8 {
z-index: 6;
margin-left: -.135em;
top: -0.05em;
text-shadow: 0.02em -0.01em 0.2em rgba(10,10,10,0.9);
}
/* I */
.char9 {
z-index: 7;
margin-left: -.125em;
top: 0em;
text-shadow: 0.03em -0.03em 0.2em rgba(10,10,10,0.8);
}
/* O */
.char10 {
z-index: 1;
margin-left: -.125em;
top: 0em;
text-shadow: 0.05em -0.05em 0.2em rgba(10,10,10,0.9);
}
/* N */
.char11 {
z-index: 0;
top: -.04em;
margin-left: -.125em;
text-shadow: -0.05em 0.05em 0.2em rgba(10,10,10,0.9);
}
/*Using Lettering.js
https://github.com/davatron5000/Lettering.js/*/
$(document).ready(function() {
$(".stack").lettering();
});
