How To Create A Pizza Shop Website Using HTML And CSS
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.
How To Make A Pizza Shop Website Using HTML And CSS
- 0.0 - 1.30 min : Intro
- 1.30 - 44.31 min: Create A Pizza Shop Website Using HTML And CSS.
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.
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.
Pizza Site GRILLED CHICKEN
SUMMER PIZZA
FIND LOCATION
VEGGIE
SPECIAL
CHICKEN WRAP
SPECIAL
ICE COFFE
SUMMER
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
Thank you for your awesome work.
ReplyDeleteYour 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