home.html

<!DOCTYPE html>
<html>
<head>
<title>Reponsive HTML Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700' rel='stylesheet' type='text/css'>
<link href="static/css/style.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="main__header">

  <div class="container">
    <nav class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display --> 
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="navbar-header">
        <h1 class="navbar-brand"><a href="index.html">DUD's</a></h1>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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 class="navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="active"><a href="index.html">Home</a></li>
          <li class="dropdown">
            <div class="dropper"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
              <ul class="dropdown-menu">
				  <li><a href="index_boxed.html">Home / Boxed</a></li>
                  <li><a href="index_with_blog.html">Home + Blog</a></li>
                  <li><a href="portfolio.html">Portfolio</a></li>
                  <li><a href="typography.html">Typography</a></li>
                  <li><a href="shortcodes.html">Shortcodes</a></li>
                  <li><a href="blog.html">Blog & News</a></li>
                  <li><a href="tables.html">Tables</a></li>
                  <li><a href="faq.html">FAQ</a></li>
              </ul>
            </div>
          </li>
          <li><a href="left_sidebar.html">left sidebar</a></li>
          <li><a href="right_sidebar.html">right sidebar</a></li>
          <li><a href="full_width.html">full page</a></li>
          <li><a href="contact.html">contact us</a></li>
        </ul>
      </div>
      <!-- /.navbar-collapse --> 
    </nav>
  </div>

</header>
<section class="slider">
  <div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item"> <img data-src="static/images/slider/slider.jpg" alt="First slide" src="static/images/slider/slider.jpg">
        <div class="container">
          <div class="carousel-caption">
            <h1>Ornare molestie augue</h1>
            <p><a class="btn btn-default btn-lg" href="#" role="button">Try Now</a><a class="btn btn-default btn-lg" href="#" role="button">Read more</a></p>
            <p>Cras egestas velit sed sapien sollicitudin porta. Lorem ipsum dolor sit amet.</p>
          </div>
        </div>
      </div>
      <div class="item active"> <img data-src="static/images/slider/slider1.jpg" alt="Second slide" src="static/images/slider/slider1.jpg">
        <div class="container">
          <div class="carousel-caption">
            <h1>Donec in metus quam nullam quis porta diam, sit amet tempor.</h1>
            <p><a class="btn btn-default btn-lg" href="#" role="button">Purchase</a><a class="btn btn-default btn-lg" href="#" role="button">Details</a></p>
            <p>Quisque vestibulum odio at diam interdum, non ultrices lorem condimentum.</p>
          </div>
        </div>
      </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon carousel-control-left"></span></a> <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon carousel-control-right"></span></a> </div>
</section>
<!--end of slider section-->

<section class="main__middle__container">
  <div class="container">
    <div class="row with__sep">
      <h3 class="text-center">Phasellus ultrices nulla quis nibh. Quisque a lectus. Lorem ipsum dolor sit amet ...</h3>
      <p class="text-center big-paragraph">Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="row no_padding icons__blocks text-center">
      <h2 class="page_title"><span>our services</span><br />
        <span class="sep"></span><br />
        <small>Cras ornare tristique elit</small></h2>
      <div class="col-md-4">
        <h3><small><a href="#">Creative Design</a></small></h3>
        <p class="small-paragraph">Vestibulum auctor dapibus neque.</p>
        <img src="static/images/content__images/img1.jpg" alt="image" class="img-responsive img-rounded">
        <p>Quisque et aliquam mauris. Nunc id cursus quam. Curabitur aliquam ornare ante et commodo. Nulla eu erat id massa egestas eleifend. Sed id venenatis.</p>
      </div>
      <div class="col-md-4">
        <h3><small><a href="#">Multipurpose</a></small></h3>
        <p class="small-paragraph">Vestibulum auctor dapibus neque.</p>
        <img src="static/images/content__images/img2.jpg" alt="image" class="img-responsive img-rounded">
        <p>Quisque et aliquam mauris. Nunc id cursus quam. Curabitur aliquam ornare ante et commodo. Nulla eu erat id massa egestas eleifend. Sed id venenatis.</p>
      </div>
      <div class="col-md-4">
        <h3><small><a href="#">Fully Responsive</a></small></h3>
        <p class="small-paragraph">Vestibulum auctor dapibus neque.</p>
        <img src="static/images/content__images/img3.jpg" alt="image" class="img-responsive img-rounded">
        <p>Quisque et aliquam mauris. Nunc id cursus quam. Curabitur aliquam ornare ante et commodo. Nulla eu erat id massa egestas eleifend. Sed id venenatis.</p>
      </div>
      <p><a href="#" class="btn btn-primary btn-lg">Learn more</a></p>
    </div>
  </div>
  <div class="row grey-info-block text-center">
    <div class="container">
      <h2 class="page_title"><span>about us</span><br />
        <span class="sep"></span><br />
        <small>Cras ornare tristique elit</small></h2>
      <div class="col-md-6"> <img src="static/images/content__images/pic1.jpg" alt="image" class="img-rounded img-responsive">
        <h3><small>Commodo id natoque malesuada</small></h3>
        <p class="small-paragraph">Phasellus ultrices nulla quis nibh. Quisque a lectus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      </div>
      <div class="col-md-6"> <img src="static/images/content__images/pic2.jpg" alt="image" class="img-rounded img-responsive">
        <h3><small>Auctor etiam porttitor phasellus</small></h3>
        <p class="small-paragraph">Phasellus ultrices nulla quis nibh. Quisque a lectus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
      </div>
      <div class="clear"></div>
    </div>
  </div>
  <div class="text-center three-blocks">
    <div class="container">
      <div class="row">
        <h2 class="">Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.</h2>
        <p class="">Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <h3><small>About</small></h3>
        <p>We strive to deliver a level of service that exceeds the expectations of our customers. <br />
          <br />
          If you have any questions about our products or services, please do not hesitate to contact us. We have friendly, knowledgeable representatives available seven days a week to assist you.</p>
      </div>
      <div class="col-md-3">
        <h3><small>Tweets</small></h3>
        <p><span>Tweet</span> <a href="#">@You</a><br />
          Etiam egestas, ipsum posuere accumsan sollicitudin, nulla mauris volutpat sem, sit amet rutrum risus. </p>
        <p><span>Tweet</span> <a href="#">@You</a><br />
          Quisque porta tellus vitae adipiscing molestie. Mauris et lacus blandit, malesuada.</p>
      </div>
      <div class="col-md-3">
        <h3><small>Mailing list</small></h3>
        <p>Subscribe to our mailing list for offers, news updates and more!</p>
        <br />
        <form action="#" method="post" class="form-inline" role="form">
          <div class="form-group">
            <label class="sr-only" for="exampleInputEmail2">your email:</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="your email:">
          </div>
          <button type="submit" class="btn btn-default">subscribe</button>
        </form>
      </div>
      <div class="col-md-3">
        <h3><small>Social</small></h3>
        <p>123 Business Way<br />
          San Francisco, CA 94108<br />
          USA<br />
          <br />
          Phone: (888) 123-4567<br />
          Fax: (887) 123-4567<br />
          <br />
        </p>
        <div class="social__icons"> <a href="#" class="socialicon socialicon-twitter"></a> <a href="#" class="socialicon socialicon-facebook"></a> <a href="#" class="socialicon socialicon-google"></a> <a href="#" class="socialicon socialicon-mail"></a> </div>
      </div>
    </div>
    <hr>
    <p class="text-center">&copy; Copyright ABC Company. All Rights Reserved.</p>
  </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="static/js/bootstrap.min.js"></script>
<script type="static/text/javascript">

$('.carousel').carousel({
  interval: 3500, // in milliseconds
  pause: 'none' // set to 'true' to pause slider on mouse hover
})

</script>
</body>
</html>