<!
DOCTYPE html>
<!—Coding By CodingNepal – www.codingnepalweb.com
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<meta name=”viewport” content=”width=device-width, initial-
scale=1.0”>
<title>Coffee Website HTML and CSS | CodingNepal</title>
<link rel=”stylesheet” href=”style.css”>
<!—Google Fonts Links For Icon
<link rel=”stylesheet” href=https://fonts.googleapis.com/css2?
family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0>
<style>
/* Importing Google font – Poppins */
@import url(‘https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700&display=swap’);
{
Margin: 0;
Padding: 0;
Box-sizing: border-box;
Font-family: ‘Poppins’, sans-serif;
Header {
Position: fixed;
Top: 0;
Left: 0;
Width: 100%;
Padding: 20px;
Header .navbar {
Display: flex;
Align-items: center;
Justify-content: space-between;
Max-width: 1200px;
Margin: 0 auto;
.navbar .logo {
Color: #fff;
Font-weight: 600;
Font-size: 2.1rem;
Text-decoration: none;
.navbar .logo span {
Color: #C06B3E;
.navbar .menu-links {
Display: flex;
List-style: none;
Gap: 35px;
}
.navbar a {
Color: #fff;
Text-decoration: none;
Transition: 0.2s ease;
.navbar a:hover {
Color: #C06B3E;
.hero-section {
Height: 100vh;
Background-image: url(https://www.codingnepalweb.com/demos/create-
responsive-coffee-website-html-css/hero-bg.jpg);
Background-position: center;
Background-size: cover;
Display: flex;
Align-items: center;
Padding: 0 20px;
.hero-section .content {
Max-width: 1200px;
Margin: 0 auto;
Width: 100%;
Color: #fff;
.hero-section .content h2 {
Font-size: 3rem;
Max-width: 600px;
Line-height: 70px;
.hero-section .content p {
Font-weight: 300;
Max-width: 600px;
Margin-top: 15px;
.hero-section .content button {
Background: #fff;
Padding: 12px 30px;
Border: none;
Font-size: 1rem;
Border-radius: 6px;
Margin-top: 38px;
Cursor: pointer;
Font-weight: 500;
Transition: 0.2s ease;
}
.hero-section .content button:hover {
Color: #fff;
Background: #C06B3E;
#close-menu-btn {
Position: absolute;
Right: 20px;
Top: 20px;
Cursor: pointer;
Display: none;
#hamburger-btn {
Color: #fff;
Cursor: pointer;
Display: none;
@media (max-width: 768px) {
Header {
Padding: 10px;
Header.show-mobile-menu::before {
Content: “”;
Position: fixed;
Left: 0;
Top: 0;
Width: 100%;
Height: 100%;
Backdrop-filter: blur(5px);
.navbar .logo {
Font-size: 1.7rem;
#hamburger-btn, #close-menu-btn {
Display: block;
.navbar .menu-links {
Position: fixed;
Top: 0;
Left: -250px;
Width: 250px;
Height: 100vh;
Background: #fff;
Flex-direction: column;
Padding: 70px 40px 0;
Transition: left 0.2s ease;
}
Header.show-mobile-menu .navbar .menu-links {
Left: 0;
.navbar a {
Color: #000;
.hero-section .content {
Text-align: center;
.hero-section .content :is(h2, p) {
Max-width: 100%;
.hero-section .content h2 {
Font-size: 2.3rem;
Line-height: 60px;
.hero-section .content button {
Padding: 9px 18px;
</style>
</head>
<body>
<header>
<nav class=”navbar”>
<a class=”logo” href=”#”>Coffee<span>.</span></a>
<ul class=”menu-links”>
<span id=”close-menu-btn” class=”material-symbols-
outlined”>close</span>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Testimonials</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
<span id=”hamburger-btn” class=”material-symbols-
outlined”>menu</span>
</nav>
</header>
<section class=”hero-section”>
<div class=”content”>
<h2>Start Your Day With Fresh Coffee</h2>
<p>
Coffee is a popular and beloved beverage enjoyed by
People around the world.Awaken your senses with a steaming cup of
liquid motivation.
</p>
<button>Order Now</button>
</div>
</section>
<script>
Const header = document.querySelector(“header”);
Const hamburgerBtn = document.querySelector(“#hamburger-btn”);
Const closeMenuBtn = document.querySelector(“#close-menu-btn”);
// Toggle mobile menu on hamburger button click
hamburgerBtn.addEventListener(“click”, () =>
header.classList.toggle(“show-mobile-menu”));
// Close mobile menu on close button click
closeMenuBtn.addEventListener(“click”, () => hamburgerBtn.click());
</script>
</body>
</html>
