Tailwind AI
AI-powered Tailwind CSS
Tailwind AI
Generate
Pricing
Discord
Discord
New
Changelog
Public Components
Browse Components
Toggle Sidebar
Ayush Gaikwad
User profile
Free user
Ayush Gaikwad
ayushgaikwad1011@gmail.com
2
Components
0
Remixes
0
Likes
ayushgaikwad1011@gmail.com
about 1 month ago
about 1 month ago
Latest activity
Untitled Component
Created a component
about 1 month ago
Untitled Component
Created a component
about 1 month ago
Latest components
Ayush Gaikwad
about 1 month ago
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FAQ</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; } header { position: fixed; z-index: 1000; display: flex; justify-content: space-between; align-items: center; background-color: transparent; /* Transparent effect */ padding: 15px 30px; top: 0; left: 0; width: 98%; transition: background-color 0.3s ease; /* Smooth transition */ } header.scrolled { background-color: white; /* Solid color when scrolled */ } header .logo img { max-width: 120px; } nav { flex-grow: 1; text-align: right; } nav ul { list-style: none; display: inline-flex; justify-content: flex-end; margin: 0; padding: 0; } nav ul li { margin: 0 20px; } nav ul li a { color: black; text-decoration: none; font-size: 19px; padding: 10px 15px; transition: color 0.3s ease, background-color 0.3s ease; } nav ul li a:hover { background-color: #ec7216; color: white; border-radius: 5px; } .hero-section { text-align: center; background-image: url('header.jpg'); } .hero-section h1 { font-weight: bold; padding: 180px 0px; padding-bottom: 0px; font-size: 80px; color: #000000; } .hero-section p { padding-bottom: 180px; color: #000000; font-size: 30px; } .container { margin-top: 100px; margin-bottom: 120px; padding-left: 5%; padding-right: 5%; max-width: 1480px; } .faq-container { animation: fadeIn 2s; padding: 20px; border-radius: 10px; width: 80%; display: flex; flex-direction: column; align-items: center; } .faq-question { font-weight: bold; font-size: 18px; } .accordion-item { transition: all 0.5s; border: none; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 10px; } .accordion-button { font-size: 16px; padding: 10px; border: none; border-radius: 10px; background-color: #f5f5f5; color: #000000; transition: all 0.5s; } .accordion-button.focus { outline: none; box-shadow: none; } .accordion-button:not(.collapsed) { background-color: #ec7216; color: #ffffff; } .accordion-body { animation: accordionExpand 1s; padding: 20px; font-size: 16px; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes accordionExpand { 0% { height: 0; padding: 0; } 100% { height: auto; padding: 1rem; } } .modal.fade { transition: opacity 0.5s; } .modal-dialog { transition: transform 0.5s; max-width: 500px; } .modal.fade.show { animation: modalFade 0.5s; } @keyframes modalFade { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } .modal-content { padding: 20px; border: none; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .modal-header { border-bottom: none; } .modal-title { font-size: 24px; font-weight: bold; } .modal-footer { border-top: none; } .btn { font-size: 18px; padding: 10px 20px; border: none; border-radius: 10px; background-color: #333; color: #ffffff; transition: all 0.5s; } .btn:hover { background-color: #444; } .btn-primary { background-color: #ec7216 !important; } .btn-primary:hover { background-color: #ec7216 !important; } .faq-container h1 { margin-bottom: 30px; font-weight: bold; font-size: 36px; color: #333; } .faq-container .accordion { width: 100%; } .faq-container button { margin-top: 30px; padding: 10px 20px; background-color: #333; color: #ffffff; border: none; border-radius: 10px; cursor: pointer; } .faq-container button:hover { background-color: #444; } @media (max-width: 768px) { .faq-container { width: 90%; } } @media (max-width: 480px) { .faq-container { width: 95%; } .faq-container h1 { font-size: 24px; } } .footer { background-color: #1c1d21; color: #ffffff; padding: 80px 20px; padding-bottom: 10px; margin-top: 50px; flex-shrink: 0; } .footer-container{ padding-left: 5%; padding-right: 5%; margin-top: 100px; max-width: 1480px; margin: 0 auto; } .footer-row { padding-top: 60px; display: flex; flex-wrap: wrap; justify-content: space-between; } .footer-logo { flex: 1 1 35%; margin-bottom: 20px; } .footer-logo h2 { font-size: 35px; margin-bottom: 25px; } .footer-logo p { font-size: 20px; margin-bottom: 20px; } .newsletter-form { display: flex; align-items: center; } .newsletter-form input { padding: 20px 60px; border: none; font-size: large; border-radius: 4px 0 0 4px; outline: none; } .newsletter-form button { padding: 22px 30px; background-color: #ec7216; color: #ffffff; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } .footer-links { flex: 1 1 16%; margin-bottom: 20px; } .footer-description { margin-right:30px; } .footer-description h2{ margin-left: 50px; margin-bottom: 35px; font-size: 32px; color: #ec7216; font-weight: bold; } .footer-description p{ font-size: 20px; color: white; } .footer-links h3 { margin-bottom: 35px; font-size: 32px; color: #ec7216; font-weight: bold; } .footer-links ul { list-style: none; padding: 0; } .footer-links ul li { margin-bottom: 12px; } .footer-links ul li a { color: #ffffff; text-decoration: none; font-size: 20px; } .footer-links ul li a:hover { text-decoration: underline; } .footer-contact { flex: 0 0 20%; margin-bottom: 25px; } .footer-contact h3 { color: #ec7216; font-weight: bold; font-size: 32px; } .footer-contact p { margin-top: 20px; font-size: 20px; } .footer-contact a { color: #ffffff; text-decoration: none; } .footer-contact a:hover { text-decoration: underline; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; font-size: 14px; border-top: 1px solid #ffffff; padding-top: 20px; } .social-links a { color: #ffffff; margin-right: 10px; text-decoration: none; font-size: 35px; } .social-links a:hover { color: #ec7216; } </style> </head> <body> <header> <div class="logo"> <img src="Name Logo.png" alt="logo"> </div> <nav> <ul> <li><a href="navbar.php">HOME</a></li> <li><a href="about.php">ABOUT US</a></li> <li><a href="truck.php">TRUCKS</a></li> <li><a href="faq.php">FAQ</a></li> <li><a href="contact.php">CONTACT US</a></li> <li><a href="signin_signup.php">SIGN IN</a></li> </ul> </nav> </header> <section class="hero-section"> <h1>FAQ</h1> <p>Home > FAQ </p> </section> <div class="container faq-container"> <h1 style="text-align: center;">Frequently Asked Questions</h1> <div class="accordion" id="accordionExample"> <div class="accordion-item"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <span class="faq-question">What are your business hours ?</span> </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"> <div class="accordion-body"> Our business hours are 24/7 </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingTwo"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <span class="faq-question">How do I book a truck ?</span> </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"> <div class="accordion-body"> To book a ride, simply visit our website and fill out the get in touch form. You can also call us at +91 9892002243 to book over the phone. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingThree"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <span class="faq-question">What is your cancellation policy?</span> </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"> <div class="accordion-body"> If you need to cancel your booking, please contact us at least 24 hours in advance to avoid any cancellation fees. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingFour"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> <span class="faq-question">Do you offer discounts?</span> </button> </h2> <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample"> <div class="accordion-body"> Yes, we offer discounts for frequent riders and students. Please contact us for more information. </div> </div> </div> <div class="accordion-item"> <h2 class="accordion-header" id="headingFive"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> <span class="faq-question">How do I track my ride?</span> </button> </h2> <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample"> <div class="accordion-body"> You can track your ride using our mobile app or by logging into your account on our website. </div> </div> </div> </div> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> More Info </button> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">More Information</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> For more information, please visit our website or contact us at +91 9892002243. </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <footer class="footer"> <div class="footer-container"> <div class="footer-row"> <div class="footer-logo"> <h2>Shree Dev Jom</h2> <p>With our worldwide inclusion, strong <br> transportation organization and industry</p><br> <p>Subscribe to our Newsletter</p> <form class="newsletter-form"> <input type="email" placeholder="Your email address"> <button type="submit">ā</button> </form> </div> <div class="footer-description"> <h2>Who we are</h2> <p>Shree Dev Jom Transportation<br> is a trusted name in truck rental<br> and delivery services, dedicated<br> to serving businesses and<br> individuals across Mumbai</p><br> </div> <div class="footer-links"> <h3>Utility Pages</h3> <ul> <li><a href="navbar.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="truck.php">Trucks</a></li> <li><a href="faq.php">FAQ</a></li> <li><a href="contact.php">Contact Us</a></li> </ul> </div> <div class="footer-contact"> <h3>Contact Us</h3> <p>Phone: <br>+91 9892002243<br> +91 9619002243</p> <p>Email: <a href="shreedevtransport@gmail.com">shreedevtransport@gmail.com</a></p> <p>Address: <br>2/8, Panchal Estate, Shyamnagar, Near Gupta Soap Company, Jogeshwari(E), Mumbai</br></p> </div> </div> <div class="footer-bottom"> <div class="social-links"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html> the code i have given is not giving me professional output give me nice css and js
HTML5
html
Ayush Gaikwad
about 1 month ago
create a landing page for truck transportation bussiness
React
react
