avena
/
learn-html-and-css3-with-an-animated-bootstrap-template


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <!-- Fonts -->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600' rel='stylesheet' type='text/css'>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css"
    integrity="sha256-tf1yN1B2PrtzH5Ih5BPn1k1Y1RktwEDkIpLtPczMpzI=" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"
    integrity="sha256-UNvss+0AeuPIFODCIPnpoVPQL7r6PZRlxLIiBCl2qOw=" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/style.css">

  <title>ScrollPlace Bootstrap Template</title>
</head>

<body>

  <nav class="navbar navbar-fixed-top navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" 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="#"><img src="https://i.postimg.cc/JnRM1H9r/logo.png" alt="ScrollPlace"></a>
      </div>
      <div id="navbar" class="collapse navbar-collapse navbar-right">
        <ul class="nav navbar-nav">
          <li class="active"><a href="index.html">Home</a><span>Welcome</span></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Features <span class="caret"></span></a><span>Browse</span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="typography.html"> Typography</a></li>
              <li><a href="components.html"> Components</a></li>
              <li><a href="blocks.html"> Block Styles</a></li>
              <li><a href="icons.html"> Icons</a></li>
              <li><a href="widgets.html">Widgets</a></li>
              <li><a href="scroller.html">Image Scroller</a></li>
              <li><a href="gallery.html">Portfolio Gallery</a></li>
              <li><a href="tables.html">Tables</a></li>
              <li><a href="forms.html"> Forms</a></li>
              <li><a href="grid.html">Grid System</a></li>
            </ul>
          </li>
          <li><a href="about.html">About</a><span>Info</span></li>
          <li><a href="portfolio.html">Portfolio</a><span>Our Work</span></li>
          <li class="dropdown">
            <a href="blog-right-sidebar.html" class="dropdown-toggle" data-toggle="dropdown">Blog <span class="caret"></span></a><span>Read</span>
            <ul class="dropdown-menu" role="menu">
              <li><a href="blog-right-sidebar.html"> Blog - Right Sidebar</a></li>
              <li><a href="blog-left-sidebar.html">Blog - Left Sidebar</a></li>
              <li><a href="blog-no-sidebar.html">Blog - No Sidebar</a></li>
            </ul>
          </li>
          <li><a href="contact.html">Contact</a><span>Quote</span></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>

  <section class="section-default section-showcase">
    <div class="container">
      <div class="row">
        <div class="col-md-8">
          <h1>Clean Techie Template</h1>
          <h2 class="highlight-primary">Aliquam erat volutpat nullam quis nibs</h2>
          <ul class="list-feature margin-top-30">
            <li><i class="fa fa-bar-chart"></i> Fusce vitae lorem</li>
            <li><i class="fa fa-desktop"></i> Vitae purus commodo</li>
            <li><i class="fa fa-database"></i> Dapibus pellentesque posuere</li>
            <li><i class="fa fa-lightbulb-o"></i> Eros sit amet ultrices</li>
          </ul>
        </div>
        <div class="col-md-4">
          <img id="main" src="https://i.postimg.cc/VsGm864w/imac.png">
        </div>
      </div>
    </div>
  </section>


  <section class="section-primary content-icons">
    <div class="container">
      <div class="row">
        <div class="col-md-3">
          <h4>
            <i class="fa fa-cogs fa-white fa-lg"></i>
            Easily Customizable
          </h4>
        </div>
        <div class="col-md-3">
          <h4>
            <i class="fa fa-html5 fa-white fa-lg"></i>
            HTML5 Markup
          </h4>
        </div>
        <div class="col-md-3">
          <h4>
            <i class="fa fa-indent fa-white fa-lg"></i>
            Responsive
          </h4>
        </div>
        <div class="col-md-3">
          <h4>
            <i class="fa fa-send fa-white fa-lg"></i>
            Lightweight
          </h4>
        </div>
      </div>
    </div>
  </section>

  <section class="content-devices scroll300 padding-bottom-40">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing</h1>
          <img id="laptop" src="https://i.postimg.cc/cHTZ64SQ/laptop.png">
          <img id="desktop" src="https://i.postimg.cc/XvfnSk11/desktop.png">
          <img id="mobile" src="https://i.postimg.cc/wMGpcf3M/mobile.png">
        </div>
      </div>
    </div>
  </section>

  <footer id="footer-main">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h4>Our Products</h4>
          <ul>
            <li class="app-appstore"><a href="#">App Store</a></li>
            <li class="app-play"><a href="#">Google Play Store</a></li>
            <li class="app-droid"><a href="#">Android Market</a></li>
            <li class="app-windows"><a href="#">Windows</a></li>
            <li class="app-chrome"><a href="#">Google Chrome Store</a></li>
          </ul>
        </div>
        <div class="col-md-4">
          <h4>Our Company</h4>
          <ul>
            <li><a href="#">What We Do</a></li>
            <li><a href="#">Why Choose Us?</a></li>
            <li><a href="#">Advertise With Us</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Web Development</a></li>
          </ul>
        </div>
        <div class="col-md-4">
          <h4>Our Support</h4>
          <ul>
            <li><a href="#">Support Home</a></li>
            <li><a href="#">Our Community</a></li>
            <li><a href="#">Send A Ticket</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>


  <!-- Bootstrap core JavaScript
    ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js" integrity="sha256-JMwpUzWY+WKCPEIpvCgEh2RqJ6QqlSV8Md4bmxjzcQ8="
    crossorigin="anonymous"></script>


  <script>
    $(document).ready(function () {

      $('#main').addClass('animate')

      $(window).scroll(function () {
        // this = window
        var y = $(this).scrollTop();

        if (y >= 200) {
          $('#laptop').addClass('animate')
          $('#mobile').addClass('animate')
        }

        if (y < 200) {
          $('#laptop').removeClass('animate')
          $('#mobile').removeClass('animate')
        }

      });

    })

  </script>

</body>

</html>