How to Create A Responsive ' Food / Restaurant ' Website Design Using HTML CSS

Hello Viewers, today in this tutorial, you’ll learn How To Make A Responsive'Food / Restaurant ' Website Design Using HTML CSS.

This Post is about making a A Responsive ' Food / Restaurant ' Website Design Using HTML CSS.

To create this project ( A Responsive ' Food / Restaurant ' Website Design Using HTML CSS). First, you need to create two Files one HTML File and another one is CSS File.

First, create an HTML file with the name of index.html and paste the given code in your HTML file.



<!DOCTYPE html>
<!-- Created by Amit Tutorial - www.amittutorial.com -->

<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>Foodaholic</title>
    <!-- External CSS -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- Header -->
<header class="top-header">
  <h1 class="logo">F<span class="highlight">oo</span>daholic</h1>
  <section class="top-header_content">
    <div class="content">
      <h1 class="main-headings">Get to know the chef and you will start to enjoy dining out even more.</h1>
      <div class="btns">
        <a href="#" class="main-btn-fill btn-animation">Select Program</a>
        <a href="#" class="main-btn btn-animation">View Menu</a>
      </div>
    </div>
    <img src="assets/Images/img-1.png" alt="" class="main-img">
  </section>
</header>

<section class="delivery">
  <div class="delivery_img"></div>
  <div class="delivery_content">
    <div class="delivery_heading">We Deliver Anywhere</div>
    <p class="delivery_sub-headings">
      Each fresh meal is pefectly sized for 1 person to enjoy at 1 sittings <br>
      Our fully-prepared meals are delivered fresh, & to eat in 3 minutes.
    </p>
    <div class="btns">
      <a href="#" class="main-btn-fill btn-animation">Select Program</a>
      <a href="#" class="main-btn btn-animation delivery-btn">View Menu</a>
    </div>
  </div>
</section>

<section class="why-foody">
  <h1 class="main-headings foody-headings">Why Foodaholic Meal</h1>
  <div class="why_foody_cards">
    <div class="cards_card">
      <h1 class="card_title">Variety</h1>
      <div class="card_img img-one"></div>
      <p class="card-info">60+ recipes a week, cooked from 10 mins</p>
      <p class="card-info">Family classics, global cuisines plus Joe Wicks health rang.</p>
      <p class="card-info">Tasty plant based and gluten free options too</p>
    </div>

    <div class="cards_card">
      <h1 class="card_title">Quality</h1>
      <div class="card_img img-one"></div>
      <p class="card-info">Fresh ingredients from trusted suppliers</p>
      <p class="card-info">100% British fresh meat</p>
      <p class="card-info">All recipes tried, tasted and loved by our chefs and customers</p>
    </div>

    <div class="cards_card">
      <h1 class="card_title">Simplicity</h1>
      <div class="card_img img-one"></div>
      <p class="card-info">Easy to follow recipe cards</p>
      <p class="card-info">Precise ingredients with zero food waste </p>
      <p class="card-info">Tasty plant based and gluten free options too</p>
    </div>
  </div>
  <div class="btns btn-container">
    <a href="#" class="main-btn btn-lg btn-animation">Get Started</a>
  </div>
</section>
        
<section class="testimonial">
  <div class="user-img"></div>
  <div class="user-rating-info">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus suscipit esse aliquam ipsa ipsam labore quidem blanditiis, sunt consequuntur sed?
    </p>
    <h1 class="user-name">
      <span class="highlight">Joe Wicks</span> | The Body Coach
    </h1>
  </div>
</section>

<!-- footer -->
<footer class="footer">
  <div class="footer-card">
    <h1 class="footer-title">Location</h1>
    <p class="footer-info">Start With Our Fresh Shrimps</p>
    <p class="footer-info">4213 Somewhere on Earth</p>
  </div>

  <div class="footer-card">
  <h1 class="footer-title">Working Hours</h1>
  <p class="footer-info">Monday Thursday Friday</p>
  <p class="footer-info">Saturday Sunday</p>
</div>

<div class="footer-card">
  <h1 class="footer-title">Contact Us</h1>
 <a href="#" class="footer-info">xyz@gmail.com</a>
</div>
</footer>
  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given code in your CSS file.


@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@800&family=Roboto&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root{
  --main-color: #d41b27;
  --black-color: #050505;
  --main-font: "Playfair Display";
  --secondary-font: Roboto;
}

.logo{
  color: #000;
  font-family: var(--main-font);
  margin-left: 4rem;
}
.highlight{
  color: var(--main-color);
}
.main-btn-fill{
  background: var(--main-color);
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: var(--secondary-font);
  margin: 10px;
}

.main-btn{
  background: #000;
  text-decoration: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: 50px;
  font-family: var(--secondary-font);
  margin: 10px;
}
.btn-animation:hover{
  background: #fff;
  color: #000;
  border: 1px solid #000;
  transition: 0.5s ease;
}

/* Header */

.top-header{
  height: 80vh;
}
.top-header_content{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  text-align: center;
}

.main-headings{
  color: var(--black-color);
  font-family: var(--main-font);
  font-size: 400%;
  margin: 3rem;
}
.main-img{
  margin-right: 20px;
  width: 40%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.delivery{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
  padding-top: 10rem;
  padding-bottom: 5rem;
}
.delivery_img{
  width: 250px;
  height: 250px;
  background-image: url(assets/Images/img-2.png);
  background-position: center;
  background-size: cover;
  margin-right: 3rem;
}
.delivery_content{
  width: 30rem;
}
.delivery_heading{
  font-family: var(--secondary-font);
  margin-bottom: 10px;
  font-size: 3rem;
  font-weight: normal;
}

.delivery_sub-headings{
  font-family: var(--secondary-font);
  margin-bottom: 2rem;
}
.delivery-btn{
  border: 1px solid #fff;
}


.why-foody{
  height: 110vh;
  background: #fff;
  color: #000;
}

.foody-headings{
  text-align: center;
  margin-top: 10rem;
  padding-top: 2rem;
}
.why_foody_cards{
  display: flex;
  justify-content: center;
  align-items: center;
}
.cards_card{
  width: 30%;
  margin: 0 auto;
}

.card_title{
  font-family: var(--main-font);
  font-size: 2rem;
  text-align: center;
  margin-bottom: 20px;
}

.card_img{
  width: 120px;
  height: 120px;
  background-size: cover;
  background-position: center;
  margin: 20px;
  margin: 0 auto;
}

.img-one{
  background-image: url(assets/Images/img-2.png);
}

.card-info{
  margin: 20px;
  font-family: var(--secondary-font);
  text-align: center;
  line-height: 20px;
}

.btn-container{
  text-align: center;
  margin-top: 10px;
}


.testimonial{
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #000;
  color: #fff;
}

.user-img{
  background-image: url(assets/Images/pexels-miquel-ferran-gomez-figueroa-3814446.jpg);
  background-size: cover;
  background-position: center;
  width: 26%;
  height: 30rem;
  box-shadow: 20px 20px 2px 2px #fff;
}

.user-rating-info{
  width: 20rem;
  height: 20px;
  margin-left: 40px;
  font-size: 20px;
}

.user-name{
  font-size: 20px;
  margin-top: 20px;
  font-family: var(--main-font);
}

/* footer */

.footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
  height: 40vh;
}

.footer-card{
  margin: 0 auto;
  font-family: var(--secondary-font);
  font-weight: normal;
}
.footer-title{
  margin-bottom: 20px;
}

.footer-info{
  margin-bottom: 10px;
}


@media only screen and (max-width: 600px){
  .main-headings{
    font-size: 2rem;
  }
  .btns{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .delivery{
    text-align: center;
  }
  .delivery_img{
    margin: 0 auto;
    margin-bottom: 2rem;
  }

  .delivery_heading{
    font-size: 2rem;
  }

  .delivery_sub-headings{
    font-size: 12px;
  }
  .why-foody{
    height: 120vh;
  }
  .card_title{
    font-size: 1.4rem;
  }

  .user-img{
    width: 50%;
    height: 50%;
  }

  .user-rating-info{
    margin-bottom: 8rem;
    text-align: center;
  }
  .user-name{
    font-size: 20px;
    margin-top: 20px;
    font-family: var(--main-font);
  }
  .footer{
    margin-top: 10rem;
  }
}

That’s all in this post, you’ve successfully created A Responsive ' Food / Restaurant ' Website Design Using HTML CSS.

If your code does not work or you’ve faced any problem then comment down your problem. If you’re feeling difficult to understand what I am saying in this post.

You can watch a full video tutorial on this project( A Responsive ' Food / Restaurant ' Website Design Using HTML CSS).

Download Source Code:

How to Create A Responsive ' Food / Restaurant ' Website Design Using HTML CSS | Food website Landing Page

Post a Comment

Neumorphism Basic Calculator using HTML and CSS | Working Calculator JS | Calculator With JavaScript

Made with Love by

Contact form

How to Create A Responsive ' Food / Restaurant ' Website Design Using HTML CSS | Food website Landing Page

You Might Like

Post a Comment

Contact form