<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<p class="text-right">
<a href="http://bootsnipp.com/iframe/yM3qe" target="_blank">Best viewed full screen</a><br>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2FyM3qe" target="_blank"><small>HTML</small><sup>5</sup></a>
</p>
<h2>BANKSY</h2>
<div id="gal">
<nav class="galnav">
<ul>
<li>
<input type="radio" name="btn" value="one"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="http://d2jv9003bew7ag.cloudfront.net/uploads/Banksy-Follow-Your-Dreams-Cancelled.jpg"/>
<figcaption>
<h4></h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
<li>
<input type="radio" name="btn" value="two" checked="checked"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="https://s-media-cache-ak0.pinimg.com/736x/b2/59/b4/b259b4fb6fc7a18b432a01b6051a7bf7.jpg"/>
<figcaption>
<h4></h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
<li>
<input type="radio" name="btn" value="three"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="http://twistedsifter.files.wordpress.com/2014/07/banksy-25.jpg?w=800&h=554"/>
<figcaption>
<h4></h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
<li>
<input type="radio" name="btn" value="four"/>
<label for="btn" class="entypo-right-open-big"></label>
<figure>
<img src="http://static2.businessinsider.com/image/524f35306bb3f7be648b457c-1190-625/the-most-iconic-banksy-works-of-all-time.jpg"/>
<figcaption>
<h4></h4>
<nav role='navigation'>
<p>share this with your friends</p>
<ul>
<li><a href="#" class="entypo-facebook-squared"></a></li>
<li><a href="#" class="entypo-twitter"></a></li>
<li><a href="#" class="entypo-gplus"></a></li>
</ul>
</nav>
</figcaption>
</figure>
</li>
</ul>
</nav>
</div>
<H2>Criticism</H2>
<p>Here's a mystery for you. Renegade urban graffiti artist Banksy is clearly a guffhead of massive proportions, yet he's often feted as a genius straddling the bleeding edge of now. Why? Because his work looks dazzlingly clever to idiots. And apparently that'll do.
Banksy first became famous for his stencilled subversions of pop-culture images; one showed John Travolta and Samuel L Jackson in a famous pose from Pulp Fiction, with their guns replaced by bananas. What did it mean? Something to do with the glamourisation of violence, yeah? Never mind. It looked cool. Most importantly, it was accompanied by the name "BANKSY" in huge letters, so everyone knew who'd done it. This, of course, is the real message behind all of Banksy's work, despite any appearances to the contrary.</p>
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css");
/* HERE STARTS THE MAGIC */
header {
text-align: center;
color: #fff;
background: #18bc9c;
position: fixed;
width:100%;
z-index: 1;
height: 88%;
overflow: hidden;
top: 0;
left: 0;
}
.content-wrapper{
background-color: white;
top: 87%;
min-height: 12%;
position:absolute;
z-index: 2;
width: 100%;
}
/* HERE ENDS THE MAGIC */
header .container {
padding-top: 150px;
padding-bottom: 50px;
}
header img {
display: block;
margin: 0 auto 20px;
}
header .intro-text .name {
display: block;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 2em;
font-weight: 700;
}
header .intro-text .skills {
font-size: 1.25em;
font-weight: 300;
}
section {
padding: 100px 0;
width: 100%;
}
section h2 {
margin: 0;
font-size: 3em;
}
hr.star-light,
hr.star-primary {
margin: 25px auto 30px;
padding: 0;
max-width: 250px;
border: 0;
border-top: solid 5px;
text-align: center;
}
hr.star-light:after,
hr.star-primary:after {
content: "\f005";
display: inline-block;
position: relative;
top: -.8em;
padding: 0 .25em;
font-family: FontAwesome;
font-size: 2em;
}
hr.star-light {
border-color: #fff;
}
hr.star-light:after {
color: #fff;
background-color: #18bc9c;
}
hr.star-primary {
border-color: #2c3e50;
}
hr.star-primary:after {
color: #2c3e50;
background-color: #fff;
}
section.primary h2{
color: #2c3e50;
}
section.success{
background-color: #18bc9c;
color: #fff;
}
*, *:before, *:after {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
#gal {
position:relative;
width:600px;
height:300px;
margin:0 auto;
top:100px;
background:white;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#gal ul {list-style-type:none;}
input[type="radio"] {
position:absolute;
left:0;
display:block;
width:40px;
height:75px;
border:0;
outline:none;
cursor:pointer;
opacity:0;
z-index:9;
}
input[value="one"] {top:0;}
input[value="two"] {top:75px;}
input[value="three"] {top:150px;}
input[value="four"] {top:225px;}
input[type="radio"] + label {
position:absolute;
left:0;
width:40px;
height:75px;
background:#333;
z-index:7;
-webkit-transition:left .1s, width .1s;
-moz-transition:left .1s, width .1s;
-ms-transition:left .1s, width .1s;
-o-transition:left .1s, width .1s;
transition:left .1s, width .1s;
}
input[value="one"] + label {top:0;}
input[value="two"] + label {top:75px;}
input[value="three"] + label {top:150px;}
input[value="four"] + label {top:225px;}
[class*="entypo-"]:before {
position:absolute;
font-family: 'entypo', sans-serif;
}
label[class*="entypo-"]:before {
top:25px;
left:15px;
font-size:1.5rem;
color:white;
}
a[class*="entypo-"]:before {
top:3px;
left:3px;
font-size:1.5rem;
color:#333;
}
a:hover[class*="entypo-"]:before {
color:tomato;
}
figure, figure img, figcaption {
position:absolute;
top:0;
right:0;
}
figure {
bottom:0;
left:0;
width:600px;
height:300px;
display:block;
overflow:hidden;
}
figure img {
bottom:0;
left:0;
display:block;
width:600px;
height:300px;
-webkit-transform:translateX(600px);
-moz-transform:translateX(600px);
-ms-transform:translateX(600px);
-o-transform:translateX(600px);
transform:translateX(600px);
-webkit-transition:all .15s;
-moz-transition:all .15s;
-o-transition:all .15s;
transition:all .15s;
}
figcaption {
display:block;
width:300px;
height:300px;
padding-top:100px;
background:transparent;
text-align:right;
z-index:1;
-webkit-transform:translateX(300px);
-moz-transform:translateX(300px);
-ms-transform:translateX(300px);
-o-transform:translateX(300px);
transform:translateX(300px);
-webkit-transition:all .25s;
-moz-transition:all .25s;
-o-transition:all .25s;
transition:all .25s;
}
h4 {
display:inline-block;
padding:0 15px;
background:tomato;
color:white;
font-family: 'Titillium Web', sans-serif;
font-weight:300;
font-size:1.5rem;
}
figcaption nav ul {display:inline-block;padding:3px 15px;background:white;}
figcaption nav ul li {display:inline-block;margin-left:5px;}
figcaption nav ul li a {position:relative;display:block;width:30px;height:30px;text-decoration:none;color:white;}
figcaption p {display:inline-block;padding:5px 15px;background:white;font-family: 'Titillium Web', sans-serif;font-weight:300;color:#333;}
input[type="radio"]:checked + label {left:-17px;width:75px;background:tomato;}
input[type="radio"]:checked + label:before {font-size:2.5rem;top:15px;left:28px;}
input[type="radio"]:checked ~ figure img {
-webkit-transform:translatex(0px);
-moz-transform:translatex(0px);
-ms-transform:translatex(0px);
-o-transform:translatex(0px);
transform:translatex(0px);
}
input[type="radio"]:checked ~ figure figcaption {
-webkit-transform:translateX(0px);
-moz-transform:translateX(0px);
-ms-transform:translateX(0px);
-o-transform:translateX(0px);
transform:translateX(0px);
z-index:8;
}
h2 {
margin-top:150px;
text-align:center;
font-family: 'Titillium Web', sans-serif;
font-weight:300;
font-size:1.5rem;
}
h2 a {
position:relative;
color:tomato;
text-decoration:none;
}
h2 a:after {
content:'';
position:absolute;
bottom:-2px;
left:0;
width:0;
height:1px;
background:tomato;
-webkit-transition:width .1s;
-moz-transition:width .1s;
-o-transition:width .1s;
transition:width .1s;
}
h2 a:hover:after {
width:100%;
}
body {background:#d6d2d1;}
html, body {
width:100%;
height:100%;
}
