Learn how to design a mouthwatering landing page for your fast food restaurant using HTML and CSS. Enhance user experience and drive conversions.
Table of Contents
In today's digital age, having a strong online presence is essential for any fast-food restaurant looking to attract customers and drive sales. One of the most effective ways to achieve this is by creating a dedicated landing page that showcases your menu, promotions, and brand identity in a visually appealing and user-friendly manner.
In this guide, we'll walk you through the process of creating a fast-food restaurant landing page using HTML and CSS. Whether you're a seasoned web developer or a beginner looking to expand your skills, this guide will provide you with the knowledge and tools you need to create a fast-food restaurant landing page that stands out from the competition. So, let's dive in and get started!
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML File for the fast food restaurant landing page. We'll start with a well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Let's break down the HTML Code step by step:
1. <!DOCTYPE html>: This declaration specifies that the document type is HTML5.
2. <html lang="en">: This tag defines the beginning of the HTML document and sets the language to English.
3. <head>: This section contains meta-information about the HTML document, such as character set, viewport settings, and links to external resources like stylesheets.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports most characters from various languages.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: Provides instructions to the browser to use the latest version of Internet Explorer's rendering engine.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport width to the device's width and initial zoom level to 1.0, ensuring proper scaling on different devices.
- <title>Fast Food Restaurant Landing Page</title>: Sets the title of the webpage shown in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet named "styles.css" to the HTML document.
4. <body>: This is the main content area of the webpage.
- <header>: Represents the header section containing the logo, menu links, and menu icons.
- <input type="checkbox" id="menu-show">: Checkbox input used for toggling the visibility of the menu.
- <a href="#" class="logo">: Anchor tag wrapping the logo image with a placeholder URL.
- <ul class="menu">: Unordered list representing the menu items.
- <label for="menu-show"><i class="fas fa-bars"></i></label>: Label for the menu icon, which toggles the menu when clicked.
- <label for="menu-show"><i class="fas fa-times"></i></label>: Label for the close icon, which hides the menu when clicked.
- <div class="container">: Container for the main content of the landing page.
- <div class="text-box">: Container for text content including a heading, paragraph, and an order link.
- <div class="bg-img">: Container for background images of food items.
- <ul class="thumb">: Unordered list for thumbnail images used for image slide navigation.
- <footer>: Represents the footer section containing social icons and credit text.
- <div class="social">: Container for social media icons.
- <div class="credit">: Container for copyright and credit text.
Step 2 (CSS Code):
Once the basic HTML structure of the website is in place, the next step is to add styling to the website using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our website. We will also add some padding and margin properties to ensure that everything looks correct.
Let's break down the CSS code step by step:
1. @import url("https://fonts.g...");: This line imports the Google Fonts stylesheet for the Roboto font with various weights and styles.
2. Reset Section: This part resets default styles for all elements on the webpage.
- It sets margins, padding, and box-sizing to zero for all elements.
- It sets the default font-family to Roboto and sans-serif as a fallback.
3. Common Section: This section contains styles common across the webpage.
- Styles the body background color, width, and minimum height to cover the viewport height.
- Removes underlines from anchor tags and sets their color to black with a smooth transition effect.
- Removes default list styles and sets a pointer cursor for list items.
4. Header Section: This section styles the header of the webpage.
- Sets the header's width, padding, display, and alignment properties.
- Styles the logo and menu inside the header.
- Defines styles for menu icons and their behavior on hover.
5. Container Section: This section styles the main content container of the webpage.
- Defines the container's position, dimensions, and alignment.
- Styles text boxes, headings, paragraphs, and links within the container.
- Set up image backgrounds with transition effects.
6. Shapes Section: Styles for colored shapes, are positioned at the bottom of the page.
7. Fixed Image Slide Menu Section: Styles for a fixed menu with thumbnails for image slides.
8. Footer Section: Styles for the footer of the webpage.
- Sets its position, dimensions, and alignment.
- Styles social icons and credits text.
9. Image Slide Section: Styles specific to the image slideshow feature.
- Defines styles for individual images based on radio button states (#burger, #fries, #coke).
10. Responsive Section: Media queries for responsive design.
- Adjust header, container, and menu styles for smaller screens.
- Alters the size of elements and adjusts the layout for improved mobile usability.
This will give our fast-food restaurant landing page 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/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400&display=swap");
/* -----Reset----- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
/* -----Common----- */
body {
background-color: #fff;
width: 100%;
min-height: 100vh;
}
a {
text-decoration: none;
color: #000;
transition: all 0.3s ease-in;
}
li {
list-style: none;
cursor: pointer;
transition: all 0.3s ease-in;
}
li:hover {
transform: scale(1.1);
}
label {
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"] {
display: none;
}
/* -----Header----- */
header {
width: 100%;
padding: 20px 200px;
display: flex;
justify-content: space-between;
align-items: center;
overflow-x: hidden;
}
/* Logo */
header .logo {
position: relative;
z-index: 101;
max-width: 80px;
text-align: center;
}
header .logo img {
width: 100%;
}
/* Menu Links */
header .menu {
max-width: 300px;
position: relative;
z-index: 101;
display: flex;
justify-content: center;
align-items: center;
}
header .menu li {
margin: 0 15px;
padding: 10px 20px;
}
/* Menu Icons */
header label {
position: absolute;
z-index: 101;
top: 40px;
right: 50px;
display: none;
}
header label i {
font-size: 1.5rem;
color: #000;
}
/* -----Container----- */
.container {
position: relative;
z-index: 100;
min-height: 75vh;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
padding: 0 20px;
margin-bottom: 100px;
overflow: hidden;
}
/* Text */
.container .text-box {
width: 600px;
padding: 20px;
text-align: left;
background-image: url(https://www.politicalite.com/wp-content/uploads/2019/10/halal-2-768w.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.container .text-box h2 {
font-size: 4rem;
}
.container .text-box h2 span {
padding: 0 15px;
background-color: #000;
color: #fff;
}
.container .text-box p {
font-size: 1rem;
margin: 10px 0;
}
.container .text-box a {
display: inline-block;
padding: 20px 50px;
border: 3px #000 solid;
color: #000;
}
.container .text-box a:hover {
background-color: #000;
color: #fff;
}
/* Images */
.container .bg-img {
max-width: 550px;
width: 100%;
overflow: hidden;
}
.container .bg-img img {
width: 100%;
transition: all 0.5s ease-in;
}
.container .bg-img img:nth-child(3) {
width: 90%;
}
/* Shapes */
.shape {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: circle(60% at right);
transition: all 0.5s ease-in;
}
.red {
background-color: #c0392b;
}
.yellow {
background-color: #f39c12;
}
.orange {
background-color: #d35400;
}
/* -----Fixed Image Slide Menu----- */
.thumb {
position: fixed;
top: 50%;
transform: translateY(-50%);
right: 5px;
padding: 10px;
z-index: 101;
}
.thumb li {
margin: 10px 0;
transition: all 0.3s ease-in;
}
.thumb img {
max-width: 50px;
}
/* Footer */
footer {
width: 100%;
position: fixed;
z-index: 101;
bottom: 0;
left: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
/* Social Icons */
footer .social {
margin-bottom: 10px;
}
footer .social a {
margin-left: 20px;
}
footer .social i {
color: #000;
font-size: 1.6rem;
transition: all 0.3s ease-in;
}
footer .social i:hover {
transform: scale(1.1);
}
/* Credit Text */
footer .credit {
text-align: right;
color: #000;
font-size: 0.9rem;
}
/* -----Image Slide----- */
/* First Image */
#burger:checked ~ .container .bg-img img:nth-child(1) {
visibility: visible;
opacity: 1;
}
#burger:checked ~ .container .bg-img img:nth-child(2),
#burger:checked ~ .container .bg-img img:nth-child(3),
#burger:checked ~ .orange,
#burger:checked ~ .yellow {
max-height: 0;
visibility: hidden;
opacity: 0;
}
/* Second Image */
#fries:checked ~ .container .bg-img img:nth-child(2) {
visibility: visible;
opacity: 1;
}
#fries:checked ~ .container .bg-img img:nth-child(1),
#fries:checked ~ .container .bg-img img:nth-child(3),
#fries:checked ~ .red,
#fries:checked ~ .orange {
max-height: 0;
visibility: hidden;
opacity: 0;
}
/* Third Image */
#coke:checked ~ .container .bg-img img:nth-child(3) {
visibility: visible;
opacity: 1;
}
#coke:checked ~ .container .bg-img img:nth-child(1),
#coke:checked ~ .container .bg-img img:nth-child(2),
#coke:checked ~ .red,
#coke:checked ~ .yellow {
max-height: 0;
visibility: hidden;
opacity: 0;
}
/* -----Responsive----- */
@media (max-width: 950px) {
/* Header */
header {
flex-direction: column;
padding: 20px 50px;
}
header .logo {
margin-bottom: 10px;
}
/* Container */
.container {
flex-direction: column;
}
.container .text-box {
width: 100%;
max-width: 550px;
text-align: center;
}
.container .bg-img {
max-width: 450px;
width: 100%;
}
.container .bg-img img:nth-child(3) {
width: 100%;
}
/* Footer */
footer {
position: relative;
}
}
@media (max-width: 470px) {
/* Header */
header .menu {
position: absolute;
width: 100%;
max-width: inherit;
flex-direction: column;
background-color: #fff;
padding: 10px 0;
top: 120px;
left: -100%;
transition: all 0.3s ease-in;
}
header .menu li {
margin: 15px 0;
}
header label:nth-child(4) {
display: block;
}
/* Container */
.container .text-box h2 {
font-size: 3rem;
}
/* Fixed Image Slide Menu */
.thumb img {
max-width: 30px;
}
/* Responsive Menu */
#menu-show:checked ~ .menu {
left: 0;
}
#menu-show:checked ~ label:nth-child(4) {
display: none;
}
#menu-show:checked ~ label:nth-child(5) {
display: block;
}
} Final Output:
See the Pen KFC Full Screen Landing Page with Image Slider (Responsive) by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In conclusion, creating a fast-food restaurant landing page using HTML and CSS can greatly enhance your online presence and attract more customers. By following the steps outlined in this guide, you can design a visually appealing and user-friendly website that effectively showcases your menu, promotions, and brand identity.
Remember to keep your design simple yet engaging, prioritize mobile responsiveness, optimize for search engines, and regularly update your content to keep your audience engaged. With dedication and attention to detail, your fast-food restaurant landing page can become a powerful tool for driving traffic, increasing conversions, and ultimately growing your business.
Now that you have a comprehensive understanding of how to create a fast-food restaurant landing page using HTML and CSS, it's time to put your knowledge into action and start building your website. Good luck, and happy coding!
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 😊
