<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<!-- Berita Terkini -->
<div class="container">
<div class="row">
<div class="col-md-12 root">
<h2 class="text-center">
Berita Terkini
<div class="border-root">
<div></div>
<div></div>
<div></div>
</div>
</h2>
</div>
</div>
</div>
<div class="news-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="news-image">
<div class="news-img">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/blog1.jpg" alt="">
</div>
<div class="news-head">
<a class="news-title" href="#">Preparing Packages to Board</a>
<p>Got kind of tired packin' and unpackin' - town to town and up and down the dial. Here's the story of a lovely lady who was up three very lovely girls.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="news-image">
<div class="news-img">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/blog1.jpg" alt="">
</div>
<div class="news-head">
<a class="news-title" href="#">Preparing Packages to Board</a>
<p>Got kind of tired packin' and unpackin' - town to town and up and down the dial. Here's the story of a lovely lady who was up three very lovely girls.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="news-image">
<div class="news-img">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/blog1.jpg" alt="">
</div>
<div class="news-head">
<a class="news-title" href="#">Preparing Packages to Board</a>
<p>Got kind of tired packin' and unpackin' - town to town and up and down the dial. Here's the story of a lovely lady who was up three very lovely girls.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Produk Unggulan -->
<div class="container mt-2">
<div class="row">
<div class="col-md-12 root">
<h2 class="text-center">
Produk Unggulan
<div class="border-root">
<div></div>
<div></div>
<div></div>
</div>
</h2>
</div>
</div>
</div>
<div class="news-section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="news-image">
<div class="news-img">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/blog1.jpg" alt="">
</div>
<div class="news-head">
<a class="news-title" href="#">Preparing Packages to Board</a>
<p>Got kind of tired packin' and unpackin' - town to town and up and down the dial. Here's the story of a lovely lady who was up three very lovely girls.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="news-image">
<div class="news-img">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/blog1.jpg" alt="">
</div>
<div class="news-head">
<a class="news-title" href="#">Preparing Packages to Board</a>
<p>Got kind of tired packin' and unpackin' - town to town and up and down the dial. Here's the story of a lovely lady who was up three very lovely girls.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="news-image">
<div class="news-img">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/blog1.jpg" alt="">
</div>
<div class="news-head">
<a class="news-title" href="#">Preparing Packages to Board</a>
<p>Got kind of tired packin' and unpackin' - town to town and up and down the dial. Here's the story of a lovely lady who was up three very lovely girls.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(https://wallpaper.wiki/wp-content/uploads/2017/05/wallpaper.wiki-Beautiful-Full-HD-Wallpaper-Download-Free-PIC-WPE0010098.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
@media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
/*heading berita terkini*/
.root h2{
position:relative;
padding-bottom:10px;
}
.root h2 div.border-root div{
position:absolute;
bottom:0;
height:5px;
background:red;
}
.root h2 div.border-root div:first-child, .root h2 div.border-root div:last-child{
width:30px;
}
.root h2 div.border-root div:first-child{
left:0;
}
.root h2 div.border-root div:nth-child(2){
width:80px;
left:0;
right:0;
margin:0 auto;
}
.root h2 div.border-root div:last-child{
right:0;
}
/*grid berita terkini*/
.root .border-root{
position: relative;
width: 200px;
margin: 0 auto;
margin-top: 15px;
}
.news-head p {
margin-top:5px;
font-size : 15px;
line-height: 22px;
}
.news-head a {
font-size: 18px;
text-transform: uppercase;
color:#000;
}
.pt-1{
padding-top: 100px!important;
}
.pt-2{
padding-top: 200px!important;
}
.mt-1{margin-top: 100px!important;}
.mt-2{margin-top: 200px!important;}
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
