Split Screen RWD Landing Page - Andrew Pougher
Split Screen RWD Landing Page
by Andrew Pougher
HTML
<div id="bg"></div>
<div id="wrapper">
<h1>Select an Entry</h1>
<div>
<a href="/blue/" target="_blank"><img src="http://placehold.it/150x99/3e3ecc/&text=Blue Path"><p>Blue</p></a>
</div>
<div>
<a href="/red/" target="_blank"><img src="http://placehold.it/150x99/cc1100/&text=Red Path"><p>Red</p></a>
</div>
</div>
CSS
body {
margin: 0;
background-color: #222;
color: #EEE;
}
#bg {
width: 100%;
height: 50%;
position: fixed;
top: 0;
left: 0;
background-color: #EEE;
border-bottom: 1px solid #FFF;
}
#wrapper {
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -160px;
}
#wrapper div {
float: left;
text-align: center;
margin: 0 15px 0 15px;
}
h1 {
opacity: 0;
font: 44px "Patua One", "Times New Roman", Times, serif;
margin: 15px auto;
text-shadow: 1px 1px 0 #FFF;
color: #222;
text-align: center;
}
a, h1 {
-webkit-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-moz-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-o-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
-ms-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
a {
text-decoration: none;
color: #EEE;
opacity: 0;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
a:visited {
color: #EEE;
}
a:hover {
opacity: 0.5 !important;
}
a:focus {
outline: none;
boder: none;
}
p {
font: 24px "Patua One", "Times New Roman", Times, serif;
margin: 0 0 0 0;
opacity: 0;
}
img {
border-radius:5px;
border: none;
}
@media screen and (max-width: 320px) {
#bg {
display: none;
}
#wrapper {
position: static;
margin: 0;
}
h1 {
color: #EEE;
font-size: 32px;
text-shadow: none;
text-align: center;
}
#wrapper div...
JavaScript
function fontLoaded() {
$("h1").css("opacity", 1);
$("p").each(fadeIn);
$("a").each(fadeIn);
}
function fadeIn() {
$(this).css("opacity", 1);
}
$(document).ready(function() {
var wf = document.createElement("script"),
s = document.getElementsByTagName("script")[0];
WebFontConfig = {google: {families: ["Patua+One"]}, active: fontLoaded};
wf.src = ("https:" == document.location.protocol ? "https" : "http") + "://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js";
wf.type = "text/javascript";
wf.async = "true";
s.parentNode.insertBefore(wf, s);
});// By Andrew Pougher