W3Schools Tryit Editor

<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Parallax Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

/* Parallax images */
.bgimg-1,.bgimg-2,.bgimg-3 {
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}

.bgimg-1 {
  background-image:url('/w3images/parallax1.jpg');
  min-height:100%;
}

.bgimg-2 {
  background-image:url('/w3images/parallax2.jpg');
  min-height:400px;
}

.bgimg-3 {
  background-image:url('/w3images/parallax3.jpg');
  min-height:400px;
}

.w3-wide {
  letter-spacing:10px;
}

.w3-hover-opacity {
  cursor:pointer;
}

/* Turn off parallax scrolling on tablets and phones */
@media only screen and (max-device-width:1600px) {
  .bgimg-1,.bgimg-2,.bgimg-3 {
    background-attachment:scroll;
    min-height:400px;
  }
}
</style>

<body>

<div class="w3-top">
  <nav class="w3-flex" id="myNavbar">

<a href="#about"
    class="w3-button w3-hide-small">
    <i class="fa fa-user"></i> ABOUT
    </a>

<a href="#portfolio"
    class="w3-button w3-hide-small">
    <i class="fa fa-th"></i> PORTFOLIO
    </a>

<a href="#contact"
    class="w3-button w3-hide-small">
    <i class="fa fa-envelope"></i> CONTACT
    </a>

</nav>

<div id="navDemo"
  class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">

<a href="#about" class="w3-bar-item w3-button"
    onclick="toggleFunction()">ABOUT</a>

<a href="#portfolio" class="w3-bar-item w3-button"
    onclick="toggleFunction()">PORTFOLIO</a>

<a href="#contact" class="w3-bar-item w3-button"
    onclick="toggleFunction()">CONTACT</a>

<a href="#" class="w3-bar-item w3-button">SEARCH</a>

</div>
</div>

<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">

<div class="w3-display-middle" style="white-space:nowrap">
    <span class="w3-center w3-padding-large w3-black
    w3-xlarge w3-wide w3-animate-opacity">
    MY <span class="w3-hide-small">WEBSITE</span> LOGO
    </span>
  </div>

</div>

<section class="w3-content w3-container w3-padding-64" id="about">

<h3 class="w3-center">ABOUT ME</h3>

<p class="w3-center">
<em>I love photography</em>
</p>

<p>
We have created a fictional "personal" website/blog, and our
fictional character is a hobby photographer. Lorem ipsum dolor sit
amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</p>

</div>

<p>
    Welcome to my website. I am lorem ipsum consectetur adipiscing
    elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu
    fugiat nulla pariatur.
    </p>

</div>

<p class="w3-large w3-center w3-padding-16">
I'm really good at:
</p>

<p class="w3-wide">
<i class="fa fa-camera"></i> Photography
</p>

<p class="w3-wide">
<i class="fa fa-laptop"></i> Web Design
</p>

<p class="w3-wide">
<i class="fa fa-photo"></i> Photoshop
</p>

</section>

<div class="w3-grid w3-center w3-dark-grey w3-padding-16"
style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">

<div class="w3-section">
<span class="w3-xlarge">14+</span><br>
Partners
</div>

<div class="w3-section">
<span class="w3-xlarge">55+</span><br>
Projects Done
</div>

<div class="w3-section">
<span class="w3-xlarge">89+</span><br>
Happy Clients
</div>

<div class="w3-section">
<span class="w3-xlarge">150+</span><br>
Meetings
</div>

</div>

<div class="bgimg-2 w3-display-container w3-opacity-min">

<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">
PORTFOLIO
</span>
</div>

</div>

<section class="w3-content w3-container w3-padding-64" id="portfolio">

<p class="w3-center">
<em>
Here are some of my latest work.<br>
Click on the images to make them bigger.
</em>
</p>

</div>

</section>

<div id="modal01"
class="w3-modal w3-black"
onclick="this.style.display='none'">

</div>
</div>

<div class="bgimg-3 w3-display-container w3-opacity-min">

<div class="w3-display-middle">
<span class="w3-xxlarge w3-text-white w3-wide">
CONTACT
</span>
</div>

</div>

<section class="w3-content w3-container w3-padding-64" id="contact">

<h3 class="w3-center">WHERE I WORK</h3>

<p class="w3-center">
<em>I'd love your feedback!</em>
</p>

<div>

<div class="w3-large w3-margin-bottom">
      <i class="fa fa-map-marker fa-fw w3-xlarge w3-margin-right"></i>
      Chicago, US<br>

<i class="fa fa-phone fa-fw w3-xlarge w3-margin-right"></i>
      Phone: +00 151515<br>

<i class="fa fa-envelope fa-fw w3-xlarge w3-margin-right"></i>
      Email: mail@mail.com
    </div>

<p>
    Swing by for a cup of <i class="fa fa-coffee"></i>,
    or leave me a note:
    </p>

</div>

<button class="w3-button w3-black w3-right"
      type="submit">SEND MESSAGE</button>

</form>

</div>
</div>

</section>

<footer class="w3-center w3-black w3-padding-64
w3-opacity w3-hover-opacity-off">

<p>
Powered by
<a href="https://www.w3schools.com/w3css/default.asp"
title="W3.CSS"
target="_blank"
class="w3-hover-text-green">w3.css</a>
</p>

</footer>

// Change navigation style when scrolling
window.onscroll = function() {
  var navbar = document.getElementById("myNavbar");

if (document.body.scrollTop > 100 ||
      document.documentElement.scrollTop > 100) {
    navbar.className =
      "w3-flex w3-card w3-animate-top w3-white";
  } else {
    navbar.className = "w3-flex";
  }
}

// Toggle navigation on small screens
function toggleFunction() {
  var x = document.getElementById("navDemo");

if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show","");
  }
}
</script>

</body>
</html>