From eae98bc5312d5d3da539704dc3d291a7f4214adb Mon Sep 17 00:00:00 2001
From: Manvitha119 <156884887+Manvitha119@users.noreply.github.com>
Date: Sun, 21 Apr 2024 01:24:33 -0400
Subject: [PATCH 1/4] Welcome Page
---
css/main.css | 117 ++++++++++++++++++++++++++++++++++++---------------
index.html | 73 +++++++++++++++++++++++++++++++-
2 files changed, 155 insertions(+), 35 deletions(-)
diff --git a/css/main.css b/css/main.css
index bcc90344f..e6598c16c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,47 +1,96 @@
-/**
-Sample css code
-*/
-/* Set height to 100% for body and html to enable the background image to cover the whole page: */
-body,
-html {
- height: 100%;
+body, h1, h2, h3, p, ul, li {
+ margin: 0;
+ padding: 0;
}
-/*Set background image*/
-.container {
- background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb');
- height: 100%;
- background-position: center;
- background-size: cover;
+body {
+ font-family: "Roboto", sans-serif;
+ background: url('../img/usf dining.jpg');
+ backdrop-filter: blur(10px);
+ height: 100vh;
}
-/* Position text in the middle */
-.middle {
- position: absolute;
- color: beige;
- top: 70%;
- left: 39%;
- text-align: center;
- font-size: 25px;
+.header-content {
+ display: flex;
}
-/*Set circle in unordered list*/
-.middle ul {
- list-style-type: circle;
+.logo {
+ width: 200px;
+ margin: 100px auto 50px;
}
-/*Set text inside li tag to left*/
-.middle ul li {
- text-align: left !important;
+nav ul {
+ list-style: none;
+ text-align: center;
}
-/*Set text color for a tag inside middle class and ul>li element*/
-.middle ul li a {
- color: beige;
+nav a {
+ background-color: #f0f0f0;
}
-/*Change text color and decoration for a tags inside middle class and ul>li element*/
-.middle ul li a:hover {
- color: red;
- text-decoration: none;
+section#restaurants ul {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+ section#restaurants ul li {
+ margin: 50px;
+ text-align: center;
+ list-style: none;
+ }
+
+ section#restaurants ul li img {
+ width: 250px;
+ height: 250px;
+ border-radius: 20px;
+ }
+
+.restaurant-logo-container {
+ position: relative;
+ display: inline-block;
+ color: #fff;
+}
+
+ .restaurant-logo-container .info-on-hover {
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: black;
+ }
+
+ .restaurant-logo-container:hover .info-on-hover {
+ display: block;
+ }
+
+.button {
+ padding: 10px 20px;
+ font-weight: bold;
+ text-decoration: none;
+ border-radius: 5px;
+}
+
+ .button:hover {
+ background-color: transparent;
+ color: #fff;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+ }
+
+.info-on-hover {
+ display: none;
+ position: absolute;
+ left: 50%;
+ width: 100%;
+ background-color: rgba(255, 255, 255, 0.8);
+ padding: 10px;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+footer {
+ text-align: center;
+ padding: 20px 0;
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+ background-color: rgba(255, 255, 255, 0.6);
}
diff --git a/index.html b/index.html
index fbae197cd..5a275740f 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,72 @@
-
\ No newline at end of file
+
+
+
+
+
+ Restaurants - USF Dining
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
From 3e9c2a1c84d9935d69891be2d116b7cdeb8471c0 Mon Sep 17 00:00:00 2001
From: PRADEEPCHAND
Date: Sun, 21 Apr 2024 01:27:08 -0400
Subject: [PATCH 2/4] Detailed Page
---
css/menu.css | 317 +++++++++++++++++++++++++++++++++++++++++++++++++++
sample.html | 155 +++++++++++++++++++++----
2 files changed, 447 insertions(+), 25 deletions(-)
create mode 100644 css/menu.css
diff --git a/css/menu.css b/css/menu.css
new file mode 100644
index 000000000..8ff528e67
--- /dev/null
+++ b/css/menu.css
@@ -0,0 +1,317 @@
+body, h1, h2, h3, p, ul, li {
+ margin: 0;
+ padding: 5px;
+}
+
+body {
+ font-family: "Roboto", sans-serif;
+ background-color: #fff;
+ position: relative;
+}
+
+.panera-background::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 150px;
+ z-index: -1;
+ background-color: #657000;
+}
+
+header img {
+ display: block;
+ margin: 0 auto;
+}
+
+nav ul {
+ list-style-type: none;
+ text-align: center;
+ padding: 10px;
+}
+
+ nav ul li {
+ display: inline;
+ margin-right: 10px;
+ }
+
+nav a {
+ text-decoration: none;
+ color: #333;
+ padding: 8px 20px;
+ border-radius: 5px;
+ transition: background-color 0.3s;
+}
+
+ nav a.button {
+ background-color: #f0f0f0;
+ }
+
+ nav a.button:hover {
+ background-color: #ddd;
+ }
+
+main {
+ margin: 20px;
+}
+
+section {
+ margin-bottom: 40px;
+}
+
+ section#restaurant-info,
+ section#location {
+ text-align: center;
+ }
+
+ section#menu ul {
+ list-style-type: none;
+ }
+
+ section#menu ul li {
+ margin-bottom: 10px;
+ }
+
+footer {
+ background-color: #E51636;
+ padding: 20px 0;
+ color: white;
+ text-align: center;
+}
+
+.logo {
+ width: 200px;
+ height: auto;
+ display: block;
+ margin: 30px auto;
+ margin-bottom: 30px;
+}
+
+section#restaurant-info h2,
+section#menu h3,
+section#menu p,
+section#location h3,
+section#timings h3 {
+ color: black;
+ text-align: center;
+ font-style: italic;
+}
+
+section#price h3 {
+ color: black;
+}
+
+section#menu h3 {
+ text-align: center;
+}
+
+section#menu h4 {
+ color: #333;
+}
+
+section#location p, section#timings p {
+ font-style: italic;
+}
+
+.restaurant-image-small {
+ width: 150px;
+ height: auto;
+ border-radius: 5px;
+}
+
+section#restaurant-info img.restaurant-image-small {
+ width: 200px;
+ height: auto;
+ border-radius: 5px;
+}
+
+section#menu .carousel {
+ max-width: 400px;
+ margin: 0 auto;
+ position: relative;
+}
+
+section#menu .carousel-item {
+ flex: 0 0 auto;
+ margin-right: 10px;
+ scroll-snap-align: start;
+ text-align: center;
+ height: 200px;
+}
+
+ section#menu .carousel-item img {
+ max-width: 100%;
+ height: 100%;
+ border-radius: 5px;
+ margin-top: 50px;
+ }
+
+
+
+.flex-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+#menu {
+ flex-basis: 45%;
+ background-color: #f0f0f0;
+ padding: 40px;
+ border-radius: 10px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+}
+
+#price {
+ flex-basis: 45%;
+ padding: 40px 40px 40px 100px;
+}
+
+.dish-name {
+ display: inline-block;
+ width: 300px;
+}
+
+section#timings {
+ position: absolute;
+ top: 30px;
+ right: 10px;
+ margin-top: 30px;
+ color: white;
+}
+
+ section#timings h3 {
+ color: white;
+ text-align: right;
+ }
+
+ section#timings p {
+ text-align: right;
+ }
+
+section#location {
+ position: absolute;
+ top: 30px;
+ left: 10px;
+ margin-top: 50px;
+ color: white;
+}
+
+ section#location h3 {
+ color: white;
+ text-align: left;
+ }
+
+ section#location p {
+ text-align: left;
+ }
+
+.button, .back-button {
+ display: inline-block;
+ padding: 10px 20px;
+ font-size: 16px;
+ font-weight: bold;
+ text-decoration: none;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: transform 0.3s, box-shadow 0.3s;
+}
+
+ .button:hover {
+ background-color: transparent;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+ transform: translateY(-3px);
+ }
+
+.ratings {
+ margin-bottom: 20px;
+}
+
+.rating-value {
+ font-size: 24px;
+ font-weight: bold;
+ color: #333;
+}
+
+.stars {
+ font-size: 24px;
+ color: #FFD700;
+}
+
+section#social-media {
+ margin-top: 40px;
+ text-align: center;
+}
+
+.social-icons {
+ margin-top: 20px;
+}
+
+ .social-icons a {
+ display: inline-block;
+ margin-right: 10px;
+ }
+
+.small-icon {
+ width: 30px;
+ height: 30px;
+}
+
+.add-to-cart-button {
+ background-color: #E51636;
+ border: none;
+ color: white;
+ padding: 10px 20px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ cursor: pointer;
+ border-radius: 4px;
+ margin-left: 100px;
+}
+
+.panera-background #price .add-to-cart-button {
+ background-color: #657000;
+}
+
+.panera-background footer {
+ background-color: #657000;
+}
+
+
+.back-button:hover {
+ background-color: white;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+ transform: translateY(-3px);
+}
+
+.back-button {
+ position: fixed;
+ top: 15px;
+ left: 15px;
+ background-color: white;
+}
+
+section#ratings-reviews {
+ text-align: left;
+ float: left;
+ margin-top: 40px;
+ width: 50%;
+}
+
+section#social-media {
+ text-align: right;
+ float: right;
+ margin-top: 40px;
+ width: 50%;
+}
+
+section#contact-info li {
+ list-style-type: none;
+ text-align:center;
+}
+
+
diff --git a/sample.html b/sample.html
index 6fa891b6c..fcc568053 100644
--- a/sample.html
+++ b/sample.html
@@ -1,33 +1,138 @@
-
-
-
-
-
- Assignment - 3
+
+
+ Panera Bread - USF Dining
+
-
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+ About Panera Bread
+ Panera Bread is a bakery-cafe chain that offers a variety of freshly baked bread, sandwiches, salads, soups, and pastries. Founded in 1987, the company operates more than 2,300 bakery-cafes across the United States and Canada.
+
+
+
+
+
+ Prices
+
+
+ Turkey Sandwich :
+ $8.99
+ Add to Cart
+
+
+ Greek Salad :
+ $7.49
+ Add to Cart
+
+
+ Broccoli Cheddar Soup :
+ $5.99
+ Add to Cart
+
+
+ Bacon Turkey Bravo Sandwich :
+ $9.99
+ Add to Cart
+
+
+ Mac & Cheese :
+ $6.99
+ Add to Cart
+
+
+
+
+
-
\ No newline at end of file
+
+ Location
+
+ 4103 USF Cedar Cir, Tampa, FL 33620
+
+
+
+
+ Timings
+
+ Monday-Saturday: 7:00 AM - 9:00 PM
+ Sunday: 8:00 AM - 8:00 PM
+
+
+
+
+
+ Ratings & Reviews
+
+
Overall Rating: 4.9 /5
+
+ ★★★★★
+
+
+
+
+
+
+
+
+
+
+
+
+
Follow Us
+