Share your repls and programming experiences

← Back to all posts
Good Pizza Great Pizza – A pizza site! 🍕
Bookie0

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 🔗


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
    • Email
    • 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:

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:


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! 👋

Voters
InvisibleOne
maxina
MarzToo
Baconman321
MikeTPL
STCollier
PixiGem
MATHyou
tussiez
rickysong
Comments
hotnewtop
AkshitRai

this pizza site is amazing, just i can't order my pizza xD

Bookie0

@AkshitRai Lmao Thanks! :)

PixiGem

if u invite me, i can make it so that it really gives an order to ur email
(it specifies everything, like cheese, bacon)

Bookie0

@PixiGem It's fine lol the project's over. Thanks tho! :)

tussiez

Awesome! The pizza is super expensive, lol

Bookie0

Thanks lol!
Yeah I'm not a pro with the prices xD @tussiez

tussiez

@Bookie0 xD
Either way, this is a great website! It's production ready - I could see it being used in a real pizza shop! :D

Bookie0

@tussiez lol, lmk if you find some pizza shop who wants the site xD

rickysong

mmmmmm

Bookie0
rickysong

@Bookie0 what? You cant blame me, I love pizza

rickysong

:P

rickysong

mic drop

VulcanWM

This is amazing!

Bookie0

Thank you! :) @VulcanWM

VulcanWM

np! :) @Bookie0

Yoplayer1py

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....)

Bookie0
sojs

I think the fact that eggplant is a fruit should be kept secret.

Bookie0

@sojs Lmaooo

sojs

Also I love the image for the anchovies. There like these tiny little things and it sooooo funny :)@Bookie0

Bookie0
Yoplayer1py

@sojs funny like the ping didn't work cause of a space. lol

Bookie0

@Yoplayer1py I still got pinged because it’s a comment on my post lol

Yoplayer1py
ch1ck3n

mmm, pizza

Bookie0
Froggo-School

making me hungry....

Bookie0

xD @Froggo-School

JoshuaZieber

This is amazing!

Bookie0

@JoshuaZieber Thank you! :)

figglediggle

@Bookie0 kinda off topic but did the replit team remove cycle counts next to names?

Bookie0

@figglediggle Yes they did, but you can still see it on the profile or if you hover on a person's username.

SBtrains

Noice

Bookie0

Thanks! :) @SBtrains

SBtrains
LuaGameEngine

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!

Bookie0

@LuaGameEngine Thanks! :)

Which image are you talking about; the hero image in the landing page or the pizzas?

Bunnytoes

this is really cool

and a little overpriced

Bookie0

@Bunnytoes Lmao thanks! Yeah I wasn’t really sure what to put for the prices so most of them were just guesses lol

CodingElf66

Yumm... gimme

PIZZAAAA

Bookie0