Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

bootstrap-template/index.html

Go to file
 
 
Cannot retrieve contributors at this time
213 lines (208 sloc) 8.58 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Jumbotron -->
<div class="jumbotron" id="jumbotronmain" >
<div class="container text-center">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Check out this jumbotron</h1>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<p><a class="btn btn-primary btn-lg" href="#" role="button" id="trynow1">Try Now</a></p>
<h6>*This should all be text</h6>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<!--Container with thumbnails -->
<div class="container" id="container2">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-lg-6">
<h4 class="text-center"><class id="redtext" id="heading">NEW FEATURES</class></h4>
<h1 class="text-center">Some Awesome Columns</h1>
</div>
<div class="col-sm-3">
</div>
</div>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4">
<img src="http://placehold.it/50x50" alt="#" id="columnimg" class="img-responsive center-block">
<h2 class="text-center">Some Awesome Features</h2>
<p class="text-center">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/50x50" alt="#" id="columnimg" class="img-responsive center-block">
<h2 class="text-center">Some Awesome Features</h2>
<p class="text-center">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-md-4">
<img src="http://placehold.it/50x50" alt="#" id="columnimg" class="img-responsive center-block">
<h2 class="text-center">Some Awesome Features</h2>
<p class="text-center">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</div>
<!--Container 2 -->
<div class="jumbotron" id="jumbotron2"
<div class="container">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-md-6">
<h5 class="text-center"><class id="redtext">SERIOUSLY</class></h5>
<h2 class="text-center">So start on this soon.</h2>
<p class="text-center">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Etiasem malesuada magn. Vestibulum felis euismod semper.</p>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-lg-6">
<img src="http://placehold.it/350x50" alt="browser" id="browser" class="img-responsive center-block">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</div>
<!-- Container3 -->
<div class="jumbotron" id="jumbotron3">
<div class="container">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-md-6">
<h5 class="text-center"><class id="redtext">THIS FORM DOESNT HAVE TO WORK</class></h5>
<h2 class="text-center">But create it anyway. Use the right fields...</h2>
</div>
<div class="col-sm-3">
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="input-group-lg">
<input type="text" class="form-control" placeholder="FULL NAME" aria-describedby="sizing-addon1" id="jumbo4inputs">
</div>
</div>
<div class="col-sm-3">
<div class="input-group-lg">
<input type="text" class="form-control" placeholder="YOUR EMAIL" aria-describedby="sizing-addon1" id="jumbo4inputs">
</div>
</div>
<div class="col-sm-3">
<div class="input-group-lg">
<input type="text" class="form-control" placeholder="PASSWORD" aria-describedby="sizing-addon1" id="jumbo4inputs">
</div>
</div>
<div class="col-sm-3">
<a class="btn btn-primary btn-lg btn-block" href="#" role="button" id="trynow">TRY NOW</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
<p class="text-center">And some small text should go here.</p>
</div>
<div class="col-md-4">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="input-group input-group-lg">
</div>
</div>
<div class="col-sm-3">
<div class="input-group input-group-lg">
</div>
</div>
<div class="col-sm-3">
<div class="input-group input-group-lg">
</div>
</div>
</div>
<!--Footer -->
<footer>
<div class="container" id="footer">
<div class="row">
<div class="col-sm-3">
<h3>Contact</h3>
<ul>
<li>Aenean lacinia bibendum nulla sed</li>
<li>consectetur. Aenean eu leo quam.</li>
<li>USA & CAN: <a href="tel:1-888-123-4567" alt="Please Call"> 1-888-123-4567</a></li>
<li>Address:<a href="https://www.google.com/maps/place/34+Brook+Rd,+Valley+Stream,+NY+11581/@40.6555172,-73.721011,17z/data=!3m1!4b1!4m2!3m1!1s0x89c26441815735d5:0x8b4274042499d662"> 34 Brokel Rd. NY</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3>Support</h3>
<ul>
<li><a href="#" id="Help Center" alt="Help Center">Help Center</a></li>
<li><a href="#" id="Get Started" alt="Get Started">Get Started</a></li>
<li><a href="#" id="Contact Us" alt="Contact Us">Contact Us</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3>About Us</h3>
<ul>
<li><a href="#" id="About Us" alt="About Us">About Us</a></li>
<li><a href="#" id="Terms of Use" alt="Terms of Use">Terms of Use</a></li>
<li><a href="#" id="Privacy Policy" alt="Privacy Policy">Privacy Policy</a></li>
</ul>
</div>
<div class="col-sm-3">
<h3>Get Newsletter</h3>
<ul>
<li><div class="input-group">
<input type="text" class="form-control" id="footerinput" placeholder="EMAIL" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><img src="images/mail.png"></span>
</div></li>
<li>
<a href="#" id="social"><img src="images/facebook.png"></a>
<a href="#" id="social"><img src="images/g+.png"></a>
<a href="#" id="social"><img src="images/twitter.png"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>