Responsive Burger Website Landing Page using HTML CSS

Hey, developers welcome to Day 35 of our 90Days 90Projects challenge. And in Day 35 we are going to create a Responsive Burger Website Landing Page using HTML CSS


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

responsive burger landing page, fudo food delivery landing page, responsive landing page, burger king landing page


Image Resource - Download Now

HTML Code

<!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>
    <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 id="navbar">
        <h2>Navbar Goes Here </h2>
    </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 para-font">
                VPO: NEAR GOVT. SR. SEC. SCHOOL
                XYZ (HISAR)
                G-MAIL: contact.geekshelp@gmail.com
            </div>
        </div>
    </section>

    <!-- Footer Starts from Here -->
    <footer class=" center para-font"> &copy; Geeks Help 2021-22. ALL RIGHTS RESERVED</footer>
</body>
</html>



CSS Code

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Dongle', sans-serif;
    scroll-behavior: smooth;
}

#navbar {
    width: 100%;
    padding: 1rem 0;
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 20;
    text-align: center;
    background-color: #1e1919;
    font-size: 1.5rem;
}

#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;
}

.home-bottom-right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.home-bottom-right img {
    margin: 25px;
    border-radius: 10px;
}

.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 50px;
}

.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;
}

.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) {
    .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;
    }
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad