<div class="container">
<nav class="navbar">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id="home">
<h1>Welcome To My Site</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
<section id="about">
<h1>About</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
<section id="service">
<h1>Service</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
<section id="contact">
<h1>Contact</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
</div>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #fff;
height: 100vh;
line-height: 1.6;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
/* CSS Smooth Scroll */
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.lead {
font-size: 1.5rem;
}
.navbar {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
height: 60px;
background: rgba(0,0,0,0.7);
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 0 1rem;
padding: 1rem;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
color: #f4f4f4;
}
.navbar ul li a:hover {
color: skyblue;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
/* Scroll Snap */
scroll-snap-align: center;
}
section h1 {
font-size: 4rem;
}
/* Section Images */
section#home {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;;
}
section#about {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;;
}
section#service {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;;
}
section#contact {
background: url('https://source.unsplash.com/2aAHlfDOhJM/1600x900') no-repeat center center/cover;;
}
// Option 2 - jQuery Smooth Scrolling
// $('.navbar a').on('click', function (e) {
// if (this.hash !== '') {
// e.preventDefault();
// const hash = this.hash;
// $('html, body')
// .animate({
// scrollTop: $(hash).offset().top
// },800);
// }
// });
// Option 3 - Smooth Scroll - https://github.com/cferdinandi/smooth-scroll
// const scroll = new SmoothScroll('.navbar a[href*="#"]', {
// speed: 500
// });
This Pen doesn't use any external CSS resources.