FULL BUILT WEB PAGE

Resposive web page with nice navigation. All css no JQuery needed

by Glynne Turner

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
 <header>
  <h1 class="logo">Logo</h1>
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#scroll">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <label for="nav-toggle" class="nav-toggle-label">
    <span></span>
  </label>
</header>
<content>
<section class="parrallax bg flex-center">
  <div class="container-fluid">
    <div class="row flex-center text-center">
       <div class="col-md-6 fadeInUp animationDelayLong slowly animate  primary">CONTENT <br>CONTENT <br> </div>
       <div class="col-md-6  fadeInDown animationDelayLong slowly animate secondary">CONTENT</div>
    </div>
  </div>
</section>
<section class="parrallax  secondary flex-center">
  section 2 content here 
</section>
<section class="parrallax bg2 scroll container-fluid" id="scroll">
<div class="row">
  <div class="col-md-6 primary fadeInUp animationDelayLong slowly animate">
   section 3 content A here
 </div>
 <div class="col-md-6 secondary fadeInDown animationDelayLong slowly animate">
   section 3 content B here
 </div>
 </div>
</section>
</content>

CSS

*{margin:0;padding:0;box-sizing: border-box; text-decoration:none;scroll-behavior: smooth;}
 
:root{
  --primary-color: #0d8d5d;
  --primary-bg: #0d8d5d;
  --secondary-color:#075035;
  --secondary-bg:#075035;
  --header-color: #ffffff; 
} 
header{background-color: var(--primary-color); position:fixed; width:100%; text-align:center;z-index:999; padding-top:10px}
.logo{color: var(--secondary-color)}
content{padding-top:100px; } 
section{position:relative; padding:100px 0;}
.parrallax{ min-height: 100vh;  
  background-attachment: fixed; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}

.primary{background-color:var(--primary-bg); color: var(--secondary-color)}
.secondary{background-color:var(--secondary-bg);color: var(--primary-color) } 
.parrallax.secondary{ color:#ffffff; background-color:var(--secondary-color) }
.flex-center{ display:flex; align-items:center;height:100%}
 
.bg{ 
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStATV5_ZpO37AF61-4VPDOeFl2w2ODOvC2iw&usqp=CAU); 
}
.bg2{ 
  background-image: url(https://major.com.au/wp-content/uploads/2019/12/Feature-Electricians.jpg);
}
.bg3{
   
}



/* NAVIGATION STARTS HERE */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}
.nav-toggle-label {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1em;
  height: 100%;
  display: flex;
  align-items: center;
  padding:5px;
}
.nav-toggle-label:hover{cursor:pointer}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}
.nav-toggle-label span::before {
  bottom: 10px;
}
.nav-toggle-label span::after {
  top: 10px;
}
nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
 ...

JavaScript

var doAnimations = function() {

    // Calc current offset and get all animatables
    var offset = $(window).scrollTop() + $(window).height(),
      $animatables = $('.animate');

    // Unbind scroll handler if we have no animatables


    // Check all animatables and animate them if necessary
    $animatables.each(function(i) {
      var $animatable = $(this);
      if (($animatable.offset().top + $animatable.height() - 200) < offset) {
        $animatable.removeClass('animate').addClass('animated');
      } else {	
		$animatable.removeClass('animated').addClass('animate');
	  } 
    });
 };

  // Hook doAnimations on scroll, and trigger a scroll
  $(window).on('scroll', doAnimations);
  $(window).trigger('scroll');
  $(document).ready(function() {
    // we call the function 
    doAnimations();
  });