Create a Stunning Food Delivery Website: HTML & CSS

Faraz

By Faraz -

Design a captivating food delivery website landing page with HTML and CSS. Learn HTML and CSS techniques to create a website that entices customers.

Join us on Telegram
Create a Stunning Food Delivery Website HTML & CSS.jpg
Read AlsoLearn How to Create a Hangman Game using HTML, CSS, and JavaScript.jpgLearn How to Create a Hangman Game using HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

The demand for online food delivery services has surged dramatically in today's fast-paced digital age. As a result, having an enticing and user-friendly landing page for your food delivery website is paramount. The virtual front door welcomes hungry customers, setting the stage for their culinary journey. In this comprehensive guide, we will explore the art of crafting a captivating Food Delivery Website Landing Page using HTML and CSS.

A well-designed landing page is not just about aesthetics; it's a strategic tool that can significantly impact your business. It's the place where you showcase mouthwatering dishes, simplify the ordering process, and build trust with your audience. In the following sections, we will dive deep into the essential components that make a successful landing page, from eye-catching headers that whet the appetite to clear navigation and compelling calls to action.

Whether you're a seasoned web designer or a restaurateur embarking on your digital journey, this guide will equip you with the knowledge and practical steps needed to create a landing page that looks delicious and performs seamlessly. So, let's embark on this culinary adventure in web design, where we blend the artistry of food with the precision of HTML and CSS to create a mouthwatering online experience for your customers.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our landing page.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Here's an explanation of the code:

1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.

2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute specifies the language of the document as English.

3. <head>: This is the head section of the document, which contains metadata and links to external resources.

  • <title>Food Delivery Website</title>: This sets the title of the web page to "Food Delivery Website," which is displayed in the browser's title bar or tab.
  • <meta charset="UTF-8" />: This meta tag specifies the character encoding for the document as UTF-8, which is a widely used character encoding for handling various characters and symbols.
  • <meta name="viewport" content="width=device-width" />: This meta tag is used for responsive web design and ensures that the web page content adapts to the width of the device's screen.
  • <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css">: This is a link to an external CSS stylesheet named "aqua.min.css" hosted on a content delivery network (CDN). It's used to apply styles to the web page.
  • <link rel="stylesheet" href="styles.css" />: This is another link to an external CSS stylesheet named "styles.css." It's used to apply additional styles to the web page. This stylesheet is a custom one.

4. <body>: This is the body of the web page, where the visible content is placed.

  • <main class="dashboard">: This <main> element with a class of "dashboard" represents the main content area of the web page.
  • <article class="restaurant-panel">: Inside the main content area, there's an <article> element with a class of "restaurant-panel," which could be a section of the page dedicated to displaying restaurant information.
  • <nav class="nav-bar">: Within the restaurant panel, there's a navigation bar represented by a <nav> element.
  • <a href="#" class="menu">...</a>: This is a link (<a>) with a class of "menu" and contains an SVG icon. It's a menu button.
  • <a href="#" class="title">Chukwudi</a>: This is another link with a class of "title," which could be the name of the restaurant or some other title.

5. <div class="search-bar">: This <div> element contains a search bar.

  • <div class="input-group">: This is an input group that contains both a search button and an input field.
  • <button class="btn">...</button>: This is a button with a class of "btn" and an SVG search icon. It's used to trigger a search action.
  • <input type="search" class="form-control" name="search" placeholder="Search" />: This is an input field of type "search" with a class of "form-control" and a placeholder text of "Search."

6. <header class="welcome-banner">: This <header> element represents a welcome banner or promotional content.

  • <h1>$0 delivery for 30 days! 🎉</h1>: This is a heading displaying a promotional message.
  • <p>$0 delivery fee for orders over $10 for 30 days</p>: This is a paragraph providing additional information about the promotion.
  • <a href="#" class="learn-more">...</a>: This is a link with a class of "learn-more" and an arrow icon, which leads to more details about the promotion.

7. <section class="section" id="restaurants">: This <section> element with the class "section" and an "id" attribute represents a section of the web page related to restaurants.

  • Inside this section, there are elements related to restaurant categories and listings. It appears as a section for restaurant selection.

8. <section class="section">: This is another section element that contains more content related to the web page's functionality.

9. <ul class="restaurant-list">: Inside one of the sections, there's an unordered list (<ul>) with a class of "restaurant-list." This list contains restaurant listings.

  • Each <li class="restaurant-list__item"> represents an individual restaurant listing.
  • Inside each listing, there's an <a> element containing an image of the restaurant (<img>), the restaurant's name (<div class="restaurant-name">), and additional information about the restaurant (<div class="restaurant-info">), including its rating and category.

This is the basic structure of our food delivery website using HTML, and now we can move on to styling it using CSS.

Read AlsoBuild a User-Friendly Age Calculator with HTML, CSS, and JavaScript.jpgBuild a User-Friendly Age Calculator with HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the food delivery website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our website.

Let me break down the code and explain each part:

1. @import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");: This line imports the Google Fonts library and requests the "Roboto" font in three different styles (Regular, Italic, and Bold) to be used in the web page.

2. body: This is a selector that targets the entire web page's body element. It sets various styles for the body, including:

  • margin: 0;: Removes any default margin on the body.
  • min-height: 100vh;: Ensures that the body occupies at least the full viewport height.
  • font-size: 14px;: Sets the default font size to 14 pixels.
  • font-family: Roboto, sans-serif;: Specifies that the text should be displayed in the "Roboto" font or a generic sans-serif font if "Roboto" is not available.
  • background: var(--warning-color);: Sets the background color of the body using a CSS variable called "--warning-color."

3. :root: This selector sets CSS variables that can be used throughout the stylesheet to define colors. These variables are defined using custom names like "--danger-color" and "--secondary-color."

4. .dashboard: This class selector targets an element with the class "dashboard." It's typically used to style a dashboard container. It sets various styles, including a fixed width, background color, and border radius.

5. .restaurant-panel: This class selector is used to style a panel, presumably displaying restaurant information. It uses grid layout, sets padding, and adds a right border.

6. .nav-bar, .menu, .title, .search-bar, etc.: These are various class selectors used to style different elements within the web page, such as navigation bar items, menu elements, titles, search bars, and more. Each selector sets specific styles for the respective elements.

7. #restaurants: This is an ID selector targeting an element with the ID "restaurants." It's used to style a specific section of the web page.

8. .category-list, .restaurant-list, .food-list, .total-price, .buy-action, etc.: These are class selectors used to style different sections of the web page, such as category lists, restaurant lists, food lists, pricing sections, and buy-action buttons.

9. .input-spinner: This class selector is used to style input spinners, likely used for quantity selection. It includes styles for buttons and form controls.

This will give our food delivery website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");
body {
  margin: 0;
  min-height: 100vh;
  font-size: 14px;
  font-family: Roboto, sans-serif;
  background: var(--warning-color);
}

:root {
  --danger-color: rgb(250, 83, 24);
  --danger-color-lighter: rgb(255, 247, 237);
  --warning-color: rgb(252, 213, 97);
  --warning-color-transparent: rgba(252, 213, 97, 0.1);
  --secondary-color: rgb(248, 248, 247);
  --secondary-color-darker: rgb(160, 160, 160);
  --secondary-color-lightest: rgb(253, 253, 251);
  --info-color: rgb(80, 62, 157);
}

.dashboard {
  display: flex;
  width: 1386px;
  margin: 8px;
  background: white;
  border-radius: 30px;
}

.restaurant-panel {
  display: grid;
  row-gap: 72px;
  padding: 45px 80px;
  border-right: 1px solid var(--secondary-color);
}

.nav-bar {
  display: flex;
  align-items: center;
  line-height: 1;
}

.menu {
  margin-right: 28px;
}

.title {
  margin-right: 78px;
  font-size: 18px;
  font-weight: bold;
  color: black;
  text-decoration: none;
}

.search-bar {
  width: 100%;
}
.search-bar .form-control {
  --input-bg: var(--secondary-color-lighter);
  width: 100%;
  border-color: transparent;
  border-radius: 15px;
}
.search-bar .btn {
  --btn-bg: var(--secondary-color-lighter);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 6px 18px 18px;
  border-color: transparent;
  border-radius: 15px;
}

.welcome-banner {
  position: relative;
  padding: 64px 180px 72px 324px;
  background: var(--danger-color-lighter);
  border-radius: 15px;
  white-space: nowrap;
}
.welcome-banner .delivery {
  position: absolute;
  top: -22px;
  left: 40px;
  width: 240px;
  height: 240px;
}
.welcome-banner h1 {
  margin: 0;
  font-size: 18px;
  color: var(--danger-color);
}
.welcome-banner p {
  margin: 14px 0 0 0;
  color: var(--secondary-color-darker);
}
.welcome-banner .learn-more {
  position: absolute;
  right: 36px;
  bottom: 36px;
  display: flex;
  align-items: center;
  color: var(--danger-color);
  text-decoration: none;
}
.welcome-banner .learn-more .arrow {
  margin-left: 12px;
  fill: currentColor;
}

#restaurants .section-titles {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}
#restaurants .section-titles .section-title {
  font-size: 21px;
  font-weight: bold;
}

.date-select {
  display: flex;
  align-items: center;
  padding: 14px;
}
.date-select .clock {
  margin-right: 9px;
  fill: currentColor;
}
.date-select .chevron {
  margin-left: 15px;
  fill: currentColor;
}

.categories {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.category-list__item {
  box-sizing: border-box;
  width: 72px;
  padding: 6px;
  border-radius: 36px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}
.category-list__item:not(:last-child) {
  margin-right: 18px;
}
.category-list__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.category-list__item .category-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background: white;
  border: 1px solid var(--secondary-color-lighter);
  border-radius: 50%;
}
.category-list__item .category-icon svg {
  fill: black;
  transform: scale(1.2);
}
.category-list__item .category-name {
  padding: 9px 18px 36px 18px;
  font-size: 10px;
  font-weight: bold;
  color: black;
}
.category-list__item:target {
  background: var(--warning-color);
}
.category-list__item:target .category-icon {
  border-color: transparent;
}

.category-more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 15px;
}

.restaurant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 36px 27px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.restaurant-list__item .restaurant-image {
  width: 250px;
  height: 125px;
  border-radius: 15px;
}
.restaurant-list__item .restaurant-name {
  margin-top: 27px;
}
.restaurant-list__item .restaurant-info {
  margin-top: 12px;
  font-size: 10px;
}
.restaurant-list__item .restaurant-rate {
  margin-right: 9px;
}
.restaurant-list__item .restaurant-rate > * {
  display: inline-flex;
  vertical-align: middle;
}
.restaurant-list__item .restaurant-rate svg {
  margin-right: 6px;
}
.restaurant-list__item .restaurant-category {
  color: var(--secondary-color-darker);
}

.order-panel {
  padding: 56px 50px 42px 48px;
  background: var(--secondary-color-lightest);
}

.user-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.user-info .buy-count {
  margin-left: 30px;
  width: 40px;
  height: 40px;
  padding: 10px;
  color: black;
  border-radius: 15px;
}

#order {
  margin-top: 64px;
}
#order .section-title {
  font-size: 18px;
  font-weight: bold;
}

.order-info {
  width: 240px;
  margin-top: 44px;
  padding: 27px 24px 24px 24px;
  color: white;
  background: var(--info-color);
  border-radius: 15px;
}
.order-info .address,
.order-info .delivery {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-info .address-edit {
  color: var(--warning-color);
  text-decoration: none;
}
.order-info .delivery {
  margin-top: 20px;
}
.order-info .delivery .delivery-time {
  display: flex;
  align-items: center;
}
.order-info .delivery .time-btn {
  width: 40px;
  height: 40px;
  padding: 10px;
  color: var(--warning-color);
  background: var(--warning-color-transparent);
  border-color: transparent;
  border-radius: 15px;
}
.order-info .delivery .time-btn svg {
  fill: currentColor;
}
.order-info .delivery .time {
  margin-left: 12px;
}
.order-info .delivery .delivery-choose-time {
  color: var(--warning-color);
  text-decoration: none;
}

.food-list {
  display: grid;
  row-gap: 33px;
  padding: 0;
  margin: 54px 0 0 0;
  font-size: 10px;
  font-weight: bold;
  list-style-type: none;
}
.food-list__item {
  display: grid;
  align-items: center;
}
.food-list__item:not(:last-child) {
  grid-template-columns: 78px 20px 106px 1fr;
}
.food-list__item:last-child {
  grid-template-columns: 78px 20px 1fr;
}
.food-list__item .food-image {
  width: 57px;
  height: 32px;
  border-radius: 5px;
}
.food-list__item .food-price {
  color: var(--secondary-color-darker);
  justify-self: flex-end;
}

.total-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 115px;
  padding-bottom: 24px;
}
.total-price .price {
  font-size: 22px;
  font-weight: bold;
}

.buy-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 34px;
  border-top: 2px solid var(--secondary-color-lighter);
}
.buy-action .persons {
  font-size: 10px;
  font-weight: bold;
}
.buy-action .input-spinner {
  margin-top: 16px;
}
.buy-action .checkout-btn {
  display: flex;
  align-items: center;
  padding: 30px;
  color: black;
  border-radius: 10px;
}
.buy-action .checkout-btn .arrow {
  margin-left: 16px;
}

.input-spinner .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-color: var(--secondary-color-lighter);
  padding: 12px;
  border-radius: 10px;
}
.input-spinner .btn:hover, .input-spinner .btn:focus, .input-spinner .btn:active {
  border-color: var(--secondary-color-lighter);
}
.input-spinner .form-control {
  --border-color: var(--secondary-color-lighter);
  box-sizing: border-box;
  max-width: 48px;
  text-align: center;
  border-left: none;
  border-right: none;
}
.input-spinner .plus {
  border-left: none;
  padding-left: 0;
}
.input-spinner .minus {
  padding-right: 0;
}

Final Output:

Create a Stunning Food Delivery Website HTML & CSS.gif
Read Alsodesigning a delicious website using html, css, and javascript for restaurant web development.jpgDesigning a Delicious Website: Using HTML, CSS, and JavaScript for Restaurant Web Development

Conclusion:

Designing a Food Delivery Website Landing Page is a blend of creativity and functionality, where every element plays a crucial role in enticing visitors and converting them into satisfied customers. In this guide, we've explored the fundamental aspects of crafting an effective landing page using HTML and CSS, from the visually enticing header to the user-friendly navigation and persuasive calls to action.

Remember that your landing page is not a static entity; it should evolve with your business and customer preferences. Regularly analyze user behavior, gather feedback, and stay updated with the latest web design trends to keep your landing page fresh and engaging.

With the power of HTML and CSS at your fingertips, you have the tools to create a landing page that not only showcases your culinary offerings but also enhances the overall customer experience. So, roll up your sleeves, infuse your passion for food into your design, and embark on a journey to create a landing page that leaves a lasting impression and keeps the orders flowing. Bon appétit!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: food delivery website, landing page, ui design, html, css, source code, food delivery interface design, responsive landing page design, css styling for food delivery site, user-friendly food ordering website, html layout for online food delivery
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post