<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/hugo/pen/twxno?depth=everything&limit=all&order=popularity&page=2&q=single+page&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700'>
<style class="cp-pen-styles">body {
font-size: 20px;
font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
margin: 0;
text-transform: uppercase;
text-shadow: 0.05em 0.05em 0.05em rgba(0, 0, 0, 0.4);
}
h1 {
font-size: 60px;
letter-spacing: 6px;
text-align: center;
}
h2 {
font-size: 40px;
position: absolute;
top: 50%;
text-align: center;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
z-index: 2;
}
.banner {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/deer-blur.jpg) no-repeat;
background-position: center center;
background-size: cover;
height: 400px;
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
.banner:after {
background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0) 30%, #000000 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, #000000 100%);
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
.logo {
left: 50%;
margin: 50px 0 50px -150px;
opacity: 0.8;
position: absolute;
width: 300px;
}
.content {
background: #222;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
color: #fff;
margin-top: 400px;
padding: 4% 0 200px;
position: relative;
z-index: 2;
}
.content .inner {
margin: 0 auto;
max-width: 960px;
padding: 40px 30px;
}
.img {
background-attachment: fixed;
background-position: center center;
background-size: cover;
height: 440px;
position: relative;
width: 100%;
}
.img:after {
background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0) 30%, #000000 100%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, #000000 100%);
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.img.trees {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/deer-blur.jpg);
}
</style></head><body>
<div class="wrapper">
<div class="banner">
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/31787/axe.png" alt="" />
</div>
<div class="content">
<div class="inner">
<h1>We are A.X.E</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla voluptates labore quas dignissimos nisi tenetur quod laboriosam neque optio distinctio architecto qui sunt alias ex sint nihil iure eaque temporibus sed at nam animi atque officia omnis tempore placeat ipsum odit nostrum voluptatibus voluptatem. Repudiandae corrupti reprehenderit voluptatum libero repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto voluptates ipsum reprehenderit repellat fuga quas molestiae impedit cupiditate quam laborum incidunt numquam natus nostrum error iure nisi possimus corporis voluptate?</p>
</div>
<div class="img trees">
<h2>We care about the enviroment </h2>
</div>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde neque in doloribus saepe minima facere dolorem maxime sit perspiciatis iusto sapiente magni rerum laboriosam at eaque quos est adipisci dolores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda quidem dolores odio reprehenderit hic tenetur voluptate nam ex delectus laborum rem dolor accusantium magnam aliquid quod natus dolorum! At molestiae ea accusamus veritatis sed ex incidunt odit accusantium natus rem. Aperiam quas beatae labore tempora neque dolorum provident placeat voluptas.</p>
</div>
</div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body></html>
