Food Website Landing Page Design Using HTML & CSS

Hello Friends, today in this blog you’ll learn how to make Food Website Landing Page Design Using only HTML & CSS.

Using only HTML & CSS you can create this type of awesome Food Website Landing Pages and this is best practice to create landing pages and improve your HTML & CSS skills. It’s very simple to create if you’re beginner also you can easily build these type of amazing & attractive landing pages.

Video Tutorial of Food Website Landing Page Using Only HTML & CSS

https://youtu.be/f7i83KXUb4Q

In the video you’ve seen that in just some time with using some basic properties we’ve easily create this beautiful landing page. Basically this landing page divided into two sections – Header & Main content ….we’ve created both of them using CSS Flexbox property and some basic properties of CSS. It’s very very simple we can easily create these types of landing pages using only HTML & CSS. Watch our full tutorial to understand deeply.

So, enjoy the tutorial & learn something new today 🙂

Food Website Landing Page Design [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Food Website Landing Page</title>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <h3 class="logo">Foody</h3>
            <nav>
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Order</a></li>
                    <li><a href="">Menu</a></li>
                    <li><a href="">Contact Us</a></li>
                </ul>
            </nav>
        </div>
        <div class="content">
            <h1>The House of <br><span class="style">Trendy Food</span></h1>
            <div class="text">
                <button class="btn">Order Now</button>
                <div class="social-media">
                    <a href=""><i class="fa icons fa-facebook"></i></a>
                    <a href=""><i class="fa icons fa-instagram"></i></a>
                    <a href=""><i class="fa icons fa-twitter"></i></a>
                </div>
            </div>
        </div>
        <img src="images/burger.png" class="image">
    </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Palette+Mosaic&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.container {
    height: 100vh;
    width: 100%;
    background-image: url(images/bg.png);
    background-position: center;
    background-size: cover;
    padding-right: 5%;
    padding-left: 3%;
    box-sizing: border-box;
    position: relative;
}
.navbar {
    width: 100%;
    height: 15vh;
    margin: auto;
    display: flex;
    align-items: center;
}
.logo {
    font-size: 50px;
    color: #eda134;
    margin-top: 5px;
    font-family: 'Palette Mosaic', cursive;
    text-transform: uppercase;
    cursor: pointer;
}
nav {
    flex: 1;
    padding-left: 660px;
}
nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0 15px;
}
nav ul li a {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
}
.content {
    position: relative;
}
h1 {
    font-family: 'Lobster', cursive;
    text-transform: uppercase;
    font-weight: 800;
    margin-top: 100px;
    letter-spacing: .1em;
    font-size: 70px;
    color: #1b1b1b;
}
h1 .style {
    color: #eda134;
    font-size: 80px;
    font-weight: 800;
    font-family: 'Lobster', cursive;
}
.text {
    position: relative;
    display: flex;
    align-items: center;
}
.btn {
    background-color: #eda134;
    margin-top: 80px;
    padding: 15px 45px;
    border: none;
    outline: none;
    transition: .5s;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    font-weight: 700;
    font-size: 24px;
    display: block;
    border-radius: 30px;
    background-size: 200% auto;
    box-shadow: 3px 8px 22px rgba(22,21,21,.15);
}
.social-media {
    font-family: 'Poppins',sans-serif;
    margin-top: 80px;
    margin-left: 50px;
    text-decoration: none;
    font-size: 27px;
}
.icons {
    color: #eda134;
    padding: 12px 12px 10px 12px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 10px;
    height: 27px;
    width: 27px;
    text-align: center;
    box-shadow: 3px 8px 22px rgba(22,21,21,.15);
}
.icons:hover {
    transform: scale(1.1);
    color: #fff;
    background-color: #eda134;
    transition: all .5s;
}
.image {
    position: absolute;
    width: auto;
    bottom: 0;
    height: 60%;
    margin-left: 810px;
    margin-bottom: 120px;
}

DOWNLOAD SOURCE CODE FILES