HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KEDAI KOPI</title>
<!-- FONTS -->
<link rel="preconnect" href="[Link]
<link rel="preconnect" href="[Link] crossorigin>
<link href="[Link]
family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,2
00;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet">
<!-- Feather Icons -->
<script src="[Link]
<!-- My Style -->
<link rel="stylesheet" href="css/[Link]">
</head>
<body>
<!-- Navbar star -->
<nav class="navbar">
<a href="#" class="navbar-logo">Cyro<span>Kopi</span></div></a>
<div class="navbar-nav">
<a href="#home">Home</a>
<a href="#about">Tentang Kami</a>
<a href="#menu">Menu</a>
<a href="#contact">Kontak</a>
</div>
<div class="navbar-extra">
<a href="#" id="search"><i data-feather="search"></i></a>
<a href="#" id="shopping-cart"><i data-feather="shopping-cart"></i></a>
<a href="#" id="hamburger-menu"><i data-feather="menu"></i></a>
</div>
</nav>
<!-- Navbar end -->
<!-- Hero Section start -->
<section class="hero" id="home">
<main class="content">
<h1>Mari Nikmati Secangkir<span> Kopi</span></h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, enim.</p>
<a href="#" class="cta">Beli Sekarang</a>
</main>
</section>
<!-- Hero section end -->
<!-- About Section star -->
<section id="about" class="about">
<h2><span>Tentang</span> Kami</h2>
<div class="row">
<div class="about-img">
<img src="img/[Link]" alt="Tentang Kami">
</div>
<div class="content">
<h3>Kenapa memilih Kopi kami</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur ducimus
voluptatum [Link], voluptatum ccusantium</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicingelit. Hoc deserunt iure amet
facilis eos a quo cum voluptates molestias nihil.</p>
</div>
</div>
</section>
<!-- About Section end -->
<!-- Menu Section start -->
<section id="menu" class="menu">
<h2><span>Menu</span> Kami</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, dolores
inventore. Sint eaque totam ducimus
</p>
<div class="row">
<div class="menu-card">
<img src="img/menu/[Link]" alt="Espresso" class="menu-card-img">
<h3 class="menu-card-title">- Espresso -</h3>
<p class="menu-card-price">IDR 15</p>
</div>
</div>
</section>
<!-- Menu Section end -->
<!-- Contact Section star -->
<section id="contact" class="contact">
<h2><span>Kontak</span> Kami</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, dolores
inventore. Sint eaque totam ducimus
</p>
<div class="row">
<iframe src="[Link]
1d15941.701028815121!2d111.6120982434639!3d-2.6889619066164117!2m3!1f0!2f0!3f0!
3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e08ee569bcb34d9%3A0x3f7bf89a51bcbb98!
2sPangkalanbuun%2C%20Mendawai%2C%20Kec.%20Arut%20Sel.%2C%20Kabupaten
%20Kotawaringin%20Barat%2C%20Kalimantan%20Tengah!5e0!3m2!1sid!2sid!
4v1737002733107!5m2!1sid!2sid" allowfullscreen="" loading="lazy" referrerpolicy="no-
referrer-when-downgrade" class="map"></iframe>
<form action="">
<div class="input-group">
<i data-feather="user"></i>
<input type="text" placeholder="nama">
</div>
<div class="input-group">
<i data-feather="mail"></i>
<input type="text" placeholder="email">
</div>
<div class="input-group">
<i data-feather="phone"></i>
<input type="text" placeholder="no hp">
</div>
<button type="submit" class="btn">kirim pesan</button>
</form>
</div>
</section>
<!-- Contact Section end -->
<!-- Feather Icon -->
<script>
[Link]();
</script>
<!-- My Javascript -->
<script src="js/[Link]"></script>
</body>
</html>
CSS
:root {
--primary: #b6895b;
--bg: #010101;
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
body {
font-family: 'Poppins', sans-serif;
background-color: var(--bg);
color: #fff;
min-height: 5000px;
/* Navbar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.4rem 7%;
background-color: rgb(1, 1, 1, 0.8);
border-bottom: 1px solid #b6895b;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
.navbar .navbar-logo {
font-size: 2rem;
font-weight: 700;
color: #0cc6ff;
font-style: italic;
.navbar .navbar-logo span {
color: var(--primary);
.navbar .navbar-nav a{
color: #fff;
display: inline-block;
font-size: 1.3rem;
margin: 0 1rem;
.navbar .navbar-nav a:hover {
color: var(--primary);
.navbar .navbar-nav a::after {
content: '';
display: block;
padding: 0.5rem;
border-bottom: 0.1rem solid var(--primary);
transform: scaleX(0);
transition: 0.2s linear;
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.5);
.navbar .navbar-extra a {
color: #fff;
margin: 0 0.5rem;
.navbar .navbar-extra a:hover {
color: var(--primary);
}
#hamburger-menu {
display: none;
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
background-image: url('../img/[Link]');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
.hero::after {
content: ' ';
display: block;
position: absolute;
width: 100%;
height: 30%;
bottom: 0;
background: linear-gradient(0deg,rgba(1, 1, 3, 1) 8%, rgba(255,255,255,0)25%);
}
.hero .content {
padding: 1.4rem 7%;
max-width: 60rem;
.hero .content h1 {
font-size: 4rem;
color: #fff;
text-shadow: 1px 1px 3px rgba(1,1,3,0.5);
line-height: 1.2;
.hero .content h1 span {
color: var(--primary);
.hero .content p {
font-size: 1.6rem;
margin-top: 1rem;
line-height: 1.4;
font-weight: 100;
text-shadow: 1px 1px 3px rgba(1,1,3,0.5);
mix-blend-mode: difference;
.hero .content .cta {
margin-top: 1rem;
display: inline-block;
padding: 1rem 3rem;
font-size: 1.4rem;
color: #fff;
background-color: var(--primary);
border-radius: 0.5rem;
box-shadow: 1px 1px 3px rgba(1, 1, 3, 0.5);
/* About Section */
.about,
.menu,
.contact {
padding: 8rem 7% 1.4rem;
.about h2,
.menu h2,
.contact h2 {
text-align: center;
font-size: 2.6rem;
margin-bottom: 3rem;
.about h2 span,
.menu h2 span,
.contact h2 span {
color: var(--primary);
}
.about .row {
display: flex;
.about .row .about-img {
flex: 1 1 45rem;
.about .row .about-img img {
width: 100%;
.about .row .content {
flex: 1 1 35rem;
padding: 0 1rem;
.about .row .content h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
.about .row .content p {
margin-bottom: 0.8rem;
font-size: 1.4rem;
font-weight: 100;
line-height: 1.6;
/* Menu Section */
.menu h2,
.contact h2 {
margin-bottom: 1rem;
.menu p,
.contact p {
text-align: center;
max-width: 30rem;
margin: auto;
font-weight: 100;
line-height: 1.6;
/* Contact Section */
.contact .row {
display: flex;
margin-top: 2rem;
background-color: #222;
.contact .row .map {
flex: 1 1 45rem;
width: 100%;
object-fit: cover;
.contact .row form {
flex: 1 1 45rem;
padding: 5rem 2rem;
text-align: center;
.contact .row form .input-group {
display: flex;
align-items: center;
margin-top: 2rem;
background-color: var(--bg);
border: 1px solid #eee;
padding-left: 2rem;
.contact .row form .input-group input {
width: 100%;
padding: 2rem;
font-size: 1.7rem;
background: none;
color: #fff;
.contact .row form .btn {
margin-top: 3rem;
display: inline-block;
padding: 1rem 3rem;
font-size: 1.7rem;
color: #fff;
background-color: var(--primary);
cursor: pointer;
/* Media Queries */
/* Laptop */
@media (max-width: 1366px) {
html {
font-size: 75%;
/* Tablet */
@media (max-width: 768px) {
html {
font-size: 62.5%;
#hamburger-menu {
display: inline-block;
.navbar .navbar-nav {
position: absolute;
top: 100%;
right: -100%;
background-color: #fff;
width: 30rem;
height: 100vh;
transition: 0.3s;
.navbar .[Link] {
right: 0;
.navbar .navbar-nav a{
color: var(--bg);
display: block;
margin: 1.5rem;
padding: 0.5rem;
font-size: 2rem;
.navbar .navbar-nav a::after {
transform-origin: 0 0;
.navbar .navbar-nav a:hover::after {
transform: scaleX(0.2);
}
.about .row {
flex-wrap: wrap;
.about .row .about-img img {
height: 24rem;
object-fit: cover;
object-position: center;
.about .row .content {
padding: 0;
.about .row .content h3 {
margin-top: 1rem;
font-size: 2rem;
.about .row .content p {
font-size: 1.6rem;
.contact .row {
flex-wrap: wrap;
}
.contact .row .map {
height: 30rem;
.contact .row form {
padding-top: 0;
/* Mobile Phone */
@media (max-width: 458px) {
html {
font-size: 55%;
JSS
// Toggle class active
const navbarNav = [Link]('.navbar-nav');
// ketika hamburger menu di klik
[Link]('#hamburger-menu').onclick = () => {
[Link]('active');
};
// Klik di luar sidebar untu menghilangkan nav
const hamburger = [Link]('#hamburger-menu');
[Link]('click', function(e) {
if( && ) {
[Link]('active');
})