Discover the process of developing a website for a pizza shop that adapts to different screen sizes, utilizing HTML, CSS, and JavaScript. Find detailed instructions on constructing a website that is easy to navigate, featuring an online ordering and payment feature.
Establishing a website for your pizza business is essential for expanding your reach and improving the customer journey. By developing a website that adapts to different devices using HTML, CSS, and JavaScript, you can boost your digital visibility and give your customers a convenient and effective method to select and order their preferred pizzas. In this guide, we’ll walk you through the steps to design a website that is both easy to use and serves your business needs. Whether you’re starting from the ground up or making updates to an existing site, this tutorial will offer detailed instructions on crafting a website that meets your business objectives and appeals to your target market.
Let’s get started by utilizing HTML, CSS, and JavaScript to create a fantastic landing page for Pizza Store that is responsive.
Before beginning this tutorial, you should have a fundamental understanding of HTML, CSS, and JavaScript. To write and save your code, you’ll also need a code editor like Visual Studio Code or Sublime Text.
Step 1 : HTML Code
To begin, we’ll first have to develop a simple HTML document. Within this document, we will outline the primary framework for our pizza establishment and also incorporate a few pictures.
The first line notifies the browser, what version of HTML the page is using: The <!DOCTYPE html> declaration. It’s utilizing the HTML5 standard in this instance.
The following section includes multiple meta tags that offer page information inside the <head> element. The <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> tag guarantees that the page will display correctly in Internet Explorer, whereas the <meta charset=”UTF-8″> tag indicates the character encoding used by the page. The <meta name=”viewport” content=”width-device, initial scale=1.0″> element adjust the content’s size to match the device’s width and sets the page’s width accordingly.
Two stylesheets are imported by the code: style.css and boxicons.min.css
Box Icons is a library of editable vector icons found in the first stylesheet. Then custom CSS code to design page elements is included in the second stylesheet.
There are multiple sections in the page body, each denoted by <section> element. The initial section features a navigation menu with a logo, a hamburger menu symbol, and links to access various parts of the page. The last link leads to a moon symbol, which switches the page to dark mode.
Following that, there’s a section dedicated to the pizza restaurant, showcasing a main image with a call-to-action button, a section detailing the restaurant’s background history and principles, a menu area, and a section highlighting the restaurant’s services.
Every section is styled with CSS guidelines outlined in the “style.css” file.
The program includes two scripts: ScrollReveal and script.js. The initial script brings in the ScrollReveal JavaScript library from an external link “https://unpkg.com/scrollreveal”. ScrollReveal is a library that simplifies the process for web developers to generate scroll animation for HTML components. The second script, enclosed in a <script> tag, references the “script.js” file which holds custom JavaScript code.
Once you’ve finished making the files, simply copy and paste codes provided below into your document. Ensure that save your HTML with a .html extension to ensure it displays correctly in a web browser.
This outlines the fundamental layout of our pizza shop’s website, and now we’re ready to begin applying CSS style to it.
<!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>Responsive Pizza Landing Page | Coding Jasim</title>
<!-- Box Icons -->
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<!-- Link To CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navbar -->
<header>
<a href="#" class="logo">Pizza Corner</a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
<!-- Dark Mode -->
<div class="bx bx-moon" id="darkmode"></div>
</ul>
</header>
<!-- Home Section-->
<section class="home" id="home">
<div class="home-text">
<h1>Pizza Taste</h1>
<h2>The delicious pizza of <br> your choice</h2>
<a href="#" class="btn">View Menu</a>
</div>
<div class="home-img">
<img src="Main pizza.jpg" alt="">
</div>
</section>
<!-- About -->
<section class="about" id="about">
<div class="about-img">
<img src="Aboutpizza.jpg" alt="">
</div>
<div class="about-text">
<span>About Us</span>
<h2>We serve delicious and <br> quality pizzas</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut quo iure rem ducimus tenetur deserunt commodi doloribus, quibusdam vel fuga?</p>
<a href="#" class="btn">Learn More</a>
</div>
</section>
<!-- Menu -->
<section class="menu" id="menu">
<div class="heading">
<span>Menu</span>
<h2>Current week menu</h2>
</div>
<div class="menu-container">
<!-- Box 1 -->
<div class="box">
<div class="box-img">
<img src="images/toma.jpg" alt="">
</div>
<h2>Margherita Pizza</h2>
<h3>Different Taste in each bite</h3>
<span>$15.25</span>
<i class='bx bx-cart-alt'></i>
</div>
<!-- Box 2 -->
<div class="box">
<div class="box-img">
<img src="images/peppero.jpg" alt="">
</div>
<h2>Pepperoni Pizza</h2>
<h3>Different Taste in each bite</h3>
<span>$19.05</span>
<i class='bx bx-cart-alt'></i>
</div>
<!-- Box 3 -->
<div class="box">
<div class="box-img">
<img src="images/veggies.jpg" alt="">
</div>
<h2>Veggie Pizza</h2>
<h3>Different Taste in each bite</h3>
<span>$18.05</span>
<i class='bx bx-cart-alt'></i>
</div>
</div>
</section>
<!-- Service -->
<section class="services" id="services">
<div class="heading">
<span>Our Services</span>
<h2>We provide best quality food services</h2>
</div>
<div class="servives-container">
<!-- Box 1 -->
<div class="s-box">
<img src="https://images.pexels.com/photos/280453/pexels-photo-280453.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
<h3>You Orders</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse tempore ipsum temporibus.</p>
</div>
<!-- Box 2 -->
<div class="s-box">
<img src="https://images.pexels.com/photos/4391470/pexels-photo-4391470.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
<h3>Shipping Status</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse tempore ipsum temporibus.</p>
</div>
<!-- Box 3 -->
<div class="s-box">
<img src="https://images.pexels.com/photos/4393426/pexels-photo-4393426.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500.png" alt="">
<h3>Delivered</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit ea fugiat esse tempore ipsum temporibus.</p>
</div>
</div>
</section>
<!-- Connect -->
<section class="connect">
<div class="connect-text">
<span>Let's Speak</span>
<h2>Connect with Pizza Corner</h2>
</div>
<a href="#" class="btn">Contact Us</a>
</section>
<!-- Contact -->
<section class="contact" id="contact">
<div class="contact-box">
<h3>Pizza Corner</h3>
<span>Connect With Us</span>
<div class="social">
<a href="#"><i class='bx bxl-facebook' ></i></a>
<a href="#"><i class='bx bxl-twitter' ></i></a>
<a href="#"><i class='bx bxl-instagram' ></i></a>
</div>
</div>
<div class="contact-box">
<h3>Menu Links</h3>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#services">Service</a></li>
<li><a href="#contact">Contact</a></li>
</div>
<div class="contact-box">
<h3>Quick Links</h3>
<li><a href="#Contact">Contact</a></li>
<li><a href="#Privacy Policy">Privacy Policy</a></li>
<li><a href="#Disclaimer">Disclaimer</a></li>
<li><a href="#Terms Of Use">Terms Of Use</a></li>
</div>
<div class="contact-box address">
<h3>Contact</h3>
<i class='bx bxs-map' ><span>005, Lorem ipsum dolor, sit amet consectetur, India</span></i>
<i class='bx bxs-phone' ><span>+91 000 XXX 5555</span></i>
<i class='bx bxs-envelope' ><span>example111@email.com</span></i>
</div>
</section>
<!-- Copyright -->
<div class="copyright">
<p>© Pizza Shop All Right Reserved.</p>
</div>
<!-- Scroll Reveal -->
<script src="https://unpkg.com/scrollreveal"></script>
<!-- Link To JavaScript -->
<script src="script.js"></script>
</body>
</html>Step 2 : CSS Code
Following that, we’ll develop our CSS document. Within this document, we’ll apply a few fundamental CSS principles to craft the layout of our pizza shop website. Additionally, we’ll incorporate padding and margin attributes to guarantee the visual consistency of our site.
This process will elevate the visual appeal of our pizza shop website. Name your CSS document style.css and insert the provided code into it. Be sure to include the .css extension at the end of the file name.
/* 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 h2 {
font-size: var(--h2-font);
margin: 1rem 0 1rem;
}
.home-text h1 {
font-size: var(--big-font);
color: var(--main-color);
}
.btn {
display: inline-block;
background: var(--main-color);
padding: 10px 20px;
border-radius: 0.5rem;
color: #fff;
}
.btn:hover {
background: #ffa400;
}
.about-img img {
max-width: 80%;
border-radius: 0.5rem;
}
.about {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
align-items: center;
}
.about-text span {
color: var(--main-color);
font-weight: 500;
}
.about-text p {
margin: 0.8rem 0 1.8rem;
}
.about-text h2 {
font-size: var(--h2-font);
}
.heading {
text-align: center;
}
.heading h2 {
font-size: var(--h2-font);
}
.heading span {
color: var(--main-color);
font-weight: 500;
}
.menu-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
gap: 1.5rem;
align-items: center;
}
.box-img {
width: 200px;
height: 200px;
}
.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 img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.box h3 {
font-size: 1rem;
font-weight: 400;
margin: 4px 0 10px;
}
.box h2 {
font-size: 1.2rem;
}
.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 img {
width: 60px;
}
.s-box {
text-align: center;
}
.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;
}
}In conclusion, we’re going to incorporate some JavaScript into our HTML page. This JavaScript enables us to interact with our website in numerous ways. For instance, it will allow us to switch between dark and light modes.
The initial segment of code is designed to create a toggle feature for the navigation bar. Whenever a user interacts with a menu icon, the code activates the script to toggle the “active” class on and off within the navbar. Moreover, when a user navigates down the page, the code deactivates the “active” class from the navbar.
The subsequent segment of code is appears to implement a dark mode functionality. It activates a dark mode icon and adds an onclick event listener to it. Upon clicking the icon, the code checks if it currently has the class “bx-moon” or “bx-sun” and swaps the class accordingly. If the class is “bx-moon”, the code adds the active class to the body element, which likely activates a dark theme.
The third segment of code appears to be using the ScrollReveal library to unveil page elements as the user scrolls. The code initializes a ScrollReveal object with parameters for “origin” at the top, “distance” at 40px, and “duration” at 2000ms. It then unveils various page elements with a 200ms gap between each reveal.
In summary, this code seems to be implementing several widely used web development functionalities, including a toggle for the navigation bar, a dark mode switch, and scroll reveal effects.
Now create a JavaScript file named script.js and copy the provided codes into it. Ensure the file is properly linked to your HTML document so that the scripts are executed on the page. Remember, the file must have a .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: 150
})To sum up, developing a website for your pizza shop that is responsive, meaning it adapts well to different screen sizes and devices, using HTML, CSS, and JavaScript, can significantly boost your online visibility, attract more visitors, and improve the overall experience for your customers. By adhering to the instructions provided in this guide, you can craft a website that is easy to use, works well, and ranks higher in search engine results. It’s important to set clear objectives for your website and identify your target market. Plan the structure and how users will navigate your site and apply techniques that ensure it looks good and functions smoothly across various platforms. With a well-thought-out pizza shop website, you’ll be able to draw in new patrons, increase your income and differentiate yourself in a fiercely competitive industry.