diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..229dbf5 Binary files /dev/null and b/images/logo.png differ diff --git a/images/pizza-background.png b/images/pizza-background.png new file mode 100644 index 0000000..f88ca9c Binary files /dev/null and b/images/pizza-background.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..b537d8f --- /dev/null +++ b/index.html @@ -0,0 +1,320 @@ + + + + + + + + The Pizza Maker + + +
+

WELCOME!

+ + +
+ +
+
+

PICKUP OREDER FORM:

+
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ + +
+ + + + +
+ + + + + + + + + + + + + + +

Additional Ingredients:

+ + + + + + + + + + + + + + + + +
+ + +
+ +
+ + +
+
+

Special Instructions:

+

Any additional instructions or preferences for the order

+ +
+ + + +

Pickup Options:

+ + + + +
+ + +

Contact Information:

+ + + + + + +
+ + +

Payment:

+ + + + + + + + +
+ +

Subscription Options:

+Subscribe for regular pizza deliveries with special discounts or offers + + + +
+ +
+ + + +
+
+ + + + + +
+

DELIVERY ORDER FORM:

+
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ + +
+ + + + +
+ + + + + + + + + + + + + + +

Additional Ingredients:

+ + + + + + + + + + + + + + + + +
+ + +
+ +
+ + +
+
+

Special Instructions:

+

Any additional instructions or preferences for the order

+ +
+ + + +

Delivery Options:

+ + + + +
+ + +

Contact Information:

+ + + + + + +
+ + +

Payment:

+ + + + + + + + +
+ +

Subscription Options:

+ Subscribe for regular pizza deliveries with special discounts or offers + + + +
+ +
+ + + +
+
+ + + + +
+

Order Confirmation

+

Thanks for ordering!

+
+ + + + + + \ No newline at end of file diff --git a/scripts.js b/scripts.js new file mode 100644 index 0000000..8d56924 --- /dev/null +++ b/scripts.js @@ -0,0 +1,37 @@ +document.addEventListener('DOMContentLoaded', function () { + // Get references to the pickup and delivery buttons and forms + const pickupBtn = document.getElementById('pickupBtn'); + const deliveryBtn = document.getElementById('deliveryBtn'); + const pickupForm = document.getElementById('pickupForm'); + const deliveryForm = document.getElementById('deliveryForm'); + const orderConfirmation = document.getElementById('orderConfirmation'); + const submitOrderBtn = document.getElementById('submitOrderBtn'); + + // Hide forms initially + pickupForm.style.display = 'none'; + deliveryForm.style.display = 'none'; + + + // Add event listeners to the buttons to handle clicks + pickupBtn.addEventListener('click', () => { + // Show pickup form and hide delivery form + pickupForm.style.display = 'block'; + deliveryForm.style.display = 'none'; + orderConfirmation.style.display = 'none'; + }); + + deliveryBtn.addEventListener('click', () => { + // Show delivery form and hide pickup form + pickupForm.style.display = 'none'; + deliveryForm.style.display = 'block'; + orderConfirmation.style.display = 'none'; + }); + + // Add event listener to the submit button to simulate order submission + submitOrderBtn.addEventListener('click', () => { + // Hide order forms and show confirmation message + pickupForm.style.display = 'none'; + deliveryForm.style.display = 'none'; + orderConfirmation.style.display = 'block'; + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..0517153 --- /dev/null +++ b/styles.css @@ -0,0 +1,54 @@ +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +body { + + font-family: Arial, sans-serif; + +} + +.intro { + text-align: center; + margin-top: 20px; +} + +button { + height: 40px; + width: 100px; + background-color: #FF5733; + color: #fff; + border: none; + border-radius: 5px; + margin: 10px; + cursor: pointer; +} + +button:hover { + background-color: #FF8C42; +} + +.order-form { + background-color: rgba(0, 0, 0, 0.7); + padding: 20px; + border-radius: 10px; + margin: 20px; + max-width: 500px; + margin: auto; + color: #fff; +} + +#orderConfirmation { + display: block; +} + +textarea { + width: 100%; + height: 100px; + margin-bottom: 10px; + padding: 5px; + border-radius: 5px; + resize: vertical; +} \ No newline at end of file