<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 ---------->
<div class="container">
<div class="row">
<header id="logo">
<div class="col-md-12 col-sm-12">
<a href="#" title="its beta">its beta</a>
</div><!--/12-->
</header>
<section id="marketing-text">
<div class="col-md-12 col-sm-12">
<h1>Stay tuned, we are launching very soon...</h1>
<p>ITS BETA is working hard to launch a new site that's going to revolutionize the way you do business. Leave us your email below, and we'll notify you the minute we open the doors.</p>
</div><!--12-->
</section><!--/marketing-text-->
<section id="subscribe" class="clearfix">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="row">
<form role="form" action="#" method="post">
<div class="col-md-7 col-sm-7"><input type="email" id="fieldEmail" name="cm-xky-xky" class="form-control input-lg" placeholder="Email Address" required=""></div><!--7-->
<div class="col-md-5 col-sm-5 "><button class="btn btn-block btn-lg btn-theme">Subscribe</button></div><!--5-->
</form>
</div><!--row-->
</div><!--/6-->
</section><!--subscribe-->
<section id="features">
<div class="col-md-3 col-sm-3">
<div class="feature-box">
<i class="icon icon-resize-full"></i>
<h2>Responsive Theme</h2>
<p>Talk about one of the biggest features that your new website is going to have.</p>
</div><!--feature-box-->
</div><!--/3-->
<div class="col-md-3 col-sm-3">
<div class="feature-box">
<i class="icon icon-flag"></i>
<h2>Font Awesome Icons</h2>
<p>Talk about one of the biggest features that your new website is going to have.</p>
</div><!--feature-box-->
</div><!--/3-->
<div class="col-md-3 col-sm-3">
<div class="feature-box">
<i class="hicon icon-envelope"></i>
<h2>Subscribe Signup Forms</h2>
<p>Theme supports two different email signup forms Mail Chimp & Campaign Monitor</p>
</div><!--feature-box-->
</div><!--/3-->
<div class="col-md-3 col-sm-3">
<div class="feature-box">
<i class="icon icon-font"></i>
<h2>Google Web Fonts</h2>
<p>Talk about one of the biggest features that your new website is going to have.</p>
</div><!--feature-box-->
</div><!--/3-->
</section><!--features-->
<footer>
<div class="col-md-12 col-sm-12">
<p class="social-text">
<span></span>
<i>For more details leading up to our launch <br>check our below profiles</i>
</p>
<div class="social-icons">
<a href="#"><i class="icon-twitter-sign"></i></a>
<a href="#"><i class="icon-facebook-sign"></i></a>
<a href="#"><i class="icon-google-plus-sign"></i></a>
<a href="#"><i class="icon-pinterest-sign"></i></a>
</div>
<small><i>©2013 Its Beta. All rights reserved.</i></small>
</div><!--/12-->
</footer>
</div><!--/row-->
</div>
/* http://doozypixels.com/bootstrap/itsbeta2/index-variation1.html */
#logo a{
background: #e74c3c;
}
#features i{
color: #e74c3c;
}
.social-icons a{
color: #e74c3c;
}
.social-icons a:hover{
color: #bc3e31;
}
.form-control:focus {
border-color: #e74c3c;
}
/*
* Custom Theme Buttons
*/
.btn-theme {
color: #ffffff;
background-color: #e74c3c;
border-color: #e74c3c;
font-weight: 700;
}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
color: #ffffff;
background-color: #bc3e31;
border-color: #bc3e31;
}
.btn-theme:active,
.btn-theme.active,
.open .dropdown-toggle.btn-theme {
background-image: none;
}
.btn-theme.disabled,
.btn-theme[disabled],
fieldset[disabled] .btn-theme,
.btn-theme.disabled:hover,
.btn-theme[disabled]:hover,
fieldset[disabled] .btn-theme:hover,
.btn-theme.disabled:focus,
.btn-theme[disabled]:focus,
fieldset[disabled] .btn-theme:focus,
.btn-theme.disabled:active,
.btn-theme[disabled]:active,
fieldset[disabled] .btn-theme:active,
.btn-theme.disabled.active,
.btn-theme[disabled].active,
fieldset[disabled] .btn-theme.active {
background-color: #bc3e31;
border-color: #bc3e31;
}
/*
*** COLOR GUIDANCE ***
* Turquoise Color : #1abc9c for branding
* Midnight Blue Color : #2c3e50 for text
* Wet Asphalt Color : #34495e for headings
* Just replace the coresponding theme values to your own theme color
Turquoise Color :[ body{border-top}
#logo a{background}
#features i{color}
.social-icons a {color}
]
*/
/*
* For Headings and text Google font 'Lato'
*/
body{
background: #ecf0f1;
padding-top: 5px;
color: #2c3e50;
font-family: 'Lato', sans-serif;
font-weight : 400;
border-top-style: solid;
border-top-width: 5px;
}
h1,h2,h3,h4,h5,h6{
color: #34495e;
font-family: 'Lato', sans-serif;
font-weight: 700;
}
/*
* Header
* Note: Below Pacifico font is only for theme demo purpose
*/
#logo{
text-align: center;
}
#logo a{
color: #fff;
padding: 45px 20px;
font-family: 'Pacifico', cursive;
font-size: 32px;
font-weight: 400;
text-decoration: none;
display: inline-block;
margin: 30px 0;
text-shadow: 1px 2px rgba(0,0,0,0.3);
-webkit-border-radius: 50% 50%;
-moz-border-radius: 50% 50%;
-ms-border-radius: 50% 50%;
-o-border-radius: 50% 50%;
border-radius: 50% 50%;
}
/*
* Marketing
*/
#marketing-text{
text-align: center;
}
#marketing-text.alter{
margin-bottom: 30px;
}
#marketing-text h1{
font-size: 32px;
margin-bottom:20px;
}
#marketing-text p{
font-size: 18px;
line-height: 24px;
padding:0 10px;
}
/*
* Subscribe
*/
#subscribe{
margin: 20px 0;
}
#subscribe .btn-block{
margin-top: 10px;
}
.panel-theme{
border:0;
border-radius: 6px;
}
.panel-theme .panel-heading{
background: #2c3e50;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 20px 0;
border: 0;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.panel-theme .panel-body{
padding: 20px 40px 10px;
text-align: center;
}
/*
* Features
*/
#features{
overflow: hidden;
margin: 20px 0;
}
#features i{
font-size: 48px;
}
#features h2{
font-size: 18px;
line-height: 24px;
}
.feature-box{
padding: 15px;
text-align: center;
border: solid 1px #d4d9dc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
margin-bottom: 20px;
}
#features .media{
margin-bottom: 20px;
}
#features .media>.pull-left{
margin-right: 20px;
width: 50px;
}
/*
* Footer
*/
footer{
margin: 0 0 30px;
text-align: center;
}
.social-text{
font-size:16px;
}
.social-text span{
display: block;
width: 150px;
margin:0 auto 10px;
border-top: solid 3px #bdc3c7;
}
.social-icons{
margin-bottom: 20px;
}
.social-icons a{
font-size: 24px;
padding: 5px;
}
.social-icons a:hover{
text-decoration: none;
}
footer small{color:#95a5a6;}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
#subscribe .btn-block{
margin: 0;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
#subscribe .btn-block{
margin: 0;
}
#features,#subscribe{
margin: 50px 0;
}
}
@media (min-width: 1200px) {
#marketing-text p{
padding:0 50px;
}
#subscribe .btn-block{
margin: 0;
}
#features,#subscribe{
margin: 50px 0;
}
}
