diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..123a85bad Binary files /dev/null and b/.DS_Store differ diff --git a/aboutus.html b/aboutus.html new file mode 100644 index 000000000..2d51a2b2c --- /dev/null +++ b/aboutus.html @@ -0,0 +1,77 @@ + + + + + + <b>ABOUT US</b> + + + + + + +
+
MEET THE TEAM
+
+
+

Overview :

+

Meet our Group11 team! We're the folks behind the scenes of Assignment3's Weblookand Feel. Our group is made up of friendly and hardworking people who build the parts of the website that help you order what you want, share your thoughts, and find out all about our special dining spots. We put everything together like a puzzle, so you can easily click, read, and enjoy without any fuss. We're excited to show you what we've made, just for you!

+
+ + +
+
+ Pradeep +

Pradeep Chand Potturi

+

pradeepchand@usf.edu | MS in BAIS

+ +

"Meet Pradeep, our CSS expert. He made our dining website look stylish and fun to use. Pradeep pays close attention to how things look and work. He's made sure everything on our site looks good and works well. Thanks to him, browsing our website is easy and enjoyable."

+
+
+ Priyaanka Reddy Boothukuri +

Priyaanka Reddy Boothukuri

+

priyaankareddy@usf.edu | MS in BAIS

+

"Say hello to Priyaanka, our creative thinker. She came up with the idea for our dining website and knows HTML well. Her smart ideas and good coding skills gave our site its unique look and feel. Thanks to her, our website is easy to use and fun to explore."

+
+
+ Manvitha +

Manvitha Nagandla

+

manvithanagandla@usf.edu | MS in BAIS

+

"Meet Manvitha, our website builder. She designed the main structure of our website using HTML. Manvitha's work is the base that holds everything together. Thanks to her, our website is clear and easy to use, making it simple for you to find what you need."

+
+
+ Jayanth +

Jayanth Uppara

+

jayanthuppara@usf.edu | MS in BAIS

+

"Here's Jayanth, our writer for the About Us page. He wrote the words that tell our story and mission. Jayanth's writing makes you feel welcome and helps you understand what our team is all about. Thanks to him, you can get to know us better and feel a part of our team."

+
+ +
+
+ + GitHub +

Visit our GitHub repository

+ +
+ + + \ No newline at end of file diff --git a/css/.DS_Store b/css/.DS_Store new file mode 100644 index 000000000..8f858aee2 Binary files /dev/null and b/css/.DS_Store differ diff --git a/css/aboutus.css b/css/aboutus.css new file mode 100644 index 000000000..5f282702b --- /dev/null +++ b/css/aboutus.css @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/css/main.css b/css/main.css index bcc90344f..4038a14bd 100644 --- a/css/main.css +++ b/css/main.css @@ -1,47 +1,99 @@ -/** -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/usfdining.jpg'); + background-size: cover; + 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%; + text-align: center; + background-color: rgba(255, 255, 255, 0.8); + padding: 10px; + border: 1px solid #ddd; + 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/css/menu.css b/css/menu.css new file mode 100644 index 000000000..4e8baf8ba --- /dev/null +++ b/css/menu.css @@ -0,0 +1,337 @@ +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; + } + +section#menu .carousel-prev, +section#menu .carousel-next { + background-color: #000; + color: #fff; + border: none; + cursor: pointer; + font-size: 24px; + padding: 12px; + position: absolute; + top: 50%; + transform: translateY(-50%); + margin-top: 50px; +} + +section#menu .carousel-prev { + left: -50px; +} + +section#menu .carousel-next { + right: -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/css/payment.css b/css/payment.css new file mode 100644 index 000000000..6fee0c8c3 --- /dev/null +++ b/css/payment.css @@ -0,0 +1,137 @@ +body { + font-family: Arial; + font-size: 17px; + background-image: url('../img/usfdining.jpg'); + background-size: cover; + background-position: center; + backdrop-filter: blur(10px); +} + +* { + box-sizing: border-box; +} + +.row { + display: flex; + flex-wrap: wrap; + margin: 0 -16px; +} + +.billing, +.payment { + flex: 50%; + padding: 0 16px; + margin-bottom: 20px; +} + +.container { + background-color: rgba(242, 242, 242, 0.8); + padding: 5px 20px 15px 20px; + border: 1px solid lightgrey; + border-radius: 3px; +} + +input[type=text], +input[type=email] { + width: calc(100% - 24px); + margin-bottom: 20px; + padding: 12px; + border: 1px solid #ccc; + border-radius: 3px; +} + +label { + margin-bottom: 10px; + display: block; +} + +.btn { + background-color: #657000; + color: white; + padding: 12px; + border: none; + width: 100%; + border-radius: 3px; + cursor: pointer; + font-size: 17px; + text-decoration: none; +} + + .btn:hover { + background-color: black; + color:white; + } + +a { + color: #657000; +} + +hr { + border: 1px solid lightgrey; +} + +span.price { + float: right; + color: grey; +} + +.order-summary { + margin-bottom: 20px; + margin-top:20px; +} + +.cart-details { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 3px; + padding: 10px; +} + +.cart-title { + font-size: 18px; + margin-bottom: 10px; +} + +.cart-items { + margin-bottom: 10px; +} + + .cart-items p { + margin: 0; + } + + .cart-items p:last-child { + margin-bottom: 0; + } + +.total { + font-weight: bold; + margin-top: 10px; +} + +.order-summary .section-title { + margin-top: 0; +} + +.checkout-btn { + position: fixed; + bottom: 20px; + right: 20px; + margin-bottom:20px; +} + +footer { + text-align: center; + position: fixed; + width: 100%; + background-color: rgba(255, 255, 255, 0.6); +} + + + + + + + + + diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 000000000..26c4e4961 Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/MANVITHA.jpg b/img/MANVITHA.jpg new file mode 100644 index 000000000..b04bfb28e Binary files /dev/null and b/img/MANVITHA.jpg differ diff --git a/img/Manivithasample.jpg b/img/Manivithasample.jpg new file mode 100644 index 000000000..1a1389cad Binary files /dev/null and b/img/Manivithasample.jpg differ diff --git a/img/chickfila.png b/img/chickfila.png new file mode 100644 index 000000000..0c76a81da Binary files /dev/null and b/img/chickfila.png differ diff --git a/img/facebookicon.png b/img/facebookicon.png new file mode 100644 index 000000000..03056266f Binary files /dev/null and b/img/facebookicon.png differ diff --git a/img/github-icon.png b/img/github-icon.png new file mode 100644 index 000000000..25e83f89d Binary files /dev/null and b/img/github-icon.png differ diff --git a/img/insta.jpg b/img/insta.jpg new file mode 100644 index 000000000..f2f4364af Binary files /dev/null and b/img/insta.jpg differ diff --git a/img/instagramicon.png b/img/instagramicon.png new file mode 100644 index 000000000..4143d0e5f Binary files /dev/null and b/img/instagramicon.png differ diff --git a/img/jayanthuppara.png b/img/jayanthuppara.png new file mode 100644 index 000000000..a271a00bb Binary files /dev/null and b/img/jayanthuppara.png differ diff --git a/img/linkedin.jpg b/img/linkedin.jpg new file mode 100644 index 000000000..a57ce4126 Binary files /dev/null and b/img/linkedin.jpg differ diff --git a/img/pandaexpress.png b/img/pandaexpress.png new file mode 100644 index 000000000..825ecca12 Binary files /dev/null and b/img/pandaexpress.png differ diff --git a/img/panera.png b/img/panera.png new file mode 100644 index 000000000..d124f0301 Binary files /dev/null and b/img/panera.png differ diff --git a/img/paneracheddarsoup.jpg b/img/paneracheddarsoup.jpg new file mode 100644 index 000000000..241e709c2 Binary files /dev/null and b/img/paneracheddarsoup.jpg differ diff --git a/img/paneragreeksalad.jpeg b/img/paneragreeksalad.jpeg new file mode 100644 index 000000000..9df0251e9 Binary files /dev/null and b/img/paneragreeksalad.jpeg differ diff --git a/img/paneraturkeysandwich.png b/img/paneraturkeysandwich.png new file mode 100644 index 000000000..a765db64c Binary files /dev/null and b/img/paneraturkeysandwich.png differ diff --git a/img/pint.jpg b/img/pint.jpg new file mode 100644 index 000000000..d0788f6d3 Binary files /dev/null and b/img/pint.jpg differ diff --git a/img/pradeepsample.jpg b/img/pradeepsample.jpg new file mode 100644 index 000000000..e932c3128 Binary files /dev/null and b/img/pradeepsample.jpg differ diff --git a/img/priyanka.jpg b/img/priyanka.jpg new file mode 100644 index 000000000..b31fd4977 Binary files /dev/null and b/img/priyanka.jpg differ diff --git a/img/subway.jpg b/img/subway.jpg new file mode 100644 index 000000000..da29ae99a Binary files /dev/null and b/img/subway.jpg differ diff --git a/img/twittericon.png b/img/twittericon.png new file mode 100644 index 000000000..4c1858c50 Binary files /dev/null and b/img/twittericon.png differ diff --git a/img/usfdining.jpg b/img/usfdining.jpg new file mode 100644 index 000000000..ddfcf3c47 Binary files /dev/null and b/img/usfdining.jpg differ diff --git a/img/usfdininglogo.png b/img/usfdininglogo.png new file mode 100644 index 000000000..c2070d470 Binary files /dev/null and b/img/usfdininglogo.png differ diff --git a/img/x.png b/img/x.png new file mode 100644 index 000000000..9a64d5afd Binary files /dev/null and b/img/x.png differ diff --git a/img/youtube.png b/img/youtube.png new file mode 100644 index 000000000..60d904339 Binary files /dev/null and b/img/youtube.png differ diff --git a/index.html b/index.html index fbae197cd..0149ca49e 100644 --- a/index.html +++ b/index.html @@ -1 +1,72 @@ - \ No newline at end of file + + + + + + Restaurants - USF Dining + + + + +
+ + +
+ +
+ +
+ + + diff --git a/js/main.js b/js/main.js index 848a3f230..73913a312 100644 --- a/js/main.js +++ b/js/main.js @@ -1,14 +1,22 @@ -/** - * Your JS code here - */ - -/** - * Sample code - */ -document.addEventListener('DOMContentLoaded', function() { - var ulElement = document.getElementById('links'); - var liElement = document.createElement('li'); - liElement.appendChild(document.createTextNode('created by main.js')); - - ulElement.appendChild(liElement); -}); +let slideIndex = 1; + +function showSlides(n) { + let i; + let slides = document.getElementsByClassName("carousel-item"); + if (n > slides.length) { slideIndex = 1; } + if (n < 1) { slideIndex = slides.length; } + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; + } + slides[slideIndex - 1].style.display = "block"; +} + +function prevSlide() { + showSlides(slideIndex -= 1); +} + +function nextSlide() { + showSlides(slideIndex += 1); +} + +showSlides(slideIndex); diff --git a/payment.html b/payment.html new file mode 100644 index 000000000..5d5060b47 --- /dev/null +++ b/payment.html @@ -0,0 +1,110 @@ + + + + + + Payment + + + + + + +
+
+
+

Order Summary

+
+

Cart 4

+
+

Turkey Sandwich X 2 $17.98

+

Bacon Turkey Bravo Sandwich $9.99

+

Broccoli Cheddar Soup $5.99

+
+

Total $33.96

+
+
+
+
+
+
+

Billing Address

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

Payment

+
+ +
+ + + + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ Paynow +
+
+
+ +
+
+
+ + + + diff --git a/sample.html b/sample.html index 6fa891b6c..a44be91b4 100644 --- a/sample.html +++ b/sample.html @@ -1,33 +1,143 @@ - - - - - - Assignment - 3 + + + Panera Bread - USF Dining + -
-
-

- Useful links -

- -
-
+
+
+ +
+ +
+ +
+
+ Panera Bread +

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 + +
    • +
  • + Greek Salad: + $7.49 + +
    • +
  • + Broccoli Cheddar Soup: + $5.99 + +
    • +
  • + Bacon Turkey Bravo Sandwich: + $9.99 + +
    • +
  • + Mac & Cheese: + $6.99 + +
    • +
+
+ +
+ +
+

Location

+

+ 4103 USF Cedar Cir, Tampa, FL 33620 +

+
- \ No newline at end of file +
+

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

+ +
+
+
+

Contact Us

+
    +
  • For inquiries or feedback, please feel free to contact us:
    • +
  • Phone: (765) 432-1098
    • +
  • Email: info@panerabread.com
    • +
+
+
+
+

© 2024 USF Dining

+
+
+ + +
+ + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..51b00e53d --- /dev/null +++ b/styles.css @@ -0,0 +1,94 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #005432; /* Background color */ + color:#CFC493; + +} + +header { + background-color: #005432 ; + color:#CFC493; + text-align: center; + padding: 20px 0; + font-family: 'Courier New', Courier, monospace; + font-size: xx-large; +} + +main { + padding: 20px; +} +.about-us { + color: #FEF2ED; /* White text */ + padding: 20px; /* Some padding around the text */ + margin: 20px 0; /* Margin at the top and bottom */ + flex-wrap: horizontal; + } +.overview { + background-color: #f9f9f9; /* Light gray background */ + color: #FEF2ED; + padding: 20px; + margin-bottom: 20px; + border-radius: 8px; + border: 1px solid #e0e0e0; +} + + + +.team-members { + display: flex; /* Use flexbox */ + justify-content: space-between; /* Space items evenly */ + flex-wrap: nowrap ; /* Wrap items to the next line if needed */ +} + +.team-member { + background-color:#005432 ; + padding: 20px; + color: #FEF2ED; + margin: 10px; /* Space around each team member */ + + text-align: center; /* Center text */ +} +.github-link { + text-align: left; /* Center align the GitHub icon */ + margin-top: 10px; /* Add some space at the top */ +} + +.github-link img { + margin-left: 5px; /* Add a small margin to separate the icon from text */ +} + +.team-member img { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 8px; /* Rounded corners */ + margin-bottom: 20px; /* Spacing at the bottom */ +} + +.team-member-details { + text-align: left; /* Align text to the left */ + text-align: center; +} + +.team-member h2 { + color:#CFC493; + margin-top: 0; /* Remove top margin */ +} + +.team-member p { + margin-bottom: 10px; +} + +.team-member a { + display: inline-block; + margin-top: 10px; +} + +footer { + background-color: #CFC493; + color: #fff; + text-align: center; + padding: 10px 0; +}