<body>
  <header class="main-header">
    <div class="header-wrapper">
      <div class="main-logo">MoGo</div>
      <nav>
        <ul class="main-menu">
          <li><a href="#section-2">About</a></li>
          <li><a href="#section-5">Service</a></li>
          <li><a href="#section-7">Work</a></li>
          <li><a href="#section-9">Blog</a></li>
          <li><a href="#main-footer">Contact</a></li>
          <li><a href="#"><span class="fa fa-shopping-cart"></span></a></li>
          <li><a href="#"><span class="fa fa-search"></span></a></li>
        </ul>
      </nav>
    </div>
  </header>
  <section id="section-1">
    <div class="content-slider">
      <input type="radio" id="banner1" class="sec-1-input" name="banner" checked>
      <input type="radio" id="banner2" class="sec-1-input" name="banner">
      <input type="radio" id="banner3" class="sec-1-input" name="banner">
      <input type="radio" id="banner4" class="sec-1-input" name="banner">
      <div class="slider">
        <div id="top-banner-1" class="banner">
          <div class="banner-inner-wrapper">
            <h2>Creative Template</h2>
            <h1>Welcome<br>to MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#section-2">Learn More</a></div>
          </div>
        </div>
        <div id="top-banner-2" class="banner">
          <div class="banner-inner-wrapper">
            <h2>What We Do</h2>
            <h1>Great<br>MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#section-4">Learn More</a></div>
          </div>
        </div>
        <div id="top-banner-3" class="banner">
          <div class="banner-inner-wrapper">
            <h2>Here We Are</h2>
            <h1>We Are<br>MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#section-6">Learn More</a></div>
          </div>
        </div>
        <div id="top-banner-4" class="banner">
          <div class="banner-inner-wrapper">
            <h2>Our Contacts</h2>
            <h1>Welcome<br>to MoGo</h1>
            <div class="line"></div>
            <div class="learn-more-button"><a href="#main-footer">Learn More</a></div>
          </div>
        </div>
      </div>
      <nav>
        <div class="controls">
          <label for="banner1"><span class="progressbar"><span class="progressbar-fill"></span></span><span>01</span> Intro</label>
          <label for="banner2"><span class="progressbar"><span class="progressbar-fill"></span></span><span>02</span> Work</label>
          <label for="banner3"><span class="progressbar"><span class="progressbar-fill"></span></span><span>03</span> About</label>
          <label for="banner4"><span class="progressbar"><span class="progressbar-fill"></span></span><span>04</span> Contacts</label>
        </div>
      </nav>
    </div>
  </section>
</body>
/* General Variables */
@main-font: Montserrat, sans-serif;
@content-font: Roboto, sans-serif;
@h3-font: 'Kaushan Script', cursive;
@main-color: #fff;
@icon-color: #95e1d3;

/* General Styles */
body {
	margin: 0 auto;
	padding: 0;
	font-size: 16px;
	background: @main-color;
	section {display: block;} 
	h1, h2, h3, h4, h5, h6, ul, li {
		margin: 0;
		padding: 0;
	}
	h1 {
		font-family: @main-font;
		font-weight: 700;
		text-transform: uppercase;
	}
	h2 {
		font-family: @main-font;
		font-size: 1.875em;
		font-weight: 700;
		text-transform: uppercase;
	}
	h3 {
		font-family: @h3-font;
		font-size: 1.5em;
		font-weight: 400;
	}
	h4 {
		font-family: @main-font;
		font-size: 0.875em;
		font-weight: 400;
		text-transform: uppercase;
	}
	p {
		line-height: 150%;
		font-family: @content-font;
		font-size: 0.9375em;
		color: #999;
	}
	li {list-style-type: none;}
	a {text-decoration: none;}
}
.bg-wrapper {
	width: 100%;
	height: 100%;
	background-image: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8));
}
.section-header {
	padding-top: 5.625em;
	text-align: center;
	h3 {margin-bottom: 0.5em;}
	.line-red {margin: 2.5em auto 2.9375em auto;}
}
.line-red {
	display: block;
	width: 4em;
	height: 0.1875em;
	margin: 0 auto;
	background: #f38181;
}

/* Main Header Styles */
.main-header {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
	font-family: @main-font;
	color: @main-color;
	background: transparent;
	.header-wrapper {
		display: block;
		width: 70%;
		margin: 0 auto;
		padding-top: 1em;
		.main-logo {
			float: left;
			font-weight: 700;
			font-size: 1.875em;
		}
		.main-menu {
			float: right;
			text-align: center;
			li {
				display: inline-block;
				padding: 0.75em 1.875em;
				a {
					padding-bottom: 0.75em;
					text-transform: uppercase;
					color: @main-color;
					font-size: 0.875em;
					&:hover {
						color: #fce38a;
						border-bottom: 0.1875em solid #fce38a;
						transition: .1s;
					}
					span {font-size: 1.2em;}
				}
				&:last-child {padding: 0.75em 0;}
				&:nth-child(6) a:hover, &:last-child a:hover {border: none;}
			}
		}
	}
}

/* Section-1 Styles */
#section-1 {
	height: 38em;
	color: @main-color;
	background-color: #222;
	.content-slider {
		position: relative;
		width: 100%;
		height: 100%;
		input {display: none;}
		.slider {
			position: relative;
			width: inherit;
			height: inherit;
			overflow: hidden;
			.banner {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: 0;
				width: inherit;
				height: inherit;
				text-align: center;
				background-repeat: no-repeat;
				background-position: 50% 50%;
				transition: all .5s ease;
				.banner-inner-wrapper {
					height: 100%;
					padding-top: 6em;
					background-image: linear-gradient(rgba(243,129,129,.9), rgba(252,227,138,.9));
					box-sizing: border-box;
					h2 {
						padding-bottom: 0.3em;
						font-family: @h3-font;
						font-weight: 400;
						font-size: 2.5em;
						text-transform: none;
					}
					h1 {
						font-size: 6em;
						line-height: 95%;
					}
					.line {
							display: block;
							width: 4em;
							height: 0.1875em;
							margin: 2.5em auto;
							background: @main-color;
					}
					.learn-more-button {
						padding-bottom: 5em;
						z-index: 15 !important;
						a {
							padding: 0.5em 2em;
							text-align: center;
							font-family: @main-font;
							font-size: 0.875em;
							color: @main-color;
							text-transform: uppercase;
							border: 0.1875em solid @main-color;
							&:hover {
								color: #e88382;
								border-color: #e88382;
								transition: .3s;
							}
						}
					}
				}
			}
			#top-banner-1 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-1.png') no-repeat center center; background-size: cover;}
			#top-banner-2 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-2.png') no-repeat center center; background-size: cover;}
			#top-banner-3 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-3.png') no-repeat center center; background-size: cover;}
			#top-banner-4 {background: url('https://checkboxes-demo.webdevs.co.ua/images/mogo/banner-4.png') no-repeat center center; background-size: cover;}
		}
		nav {
			position: absolute;
			bottom: 0.5em;
			width: 100%;
			z-index: 10;
			text-align: center;
			.controls {
				display: block;
				width: 70%;
				margin: 0 auto;
				font-family: @main-font;
				color: @main-color;
				label {
					position: relative;
					display: inline-block;
					width: 20%;
					height: 3.1em;
					overflow: hidden;
					margin: 0 1em;
					padding-top: 1em;
					text-align: left;
					text-transform: uppercase;
					font-family: @main-font;
					font-size: 1em;
					color: #f6eac5;
					font-weight: 400;
					cursor: pointer;
					transition: all .3s;
					.progressbar {
						position: absolute;
						top: 0;
						left: 0;
						height: 3px;
						width: 100%;
						background: #f6eac5;
						z-index: 100;
						.progressbar-fill {
							position: inherit;
							width: inherit;
							height: inherit;
							margin-left: -100%;
							background: #e88382;
						}
					}
					span {
						font-size: 1.4em;
						font-weight: 700;
					}
					&:hover {color: #e88382;}
				}
			}
		}
		#banner1:checked ~ .slider #top-banner-1,
		#banner2:checked ~ .slider #top-banner-2,
		#banner3:checked ~ .slider #top-banner-3,
		#banner4:checked ~ .slider #top-banner-4 {
			opacity: 1;
			z-index: 1;
		}
		#banner1:checked ~ nav label:nth-of-type(1),
		#banner2:checked ~ nav label:nth-of-type(2),
		#banner3:checked ~ nav label:nth-of-type(3),
		#banner4:checked ~ nav label:nth-of-type(4) {
			cursor: default;
			color: @main-color;
			transition: all .5s;
		}
		#banner1:checked ~ nav label:nth-of-type(1) .progressbar,
		#banner2:checked ~ nav label:nth-of-type(2) .progressbar,
		#banner3:checked ~ nav label:nth-of-type(3) .progressbar,
		#banner4:checked ~ nav label:nth-of-type(4) .progressbar {
			background: @main-color;
		}
		#banner1:checked ~ nav label:nth-of-type(1) .progressbar-fill,
		#banner2:checked ~ nav label:nth-of-type(2) .progressbar-fill,
		#banner3:checked ~ nav label:nth-of-type(3) .progressbar-fill,
		#banner4:checked ~ nav label:nth-of-type(4) .progressbar-fill {
			animation: progressBarFill 5s linear;
		}
	}
}

/* Animations */
@keyframes progressBarFill {
	from {margin-left: -100%;}
	to {margin-left: 0;}
}

/* Media Queries */
@media only screen and (min-width: 1920px) {
	body {font-size: 22px;}
	.main-header .header-wrapper {width: 57%;}
	#section-1 {height: 46em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 12em;}
}

@media only screen and (max-width: 1919px) {
	body {font-size: 20px;}
	.main-header .header-wrapper {width: 60%;}
	#section-1 {height: 43em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 11em;}
}

@media only screen and (max-width: 1680px) {
	body {font-size: 18px;}
	.main-header .header-wrapper {width: 65%;}
	#section-1 {height: 40em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 9em;}
}

@media only screen and (max-width: 1366px) {
	body {font-size: 16px;}
	.main-header .header-wrapper {width: 70%;}
}

@media only screen and (max-width: 1120px) {
	.main-header .header-wrapper .main-menu li {padding: 0.75em 1.4em;}
	#section-1 {height: 35em;}
	#section-1 .content-slider nav {bottom: -0.2em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 7em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper .line {margin: 2em auto;}
}

@media only screen and (max-width: 1024px) {
	body {font-size: 14px;}
	.main-header .header-wrapper .main-menu li {padding: 0.75em 1.3em;}
	#section-1 .content-slider nav {bottom: 0;}
	#section-1 .content-slider nav .controls {width: 80%;}
}

@media only screen and (max-width: 860px) {
	.main-header .header-wrapper .main-menu li {padding: 0.75em 0.9em;}
	#section-1 {height: 29em;}
	#section-1 .content-slider nav {bottom: -1em;}
	#section-1 .content-slider nav .controls {width: 90%;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper h2 {font-size: 2em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper h1 {font-size: 4.5em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper {padding-top: 5em;}
}

@media only screen and (max-width: 768px) {
	.main-header .header-wrapper .main-menu li {padding: 0.75em 0.5em;}
	#section-1 {height: 27em;}
	#section-1 .content-slider nav .controls {width: 100%;}
	#section-1 .content-slider nav .controls label {width: 19%; font-size: 0.8em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper .line {margin: 1.7em auto;}
}

@media only screen and (max-width: 650px) {.main-header .header-wrapper {width: 95%;}}

@media only screen and (max-width: 480px) {
	.main-header .header-wrapper {width: 97%;}
	.main-header .header-wrapper .main-logo {display: none;}
	.main-header .header-wrapper .main-menu li {padding: 0.2em 0.3em;}
	.main-header .header-wrapper .main-menu li:last-child,
	.main-header .header-wrapper .main-menu li:nth-child(6) {padding: 0.2em 0.7em;}
	#section-1 {height: 26em;}
	#section-1 .content-slider nav {bottom: -0.5em;}
	#section-1 .content-slider nav .controls label {width: 40%; font-size: 0.7em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper h2 {font-size: 1.5em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper h1 {font-size: 3em;}
	#section-1 .content-slider .slider .banner .banner-inner-wrapper .line {margin: 1.7em auto;}
}
View Compiled
///// Section-1 CSS-Slider /////    
  // Auto Switching Images for CSS-Slider
  function bannerSwitcher() {
    next = $('.sec-1-input').filter(':checked').next('.sec-1-input');
    if (next.length) next.prop('checked', true);
    else $('.sec-1-input').first().prop('checked', true);
  }

  var bannerTimer = setInterval(bannerSwitcher, 5000);

  $('nav .controls label').click(function() {
    clearInterval(bannerTimer);
    bannerTimer = setInterval(bannerSwitcher, 5000)
  });


///// Anchor Smooth Scroll /////
//   $('.main-menu a, .learn-more-button a').click(function(e){
    
//     e.preventDefault();
        
//     var target = $(this).attr('href');
        
//     $('html, body').animate({scrollTop: $(target).offset().top}, 1000);
//     return false;
//   });

External CSS

  1. https://dl.dropboxusercontent.com/u/69747888/MoGo%20carousel/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://use.fontawesome.com/8ae46bccf5.js