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?

layout3/index.html

Go to file
 
 
Cannot retrieve contributors at this time
324 lines (298 sloc) 16.2 KB
Raw Blame
Open in GitHub Desktop
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Layout 3</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/boostrap.css">
<link rel="stylesheet" href="css/main.css">
<!--Fontastic-->
<link href="https://file.myfontastic.com/fz8uZXkf79d5SLkAxCGdSd/icons.css" rel="stylesheet">
<!--Fonts-->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|PT+Sans|Pacifico" rel="stylesheet">
<script src="//www.google-analytics.com/analytics.js"></script>
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!-- desktop nav-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="logo">Web<span class="webworld">World</span></span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="icons navbar-right">
<a href="#"><span class="icon-rss"></span></a>
<a href="#"><span class="icon-facebook"></span></a>
<a href="#"><span class="icon-twitter"></span></a>
<a href="#"><span class="icon-linkedin"></span></a>
</div>
</div>
</div>
</nav>
<!-- tablet and mobile nav-->
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">HOME</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="form">
<div class="form-group">
<input type="search" placeholder="Search Something" class="form-control">
</div>
<span class="gray glyphicon glyphicon-search"></span>
</form>
</li>
</div>
</div>
</nav>
<!--Carousel-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/carousel.jpg" alt="First slide">
<div class="carousel-caption">
<h1 class="bold">WELCOME TO OUR WEBSITE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
<div class="item">
<img src="img/carousel.jpg" alt="Second slide">
<div class="carousel-caption">
<h1 class="bold">WELCOME TO OUR WEBSITE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
<div class="item">
<img src="img/carousel.jpg" alt="Third slide">
<div class="carousel-caption">
<h1 class="bold">WELCOME TO OUR WEBSITE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
<div class="item">
<img src="img/carousel.jpg" alt="Four slide">
<div class="carousel-caption">
<h1 class="bold">WELCOME TO OUR WEBSITE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
<div class="item">
<img src="img/carousel.jpg" alt="Fifth slide">
<div class="carousel-caption">
<h1 class="bold">WELCOME TO OUR WEBSITE</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
</div>
<!-- Carousel Slides -->
<a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!---Container 1 -->
<div class="container1 dummy container">
<h2>LOREM IPSUM IS <span class="dark">SIMPLY DUMMY</span> OF THE PRINTING.</h2>
<p>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 atype specimen book. It has survived not only five centuries.</p>
<div class="row">
<div class="row331 col-md-4">
<span class="electronics glyphicon glyphicon-blackboard"></span>
<h4><span class="bold">Lorem Ipsum</span> is simply</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the industry. Lorem Ipsum has been</p>
<span class="blackboard"></span>
</div>
<div class="row332 col-md-4">
<span class="electronics glyphicon glyphicon-edit"></span>
<h4><span class="bold">Lorem Ipsum</span> is simply</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the industry. Lorem Ipsum has been</p>
<span class="pen"></span>
</div>
<div class="row333 col-md-4">
<span class="electronics glyphicon glyphicon-picture"></span>
<h4><span class="bold">Lorem Ipsum</span> is simply</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the industry. Lorem Ipsum has been</p>
<span class="picture"></span>
</div>
</div>
</div>
<!--pictures-->
<div class="pictures">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="grayarea">
<img src="img/car.jpg" alt="car picture">
<h5 class="bold">Lorem Ipsum is simply</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the</p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="grayarea">
<img src="img/nature.jpg" alt="nature">
<h5 class="bold">Lorem Ipsum is simply</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the</p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="grayarea">
<img src="img/field.jpg" alt="field">
<h5 class="bold">Lorem Ipsum is simply</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="grayarea">
<img src="img/steam.jpg" alt="steam">
<h5 class="bold">Lorem Ipsum is simply</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the</p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="grayarea">
<img src="img/field2.jpg" alt="field2">
<h5 class="bold">Lorem Ipsum is simply</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the</p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<div class="grayarea">
<img src="img/raspberries.jpg" alt="raspberries">
<h5 class="bold">Lorem Ipsum is simply</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting of the</p>
</div>
</div>
</div>
</div>
</div>
<!--logos-->
<div class="companies container">
<div class="row">
<div class="col-md-3">
<a href="#"><img src="img/dribble.png" alt="dribbble"></a>
</div>
<div class="col-md-3">
<a href="#"><img src="img/leopards.png" alt="leopards"></a>
</div>
<div class="col-md-3">
<a href="#"><img src="img/behance.png" alt="behance"></a>
</div>
<div class="col-md-3">
<a href="#"><img src="img/puma.png" alt="puma"></a>
</div>
</div>
</div>
<!--Footers-->
<div class="populr">
<div class="container">
<div class="row">
<div class="col-md-3">
<h4 class="white">Populr Post</h4>
<div>
<p>Lorem Ipsum is simply dummy text of the printing.</p>
<p><span class="teal glyphicon glyphicon-time"></span> <span class="date">25-September 2013</span></p>
</div>
<hr>
<div>
<p>Lorem Ipsum is simply dummy text of the printing.</p>
<p><span class="teal glyphicon glyphicon-time"></span> <span class="date">25-September 2013</span></p>
</div>
</div>
<div class="col-md-3 tags">
<h4 class="white">Tags</h4>
<a href="#">apps</a> <a href="#"><span class="big">blog</span></a> <a href="#">blogroll</a> <a href="#">christmas</a> <a href="#">cms</a> <a href="#">coda</a> <a href="#">concert</a> <a href="#"><span class="big">daily</span></a> <a href="#"><span class="big">design</span></a> <a href="#">develop</a> <a href="#">dialog</a> <a href="#">drinks</a> <a href="#">envato</a> <a href="#">food</a> <a href="#">fun</a> <a href="#">gallery</a> <a href="#">gift</a> <a href="#">holiday</a> <a href="#">icon</a> <a href="#"><span class="big">illustration</span></a> <a href="#">ipad</a> <a href="#">iphone</a> <a href="#">journal</a> <a href="#"><span class="big">jquery</span></a> <a href="#">label</a> <a href="#">link</a> <a href="#">marketing</a> <a href="#">mobile</a> <a href="#">motion</a> <a href="#">music</a> <a href="#">photo</a> <a href="#"><span class="big">profession</span></a> <a href="#">quotation</a> <a href="#">recipes</a> <a href="#">show</a> <a href="#">sound</a> <a href="#">strategy</a> <a href="#">tv</a> <a href="#">typography</a> <a href="#"><span class="big">video</span></a>
</div>
<div class="col-md-3">
<h4 class="white">A little about us</h4>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. </p>
<p>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-md-3">
<h4 class="white">Get in touch</h4>
<p>Lorem Ipsum is simply dummy of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since.</p>
<div>
<p><span class="teal glyphicon glyphicon-map-marker"></span> Texas, US</p>
<p><span class="teal glyphicon glyphicon-envelope"></span> email@email.com</p>
<p><span class="teal glyphicon glyphicon-earphone"></span> 890-09880-45590</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-6">
<p>&copy; 2016 Super Awesome Web Student</p>
</div>
<div class="col-md-6">
<ul class="icons">
<a href="#"><li class="icon-rss"></li></a>
<a href="#"><li class="icon-facebook"></li></a>
<a href="#"><li class="icon-twitter"></li></a>
<a href="#"><li class="icon-linkedin"></li></a>
</ul>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>