diff --git a/Css-files/content.css b/Css-files/content.css index 99342d31..d4b5136c 100644 --- a/Css-files/content.css +++ b/Css-files/content.css @@ -2,11 +2,53 @@ margin: 0px; padding: 0px; } - -body { - background-color: black; +:root { + --background-color: white; + --text-color: black; + --primary-color: rgb(204, 12, 12); + --secondary-color: rgb(177, 0, 0); + --tertiary-color: orangered; + --container-bg: rgb(224, 224, 252); + --filter-bg: transparent; + --contact-bg: rgb(208, 50, 50); + --button-bg: #ec0f25e3; + --button-hover-bg: rgba(208, 50, 50, 0.9); + --card-border: rgb(186, 186, 201); + --card-shadow: rgba(224, 224, 252, 0.678); + --link-color: rgb(177, 0, 0); + --pagination-bg: white; + --pagination-active-bg: rgb(177, 0, 0); + --pagination-btn-color: rgb(177, 0, 0); + --pagination-prev-next-bg: rgb(204, 12, 12); + --filter-text-color: black; + --filter-border-color: #dc3545; +} + +.dark-theme { + --background-color: black; + --text-color: white; + --primary-color: rgb(204, 12, 12); + --secondary-color: rgb(177, 0, 0); + --tertiary-color: orangered; + --container-bg: rgb(35, 35, 35); + --filter-bg: rgba(0, 0, 0, 0.6); + --contact-bg: rgb(208, 50, 50); + --button-bg: #ec0f25e3; + --button-hover-bg: rgba(208, 50, 50, 0.9); + --card-border: rgb(100, 100, 100); + --card-shadow: rgba(0, 0, 0, 0.5); + --link-color: rgb(177, 0, 0); + --pagination-bg: #2e2e2e; + --pagination-active-bg: rgb(177, 0, 0); + --pagination-btn-color: rgb(177, 0, 0); + --pagination-prev-next-bg: rgb(204, 12, 12); + --filter-text-color: white; + --filter-border-color: #dc3545; +} +/* body { + background-color: var(--background-color); overflow-x: hidden; -} +} */ /* MENU + LOGIN + SIGNUP + CONTACT PAGE */ .head_container { @@ -42,7 +84,7 @@ body { /* MENU PAGE SPECIFICS */ .menu-container { padding: 55px 10px 30px 10px; - background-color: rgb(224, 224, 252); + background-color: var(--background-color) } .menu-container .container-fluid { @@ -77,7 +119,7 @@ body { .menu-container .nav-pills .nav-link.active { background-color: rgb(204, 12, 12); - color: white; + /* color: white; */ } .menu-items .row { @@ -275,6 +317,73 @@ body { } /* CONTACT US PAGE */ + +.card{ + color: #fff; + padding: 7%; + box-shadow: 0px 2px 10px #00000056; + background-color: rgb(208, 50, 50); + box-shadow: 0px 10px 50px #000000a4; + width: 90%; +} + +.btn-submit { + width: 90%; + padding: 16px 0; + margin: 20px; + border: none; + border-radius: 8px; + outline: none; + text-transform: uppercase; + font-weight: 700; + letter-spacing: 3px; + color: black; + background: #fff; + transition: 0.3s ease-in-out, box-shadow 0.3s ease-in-out; +} + +.btn-submit:hover { + background: #fff; + box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.663); +} + +.textfield { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + margin: 20px 0px; + position: relative; +} + +.textfield>label { + font-weight: bold; + margin-bottom: 5px; +} + +.textfield>input , .textfield>textarea{ + width: 100%; + border: none; + border-radius: 10px; + padding: 15px; + background: #E6E6FA; + color: #030707de; + font-size: 12pt; + box-shadow: 0px 2px 5px #00000056; + outline: none; + border: 1px solid #ddd; +} + +.textfield>input::placeholder, .textfield>textarea::placeholder { + color: #000000; +} + +.textfield>input:hover, .textfield>textarea:hover { + background: #fff; + box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.663); +} + .contact-wrapper{ background-color: rgb(208, 50, 50); } @@ -287,7 +396,7 @@ body { .contact-wrapper .text{ font-size: 1rem; line-height: 1.5; - color: #080808; + color: var(--text-color); margin-bottom: 2rem; } @@ -322,7 +431,7 @@ body { align-items: center; /* Center items vertically */ margin-bottom: 20px; padding: 15px; - background-color: #fff; + background-color: var(--background-color); border-radius: 20px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.4s, box-shadow 0.4s, background-color 0.4s; @@ -421,7 +530,7 @@ body { } */ .contact-form-wrapper { - background-color: white; + background-color:var(--container-bg); padding: 30px 0; } @@ -666,7 +775,9 @@ body { .testimonal__container { display: flex; } - +.nav-link { + color:var(--a) +} .testimonal__card { text-align: center; padding: 2rem 3rem 2.5rem; diff --git a/Css-files/footer.css b/Css-files/footer.css index 5ab929d5..ad2ad802 100644 --- a/Css-files/footer.css +++ b/Css-files/footer.css @@ -1,9 +1,44 @@ -/* FOOTER */ +/* Footer Styles */ footer { - overflow: hidden; + background-color: rgb(95, 25, 25); + color: white; + font-family: 'Arial', sans-serif; } .foot-panel1 { + padding: 50px 0; +} + +.footer-heading { + color: #ff6b6b; + font-size: 1.2rem; + margin-bottom: 20px; + position: relative; + padding-bottom: 10px; + transition: color 0.3s ease; +} + +.footer-heading::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 50px; + height: 2px; + background-color: #ff6b6b; + transition: width 0.3s ease; +} + +.footer-heading:hover { + color: #ff4757; +} + +.footer-heading:hover::after { + width: 100%; +} + +.footer-links { + list-style: none; background-color: rgb(138, 37, 37); color: white; height: fit-content; @@ -37,9 +72,19 @@ footer { transition: color 0.3s ease, text-decoration 0.3s ease; } -.foot-panel1 .nav-link:hover { +.footer-links li { + margin-bottom: 10px; + transition: transform 0.3s ease; +} + +.footer-links li:hover { + transform: translateX(5px); +} + +.footer-links a { + color: #cccccc; text-decoration: none; - color: #dddddd; + transition: color 0.3s ease; } /* added */ .foot-panel1 .nav-link::after { @@ -61,30 +106,39 @@ footer { } -#footer-email, -#footer-message { - padding-left: 10px; - padding-right: 10px; - background-color: rgba(210, 167, 167, 0.5); - color: white; +.footer-links a:hover { + color: #ff6b6b; +} + +#contactForm .form-control { + background-color: rgba(255, 255, 255, 0.1); border: none; + color: #ffffff; + margin-bottom: 15px; + /* added */ transition: background-color 0.3s ease, color 0.3s ease; } -#footer-email:focus, -#footer-message:focus { - box-shadow: none; +#contactForm .form-control:focus { + background-color: rgba(255, 255, 255, 0.2); } -#footer-email::placeholder, -#footer-message::placeholder { - color: white; +#contactForm .form-control::placeholder { + color: #cccccc; } -.foot-panel1 .btn { - background-color: rgb(117, 21, 21); +.btn-custom { + background-color: #ff6b6b; + color: #ffffff; border: none; + padding: 10px 20px; + transition: all 0.3s ease; +} + +.btn-custom:hover { + background-color: #ff4757; + transform: scale(1.05); /* added */ transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } @@ -101,20 +155,60 @@ footer { .foot-panel2 { background-color: rgb(110, 28, 28); color: white; - height: fit-content; - font-size: 0.9rem; - text-align: center; + padding: 30px 0; } -.foot-panel2 .social-icons a { - font-size: 1.2rem; - padding: 10px; - margin: 10px; +.follow-us { + font-size: 1.5rem; + margin: 0 45.5%; + margin-bottom: 20px; + transition: color 0.3s ease; +} + +.follow-us:hover { + color: #ff6b6b; +} + +.social-icons { + display: flex; + justify-content: center; + margin-bottom: 20px; +} + +.social-icons a { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background-color: #ffffff; + color: #1a1a1a; + border-radius: 50%; + margin: 0 10px; text-decoration: none; - color: black; - background-color: white; + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.social-icons a i { + position: relative; + z-index: 2; + transition: color 0.3s ease; +} + +.social-icons a::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ffffff; border-radius: 50%; - transition: 0.2s; + transform: scale(0); + transition: transform 0.3s ease; + /* added */ transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, rotate 0.3s ease; } @@ -124,54 +218,56 @@ footer { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } -.foot-panel2 .fa-facebook:hover { - background-color: #3b5998; - color: white; +.social-icons a:hover { + transform: translateY(-5px); + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } -.foot-panel2 .fa-instagram:hover { - background-color: #833ab4; - background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); - color: white; +.social-icons a:hover::before { + transform: scale(1); } -.foot-panel2 .fa-youtube:hover { - background-color: #ff0000; - background: linear-gradient(to right, #ff0000, #cc0000, #990000); - color: white; +.social-icons a:hover i { + color: #ffffff; } -.foot-panel2 .fa-snapchat:hover { - background-color: #fffc00; /* Yellow background */ - background: linear-gradient(to right, #fffc00, #ffeb3b, #ffc107); /* Gradient background */ - color: #fff; /* White color for the logo */ +/* Specific social media icon hover effects */ +.social-icons a.facebook:hover::before { + background-color: #4b9aea; } +.social-icons a.instagram:hover::before { + background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); +} -.foot-panel2 .fa-x-twitter:hover { - background-color: black; - color: white; +.social-icons a.twitter:hover::before { + background-color: #1da1f2; } -.foot-panel2 .fa-linkedin:hover { - background-color: #0072b1; - color: white; +.social-icons a.linkedin:hover::before { + background-color: #0077b5; } -.foot-panel2 .fa-github:hover { - background-color: #040204; - color: white; +.social-icons a.github:hover::before { + background-color: #333; } -.foot-panel2 .fa-discord:hover { - background-color: #5865f2; - color: white; +.social-icons a.discord:hover::before { + background-color: #7289da; } -.fa-linkedin:hover { - background-color: blue; - color: white; + +/* Ensure smooth transition for all properties */ +.social-icons a, +.social-icons a::before, +.social-icons a i { + transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } +.social-text { + max-width: 600px; + margin: 0 auto; + text-align: center; + color: #cccccc; #author { padding: 3px; color: #dddddd; @@ -184,21 +280,57 @@ footer { text-shadow: 0 0 5px #ffffff; } -.foot-panel2 .copyright { - background-color: rgb(98, 25, 25); +.copyright { + background-color: #0f0f0f; + padding: 15px 0; + text-align: center; + margin-bottom: -5rem; } -.foot-panel2 .text { +.copyright p { + font-style: italic; margin: 0; + font-size: 0.9rem; + color: #cccccc; } +.copyright a { + color: #ff6b6b; + text-decoration: none; + transition: color 0.3s ease; +} + +.copyright a:hover { + color: #ff4757; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .foot-panel1 .col-sm-6 { + margin-bottom: 30px; + } +} .social-icons :hover{ transform:scale(1.3); /* added */ transform: scale(1.3) rotate(5deg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); +/* Animations */ +@keyframes fadeIn { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} + + +.footer-heading, .footer-links, #contactForm, .social-icons, .social-text { + opacity: 0; + animation: fadeIn 1s ease-out forwards; } + +.social-icons a { + animation: bounceIn 0.5s ease-out; + .media-handles h4:hover{ /* added */ @@ -215,3 +347,14 @@ transform: scale(1.1); transform: scale(1.1); text-shadow: 0 0 5px #d24b29; } + +@keyframes bounceIn { + 0% { transform: scale(0.1); opacity: 0; } + 60% { transform: scale(1.2); opacity: 1; } + 100% { transform: scale(1); } +} + +/* Ensure animations play on load */ +body:not(.preload) * { + transition: all 0.3s ease-in-out; +} \ No newline at end of file diff --git a/Css-files/login.css b/Css-files/login.css index b8e90ac4..b6b449d5 100644 --- a/Css-files/login.css +++ b/Css-files/login.css @@ -118,7 +118,7 @@ color: #030707de; font-size: 12pt; box-shadow: 0px 2px 5px #00000056; - outline: none; + outline: none; /* added */ border: 1px solid #ddd; } diff --git a/Css-files/mode-toggler.css b/Css-files/mode-toggler.css new file mode 100644 index 00000000..24ba661f --- /dev/null +++ b/Css-files/mode-toggler.css @@ -0,0 +1,89 @@ +.toggle-container { + transform: translate(-50%, -50%); + display: flex; + align-items: center; + justify-content: center; + right: -4px; + top: 15px; + /* position: fixed; */ + top: 40px; + right: 20%; + z-index: 100; + display: flex; + align-items: center; + border: none; + background-color: transparent; + width: 40px; + height: 20px; + margin-top: 10px; +} + + +/* Hidden Checkbox */ +.switch-checkbox { + display: none; +} + +.theme-switch { + position: relative; + width: 45px; + height: 30px; + background-color: #ccc; + border-radius: 20px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 0 5px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + transition: background-color 0.5s ease; +} + +.theme-switch .light-mode-icon, +.theme-switch .dark-mode-icon { + font-size: 19px; + position: absolute; + cursor: pointer; + top: 50%; + transform: translateY(-50%); + transition: opacity 0.5s ease, color 0.5s ease; +} + +.theme-switch .light-mode-icon { + color: #f39c12; +} + +.theme-switch .dark-mode-icon { + color: #bdc3c7; + opacity: 0; +} + +.toggle-button { + position: absolute; + top: 3px; + left: 3px; + width: 25px; + height: 25px; + background-color: #fff; + border-radius: 50%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + transition: transform 0.5s ease, background-color 0.5s ease; +} + +/* Checkbox Checked State */ +.switch-checkbox:checked + .theme-switch { + background-color: #34495e; +} + +.switch-checkbox:checked + .theme-switch .light-mode-icon { + opacity: 0; +} + +.switch-checkbox:checked + .theme-switch .dark-mode-icon { + opacity: 1; +} + +.switch-checkbox:checked + .theme-switch .toggle-button { + transform: translateX(13px); + /* background-color: #34495e; */ +} diff --git a/Css-files/navbar.css b/Css-files/navbar.css index ff3c73ae..9ae9da35 100644 --- a/Css-files/navbar.css +++ b/Css-files/navbar.css @@ -1,5 +1,69 @@ /* Define colors */ :root { + + /* General Colors */ + --primary-bg-color: #ffffff; + --primary-text-color: #333335; + --secondary-bg-color: #f2f2f2; + --accent-color: #9e5c48; + + /* Navbar Colors */ + --navbar-bg-color: #f2f2f2; + --navbar-hover-color: #e5e5e5; + + /* Card Colors */ + --card-bg-color: #ffffff; + --card-hover-color: #f5f5f5; + + /* Footer Colors */ + --footer-bg-color: #f2f2f2; + --footer-hover-color: #e5e5e5; + + /* Additional Colors */ + --container-bg: black; + --drop-bg: #212123; + --a: black; + --nav: black; + --invert: invert(1); +} + +.dark-theme { + --a: rgb(183, 175, 175); + --drop-bg: #ffffff; + --nav: white; + /* General Colors */ + --primary-bg-color: #212123; + --primary-text-color: #ffffff; + --secondary-bg-color: #333335; + --accent-color: #9e5c48; + + /* Navbar Colors */ + --navbar-bg-color: #333335; + --navbar-hover-color: #474749; + + /* Card Colors */ + --card-bg-color: #2c2c2e; + --card-hover-color: #373739; + + /* Footer Colors */ + --footer-bg-color: #28282a; + --footer-hover-color: #333335; + + /* Additional Colors */ + --container-bg: rgb(224, 224, 252); + --drop-bg: #ffffff; + --nav: white; + --a: black; + --nav: #F5DEB3; + --invert: invert(0); +} + +/* Navbar */ +.navbar { + /* --bs-navbar-color: var(--a); */ + background-color: var(--background-color); + gap: 10px; + --primary-bg-color: #fff; --primary-text-color: #000; --secondary-bg-color: #f0f0f0; @@ -17,6 +81,7 @@ align-items: center; height: 70px; font-size: 14px; + } .navbar-logo { @@ -40,15 +105,102 @@ } .nav-link { + + color:var(--a) + color: var(--primary-text-color); padding: 4px 8px; border-radius: 4px; transition: background-color 0.3s, color 0.3s; + } .nav-link:hover { background-color: var(--light-red); color: #fff; + + transform: scale(1.1); + border-radius: 5px; +} + +/* Center Links */ + +ul { + gap: 5px; +} + +.nav-item { + display: flex; + justify-content: start; + align-items: center; + color:var(--a) + +} + +.center-links .nav-item .nav-link:hover { + color: #f13800e4; +} + +.center-links .nav-item .dropdown-menu { + background-color: var(--drop-bg); + color: var(--a); + border-radius: 0; + border: none; + padding-top: 0; +} +/* cart-icon supersript */ +/* .cart-subscript +{ + display :flex; + width: 15px; + height: 25px; + background-color: rgb(76, 0, 255); + justify-content: center; + align-items: center; + color: white; + border-radius: 50%; + position: absolute; + top: 50%; + right: 45px; +} */ + + + +/* End Links */ +.end-links .nav-item .nav-link:hover { + color: rgba(255, 183, 0, 0.705); + +} + +.navbar-nav.center-links .active { + color: #dc3545; + border-bottom: 2px solid #dc3545; + gap: 10px; +} + +.navbar-nav.end-links .active { + color: rgba(255, 183, 0, 0.705); + border-bottom: 2px solid rgba(255, 183, 0, 0.705); + gap: 10px; +} + + +/* Dropdown Items */ + +#theme-toggle-icon { + width: 30px; + cursor: pointer; + color:var(--drop-bg) +} + +.center-links .nav-item .dropdown-menu { + background-color: var(--drop-bg); + color: var(--a); + border-radius: 0; + border: none; + padding-top: 0; + + } .dropdown-item { @@ -64,6 +216,21 @@ transform: scale(1.05); } + +/* :root { + --background-color: #fff; + --text-color: #000; + --button-bg: #d0eeb0; + --button-hover-bg: #59a10c; + --card-bg: rgba(0, 0, 0, 0.8); + --carousel-caption-bg: rgba(0, 0, 0, 0.7); +} + +body { + background-color: var(--background-color); + color: var(--text-color); +} */ + .rate-us-btn { background-color: var(--primary-bg-color); border: 1px solid var(--dark-red); @@ -78,6 +245,7 @@ color: #fff; } + .card { background-color: var(--primary-bg-color); border: 1px solid var(--secondary-bg-color); @@ -153,3 +321,168 @@ background-color: var(--primary-bg-color); color: var(--primary-text-color); } + +.mobile-menu { + top: 0; + right: 0; + width: 70vw; + height: 100vh; + position: fixed; + z-index: 2; + background: rgba(0,0,0,0.9); + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + transform: translateX(100%); + transition: transform 0.3s; +} + +/* Screen more than 991px wide */ +@media ((min-width: 991px)) { + .mobile-menu { + display: none !important; + } + +} + +.mobile-menu a { + /* box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); */ + /* border-top: 3px solid #fff; */ + /* border-bottom: 1px solid #fff; */ + width: 100%; + text-align: center; + margin: 1rem 0; + padding: 1rem; + color: #fff; + text-decoration: none; + text-transform: uppercase; + position: relative; +} + +.mobile-menu a:hover { + color: #f39d2c; +} + +.mobile-menu__trigger { + cursor: pointer; + content: ""; + position: absolute; + z-index: 3; + width: 3rem; + height: 3rem; + border-radius: 50%; + top: 2rem; + left: -5rem; + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; + /* -webkit-transform: rotateX(90deg); + transform: rotateX(180deg); */ +} +.mobile-menu__trigger span { + display: block; + width: 50%; + height: 2px; + background: #fff; + position: relative; +} +.mobile-menu__trigger span::before, +.mobile-menu__trigger span::after { + content: ""; + position: absolute; + width: 100%; + height: 2px; + /* left: 0; */ + background: #fff; + transition: all 0.3s; +} +.mobile-menu__trigger span::before { + top: -7px; +} +.mobile-menu__trigger span::after { + top: 7px; +} +.mobile-menu__trigger:hover span::before { + width: 50%; + top: -3px; + left: 0; + transform: rotate(-30deg); +} +.mobile-menu__trigger:hover span::after { + width: 50%; + top: 3px; + left: 0; + transform: rotate(30deg); +} +.mobile-menu_open { + transform: translateX(0%); + box-shadow: 0 0 2rem #000; +} +.mobile-menu_open+.overlay { + visibility: visible; + opacity: 1; +} +.mobile-menu_open .mobile-menu__trigger span::before, +.mobile-menu_open .mobile-menu__trigger span::after { + right: 0; +} +/* .mobile-menu_open .mobile-menu__trigger:hover span::before { + transform: rotate(30deg); + right: 0; +} +.mobile-menu_open .mobile-menu__trigger:hover span::after { + transform: rotate(-30deg); +} */ + +.mobile-menu_open .mobile-menu__trigger:hover span::before { + width: 50%; + top: -3px; + right: 0; + transform: rotate(30deg); + left: auto; +} +.mobile-menu_open .mobile-menu__trigger:hover span::after { + width: 50%; + top: 3px; + right: 0; + transform: rotate(-30deg); + left: auto; +} + +@media screen and (min-width: 990px) { + .navbarr .nav-links { + display: flex !important; + } +} + +@media screen and (max-width: 990px) { + .hamburger { + display: inline; + z-index: 400; + } + + .logo a { + font-size: 30px; + } + + .nav-links { + position: absolute; + right: 1rem; + top: 3rem; + background-color: #333; + flex-direction: column; + padding: 10px; + align-items: center; + } + + .navbarr .nav-links { + display: none; + } + + .navbar-toggler { + display: inline !important; + } + +} \ No newline at end of file diff --git a/Css-files/offers.css b/Css-files/offers.css index 6f9f6186..9ddf7349 100644 --- a/Css-files/offers.css +++ b/Css-files/offers.css @@ -43,7 +43,49 @@ ol { --primary-font: 'Roboto', sans-serif; --secondry-font: 'Quicksand', sans-serif; } - +:root { + --background-color: white; + --text-color: black; + --primary-color: rgb(204, 12, 12); + --secondary-color: rgb(177, 0, 0); + --tertiary-color: orangered; + --container-bg: rgb(224, 224, 252); + --filter-bg: transparent; + --contact-bg: rgb(208, 50, 50); + --button-bg: #ec0f25e3; + --button-hover-bg: rgba(208, 50, 50, 0.9); + --card-border: rgb(186, 186, 201); + --card-shadow: rgba(224, 224, 252, 0.678); + --link-color: rgb(177, 0, 0); + --pagination-bg: white; + --pagination-active-bg: rgb(177, 0, 0); + --pagination-btn-color: rgb(177, 0, 0); + --pagination-prev-next-bg: rgb(204, 12, 12); + --filter-text-color: black; + --filter-border-color: #dc3545; +} + +.dark-theme { + --background-color: black; + --text-color: white; + --primary-color: rgb(204, 12, 12); + --secondary-color: rgb(177, 0, 0); + --tertiary-color: orangered; + --container-bg: rgb(35, 35, 35); + --filter-bg: rgba(0, 0, 0, 0.6); + --contact-bg: rgb(208, 50, 50); + --button-bg: #ec0f25e3; + --button-hover-bg: rgba(208, 50, 50, 0.9); + --card-border: rgb(100, 100, 100); + --card-shadow: rgba(0, 0, 0, 0.5); + --link-color: rgb(177, 0, 0); + --pagination-bg: #2e2e2e; + --pagination-active-bg: rgb(177, 0, 0); + --pagination-btn-color: rgb(177, 0, 0); + --pagination-prev-next-bg: rgb(204, 12, 12); + --filter-text-color: white; + --filter-border-color: #dc3545; +} html { scroll-behavior: smooth; } @@ -137,7 +179,7 @@ h5 { p { font-size: 1rem; - color: var(--text-color); + color: var(--bs-heading-color); font-weight: 400; line-height: 1.75rem; letter-spacing: 1px; @@ -445,11 +487,11 @@ nav { ========================================== */ .testimonial-section { - background: lavender; + background: var(--background-color); } .testimonial-section h2 { - color: red; + color:var(--bs-heading-color); } .testimonial-section .carousel-item { @@ -500,7 +542,7 @@ button.prev, button.next { top: 50%; margin: 20px; transform: translateY(-50%); - background-color: brown; + background-color: var(--pagination-btn-color); color: white; border: 1px white solid; padding: 10px; diff --git a/Css-files/vip-event.css b/Css-files/vip-event.css new file mode 100644 index 00000000..60628664 --- /dev/null +++ b/Css-files/vip-event.css @@ -0,0 +1,136 @@ +.container { + width: 90%; + max-width: 1200px; + margin: 0 auto; +} + +.header-1 { + background: #333; + color: #fff; + padding: 20px 0; + text-align: center; + margin-top: 80px; +} + +.header-title { + font-size: 2.5em; + margin: 0; +} + +.section-title { + font-size: 2em; + margin-bottom: 20px; + color: #333; + text-align: start; +} + +.event-info, +.menu, +.chefs, +.location, +.rsvp { + padding: 40px 0; +} + +.event-description, +.location-description { + text-align: start; + font-size: 1.2em; + margin-bottom: 20px; +} + +.menu-list { + list-style: none; + padding: 0; + text-align: start; +} + +.menu-item { + font-size: 1.2em; + margin: 10px 0; +} + +.chefs .container{ + display: flex; + flex-direction: row; +} + +.chef-card { + background: #fff; + padding: 20px; + margin: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + text-align: center; + height: 500px; + width: 300px; + overflow: hidden; +} + +.chef-image { + width: 100%; + height: 250px; + border-radius: 50%; + object-fit: cover; +} + +.chef-name { + font-size: 1.5em; + margin: 10px 0; +} + +.chef-bio { + font-size: 1em; + color: #666; +} + +.map-container { + text-align: start; + margin: 20px 0; +} + +.rsvp-form { + display: flex; + flex-direction: column; + align-items: start; +} + +.rsvp-form input, +.rsvp-form button { + padding: 10px; + margin: 10px; + font-size: 1em; + width: 80%; + max-width: 500px; +} + +.rsvp-form button { + background: #333; + color: #fff; + border: none; + cursor: pointer; +} + +.footer { + background: #333; + color: #fff; + text-align: center; + padding: 20px 0; + margin-top: 40px; +} + +/* Responsive Styles */ +@media (max-width: 768px) { + .chefs { + flex-direction: column; + align-items: center; + } + + .chef-card { + flex: 1 1 100%; + } + + .chefs .container{ + flex-direction: column; + align-items: center; + } +} diff --git a/Html-files/Licensing.html b/Html-files/Licensing.html index f8a7c0c4..cb1c6f1a 100644 --- a/Html-files/Licensing.html +++ b/Html-files/Licensing.html @@ -86,6 +86,22 @@ text-shadow: #FC0 1px 0 6px; text-decoration: none; } + + .Lastupdate { + margin-top: 18px; + font-size: 20px !important; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, serif !important; + font-weight: 500; + margin-bottom: 15px; + color: rgb(35, 35, 35) !important; + } + + #last-updated-date { + font-size: 18px; + color: rgb(27, 27, 27) !important; + } + + @@ -297,6 +356,11 @@

Licensing Page

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ +
+ Last updated: +
+
+ + + + + + + @@ -565,5 +632,28 @@

Follow Us

+ +
+ +
+ + diff --git a/Html-files/contributor.html b/Html-files/contributor.html index d124e676..2e4ffb50 100644 --- a/Html-files/contributor.html +++ b/Html-files/contributor.html @@ -8,6 +8,50 @@ + + + + + + + + + + + + + + + + +
+ +
@@ -360,6 +456,27 @@

+
+ +
+ +
+ +
+ + diff --git a/Html-files/navbar.js b/Html-files/navbar.js index 90f331fc..82791a35 100644 --- a/Html-files/navbar.js +++ b/Html-files/navbar.js @@ -1,7 +1,5 @@ -// Theme change icon toggling behavior -let themeToggleIcon = document.getElementById("theme-toggle-icon"); - -themeToggleIcon.addEventListener("click", function () { +//Themechange icon toggling behaviour +function toggleTheme() { document.body.classList.toggle("dark-theme"); document.body.classList.toggle(":root") if (themeToggleIcon.src.includes('moon.png')) { @@ -43,3 +41,72 @@ dropdownli.addEventListener("mouseleave", () => { navlinka.setAttribute('aria-expanded', 'false'); menu.removeAttribute("data-bs-popper"); }); + +const mobile_menu = document.querySelector(".mobile-menu"), + mobile_trigger = document.querySelector(".mobile-menu__trigger"); + +let initialPoint, +finalPoint; + +document.addEventListener("touchstart", function(event) { + initialPoint = event.changedTouches[0]; +}); + +document.addEventListener("touchend", function(event) { + finalPoint = event.changedTouches[0]; + + let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX), + yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY); + + if(xAbs > 120 || yAbs > 120) { // 120 - SWIPE WIDTH + if(xAbs > yAbs) { + if(finalPoint.pageX < initialPoint.pageX) { + // SWIPE LEFT + mobile_menu.classList.remove("mobile-menu_open"); + } else { + // SWIPE RIGTH + mobile_menu.classList.add("mobile-menu_open"); + } + } else { + if(finalPoint.pageY < initialPoint.pageY) { + // SWIPE UP + } else { + // SWIPE DOWN + } + } + } +}); + +document.addEventListener("click", function(event) { + const target = event.target.closest(".mobile-menu__trigger"); + if(target && target == mobile_trigger) { + mobile_menu.classList.toggle("mobile-menu_open"); + } else if(event.target !== mobile_trigger && event.target !== mobile_menu) { + if( mobile_menu.classList.contains("mobile-menu_open") ) { + mobile_menu.classList.remove("mobile-menu_open"); + } + } +}); + +mobile_menu.querySelectorAll("a").forEach(function(element) { + element.addEventListener("click", function(event) { + const anchor_href = event.currentTarget.getAttribute("href"); + if(anchor_href.charAt(0) === "#") { + event.preventDefault(); + if(anchor_href.length > 1) { // if #hash is not empty + const scroll_to_node = document.querySelector(event.currentTarget.hash); + if(scroll_to_node) { + SmoothScrollTo(scroll_to_node); + } + } + } + }); +}); + +function SmoothScrollTo(element) { + if(element) { + element.scrollIntoView({ + behavior: "smooth" + }); + } +} \ No newline at end of file diff --git a/Html-files/offers.html b/Html-files/offers.html index 6716efa4..44f4d68d 100644 --- a/Html-files/offers.html +++ b/Html-files/offers.html @@ -20,6 +20,8 @@ + + + + + + + + +
+ + .circle { position: absolute; @@ -692,6 +761,28 @@

Follow Us

+
+ +
+ +
diff --git a/Html-files/offers/vip-food-event.html b/Html-files/offers/vip-food-event.html index d01f779f..7cbf5763 100644 --- a/Html-files/offers/vip-food-event.html +++ b/Html-files/offers/vip-food-event.html @@ -1,11 +1,542 @@ - - - - Document - - - + + + + VIP Food Event + + + + Foodie Membership + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

VIP Food Event

+
+
+
+

Event Details

+

+ Join us for an exclusive dining experience featuring gourmet dishes + prepared by world-renowned chefs. This event promises to be an + unforgettable evening of culinary excellence. +

+
+
+
+
+

Menu

+
    +
  • Appetizer: Truffle Risotto
    • +
  • + Main Course: Grilled Wagyu Beef with Red Wine Sauce +
    • +
  • + Dessert: Chocolate Fondant with Raspberry Coulis +
    • +
+
+
+
+
+

Meet the Chefs

+
+
+
+ Chef 1 +

Chef Gordon Ramsay

+

+ A world-renowned chef known for his exceptional culinary skills and + charismatic personality. +

+
+
+ Chef 2 +

Chef James Oliver

+

+ Famous for his approachable cuisine, Jamie has inspired millions to + cook healthy, delicious meals. +

+
+
+ Chef 2 +

Chef Jamie Corl

+

+ Awesome chef with a great personality and a passion for cooking. +

+
+
+ Chef 2 +

Chef Klark Oliver

+

+ Famous for his approachable cuisine, Jamie has inspired millions to + cook healthy, delicious meals. +

+
+
+
+
+
+

Location

+

+ The event will be held at the luxurious Grand Ballroom, Downtown + Hotel, Cityville. +

+
+ +
+
+
+ + + + + + + + + + + + + + + + + + + - \ No newline at end of file + diff --git a/Html-files/ordertracking.html b/Html-files/ordertracking.html index 41f7987a..3a15fd26 100644 --- a/Html-files/ordertracking.html +++ b/Html-files/ordertracking.html @@ -182,257 +182,183 @@ + +
+
+

ORDER TRACKING

+
+
+ +
+

Track Your Order

+
+
+
+
+

Order Details

+

Order ID: #12345

+

Status: In Transit

+

Estimated Delivery: 30 minutes

-
- +
+
+
+

Delivery Address

+

123 Food Street, Culinary City, 56789

+
- +
+
+ + +
+ + +
+ +
+ + + \ No newline at end of file diff --git a/Html-files/terms.html b/Html-files/terms.html index ac5d484e..50001ba8 100644 --- a/Html-files/terms.html +++ b/Html-files/terms.html @@ -54,6 +54,22 @@ text-shadow: #FC0 1px 0 6px; text-decoration: none; } + + .Lastupdate { + margin-top: 18px; + font-size: 20px !important; + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, serif !important; + font-weight: 500; + margin-bottom: 15px; + color: rgb(35, 35, 35) !important; + } + + #last-updated-date { + font-size: 18px; + color: rgb(27, 27, 27) !important; + } + + @@ -558,7 +675,7 @@

.content { - color: white; + color: var(--text-color); position: absolute; top: 550px; padding: 10px; @@ -598,10 +715,11 @@

Download This Amazing App Now!

-