Hello fellow developers !!!
Are you ready to embark on a coding adventure? Today, we're diving into the creation of a mouthwatering Burger Website Landing Page using the perfect blend of HTML and CSS.
Feel free to adjust the text further to suit your preferences!!!
Preview
Click here to download images :- Download
HTML Code Structure :-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Burger King</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="script.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@400;700&family=Josefin+Sans:wght@500&display=swap"
rel="stylesheet">
</head>
<body>
<!-- Navbar Starts from Here -->
<nav class="navbar">
<h2>Burger King</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<!-- Home Section Starts from Here -->
<section id="home">
<div class="divider">
<div class="home-left">
<h2 class="h-secondary color-primary">IT IS A GOOD TIME FOR THE TASTE OF BURGERS</h2>
<h1 class="h-primary color-primary">BURGER</h1>
<h3 class="h-secondary color-primary">WEEK</h3>
</div>
<img class="burger-home" src="Images/burger.png" alt="">
</div>
</section>
<!-- Main Section Starts from Here -->
<section id="main" class="home-bottom">
<div class="bottom-container">
<div class="home-bottom-left"></div>
<div class="home-bottom-right">
<img src="Images/img1.jpg" alt="">
<img src="Images/img1.jpg" alt="">
</div>
</div>
</section>
<!-- Center Section Starts from Here -->
<section class="center-div" id="food">
<h2 class="h-secondary center btn-heading">ALWAYS TESTY BURGERS</h2>
<h1 class="center color-primary center-heading">CHOOSE & ENJOY</h1>
<p class="center para-font">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus alias libero
laboriosam
pariatur quo quisquam veritatis doloremque, <br> aliquam dolorum quod dignissimos, sunt quas tenetur
perferendis adipisci. Ab accusantiatur. Quaerat.</p>
<div class="burger-container">
<div class="burger-item">
<img src="Images/burger2.png" alt="">
<h2 class="center color-primary burger-heading">Burger 1</h2>
<p class="center">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. Repudiandae<br>
architecto eos est tempore? Ipsa, totam.</p>
<a href="" class="order-btn">ORDER NOW</a>
</div>
<div class="burger-item">
<img src="Images/burger.png" alt="">
<h2 class="center color-primary burger-heading">Burger 2</h2>
<p class="center">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. Repudiandae <br>
architecto eos est tempore? Ipsa, totam.</p>
<a href="" class="order-btn">ORDER NOW</a>
</div>
<div class="burger-item">
<img src="Images/burger2.png" alt="">
<h2 class="center color-primary burger-heading">Burger 3</h2>
<p class="center">Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit. Repudiandae <br>
architecto eos est tempore? Ipsa, totam.</p>
<a href="" class="order-btn">ORDER NOW</a>
</div>
</div>
</section>
<!-- Event Section Starts from Here -->
<section id="event-container">
<div class="event-item">
<div class="event-content">
<h2 class="para-font color-primary">DISCOVER</h2>
<h2 class="normal-hading color-primary">UPCOMING EVENTS</h2>
<p class="event-para para-font">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe totam
itaque
voluptate facere deleniti laudantium sapiente aut nostrum doloribus iste hic placeat, numquam magni
dolores, quaerat minus quae, repudiandae voluptates pousandae! Adipisci culpa magni cum, eaque nam
error placeat magnam asperiores perferenvoluptate maiores fugit, dicta</p>
</div>
<img src="Images/eventBurger.jpg" alt="">
</div>
</section>
<!-- Footer Location Section Starts from Here -->
<section id="burger-footer">
<div class="footer-bg">
<div class="left-footer">
<img src="Images/footerLogo.png" alt="">
<p class="color-white para-font">Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Quas,
optio. Lorem ipsum dolor sit amet, consectetur adipisicing <br> elit. Veniam, totam? Lorem, ipsum
dolor sit amet consectetur <br> adipisicing elit. Ea, molestiae.br Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Totam, perspiciatis? </p>
</div>
<div class="right-footer color-white footer-font">
Mumbai, Maharashtra, India
contact.geekshelp@gmail.com
</div>
</div>
</section>
<!-- Footer Starts from Here -->
<footer class=" center footer"> © LOADS OF LOGIC 2021-22. ALL RIGHTS RESERVED</footer>
</body>
</html>
CSS Code Structure :-
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Dongle', sans-serif;
scroll-behavior: smooth;
}
.navbar {
width: 100%;
padding: 1.5rem 6rem;
display: flex;
justify-content: space-between;
align-items: center;
height: 4rem;
background: rgb(26, 25, 25);
}
.navbar h2 {
color: white;
}
.navbar ul {
display: flex;
}
.navbar li {
list-style: none;
}
.navbar ul li a {
text-decoration: none;
padding: 5px 1rem;
margin: 0 10px;
color: rgb(232, 228, 102);
position: relative;
}
.navbar ul li a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-top: 2px solid rgb(232, 228, 102);
border-left: 2px solid rgb(232, 228, 102);
transition: all .2s;
}
.navbar ul li a::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
box-sizing: border-box;
border-bottom: 2px solid rgb(232, 228, 102);
border-right: 2px solid rgb(232, 228, 102);
transition: all .2s;
}
.navbar ul li a:hover:after,
.navbar ul li a:hover::before {
content: '';
width: 10%;
height: 20%;
transform: rotate(360deg);
}
#home {
width: 100%;
}
.home-left h2 {
padding: 7px;
border: 2px dotted #3d2514;
}
.home-left h3 {
position: relative;
bottom: 8px;
font-size: 2.2rem;
}
.divider {
margin: 15px;
display: flex;
justify-content: space-around;
align-items: center;
}
.burger-home {
width: 330px;
padding: 20px;
cursor: pointer;
transition: 1s all;
}
.burger-home:hover {
transform: translateY(-15px);
}
.bottom-container {
padding: 15px;
display: flex;
justify-content: space-around;
align-items: center;
}
.home-bottom-left {
background-image: url(Images/burger1.jpg);
background-repeat: no-repeat;
background-size: cover;
padding: 15px;
width: 100%;
height: 420px;
border-radius: 10px;
background-position: center;
box-shadow: 5px 13px 23px 4px rgb(78, 78, 78);
}
.home-bottom-right {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.home-bottom-right img {
margin: 25px;
border-radius: 10px;
box-shadow: 5px 13px 23px 4px rgb(78, 78, 78);
}
.center-div {
margin-top: 20px;
}
.center-div h1,
p {
margin: 15px 0px;
}
.burger-container {
display: flex;
justify-content: space-around;
align-items: center;
padding: 20px;
}
.burger-item {
padding: 10px;
margin: 20px;
display: flex;
align-items: center;
flex-direction: column;
}
.burger-item img {
width: 240px;
cursor: pointer;
transition: 1s all;
}
.burger-item img:hover {
transform: scale(1.1);
}
#event-container {
margin-top: 20px;
width: 100%;
padding: 30px 70px;
}
.event-item {
width: 100%;
padding: 20px;
display: flex;
justify-content: space-around;
align-items: center;
box-shadow: 0px 13px 23px 4px black;
border-radius: 20px;
}
.event-item img {
width: 60%;
border-radius: 13px;
}
.event-content {
margin: 0px 20px;
}
.event-para {
padding: 2px -2px;
line-height: 30px;
text-align: left;
font-size: 20px;
}
#burger-footer {
width: 100%;
padding: 25px;
}
.footer-bg {
height: 100%;
width: 100%;
background-image: url('Images/footerBg.jpg');
display: flex;
justify-content: space-around;
align-items: center;
padding: 0px 35px;
}
.left-footer {
margin: 30px;
}
.right-footer {
margin-top: 30px;
margin-right: 30px;
margin-bottom: 30px;
}
.left-footer .color-white {
padding-right: 100px;
}
.left-footer img {
cursor: pointer;
width: 300px;
}
.left-footer p {
line-height: 30px;
}
footer {
background-color: #ffC045;
padding: 15px;
}
h1,
h2,
h3 {
color: white;
}
.color-white {
color: white;
}
.btn-heading {
color: black;
background-color: #ffC045;
padding: 5px 15px;
display: block;
width: 18%;
margin: 0 auto;
}
.center {
text-align: center;
}
.h-primary {
font-size: 5rem;
line-height: 111px;
cursor: pointer;
}
.color-primary {
color: #3d2514;
}
.h-secondary {
font-size: 1.4rem;
}
.normal-hading {
font-size: 2rem;
}
.order-btn {
color: white;
font-size: 1rem;
text-decoration: none;
padding: 7px 18px;
border-radius: 15px;
border: 2px solid white;
background-color: #bf2222;
}
.order-btn:hover {
background-color: white;
border: 2px solid #bf2222;
border-radius: 15px;
color: #bf2222;
}
.burger-item p {
font-size: 1.4rem;
padding: 0px 50px;
}
.para-font,
.p {
font-size: 1.5rem;
}
.footer-font{
font-size: 1.54rem;
}
.footer{
font-size: 90%;
}
.center-heading,
.burger-heading {
font-size: 2rem;
}
.left-footer .color-white {
padding: 0px;
}
.right-footer {
margin-right: 0px;
}
@media screen and (max-width:900px) {
.bottom-container {
flex-direction: column;
}
.home-bottom-left {
height: 420px;
width: 90%;
}
.event-item {
flex-direction: column;
}
.btn-heading {
width: 30%;
}
.event-content .event-para,
h2 {
text-align: center;
}
.footer-bg {
flex-direction: column;
text-align: center;
}
.burger-container {
flex-direction: column;
}
.one {
position: relative;
border: 2px solid #3d2514;
border-radius: 8px;
width: 60%;
margin: 2px;
}
.one::after {
content: '';
position: absolute;
top: 4px;
left: -2px;
width: 100%;
border: 2px solid #3d2514;
border-radius: 8px;
}
.one::before {
content: '';
position: absolute;
bottom: 4px;
left: -2px;
width: 100%;
border: 2px solid #3d2514;
border-radius: 8px;
}
}
@media screen and (max-width:702px) {
.menu{
display: none;
}
.menu-btn{
display: block;
}
.divider {
flex-direction: column;
}
.home-bottom {
margin-top: 15%;
}
#home::before {
height: 90%;
}
.home-bottom-right img {
padding: 20px;
margin: 0px auto;
width: 90%;
}
#event-container {
padding: 14px 23px;
}
.event-content {
margin: 0px;
}
.burger-home {
width: 70%;
}
.h-primary {
font-size: 3rem;
text-align: center;
}
.h-secondary {
text-align: center;
}
.left-footer .color-white {
padding: 2px 25px;
}
.right-footer {
font-size: 16px;
}
}
JavaScript Code Structure :-
script.js
const navBar = document.querySelector(".navbar");
let prevScrollPos = window.scrollY;
window.addEventListener("scroll",function(){
let currScrollPos = window.scrollY;
if(currScrollPos > prevScrollPos){
navBar.style.transform = 'translateY(-105%)';
}else{
navBar.style.transform = 'translateY(0%)';
}
prevScrollPos = currScrollPos;
});
Follow Us