<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; } }