Learn how to create a responsive pizza shop website using HTML, CSS and JavaScript. Get step-by-step guidance on building a user-friendly website with online ordering and payment options.
Table of Contents
Having a website for your pizza shop is crucial in reaching a wider audience and providing a better customer experience. By creating a responsive pizza shop website using HTML, CSS, and JavaScript, you can enhance your online presence and offer your customers an easy and efficient way to order and pay for their favorite pizzas. In this article, we will guide you through the process of designing a user-friendly and functional pizza shop website with online ordering. Whether you are building a website from scratch or upgrading an existing one, this tutorial will provide you with step-by-step guidance on creating a website that aligns with your business goals and target audience.
Let's start making an amazing responsive pizza shop landing page using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
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 pizza shop and also add some images.
The <!DOCTYPE html> declaration is the first line, which tells the browser what version of HTML the page is using. In this case, it's using the HTML5 standard.
The next section, inside the <head> element, contains several meta tags that provide information about the page. The <meta charset="UTF-8"> tag specifies the character encoding used by the page, while the <meta http-equiv="X-UA-Compatible" content="IE=edge"> tag ensures that the page will render correctly in Internet Explorer. The <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag sets the width of the page to the width of the device and scales the content to fit.
The page title is set by the <title> element.
The code imports two stylesheets: boxicons.min.css and styles.css. The first stylesheet contains Box Icons, a library of customizable vector icons, and the second stylesheet contains custom CSS code to style the elements on the page.
The body of the page contains several sections, each marked by a <section> element. The first section contains a navigation bar with a logo, a hamburger menu icon, and links to different sections of the page. The final link is a moon icon, which toggles a dark mode for the page.
The next sections contain information about the pizza restaurant, including a hero image with a call-to-action button, a section about the restaurant's history and values, a menu section, and a section about the restaurant's services.
Each section is styled using CSS rules defined in the "styles.css" stylesheet.
The code imports two script: ScrollReveal and script.js. The first one imports the ScrollReveal JavaScript library from the external URL "https://unpkg.com/scrollreveal". ScrollReveal is a library that allows web developers to easily create scroll animations for HTML elements. The second <script> tag links to the "script.js" file, which contains custom JavaScript code
After creating the files just paste the following below 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.
This is the basic structure of our pizza shop website using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we will use some basic CSS rules to design our pizza shop website. We will also add some padding and margin properties to ensure that everything looks correct.
This will give our pizza shop 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.
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
scroll-behavior: smooth;
scroll-padding-top: 2rem;
list-style: none;
text-decoration: none;
}
*::selection {
background: var(--main-color);
color: #fff;
}
:root {
--main-color: #ffb411;
--text-color: #1e1c2a;
--bg-color: #fff;
--big-font: 4rem;
--h2-font: 2.24rem;
--p-font: 0.9rem;
}
section {
padding: 50px 10%;
}
body.active {
--bg-color: #1e1c2a;
--text-color: #fff;
}
body {
color: var(--text-color);
background: var(--bg-color);
}
#darkmode {
font-size: 25px;
cursor: pointer;
}
header {
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--bg-color);
padding: 18px 100px;
box-shadow: 0 0.5rem 50rem rgba(0, 0, 0, 0.1);
}
.logo {
font-size: 1.2rem;
font-weight: 600;
color: var(--main-color);
}
.navbar {
display: flex;
}
.navbar a {
font-size: 1rem;
padding: 10px 20px;
color: var(--text-color);
font-weight: 500;
}
.navbar a:hover {
color: var(--main-color);
}
#menu-icon {
font-size: 2rem;
cursor: pointer;
display: none;
}
.home {
width: 100%;
min-height: 100vh;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 1.5rem;
}
.home-img img {
width: 100%;
}
.home-text h1 {
font-size: var(--big-font);
color: var(--main-color);
}
.home-text h2 {
font-size: var(--h2-font);
margin: 1rem 0 1rem;
}
.btn {
display: inline-block;
background: var(--main-color);
padding: 10px 20px;
border-radius: 0.5rem;
color: #fff;
}
.btn:hover {
background: #ffa400;
}
.about {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
align-items: center;
}
.about-img img {
max-width: 80%;
border-radius: 0.5rem;
}
.about-text span {
color: var(--main-color);
font-weight: 500;
}
.about-text h2 {
font-size: var(--h2-font);
}
.about-text p {
margin: 0.8rem 0 1.8rem;
}
.heading {
text-align: center;
}
.heading span {
color: var(--main-color);
font-weight: 500;
}
.heading h2 {
font-size: var(--h2-font);
}
.menu-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
gap: 1.5rem;
align-items: center;
}
.box {
position: relative;
margin-top: 2rem;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0.5rem;
box-shadow: 0 2px 4px rgb(4 64 54 / 10%);
padding: 10px;
}
.box-img {
width: 200px;
height: 200px;
}
.box-img img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.box h2 {
font-size: 1.2rem;
}
.box h3 {
font-size: 1rem;
font-weight: 400;
margin: 4px 0 10px;
}
.box span {
font-size: var(--p-font);
font-weight: 500;
}
.box .bx {
position: absolute;
right: 0;
top: 0;
font-size: 20px;
background: var(--main-color);
border-radius: 0 0.5rem 0 0.5rem;
padding: 5px 8px;
}
.box .bx:hover {
background: #ffa400;
}
.servives-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
gap: 1.5rem;
margin-top: 2rem;
}
.s-box {
text-align: center;
}
.s-box img {
width: 60px;
}
.s-box h3 {
margin: 4px 0 10px;
}
.connect {
display: flex;
align-items: center;
justify-content: space-around;
}
.connect-text span {
color: var(--main-color);
font-weight: 500;
}
.connect-text h2 {
font-size: var(--h2-font);
}
.contact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, auto));
gap: 1.5rem;
}
.contact-box h3 {
margin-bottom: 1rem;
}
.social {
display: flex;
margin-top: 1.5rem;
}
.social i {
font-size: 20px;
margin-right: 1rem;
color: var(--text-color);
}
.social i:hover {
color: var(--main-color);
}
.contact-box li a {
color: var(--text-color);
}
.contact-box li a:hover {
color: var(--main-color);
}
.address {
display: flex;
flex-direction: column;
}
.address i {
margin-bottom: 0.5rem;
font-size: 1rem;
}
.address span {
margin-left: 1rem;
}
.copyright {
padding: 20px;
text-align: center;
}
@media (max-width: 921px) {
header {
padding: 14px 41px;
}
:root {
--big-font: 3rem;
--h2-font: 1.7rem;
}
}
@media (max-width: 768px) {
section {
padding: 50px 8%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
background: var(--bg-color);
box-shadow: 0 4px 4px rgb(0 0 0 / 10%);
transition: 0.2s ease;
}
.navbar.active {
top: 100%;
}
.navbar a {
padding: 1.5rem;
display: block;
background: var(--bg-color);
}
#darkmode {
position: absolute;
top: 1.4rem;
right: 2rem;
}
}
@media (max-width: 715px) {
header {
padding: 10px 16px;
}
.home {
grid-template-columns: 1fr;
}
.about {
grid-template-columns: 1fr;
text-align: center;
}
.about-img {
order: 2;
}
}
@media (max-width: 515px) {
.connect {
flex-direction: column;
}
.connect .btn {
margin-top: 1rem;
}
}
@media (max-width: 450px) {
:root {
--big-font: 2rem;
--h2-font: 1.4rem;
}
.home-text {
padding-top: 4rem;
}
} Step 3 (JavaScript Code):
Finally, we'll add some JavaScript to our HTML page. This JavaScript will allow us to interact with our website in a variety of ways. For example, we can use it to Switch between dark and light mode.
The first section of code is responsible for creating a toggle effect on a navbar. When a user clicks on a menu icon, the script selects the navbar element and toggles the "active" class on and off. Additionally, when a user scrolls down the page, the script removes the "active" class from the navbar element.
The second section of code appears to implement a dark mode feature. The script selects a dark mode icon and adds an onclick event listener to it. When the icon is clicked, the script checks whether it currently has the class "bx-moon" or "bx-sun" and replaces the class with the other. If the class is "bx-moon", the script adds the "active" class to the body element, which presumably activates a dark theme.
The third section of code appears to be utilizing the ScrollReveal library to reveal page elements as a user scrolls. The script creates a new instance of the ScrollReveal object, specifying an "origin" of "top", a "distance" of "40px", and a "duration" of 2000ms. It then selects a variety of page elements and reveals them with a 200ms interval between each.
Overall, this code seems to be implementing some commonly used web development features, including a navbar toggle, a dark mode switch, and scroll reveal effects.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
// Navbar
let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');
menu.onclick = () => {
navbar.classList.toggle('active');
}
window.onscroll = () => {
navbar.classList.remove('active');
}
// Dark Mode
let darkmode = document.querySelector('#darkmode');
darkmode.onclick = () => {
if(darkmode.classList.contains('bx-moon')){
darkmode.classList.replace('bx-moon','bx-sun');
document.body.classList.add('active');
}else{
darkmode.classList.replace('bx-sun','bx-moon');
document.body.classList.remove('active');
}
}
// Scroll Reveal
const sr = ScrollReveal ({
origin: 'top',
distance: '40px',
duration: 2000,
reset: true
});
sr.reveal(`.home-text, .home-img,
.about-img, .about-text,
.box, .s-box,
.btn, .connect-text,
.contact-box`, {
interval: 200
})Final Output:
Conclusion:
In conclusion, creating a responsive pizza shop website using HTML, CSS, and JavaScript can help you enhance your online presence, reach a wider audience, and provide a better customer experience. By following the steps outlined in this tutorial, you can design a website that is user-friendly, functional and optimized for search engine visibility. Remember to define your website goals and target audience, sketch out your website layout and navigation, and use responsive design techniques for optimal viewing experience on different devices. With a well-designed pizza shop website, you can attract new customers, increase your revenue, and stand out in a highly competitive market.
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 😊
