Good Pizza Great Pizza βΒ A pizza site! π
Good Pizza Great Pizza βΒ A pizza site! π
Hi!! π
Hope everyone is doing well! :)
Do you want pizza? Hot, fresh, delicious, fast pizza?
In that case, Good Pizza, Great Pizza will deliver hot, fresh, delicious, fast pizza to your doorstep in less than 20 minutes!
This pizza site isn't an actual site for a real pizza company (calling the fake number, going to any of the fake social media, or showing up at the fake address will not result in hot, fresh, delicious, fast pizza!
Anyways!
I made a responsive pizza restaurant website in HTML
and CSS
!
Here's how it looks like:
It's based on the video game Good Pizza Great Pizza, an awesome mobile pizza simulation game where you own a pizzeria, have different customers with orders, and have to prepare pizzas for them. Many of the images I used are from the game (I got the images on the wiki).
Links π
-
Code ==> replit.com/@Bookie0/Good-Pizza-Great-Pizza#README.md
-
Spotlight/Apps page ==> replit.com/@Bookie0/Good-Pizza-Great-Pizza?v=1
-
Post ==> replit.com/talk/share/Good-Pizza-Great-Pizza-A-pizza-site/145576
Features β¨
Home page/landing page
- Hero image
- Navbar
- 2 buttons (including 1 CTA)
- Small pizza slice image with bouncing animation (to indicate scroll down/click on it)
Menu
- 7 pizzas and 'Make your own' option
- Each with name, image, description, and price
- 'View our full menu' link
Why us
- 3 reasons why you should use this pizza restaurant
- Fresh ingredients
- Fast delivery
- We love Earth
- Each with title, image, and description
Contact
- Business hours card with image, days, and hours
- Book a table card with image and form
- Name
- Phone number
- Booking date & time
- 'Reserve table' button
- Street address
- Phone number
Order
- 5 categories:
- Original
- Big
- Something...different
- Other
- Create pizza
- Each pizza has name, image, description, price, quantity, and 'Order' button
Create
- 7 different ingredients to choose from:
- Dough
- Sauce
- Cheese
- Meat
- Veggies
- Fruit
- Other
- For dough and sauce, you can only select one
- For the rest, you can check the ones you want
Footer
- Name of restaurant, description
- Social media icons
- Links on home page
- Links on order page
- Business hours
- Address
- Phone number
Style π¨
Pizza images
The pizza images (except for the hero image), all come from the game I mentioned above.
As you can see, I found the images on the Fandom Wiki.
The images for the Why Us and Contact section also come from the Fandom
Fonts
The main font family is font-family: 'Rajdhani', sans-serif;
, but I also used font-family: 'PT Sans Narrow', sans-serif;
for the text in caps (as well as letter-spacing: 5px;
to not make it too aggressive/bunched up).
Icons
The social media icons on the footer come from Ionicons, a great library of beautiful icons.
Colors
The primary color is #121618
, used for the background color, a nice black that's not too dark. The secondary color, mostly used for the cards and footer, is #1b2124
. The accent color, #e98f0f
is a sort of yellow-dark-orange color. It looks great because the color ressembles colors found in pizzas. The accent color is used for buttons, CTA elements, headers, and highlights.
This is how it looks like:
For the text, the primary text color is a simple white: #fff
. The secondary color is #a3abad`, a gray.
Reservation form
I just wanted to go through a bit on what I did for the reservation form (particularly the input boxes):
The input boxes have a transparent background color, and a white bottom border. They also seem to have a black-ish border on the other sides, but it's actually a shadow! With box-shadow: 0 0 8px 2px inset rgba(0 0 0 / 50%)
, we use inset
on the box-shadow
property so that it makes the input box look a bit hollow. It's a pretty cool effect!
Then, when you click on the input box to type something in it (:focus
pseudo class), the bottom border switches to the yellow/orange accent color, and the shadow effect is a bit darker (as if you're 'pressing' more into the input box).
Here's the CSS
for the form:
.contact .container .card.book input { border-radius: 2px; /* make it a bit round, but not too much */ border: none; /* no border... */ border-bottom: 2px solid var(--primary-text-color); /* except bottom border */ width: 300px; /* dimensions */ height: 30px; background-color: transparent; /* no background color */ font-family: 'Rajdhani', sans-serif; /* font family */ font-size: 20px; /* how big the text is */ margin-bottom: 15px; /* to space the input boxes out from each other */ color: var(--primary-text-color); /* color of text you type in */ padding: 20px; /* spacing between content and border */ padding-left: 10px; /* less padding on the left */ transition-duration: 0.3s; /* to make a smooth transition between different colors */ box-shadow: 0 0 8px 2px inset rgba(0 0 0 / 50%); /* box shadow to make it look hollow */ } /* placeholder text (that disappears when you click on it */ .contact .container .card.book input::placeholder { color: var(--secondary-text-color); /* secondary text color */ } /* when you click the input box */ .contact .container .card.book input:focus { outline: none; /* input boxes have a default outline */ border-color: var(--accent-color); /* changes the bottom border to the accent color */ box-shadow: 0 0 8px 5px inset rgba(0, 0, 0, 0.5) /* box shadow becomes a bit thicker */ }
Buttons
The buttons all share the same similar style. They have the accent color, dashed, border, a transparent background, and accent color text in full caps. On hover (:hover
), that text becomes white, the border disappears, and the background color is the accent color. There's also an accent color shadow, to make it look like the button is glowing. When you click on the button (:active
), it becomes bigger (1.05
times bigger).
Here's how it was made:
button { background-color: transparent; /* transparent background color (for most buttons) */ border: 2px dashed var(--accent-color); /* dashed border */ color: var(--accent-color); /* color of text */ font-size: 20px; /* font size */ width: 200px; /* dimensions */ height: 50px; font-family: 'PT Sans Narrow', sans-serif; /* font family */ letter-spacing: 5px; /* space between letters */ margin-top: 10px; /* spacing above button */ cursor: pointer; /* to make the cursor pointer (when hovering) */ transition: background 0.3s, color 0.3s, transform 0.1s; /* smooth transitions (different values for each property */ } /* on hover */ button:hover { background: var(--accent-color); /* background color appears */ color: var(--primary-text-color); /* different text color */ box-shadow: 0 0 10px 0 var(--accent-color); /* shadow */ } /* on click */ button:active { transform: scale(1.05); /* buttons gets bigger */ }
If you'd like to know more about the design or style of the site in general, check out the code, or tell me in the comments! :)
Closing πͺ
Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D
Have a great day!!!
Bye! π
Awesome! The pizza is super expensive, lol
Good Pizza Great Site xD ( I'm hungry now. Add a redirect to perhaps to the pizza which we ordered Dominoes site after we click order....)
I think the fact that eggplant is a fruit should be kept secret.
Also I love the image for the anchovies. There like these tiny little things and it sooooo funny :)@Bookie0
@sojs funny like the ping didn't work cause of a space. lol
@Yoplayer1py I still got pinged because itβs a comment on my post lol
making me hungry....
This is amazing!
@JoshuaZieber Thank you! :)
@Bookie0 kinda off topic but did the replit team remove cycle counts next to names?
@figglediggle Yes they did, but you can still see it on the profile or if you hover on a person's username.
This looks pretty good! looks like a real pizza website, I'd recommend you change how up close it is so the image quality looks better. Besides that though it's pretty good!
@LuaGameEngine Thanks! :)
Which image are you talking about; the hero image in the landing page or the pizzas?
this is really cool
and a little overpriced
@Bunnytoes Lmao thanks! Yeah I wasnβt really sure what to put for the prices so most of them were just guesses lol
this pizza site is amazing, just i can't order my pizza xD
@AkshitRai Lmao Thanks! :)