How To Create A Pizza Shop Website Using HTML And CSS

 Pizza Shop Website in HTML And CSS

Pizza Shop Website

Learn how to make a Pizza shop website Using HTML and CSS. Easy way to create a Pizza Shop food website with HTML and CSS. You will make this website by following my video tutorial or by following the steps which I have given below.

HostGator Web Hosting

How To Make A Pizza Shop Website Using HTML And CSS

  1. 0.0 - 1.30 min : Intro
  2. 1.30 - 44.31 min: Create A Pizza Shop Website Using HTML And CSS.


About This Tutorial

In this tutorial, I will teach you how to make a Pizza Shop Website just using HTML and CSS. In the video tutorial's first 60s, I will show you the design which I will create in this tutorial. First, I will make the Structure of this website and then style the website using CSS. Beginners easily create this pizza website by watching or following the steps which I have given above. I hope you like my tutorial. If you have any questions or any problems, contact me.


Follow These Steps:-

1) First Open Your Text Editor Like Notepade++.
2) Create HTML And CSS Files (index.html, style.css), And Put This Files In Your Project Folder Which You Create. I Recommended You To Create Separate Folders For CSS File.
3) Link The CSS File (Style.css) With HTML File Using "Link" Tag.
4) Copy The HTML Code Which I Given Below And Past In Your HTML File.

HTML


<!--doctype html-->
<html>
<head>
<meta charset="utf-8">
<title>Pizza Site</title>
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="navigation-container">
<div class="navigation-content">
<div class="logo"><img src="images/logo.png"/></div>
<div class="menu">
<ul>
<li><a href="#">MENU</a></li>
<li><a href="#">BEST DEALS</a></li>
<li><a href="#">ONLINE ORDER</a></li>
</ul>
</div>
<div class="cart">
<img height="30px" src="images/cart.png">
<a href="#">Cart</a>
</div>
</div>
</div>
<!--------NAVIAGTION-END------------->
<div class="content-container">
<div class="whats-new">
<img src="images/WHATS NEW.png">
</div>
<div class="content">
<!--1------------------------------------>
<div class="first-row">
<div class="new">
<p>GRILLED CHICKEN</p>
<p>SUMMER PIZZA</p>
<button >HOT & SPICY</button>
</div>
<!------------------------------>
<div class="find">
<div class="search">
<p>FIND LOCATION</p>
<div class="text">
<input type="search" placeholder="Search Something Here"/>
<button>Search</button>
</div>
</div>
<!------------------------------->
<div class="order">
<a href="#"><font style="color:#F9A609;">ORDER</font> ONLINE</a>
</div>
</div>
</div>
<!--2------------------------------------->
<div class="second-row">
<div class="food-one">
<div class="name">
<p>VEGGIE</p>
<p>SPECIAL</p>
</div>
<div class="price"><button>$9<sup>99</sup></button></div>
</div>
<div class="food-two">
<div class="name">
<p>CHICKEN WRAP</p>
<p>SPECIAL</p>
</div>
<div class="price"><button>$5<sup>99</sup></button></div>
</div>
<div class="food-three">
<div class="name">
<p>ICE COFFE</p>
<p>SUMMER</p>
</div>
<div class="price"><button>$3<sup>99</sup></button></div>
</div>
</div>
<!--3------------------------------------->
<div class="third-row">
<div class="flavor">
<a href="#">
<p>FLAVOR MENU</p>
<p>VAGITABEL-HAND TOSED</p>
</a>
</div>
<div class="breakfast">
<a href="#">
<p>BREAKFAST MENU</p>
<p>PARANTHA ROLL</p>
</a>
</div>
</div>
</div>
</div>
<!------------------------------->
<div class="footer">
<div class="navigation-content">
<div class="logo"><img src="images/logo.png"/></div>
<div class="menu footer-menu">
<ul>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">TEAM</a></li>
<li><a href="#">SUPPORT</a></li>
</ul>
</div>
<div class="social">
<ul>
<li><a href="#"><img src="images/facebook.png"></a></li>
<li><a href="#"><img src="images/twitter.png"></a></li>
<li><a href="#"><img src="images/youtube.png"></a></li>
</ul>
</div>
</div>
<!--NAVIGATION-END--------------->
<div class="copyright">
<p>Copyright 2020 Pizzaro Theme.Going-To Internet</p>

</div>
</div>
</body>
</html>

YOUR EXISTING AD GOES HERE

5) Copy The CSS Code Which I Given Below And Past In Your CSS File.

CSS
@charset "utf-8";
/* CSS Document */
body{
	margin:0px;
	padding:0px;
	background-image:url(../images/bg2.png);
	background-size:cover;
			background-repeat:no-repeat;
			background-attachment:fixed;}
*{
	box-sizing:border-box;}
ul{
	list-style:none;}
a{
	text-decoration:none;}

.navigation-container{
	width:100%;
	height:60px;
	background-color:#ea272d;
	box-shadow:2px 2px 12px rgba(0,0,0,0.20);
	position:fixed;
	top:0px;}
.navigation-content{
		height:60px;
	margin:0px 12%;
	display:flex;
	align-items:center;
	justify-content:space-between;
	}
.menu ul{
	display:flex;
	}
.menu ul li a{
	padding:0px 30px;
	font-family:calibri;
	font-weight:bold;
	color:#FFFFFF;
	border-left:3px solid #e54c51;}
.cart{
	display:flex;
	align-items:center;
	font-family:calibri;
	font-weight:bold;}
.cart a{
	color:#FFFFFF;
	margin:0px 10px;}
.whats-new{
	display:flex;
	justify-content:center;
	margin:7% 0px 20px 0px;}
	.content{
		display:flex;
		flex-direction:column;
		align-items:center;}
		.first-row{
			display:flex;}

	.new{
		width:540px;
		height:320px;
		margin:10px;
		background-color:#B1B1B1;}
	.search,.order{
		width:540px;
		height:150px;
		margin:10px;
		background-color:#B1B1B1;
		display:flex;
		flex-direction:column;}
		.find{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-content:center;}
	.search p{
		color:#FFFFFF;
		font-size:30px;
		font-family:calibri;
		font-weight:bold;
		line-height:0px;
		text-shadow:2px 2px 12px rgba(0,0,0,0.5);
		
	}


.food-one,.food-two,.food-three{
	width:354px;
		height:350px;
		margin:10px;
		
		background-color:#B1B1B1;
	}
.second-row{
	display:flex;
	}
.flavor,.breakfast{
	width:540px;
	height:180px;
	margin:10px;
	background-color:#b1b1b1;}
	.third-row{
		display:flex;}
	.new p{
		color:#FFFFFF;
		line-height:50px;
		padding:0px;
		margin:0px;
		
		}
	.new p:nth-child(1){
		font-size:40px;
		font-family:calibri;
		font-weight:bold;}
			.new p:nth-child(2){
		font-size:30px;
		font-family:myriad pro;
		}
		.new{
			padding:40px;
			display:flex;
			flex-direction:column;
			justify-content:center;
		
			}
	.new button{
		width:120px;
		height:35px;
		border-radius:10px;
		background-color:#ea272d;
		text-align:center;
		font-family:calibri;
		font-weight:400;
		color:#FFFFFF;
		font-size:16px;
		border:none;
		box-shadow:2px 2px 12px rgba(0,0,0,0.2);
		outline:none;}
	button:active{
		transform:scale(1.1);
		transition:all ease 0.5s;}
	
	.text{
		background-color:#F1F1F1;
		border-radius:20px ;
		width:250px;
		height:35px;
		display:flex;
		justify-content:space-around;
		align-items:center;
		box-shadow:2px 2px 12px rgba(0,0,0,0.2);}
		.text input[type=search]{
			border:none;
			background-color:transparent;
			color:#000000;
			text-align:center;
			outline:none;}
		.search{
			display:flex;
			justify-content:center;
			align-items:center;}
		.text button{
			height:35px;
			width:100px;
			border:none;
			color:#0B0B0B;
			font-family:calibri;
			font-weight:bold;
			outline:none;
			border-radius:0px 20px 20px 0px;
			}
	.text button:hover{
		color:#ea272d;
		transition:all ease 0.5s;}
	.order{
		display:flex;
		justify-content:center;
		align-items:center;
		}
	.order a{
		font-family:calibri;
		font-weight:bold;
		color:#FFFFFF;
		font-size:40px;
		text-shadow:2px 2px 12px rgba(0,0,0,0.1);}
	.name p{
		font-family:calibri;
		color:#FFFFFF;
		line-height:40px;
		margin:0px;
		padding:0px;}
	.name p:nth-child(1){
		font-weight:bold;
		font-size:40px;}
		.name p:nth-child(2){
		font-weight:200;
		font-size:30px;}
	.food-one,.food-two,.food-three{
		display:flex;
		flex-direction:column;
		justify-content:space-between;
		padding:5%;
		text-shadow:2px 2px 12px rgba(0,0,0,0.2);
		}
	
	.price button{
		color:#FFFFFF;
		border:none;
		background-color:transparent;
		outline:none;
		width:70px;
		height:35px;
		border-radius:20px;
		background-color:#ea272d;
		box-shadow:2px 2px 12px rgba(0,0,0,0.2);
		}
	.flavor,.breakfast{
		font-family:calibri;
		display:flex;
		justify-content:center;
		align-items:center;
		line-height:0px;
		}
		.footer{
			background-color:#0A0A0A;
			height:150px;}
		.flavor p:nth-child(1),
		.breakfast p:nth-child(1){
			color:#FFFFFF;
			font-weight:bold;
			font-size:40px;}
		.flavor p:nth-child(2),
		.breakfast p:nth-child(2){
			font-size:20px;
			color:rgba(255,255,255,0.50);
			text-align:center;}
			.social ul{
				display:flex;
				}
			.social ul li a{
				padding:15px;}
		.social img{
			height:15px;}
		.footer-menu ul li a{
			border-left:3px solid #2E2E2E;
			color:rgba(255,255,255,0.80)
			}
		.navigation-content{
			border-bottom:2px solid rgba(255,255,255,0.10)}
		.copyright{
			display:flex;
			justify-content:center;
			align-items:center;
			font-family:myriad pro;
			font-weight:400;
			font-size:12px;
			margin-top:10px;}
		.copyright p{
			font-family:calibri;
			
			color:#B9B9B9;}
		.new{
			background-image:url(../images/new.png);
			background-size:cover;
			background-repeat:no-repeat;
			
			
			}
			.search{
			background-image:url(../images/find.png);
			background-size:cover;
			background-repeat:no-repeat;

			}
		.order{
			background-image:url(../images/order.png);
			background-size:cover;
			background-repeat:no-repeat;
			}
		.food-one{
			background-image:url(../images/food-1.png);
			background-size:cover;
			background-repeat:no-repeat;
			}
		.food-two{
			background-image:url(../images/food-2.png);
			background-size:cover;
			background-repeat:no-repeat;
		}
		.food-three{
			background-image:url(../images/food-3.png);
			background-size:cover;
			background-repeat:no-repeat;
			}
			
		.flavor{
			background-image:url(../images/flavor.png);
			background-size:cover;
			background-repeat:no-repeat;
			}
		.breakfast{
			background-image:url(../images/breakfast.png);
			background-size:cover;
			background-repeat:no-repeat;
			}
	
	/*Customize scroll bar*/
::-webkit-scrollbar{
	width:15px;
	background-color:#1B1B1B;
	border:1px solid #1b1b1b;}

::-webkit-scrollbar-track{
	box-shadow: 0 0 5px rgba(0,233,253,1.00);
	}
::-webkit-scrollbar-thumb{
	background-color:#ea272d;
	border-left:2px solid #1b1b1b;

	}
.new,.search,.order,.food-one,.food-two,.food-three,.breakfast,.flavor{
	border-radius:5px;
}

6) All Files link, Which I use in the project given below.


The Download Links Will Be Shown in 30 Seconds


How To Dowload Files

Comments

  1. Thank you for your awesome work.

    ReplyDelete
  2. Your blog took to me an entirely significant spot. It is a beneficial and factual article to enhance knowledge for Online Ordering System. Thanks for sharing an article like this.

    ReplyDelete

Archive

Contact Form

Send