diff --git a/store.html b/store.html index 33b98a0..986486d 100644 --- a/store.html +++ b/store.html @@ -86,6 +86,6 @@

Racing Gloves

Contact: info@imobracingonline.com | Phone: (530) 420-5850

- + diff --git a/styles.css b/styles.css index b8537ed..93b62ce 100644 --- a/styles.css +++ b/styles.css @@ -11,6 +11,59 @@ h1, h2, h3, h4, h5, h6 { font-family: 'Oswald', sans-serif; } +/* Navbar Styles */ +.navbar { + background-color: #111; + color: white; + padding: 1em; + position: sticky; + top: 0; + z-index: 3; +} + +.navbar-container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.navbar .logo { + font-size: 1.5em; + color: white; + text-decoration: none; +} + +.main-nav { + list-style: none; + margin: 0; + padding: 0; + display: flex; + justify-content: space-around; + width: 100%; +} + +.main-nav .nav-links { + color: white; + text-decoration: none; + padding: 0.5em 1em; +} + +@media (max-width: 768px) { + .navbar-container { + flex-direction: column; + } + + .main-nav { + flex-direction: column; + align-items: center; + } + + .main-nav .nav-links { + width: 100%; + text-align: center; + } +} + /* Header Styles */ .header { height: 100vh; @@ -98,77 +151,8 @@ h1, h2, h3, h4, h5, h6 { gap: 0.5em; } -/* Navbar Styles */ -.navbar { - background-color: #111; - color: white; - padding: 1em; - position: sticky; - top: 0; - z-index: 3; -} - -.navbar-container { - display: flex; - justify-content: space-between; - align-items: center; -} - -.navbar-toggle { - display: none; - font-size: 1.5em; - cursor: pointer; -} - -.navbar .logo { - font-size: 1.5em; - color: white; - text-decoration: none; -} - -.main-nav { - list-style: none; - margin: 0; - padding: 0; - display: flex; - justify-content: space-around; - width: 100%; -} - -.main-nav .nav-links { - color: white; - text-decoration: none; - padding: 0.5em 1em; -} - -@media (max-width: 768px) { - .navbar-toggle { - display: block; - } - - .main-nav { - display: none; - flex-direction: column; - width: 100%; - background-color: #111; - position: absolute; - top: 3.5em; /* Adjust based on your navbar height */ - left: 0; - } - - .main-nav .nav-links { - text-align: center; - padding: 1em; - width: 100%; - } - - .main-nav.active { - display: flex; - } -} - /* Section Styles */ -.about-section, .team-section, .events-section, .media-section, .contact-section, .ai-section, .integration-section, .testimonials-section, .faq-section, .spotlight-section, .mission-section, .social-media-section, .store-section { +section { padding: 2em; background: #111; transition: opacity 1s ease-in-out; @@ -180,20 +164,8 @@ h1, h2, h3, h4, h5, h6 { background-position: center; } -.about-section { - background-image: url('path/to/about-background.jpg'); -} - -.ai-section { - background-image: url('path/to/ai-background.jpg'); -} - -.events-section { - background-image: url('path/to/events-background.jpg'); -} - -.spotlight-section { - background: #222; +.about-section, .ai-section, .events-section { + background-image: url('path/to/background.jpg'); } .section-title { @@ -202,13 +174,13 @@ h1, h2, h3, h4, h5, h6 { margin-bottom: 1em; } -.team-grid, .media-grid, .cars-grid, .product-list { +.team-grid, .media-grid, .cars-grid, .store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1em; } -.team-card, .media-card, .car-card, .product { +.team-card, .media-card, .car-card, .store-item { background: #222; padding: 1em; border-radius: 5px; @@ -217,154 +189,78 @@ h1, h2, h3, h4, h5, h6 { transition: transform 0.3s; } -.team-card:hover, .media-card:hover, .car-card:hover, .product:hover { +.team-card:hover, .media-card:hover, .car-card:hover, .store-item:hover { transform: translateY(-10px); } -.about-content { +.about-content, .team-card, .media-card, .car-card, .store-item { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; } -.about-icon { +.about-icon, .store-item img { font-size: 2em; color: #ff4500; } -.events-container { - display: flex; - flex-wrap: nowrap; - justify-content: space-between; - gap: 2em; -} - -.events-list { - flex: 2; - list-style: none; - padding: 0; - margin: 0; -} - -.events-list li { - background: #222; - padding: 1em; +.store-item img { + max-width: 100%; + height: auto; border-radius: 5px; - box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); - margin-bottom: 1em; -} - -.calendar-container { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - max-width: 400px; /* Adjust the max-width to control the size of the calendar */ -} - -.calendar-container iframe { - width: 100%; - height: 300px; /* Adjust the height as needed */ } -.integration-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 2em; -} - -.facebook-integration, .poll-integration { - flex: 1; - max-width: 400px; /* Adjust the max-width to match the desired size */ -} - -.facebook-integration iframe, .poll-integration iframe { - width: 100%; - height: 500px; /* Set the same height for both elements */ -} - -@media (max-width: 768px) { - .events-container { - flex-direction: column; - } - - .calendar-container { - width: 100%; - } - - .integration-container { - flex-direction: column; - align-items: center; - } - - .facebook-integration, .poll-integration { - max-width: 100%; - } - - .facebook-integration iframe, .poll-integration iframe { - height: 500px; - } +.store-item h3 { + margin: 0.5em 0; } -.media-carousel { - display: flex; - overflow: hidden; - padding: 1em 0; +.store-item p { + margin: 0.5em 0; } -.carousel-item { - flex: 0 0 auto; - width: 250px; - background: #222; +.store-item button, +.store-item a { + display: inline-block; + padding: 0.5em 1em; + margin-top: 0.5em; + background-color: #ff4500; + color: white; + text-decoration: none; border-radius: 5px; - box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); - transition: transform 0.3s; + transition: background-color 0.3s, transform 0.3s; } -.carousel-item:hover { +.store-item button:hover, +.store-item a:hover { + background-color: #e43e00; transform: scale(1.05); } -.spotlight-carousel, .testimonials-carousel { - display: flex; - overflow: hidden; - padding: 1em 0; - gap: 1em; - justify-content: center; -} - -.spotlight-item, .testimonial-item { - flex: 0 0 auto; - width: calc(100% - 20px); /* Adjust width for mobile view */ - max-width: 300px; - background: #333; - border-radius: 10px; - box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); +/* Footer Styles */ +.footer { + background: #111; padding: 1em; - transition: transform 0.3s; - margin: 0 10px; /* Ensure proper spacing */ -} - -.spotlight-item:hover, .testimonial-item:hover { - transform: scale(1.05); + text-align: center; + color: #fff; } -.spotlight-item img, .testimonial-item img { - width: 100%; - border-radius: 10px; +.social-media { + margin: 1em 0; } -.spotlight-item h3, .testimonial-item h3 { - margin: 0.5em 0; +.social-media a { + color: white; + margin: 0 0.5em; + font-size: 1.5em; + transition: color 0.3s; } -.spotlight-item p, .testimonial-item p { - font-size: 0.9em; - color: #ccc; +.social-media a:hover { + color: #ff4500; } +/* Contact Form Styles */ .contact-section form { display: flex; flex-direction: column; @@ -397,16 +293,15 @@ h1, h2, h3, h4, h5, h6 { background-color: #e43e00; } -.mission-section { - background: #111; +/* Additional Section Styles */ +.mission-section, .social-media-section, .testimonials-section, .faq-section { padding: 2em; + background: #111; color: #fff; text-align: left; } .social-media-section { - background: #111; - padding: 2em; text-align: center; } @@ -421,42 +316,46 @@ h1, h2, h3, h4, h5, h6 { color: #ff4500; } -.footer { - background: #111; - padding: 1em; - text-align: center; - color: #fff; +/* Testimonials Styles */ +.testimonials-carousel { + display: flex; + overflow: hidden; + padding: 1em 0; + gap: 1em; + justify-content: center; } -.social-media { - margin: 1em 0; +.testimonial-item { + flex: 0 0 auto; + width: calc(100% - 20px); /* Adjust width for mobile view */ + max-width: 300px; + background: #333; + border-radius: 10px; + box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); + padding: 1em; + transition: transform 0.3s; + margin: 0 10px; /* Ensure proper spacing */ } -.social-media a { - color: white; - margin: 0 0.5em; - font-size: 1.5em; - transition: color 0.3s; +.testimonial-item:hover { + transform: scale(1.05); } -.social-media a:hover { - color: #ff4500; +.testimonial-item img { + width: 100%; + border-radius: 10px; } -.testimonials-section { - padding: 2em; - background: #111; - color: #fff; - text-align: center; +.testimonial-item h3 { + margin: 0.5em 0; } -.faq-section { - padding: 2em; - background: #111; - color: #fff; - text-align: left; +.testimonial-item p { + font-size: 0.9em; + color: #ccc; } +/* FAQ Styles */ .faq-item { margin-bottom: 1em; } @@ -470,6 +369,7 @@ h1, h2, h3, h4, h5, h6 { margin-top: 0.5em; } +/* Back to Top Button */ .back-to-top { position: fixed; bottom: 2em; @@ -529,56 +429,3 @@ h1, h2, h3, h4, h5, h6 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } - -/* Store Section */ -.store-section { - padding: 2em; - background: #111; - text-align: center; -} - -.product-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); - gap: 1em; -} - -.product { - background: #222; - padding: 1em; - border-radius: 5px; - box-shadow: 0 0 10px rgba(255, 69, 0, 0.7); - text-align: center; - transition: transform 0.3s; -} - -.product:hover { - transform: translateY(-10px); -} - -.product img { - width: 100%; - height: auto; - border-radius: 5px; -} - -.product h3 { - margin: 0.5em 0; -} - -.product p { - color: #ccc; -} - -.product button { - padding: 0.5em 1em; - background-color: #ff4500; - color: white; - border: none; - border-radius: 5px; - transition: background-color 0.3s; -} - -.product button:hover { - background-color: #e43e00; -}