Foody Restaurant Website Using HTML CSS With Source Code
Introduction
Hello coders, in this article we’ve build a Foody Restaurant Website Using HTML CSS. The look website is clean and simple. This is not a major project but this type of projects boosts your skills. Using HTML and CSS we’ve made this project. Creating this type of landing page is not a big task. Using HTML and CSS you can easily create this type of projects.
Our Foody Restaurant website is a simple landing page. We haven’t use any animation in this website and we’ve kept this landing page simple and clean. We’ve used some images for the hero and other sections. You can find link of those images in the source code. We’ve created different sections in our website.
We’ve used HTML to create the basic structure of the website. Our HTML code contains all the necessary attributes that creates basic structure for our website. After creating the basic structure we added CSS file to our HTML code. In our CSS file we’ve styles each section and each element of our HTML code.
Let’s see and understand our code.
index.html
This is our HTML code. Using this code we’ve creates basic structure of our website.
Internally, the code contains important settings. The character encoding is set to UTF-8 and the meta view tag ensures the site looks good on different screen sizes such as mobile phones and tablets. The title of the page is “Foody” and the external CSS file style.css will be used to style the site.
In this section, the content of the page is displayed. The first part is the header (), which contains the food logo and the title: “The chef in every box of professional food.” Two buttons, “Select Program” and “View Profile”, are placed below the title for users to explore.
The next section is about send(). Foody’s offers fresh food everywhere, he explains, and it only takes 3 minutes to be on your table. This section has two buttons for the user to select a program or view a menu.
The “Why Good Food” section highlights why the service is so great, talking about variety, quality and convenience. Each character is shown in more detail on a separate card.
This page also includes a testimonials section where a customer named Joe Wicks shared his wonderful experience.
Finally, the app provides useful information such as restaurant’s location, opening hours, and contact information.
<!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>Foody</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/09/post17-768x378.png 768w, https://developergoutam.com/wp-content/uploads/2024/09/post17-300x147.png 300w, https://developergoutam.com/wp-content/uploads/2024/09/post17-1024x503.png 1024w, https://developergoutam.com/wp-content/uploads/2024/09/post17-1536x755.png 1536w, https://developergoutam.com/wp-content/uploads/2024/09/post17-150x74.png 150w, https://developergoutam.com/wp-content/uploads/2024/09/post17-450x221.png 450w, https://developergoutam.com/wp-content/uploads/2024/09/post17-1200x590.png 1200w, https://developergoutam.com/wp-content/uploads/2024/09/post17.png 1597w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- HEADER -->
<header class="top-header">
<h1 class="logo">F<span class="highlight">oo</span>dy</h1>
<section class="top-header__content">
<div class="content">
<h1 class="main-headings">A Chef In Every Tasty Meal Box</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 decoding="async" src="https://github.com/HuXn-WebDev/Advance-CSS-40-Projects/blob/main/34.%20Foody%20Landing%20Page/assets/Images/img-1.png?raw=true" class="main-img" />
</section>
</header>
<section class="delivery">
<div class="delivery__img"></div>
<div class="delivery__content">
<div class="delivery__headings">We Deliver Anywhere</div>
<p class="delivery__sub-headings">
Each fresh meal is perfectly sized for 1 person to enjoy at 1
sittings. <br />
Our fully-prepared meals are delivered freash, & 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 Foody 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 Wickss 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">Precise ingredients with zero food waste</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>
"I love coming home to a foody with four different ban ging recipes
each week. With so many dishes to choose from there's always something
new to try!"
</p>
<h1 class="user-name">
<span class="highlight">Joe Wicks</span> | The Body Coach
</h1>
</div>
</section>
<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">Yoursdeveloper</a>
</div>
</footer>
</body>
</html>
styles.css
This Code is our CSS code which styles our website. Using this code we’ve styled each element of our code. First of all, We’ve import fonts from google fonts that is playfair display. After importing the font we’ve reset the margin and padding for the whole website using universal selector.
Using root element we’ve created some variable that we’ll use in our code. Creating variable code makes our work easy and it is a good practice for programmers. We styled the logo by giving some margin, font-family and color. The highlighted words have given var color.
Next, we styled the buttons of hero section. We’ve given some styling to buttons and styled them. The red background color given to select program button. We used hover effect so that when someone moves their mouse over the buttons, the colors change to make the buttons more interactive.
The header section which is the main part of the website is designed well and centered to grab attention. We styled each part of the header section and styled this section well, good looking and interactive as well.
The delivery section is styled well and more interactive. First , we styled the image of the delivery section and centered the whole section. We styled the heading which is down the image of delivery section and tells about the section. After that we styled the text of this section by giving some CSS properties and made it interactive.
In the why foody meal , we styled the cards. This section contains three cards, a heading and a button at the bottom of the section. Each card contain a image and some text. First of all, using flexbox we centered the section then we styled the heading of the section and centered it. After that cards are styled and then the button of the section.
Testimonial section contains a image and a customer’s review about the restaurants services. We styled testimonial by centering image and text of the section and some necessary styling which you can find in code.
We styled the footer section of the website. Footer section contains location, working hours and contact information sections. Using flexbox we centered the whole section and then styled footer cards where each card contains some information. At last, using media queries which is a CSS property, we provide some styling for the smaller screens like mobile phone or tablet’s etc.
This is how we styled our website.
@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;
}
/* SECTION 2 */
.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(https://github.com/HuXn-WebDev/Advance-CSS-40-Projects/blob/main/34.%20Foody%20Landing%20Page/assets/Images/img-2.png?raw=true);
background-position: center;
background-size: cover;
margin-right: 3rem;
}
.delivery__content {
width: 30rem;
}
.delivery__headings {
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;
}
/* SECTION 3 */
.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("https://github.com/HuXn-WebDev/Advance-CSS-40-Projects/blob/main/34.%20Foody%20Landing%20Page/assets/Images/img-2.png?raw=true");
}
.card-info {
margin: 20px;
font-family: var(--secondary-font);
text-align: center;
line-height: 20px;
}
.btn-container {
text-align: center;
margin-top: 10px;
}
/* SECTION 4 */
.testimonial {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: #000;
color: #fff;
}
.user-img {
background-image: url("https://github.com/HuXn-WebDev/Advance-CSS-40-Projects/blob/main/34.%20Foody%20Landing%20Page/assets/Images/ian-dooley-d1UPkiFd04A-unsplash.jpg?raw=true");
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__headings {
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;
}
}