<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 lang='en' class='lang="en"'>
<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/co/pen/ibaBy?depth=everything&order=popularity&page=19&q=page&show_forks=false" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style class="cp-pen-styles">@import url(https://oss.maxcdn.com/libs/animate.css/2.0/animate.min.css);
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css);
html,body {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background: #222222 url('http://cdn.clemensotto.com/codepen/img/1.jpg') no-repeat top center fixed;
background-size: cover;
font-family: sans-serif;
}
h1 {
font-size: 60px;
font-weight: bold;
color: #fff;
text-shadow: 0 1px 4px #000;
margin-top: 20px;
}
#box {
position: fixed;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -250px;
text-align: center;
-webkit-animation-name: bounceInDown;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: bounceInDown;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1.5s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: bounceInDown;
animation-fill-mode: both;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-timing-function: linear;
}
.well-color {
-webkit-font-smoothing: antialiased;
background: #000222;
background: -moz-linear-gradient(top, #000222 0%, #4b637c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000222), color-stop(100%,#4b637c));
background: -webkit-linear-gradient(top, #000222 0%,#4b637c 100%);
background: -o-linear-gradient(top, #000222 0%,#4b637c 100%);
background: -ms-linear-gradient(top, #000222 0%,#4b637c 100%);
background: linear-gradient(top, #000222 0%,#4b637c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000222', endColorstr='#4b637c',GradientType=0 );
border: #000222;
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto;
/* Negative indent footer by its height */
margin: 0 auto -60px;
/* Pad bottom by footer height */
padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
#footer {
height: 40px;
}
input, input[placeholder]{
text-align:center;
}
.modal-body {
background: #222222 url('http://cdn.clemensotto.com/codepen/img/1.jpg') no-repeat top center fixed;
background-size:100% 100%;
background-size: cover;
}
p {
color:lightgrey;
width: 80%
line-height: 1.3em;
text-align: justify;
}
.1 {
width:100%;
height:100%;
}
</style></head><body>
<div id="wrap">
<br><br>
<div class="container">
<div id="box">
<div class="text-center">
<h1>Awesome Title</h1>
<div class="col-md-12 text-center pull-middle">
<form role="form" method="get" action="">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> E-Mail</span>
<input name="email" type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your E-Mail to get exclusive access!">
<span class="input-group-btn">
<button type="submit" class="btn btn-primary">Subscribe</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="footer text-center">
<div class="container text-muted">
What is this all <a data-toggle="modal" data-target="#about" href="#about">about</a>? - <a href="https://clemensotto.com/contact" target="_blank">Contact</a>
<a class="btn btn-md btn-default pull-right">
<span class="glyphicon glyphicon-lock"></span> Login
</a>
</div>
</div>
<!-- MODAL -->
<!-- Modal -->
<div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">That is what it's all about!</h4>
</div>
<div class="modal-body text-center">
<div class="1">
<h1> Awesome Title </h1>
<h3>It's awesome, really!</h3>
<div class="panel-body">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
</p>
<br>
<a href="" class="btn btn-lg btn-primary">
Subscribe Now
</a>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js'></script>
</body></html>
