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?

layout-practice-3/index.html

Go to file
 
 
Cannot retrieve contributors at this time
271 lines (261 sloc) 13.9 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>Layout Practice 3</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="icon" href="http://grad.uconn.edu/fragrant-fog/wp-content/uploads/joel.png">
<!-- 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>
<nav class="navbar navbar-inverse" id="top-navbar">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<a href="#" class="navbar-brand"><span id="web">Web</span><span id="world">World</span></a>
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="img/wifi(24).png" alt="#" class="columnimg"></a></li>
<li><a href="#"><img src="img/facebook(24).png" alt="#" class="columnimg"></a></li>
<li><a href="#"><img src="img/twitter(24).png" alt="#" class="columnimg"></a></li>
<li><a href="#"><img src="img/linkedin(24).png" alt="#" class="columnimg"></a></li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="carousel-main" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-main" data-slide-to="0" class="active"></li>
<li data-target="#carousel-main" data-slide-to="1"></li>
<li data-target="#carousel-main" data-slide-to="2"></li>
<li data-target="#carousel-main" data-slide-to="3"></li>
<li data-target="#carousel-main" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/forest.png" alt="forest">
<div class="carousel-caption">
<h2 id="carousel-h2">WELCOME TO OUR WEBSITE</h2>
<p>This is a really cool layout site that Joel has us make so that we can show off our mad skills.</p>
</div>
</div>
<div class="item">
<img src="img/beach.png" alt="beach">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/city.png" alt="city">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/dock.png" alt="dock">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="img/woods.png" alt="woods">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-main" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-main" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--Container with thumbnails -->
<div class="container" id="container2">
<div class="row" id="row-1">
<div class="col-lg-12">
<h3 class="text-center">LOREM IPSUM IS<b> SIMPLY DUMMY</b>OF THE PRINTING</h3>
<p class="text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived for more than five centuries.</p>
</div>
</div>
<div class="row" id="thumbnails">
<div class="col-sm-12 col-md-4 col-lg-4 icon-thumbnail">
<img src="img/2.png" alt="monitor" class="img-responsive center-block">
<h4 class="text-center"><b>Lorem Ipsum</b> is simply</h4>
<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-sm-12 col-md-4 col-lg-4 icon-thumbnail">
<span class="glyphicon glyphicon-fire jumbo-icon text-center"></span>
<h4 class="text-center"><b>Lorem Ipsum</b> is simply</h4>
<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-sm-12 col-md-4 col-lg-4 icon-thumbnail">
<img src="img/1.png" alt="mountain" class="img-responsive center-block">
<h4 class="text-center"><b>Lorem Ipsum</b> is simply</h4>
<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>
<div id="container4">
<div class="container" id="thumbnail-container">
<div class="row" id="thumbnails2">
<div class="col-sm-12 col-md-4 col-lg-4" id="#">
<img src="img/car.png" alt="car" class="img-responsive center-block" id="pics">
<h4 class="text-left"><b>Lorem Ipsum</b> is simply</h4>
<p class="text-left">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4" id="#">
<img src="img/tree.png" alt="tree" class="img-responsive center-block" id="pics1">
<h4 class="text-left"><b>Lorem Ipsum</b> is simply</h4>
<p class="text-left">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4" id="#">
<img src="img/tanfield.png" alt="tanfield" class="img-responsive center-block" id="pics">
<h4 class="text-left"><b>Lorem Ipsum</b> is simply</h4>
<p class="text-left">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
<div class="row" id="thumbnails3">
<div class="col-sm-12 col-md-4 col-lg-4" id="#">
<img src="img/mug.png" alt="mug" class="img-responsive center-block" id="pics1">
<h4 class="text-left"><b>Lorem Ipsum</b> is simply</h4>
<p class="text-left">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4" id="#">
<img src="img/greenfield.png" alt="greenfield" class="img-responsive center-block" id="pics">
<h4 class="text-left"><b>Lorem Ipsum</b> is simply</h4>
<p class="text-left">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
<div class="col-sm-12 col-md-4 col-lg-4" id="#">
<img src="img/raspberries.png" alt="raspberries" class="img-responsive center-block" id="pics1">
<h4 class="text-left"><b>Lorem Ipsum</b> is simply</h4>
<p class="text-left">Donec sed odio dui. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
</div>
</div>
</div>
</div>
<!-- Container3 -->
<div class="container container-icons">
<div class="row">
<div class="col-md-3 col-sm-3">
<img src="img/6.png" alt="dribble" class="img-responsive center-block" id="icons">
</div>
<div class="col-md-3 col-sm-3">
<img src="img/4.png" alt="leopards" class="img-responsive center-block" id="icons">
</div>
<div class="col-md-3 col-sm-3">
<img src="img/5.png" alt="behance" id="behance" class="img-responsive center-block" id="icons">
</div>
<div class="col-md-3 col-sm-3">
<img src="img/7.png" alt="puma" class="img-responsive center-block" id="icons">
</div>
</div>
</div>
<!--Footer -->
<footer>
<div class="container" id="footer">
<div class="row">
<div class="col-sm-3">
<h3 class="text-left" id="footer-header">Populr Post</h3>
<ul class="text-left">
<li span="main-text">Lorem Ipsum is simply dummy text of the printing.</li>
<li class="sub-text"><img src="img/clock.png"> 25-September 2016</li>
</ul>
<ul class="text-left">
<li span="main-text">Lorem Ipsum is simply dummy text of the printing.</li>
<li class="sub-text"><img src="img/clock.png"> 25-September 2016</li>
</ul>
</div>
<div class="col-sm-3">
<h3 class="text-left" id="footer-header">Tags</h3>
<p class="text-left" span="main-text"> apps<span class="bigger-font"> blog</span> blogroll christmas cms coda concert<span class="bigger-font"> daily design</span> develop dialog drinks envato food fun gallery gift holiday icon<span class="bigger-font"> illustration</span> ipad iphone journal<span class="bigger-font"> jquery</span> label link marketing mobile motion music photo<span class="bigger-font"> profession</span> quotation recipes show sound strategy tv typography<span class="bigger-font"> video</span></p>
</div>
<div class="col-sm-3">
<h3 class="text-left" id="footer-header">A little about us</h3>
<p class="text-left">There are manu variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomized words which don't look even slightly believable</p>
<p class="text-left">If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything.</p>
</div>
<div class="col-sm-3">
<h3 class="text-left" id="footer-header">Get in touch</h3>
<p class="text=left">Lorem Ipsum is simply dummy of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy test ever since.</p>
<p><img src="img/point.png"> Texas, US</p>
<p><img src="img/envelope.png"> email@email.com</p>
<p><img src="img/phone.png"> 867-5309</p>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse" id="top-navbar">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<p class="navbar-brand">&copy; 2016 Super Awesome Web Student</p>
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="img/wifi(24).png" alt="#" class="columnimg"></a></li>
<li><a href="#"><img src="img/facebook(24).png" alt="#" class="columnimg"></a></li>
<li><a href="#"><img src="img/twitter(24).png" alt="#" class="columnimg"></a></li>
<li><a href="#"><img src="img/linkedin(24).png" alt="#" class="columnimg"></a></li>
</ul>
</div>
</div>
</nav>
</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>