<!DOCTYPE html> AffordaHome - Find Shelter Fast /* General styles */</p> <ul> <li>{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }</li> </ul> <p>body { background-color: #F7F7F7; color: #333; }</p> <p>.container { width: 90%; max-width: 1200px; margin: 0 auto; }</p> <p>/* Navigation Bar */ .navbar { background-color: #264653; padding: 1em 0; }</p> <p>.logo { font-size: 1.5rem; color: white; font-weight: 700; }</p> <p>.nav-links { list-style: none; display: flex; justify-content: flex-end; }</p> <p>.nav-links li { margin-left: 1.5em; }</p> <p>.nav-links a { color: white; text-decoration: none; font-weight: 500; font-size: 1.1rem; }</p> <p>.nav-links a:hover { color: #E76F51; }</p> <p>/* Hero Section */ .hero { background: url('<a href="https://www.elementproperties.com/wp-content/uploads/City-Moves-Closer-to-its-Affordable-Housing-Goal-with-Local-Awards-of-Housing-Tax-Credits.jpg'">https://www.elementproperties.com/wp-content/uploads/City-Moves-Closer-to-its-Affordable-Housing-Goal-with-Local-Awards-of-Housing-Tax-Credits.jpg'</a>) no-repeat center center/cover; opacity : 100%; color: white; text-align: center; padding: 100px 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; }</p> <p>.hero h1 { font-size: 3.5rem; margin-bottom: 1rem; }</p> <p>.hero p { font-size: 1.5rem; margin-bottom: 2rem; }</p> <p>.cta-btn { padding: 15px 40px; background-color: #E76F51; color: white; border: none; border-radius: 5px; font-size: 1.2rem; cursor: pointer; }</p> <p>.cta-btn:hover { background-color: #D35D41; }</p> <p>/* Search Section */ .search-section { background-color: #FFFFFF; padding: 50px 20px; text-align: center; }</p> <p>.search-section h2 { font-size: 2.5rem; margin-bottom: 1rem; }</p> <p>.search-bar { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; }</p> <p>.search-bar input, .search-bar select { padding: 12px; width: 250px; border-radius: 5px; border: 1px solid #ddd; }</p> <p>.search-btn { padding: 12px 25px; background-color: #2A9D8F; color: white; border: none; border-radius: 5px; cursor: pointer; }</p> <p>.search-btn:hover { background-color: #21867A; }</p> <p>/* Map Section */ .map-section { background-color: #F4F4F9; padding: 50px 20px; text-align: center; }</p> <p>.map-placeholder img { border-radius: 10px; max-width: 100%; }</p> <p>/* Testimonials Section */ .testimonials-section { background-color: white; padding: 50px 20px; text-align: center; }</p> <p>.testimonials { display: flex; justify-content: space-around; }</p> <p>.testimonial { max-width: 400px; background-color: #F4F4F9; padding: 20px; border-radius: 10px; }</p> <p>.testimonial p { font-size: 1.2rem; font-style: italic; }</p> <p>.testimonial h4 { margin-top: 1rem; font-weight: 500; }</p> <p>/* How It Works Section */ .how-it-works { background-color: #2A9D8F; color: white; padding: 50px 20px; text-align: center; }</p> <p>.steps { display: flex; justify-content: space-around; }</p> <p>.step { max-width: 300px; text-align: center; }</p> <p>.step h3 { margin-top: 1rem; font-size: 1.5rem; }</p> <p>.step p { margin-top: 0.5rem; font-size: 1rem; }</p> <p>/* Footer */ .footer { background-color: #264653; color: white; text-align: center; padding: 20px 0; }</p> <p>.footer p { margin-bottom: 10px; }</p> <p>.footer-links {</p> <pre class="language-nolang"><code> </style> </code></pre> <p></head> <body> <!-- Hero Section --> <header class="hero"> <div class="hero-content"> <h1>AffordaHome – Helping You Find Shelter, Fast</h1> <p>Search shelters based on location, availability, and more.</p> <button class="cta-btn">Find Shelter</button> </div> </header></p> <pre class="language-nolang"><code><!-- Search & Filter Section --> <section class="search-section"> <h2>Search for Shelters</h2> <div class="search-bar"> <input type="text" placeholder="Enter location or zip code"> <select> <option value="">Shelter Type</option> <option value="family">Family Shelter</option> <option value="single">Single Shelter</option> <option value="emergency">Emergency Shelter</option> </select> <button class="search-btn">Search Now</button> </div> </section> <!-- Interactive Map Section --> <section class="map-section"> <h2>Shelters Near You</h2> <div class="map-placeholder"> <!-- Embed Google Map here or use a static image as placeholder --> <img src="https://via.placeholder.com/800x400" alt="Map Placeholder"> </div> </section> <!-- Testimonials Section --> <section class="testimonials-section"> <h2>Success Stories</h2> <div class="testimonial"> <blockquote> "AffordaHome helped me find shelter for my family in no time!" <footer>— John Doe</footer> </blockquote> </div> <div class="testimonial"> <blockquote> "A life-changing experience. I'm so thankful for AffordaHome!" <footer>— Jane Smith</footer> </blockquote> </div> </section> <!-- How It Works Section --> <section class="how-it-works-section"> <h2>How It Works</h2> <div class="steps"> <div class="step"> <h3>Step 1</h3> <p>Search for Shelters in your area.</p> </div> <div class="step"> <h3>Step 2</h3> <p>Contact or apply to your selected shelter.</p> </div> <div class="step"> <h3>Step 3</h3> <p>Get assistance and find a place to stay.</p> </div> </div> </section> <!-- Social Media Section --> <section class="social-media-section"> <h2>Follow Us</h2> <div class="social-icons"> <a href="#"><img src="https://via.placeholder.com/32" alt="Facebook"></a> <a href="#"><img src="https://via.placeholder.com/32" alt="Twitter"></a> <a href="#"><img src="https://via.placeholder.com/32" alt="Instagram"></a> </div> </section> <!-- FAQ Section --> <section class="faq-section"> <h2>FAQs</h2> <div class="faq-item"> <h3>How do I apply for shelter?</h3> <p>Simply search for shelters in your area and follow the application instructions provided on the shelter's page.</p> </div> <div class="faq-item"> <h3>What types of shelters are available?</h3> <p>We offer family shelters, emergency shelters, and single-person shelters. Use the filters to find what you need.</p> </div> </section> <!-- Footer Section --> <footer class="footer"> <div class="footer-content"> <p>© 2024 AffordaHome. All Rights Reserved.</p> <ul class="footer-links"> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Service</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </footer> </code></pre> <p></body> </html></p>
Log in or sign up for Devpost to join the conversation.