diff --git a/Project Food Menu/index.html b/Project Food Menu/index.html index 19879df..96ff726 100644 --- a/Project Food Menu/index.html +++ b/Project Food Menu/index.html @@ -1,4 +1,4 @@ - + @@ -17,7 +17,11 @@ - + + +

Eat Right Food

-

Eat Healty, it is good for our health.

+

Eat Healty, it is good for our health.

Menu
@@ -69,7 +67,7 @@

Serving delicacies since 1992

-
+

Types of food

@@ -201,76 +199,171 @@

Pav Bhaji

+
+ + +
+
+
+

Retaurant Subscription Plans

+

Exclusive Perks for True Food Enthusiasts!
"Join our culinary community and enjoy access to chef’s specials, members-only discounts, and priority reservations for new menu tastings. Don’t miss out on exclusive, delectable dishes crafted just for you, delivered fresh to your table each month! Choose the perfect dining plan to satisfy your cravings and elevate your dining experience!" +

+ +
+ Food + +
+

Basic Plan

+

Rs 500/Month

+
    +
  • 2 Exclusive Meals Per Month
    • +
  • 10% Discount on All Menu Items
    • +
  • Complimentary Drink with Each Visit
    • +
  • Priority Reservations
    • +
+ + Subscribe! +
+ + +
+

Premium Plan

+

Rs 1000 / Month

+
    +
  • 5 Exclusive Meals Per Month
    • +
  • 20% Discount on All Menu Items
    • +
  • Complimentary Dessert with Each Meal
    • +
  • VIP Priority Reservations & Early Access to Special Events
    • +
+ Subscribe! +
+ +
+

Elite Plan

+

Rs 1500 / Month

+
    +
  • Unlimited Monthly Meals
    • +
  • 30% Discount on All Menu Items
    • +
  • Access to Seasonal Menus & Exclusive Dishes
    • +
  • VIP Reservations Anytime + Exclusive Event Invitations
    • +
+ Subscribe! +
+ Food +
+
+

What Our Customers Say

-
-
-
-
- -

Ross Lee

+
+
+
+
+
+
+ +

Ross Lee

+
+
+
+ + + + + +
+

+ This restaurant offers a delightful blend of flavors with exceptional service. + The ambience is elegant and inviting, perfect for a relaxed meal. + Highly recommended for food lovers! + +

+
-
-
- - - - - -
-

- This restaurant offers a delightful blend of flavors with exceptional service. - The ambience is elegant and inviting, perfect for a relaxed meal. - Highly recommended for food lovers! +

+
+
+ +

Amelia Watson

+
+
+
+ + + + + +
+

+ An exquisite dining experience awaits at this restaurant, where each dish showcases impeccable craftsmanship and bold flavors. + A must-visit destination for discerning food connoisseurs seeking culinary excellence. + +

-

- -
-
-
-
- -

Amelia Watson

-
-
- - - - - -
-

- An exquisite dining experience awaits at this restaurant, where each dish showcases impeccable craftsmanship and bold flavors. - A must-visit destination for discerning food connoisseurs seeking culinary excellence. +

+
+
+ +

Ben Roy

+
+
+
+ + + + + +
+

+ This restaurant boasts a vibrant, upscale ambience, perfect for hosting parties and gatherings. + The spacious, stylish interiors and impeccable service ensure an unforgettable dining experience for all. + +

-

- -
-
-
-
- -

Ben Roy

+ +
+
+
+ +

Ethan Bennett

+
+
+
+ + + + + +
+

+ This restaurant is a hidden gem, offering a unique blend of traditional and modern flavors. + The staff is friendly and attentive, making you feel welcomed from the moment you step in. + Truly an unforgettable experience! +

+ +
-
- - - - - -
-

- This restaurant boasts a vibrant, upscale ambience, perfect for hosting parties and gatherings. - The spacious, stylish interiors and impeccable service ensure an unforgettable dining experience for all. - -

- +
+
+
@@ -293,46 +386,191 @@

Contact Us

- + + + + + + + + + + + diff --git a/Project Food Menu/script.js b/Project Food Menu/script.js deleted file mode 100644 index 28a68e8..0000000 --- a/Project Food Menu/script.js +++ /dev/null @@ -1,68 +0,0 @@ - -const themeToggle = document.querySelector('#checkbox'); -const body = document.body; -console.log('script is running') - - -const currentTheme = localStorage.getItem('theme'); -if (currentTheme) { - body.classList.add(currentTheme); - if (currentTheme === 'dark-mode') { - themeToggle.checked = true; - } -} - - -themeToggle.addEventListener('change', function() { - if (this.checked) { - body.classList.add('dark-mode'); - localStorage.setItem('theme', 'dark-mode'); - console.log("dark mode") - } else { - body.classList.remove('dark-mode'); - localStorage.setItem('theme', 'light-mode'); - console.log("lightmode") - } -}); - - -document.addEventListener('DOMContentLoaded', function() { - var typed = new Typed('#newlogo', { - strings: ['Restro.', "Taste unique"], - loop: true, - typeSpeed: 80, - backSpeed: 25, - backDelay: 1000, - startDelay: 500 - }); -}); - - -const backToTopButton = document.createElement("button"); -backToTopButton.innerHTML = "↑"; -backToTopButton.setAttribute("id", "back-to-top-btn"); -document.body.appendChild(backToTopButton); - -window.onscroll = function() { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - backToTopButton.style.display = "block"; - } else { - backToTopButton.style.display = "none"; - } -}; - -backToTopButton.onclick = function() { - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; -}; - - -document.querySelectorAll('a[href^="#"]').forEach(anchor => { - anchor.addEventListener('click', function (e) { - e.preventDefault(); - - document.querySelector(this.getAttribute('href')).scrollIntoView({ - behavior: 'smooth' - }); - }); -}); \ No newline at end of file diff --git a/Project Food Menu/style.css b/Project Food Menu/style.css index 891c880..e05056b 100644 --- a/Project Food Menu/style.css +++ b/Project Food Menu/style.css @@ -15,6 +15,143 @@ body { font-family: "Poppins", sans-serif; } +/*......./Subscriptions/........*/ + +#subscriptions{ + margin: 0; + padding: 0; + text-align: center; + background-color: #ffffff; +} +.subscriptions-heading{ + margin-top: 50px; + text-align: center; + font-size: 2.2rem; + font-weight: bold; +} +.subscriptions-para{ + margin: 10px; + text-align: center; + font-size: 1rem; +} +.plans-container { + display: flex; + justify-content: center; + gap: 10px; + margin-top: 30px; + /* flex-wrap: wrap; */ +} +.foods-img { + width: 200px; + height: auto; + border-radius: 15px; + box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.foods-img:hover { + transform: scale(1.1); +} +.plan { + background-color: #fff; + border-radius: 10px; + /* padding: 10px; */ + height: 380px; + width: 700px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); +} +.plan:hover { + transform: translateY(-10px); + box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} +.plan h3.basic { + font-size: 1.8rem; + font-weight: bold; + margin: 10px; + color: #444; +} + +.plan h3.premium { + font-size: 1.8rem; + font-weight: bold; + margin: 10px; + color: #8f8f8f; +} + +.plan h3.elite { + font-size: 1.8rem; + font-weight: bold; + margin: 10px; + color: #cfaa59; +} + +.plan p { + font-size: 1.2rem; + margin: 10px; + margin-bottom: 20px; +} + +.plan ul { + list-style: none; + font-size: 1rem; + padding: 0; +} + +.plan ul li { + margin-bottom: 10px; + font-size: 0.9rem; +} +/* Responsive Styles */ +@media (max-width: 768px) { + .plans-container { + flex-direction: column; /* Stack plans vertically */ + align-items: center; + } + + .plan { + width: 80%; + margin: 15px 0; + } + + .subscriptions-heading { + font-size: 1.8rem; + } + + .subscriptions-para { + font-size: 0.9rem; + } + + .plan h3 { + font-size: 1.5rem; + } + + .plan p { + font-size: 1rem; + } + + .plan ul li { + font-size: 0.85rem; + } +} + +@media (max-width: 480px) { + .subscriptions-heading { + font-size: 1.5rem; + } + + .plan h3 { + font-size: 1.3rem; + } + + .plan p { + font-size: 0.9rem; + } + + .plan ul li { + font-size: 0.8rem; + } +} /* ///////////..utility classes../////////// */ @@ -126,8 +263,12 @@ body { font-size: 1.6rem; } +.main-title { + text-transform: uppercase; + margin-top: 1.5em; +} - +/* ......//about us//...... */ #about { padding: 50px 0; @@ -332,31 +473,24 @@ body { } /* ........./ Testimonial /.......... */ + #testimonials { - background: var(--background-color); - color: var(--text-color); padding: 5rem 0; - transition: background-color var(--transition-speed), color var(--transition-speed); + background: rgba(243, 243, 243); } - .testimonial-title { text-align: center; font-size: 2.8rem; font-weight: 400; - color: var(--text-color); - + color: #555; } .testimonial-container { - background-color: var(--background-color); - color: var(--text-color); display: flex; justify-content: space-between; font-size: 1.4rem; padding: 1rem; - transition: background-color var(--transition-speed), color var(--transition-speed); - } .testimonial-box .checked { @@ -365,7 +499,7 @@ body { .testimonial-box .testimonial-text { margin: 1rem 0; - color: var(--text-color); + color: #444; } .testimonial-box { @@ -383,18 +517,96 @@ body { margin: auto; } +/*........../ slider for testimonial /..........*/ + +.slider-wrapper { + overflow: hidden; + max-width: 1200px; + margin: 0 70px 55px; +} + +.card-list .card-item { + height: auto; + user-select: none; + padding: 35px; + display: flex; + flex-direction: column; + backdrop-filter: blur(30px); + background: rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.5); +} + +.card-list .card-item .user-image { + width: 150px; + height: 150px; + border-radius: 50%; + margin-bottom: 40px; + border: 3px solid #fff; + padding: 4px; +} + +.card-list .card-item { + font-size: 1.15rem; + margin: 14px 0 40px; +} + +.card-list .card-item { + padding: 0px; + cursor: grab; + background: #fff; + border: 1px solid transparent; + transition: 0.2s ease; +} + +.card-list .card-item { + background: rgba(255, 255, 255, 0.1); +} + +.slider-wrapper .swiper-pagination-bullet { + background: black; + height: 13px; + width: 13px; + opacity: 0.5; +} + +.slider-wrapper .swiper-pagination-bullet-active { + opacity: 1; +} + +.slider-wrapper .swiper-slide-button { + margin-top: -55px; + transition: 0.2s ease; +} + +.swiper-slide-button { + color: #686868; +} + +.slider-wrapper .swiper-slide-button:hover { + color: black; +} + +@media (max-width: 768px) { + .slider-wrapper { + margin: 0 10px 40px; + } + + .slider-wrapper .swiper-slide-button { + display: none; + } +} + + /* ........ Contact Us........... */ + #contact { - background: var(--background-color); - color: var(--text-color); padding: 5rem 0; - transition: background-color var(--transition-speed), color var(--transition-speed); + background: rgb(226, 226, 226); } - .contact-container { display: flex; - background: var(--background-color); + background: #fff; } .contact-img { @@ -413,9 +625,6 @@ body { padding: 1rem; width: 50%; margin: auto; - background: var(--background-color); - color: var(--text-color); - } .form-container input { @@ -715,7 +924,9 @@ footer { display: flex; flex-direction: column; } - +.footer-contact{ + color: #be1414; +} .footer-column h3 { margin-bottom: 5px; font-size: 18px; @@ -786,267 +997,3 @@ footer { transform: scale(1.1); transform: scale(1.2) translateY(-5px); } - - - -:root { - --primary-color: #16a083; - --background-color: #ffffff; - --text-color: #333333; - --footer-bg-color: #232323; - --footer-text-color: #ffffff; - --transition-speed: 0.15s; - --navbar-bg-color: #fff; - --navbar-text-color: #000; - --navbar-hover-color: #117964; - --title-color: #333333; -} - -body { - background-color: var(--background-color); - color: var(--text-color); - transition: background-color var(--transition-speed), color var(--transition-speed); -} - -/* Dark mode styles */ -body.dark-mode { - --background-color: #1a1a1a; - --text-color: #f0f0f0; - --footer-bg-color: #0a0a0a; - --footer-text-color: #f0f0f0; - --navbar-bg-color: #333; - --navbar-text-color: #f0f0f0; - --navbar-hover-color: #16a083; -} - -/* Navbar styles */ -.navbar { - background-color: var(--navbar-bg-color); - color: var(--navbar-text-color); - transition: background-color var(--transition-speed), color var(--transition-speed); -} - -.menu-items a { - color: var(--navbar-text-color); -} - -.menu-items a:hover { - color: var(--navbar-hover-color); -} - -.logo { - color: var(--navbar-text-color); -} - -/* Dark mode specific navbar adjustments */ -body.dark-mode .navbar { - box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); -} - -body.dark-mode .navbar-container .hamburger-lines .line { - background: var(--navbar-text-color); -} - -/* Theme switch styles */ -.theme-switch-wrapper { - display: flex; - align-items: center; -} - -.theme-switch { - display: inline-block; - height: 34px; - position: relative; - width: 60px; -} - -.theme-switch input { - display: none; -} - -.slider { - background-color: #ccc; - bottom: 0; - cursor: pointer; - left: 0; - position: absolute; - right: 0; - top: 0; - transition: .4s; -} - -.slider:before { - background-color: #fff; - bottom: 4px; - content: ""; - height: 26px; - left: 4px; - position: absolute; - transition: .4s; - width: 26px; -} - -input:checked + .slider { - background-color: var(--primary-color); -} - -input:checked + .slider:before { - transform: translateX(26px); -} - -.slider.round { - border-radius: 34px; -} - -.slider.round:before { - border-radius: 50%; -} - -/* Footer styles */ -.footer { - background-color: var(--footer-bg-color); - color: var(--footer-text-color); - transition: background-color var(--transition-speed), color var(--transition-speed); -} - -.footer-container { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - padding: 2rem 0; -} - -.footer-column { - flex: 1; - min-width: 200px; - margin: 1rem; -} - -.footer-column h3 { - color: var(--primary-color); - margin-bottom: 1rem; -} - -.footer-column ul { - list-style-type: none; - padding: 0; -} - -.footer-column ul li { - margin-bottom: 0.5rem; -} - -.footer-column a { - color: var(--footer-text-color); - text-decoration: none; - transition: color 0.3s; -} - -.footer-column a:hover { - color: var(--primary-color); -} - -.social-icons a { - color: var(--footer-text-color); - font-size: 1.5rem; - margin-right: 1rem; - transition: transform 0.3s, color 0.3s; -} - -.social-icons a:hover { - color: var(--primary-color); - transform: translateY(-3px); -} - -.newsletter input[type="email"] { - background-color: rgba(255, 255, 255, 0.1); - border: none; - color: var(--footer-text-color); - padding: 0.5rem; - margin-right: 0.5rem; -} - -.newsletter button { - background-color: var(--primary-color); - border: none; - color: #ffffff; - cursor: pointer; - padding: 0.5rem 1rem; - transition: background-color 0.3s; -} - -.newsletter button:hover { - background-color: #128065; -} - -.footer-bottom { - background-color: rgba(0, 0, 0, 0.2); - padding: 1rem 0; - text-align: center; -} - -/* Dark mode UI effects */ -body.dark-mode .footer { - box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3); -} - -body.dark-mode .footer-column h3 { - text-shadow: 0 0 5px rgba(22, 160, 131, 0.5); -} - -body.dark-mode .social-icons a:hover { - text-shadow: 0 0 10px rgba(22, 160, 131, 0.8); -} - -body.dark-mode .newsletter input[type="email"] { - box-shadow: 0 0 5px rgba(255, 255, 255, 0.1); -} - -body.dark-mode .newsletter button { - box-shadow: 0 0 10px rgba(22, 160, 131, 0.5); -} - -/* Smooth transition for all elements */ -* { - transition: background-color var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed); -} - -/* Dark mode specific adjustments */ -body.dark-mode #testimonials, -body.dark-mode #contact { - box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); -} - -body.dark-mode .testimonial-box { - background-color: rgba(255, 255, 255, 0.05); -} - -body.dark-mode .form-container input, -body.dark-mode .form-container textarea { - background-color: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.2); -} - -body.dark-mode .form-container input::placeholder, -body.dark-mode .form-container textarea::placeholder { - color: rgba(255, 255, 255, 0.5); -} - -/* Ensure smooth transition for all elements */ -*:not(.main-title){ - transition: background-color var(--transition-speed), - color var(--transition-speed), - border-color var(--transition-speed), - box-shadow var(--transition-speed); -} - -.main-title { - text-transform: uppercase; - margin-top: 1.5em; -} - -/* New addition to avoid color changes */ -.main-title{ - color: #333; /* Set the fixed color you want */ - transition: none; /* Prevent color transition with theme */ -} \ No newline at end of file