diff --git a/location-website/README.md b/location-website/README.md new file mode 100644 index 000000000..c982a9a2e --- /dev/null +++ b/location-website/README.md @@ -0,0 +1,75 @@ +# Location Website + +A modern, responsive website showcasing a location with integrated Google Maps. + +## Features + +- **Responsive Design**: Works seamlessly on desktop, tablet, and mobile devices +- **Google Maps Integration**: Embedded map showing the exact location +- **Modern UI/UX**: Clean, professional design with smooth animations +- **Contact Form**: Functional contact form with validation +- **Smooth Scrolling**: Enhanced navigation experience +- **Mobile Menu**: Hamburger menu for mobile devices +- **Parallax Effects**: Engaging scroll animations +- **SEO Friendly**: Semantic HTML structure + +## Sections + +1. **Hero Section**: Eye-catching landing area with call-to-action buttons +2. **About Section**: Information about the location with feature highlights +3. **Location Section**: Interactive Google Maps with contact details +4. **Contact Section**: Contact form for inquiries +5. **Footer**: Quick links and social media connections + +## Technologies Used + +- HTML5 +- CSS3 (with CSS Grid and Flexbox) +- Vanilla JavaScript +- Google Maps Embed API +- Google Fonts (Inter & Playfair Display) + +## Setup + +1. Open `index.html` in a web browser +2. No build process or dependencies required +3. Works with any modern web browser + +## Customization + +### Update Location +Edit the Google Maps iframe source in `index.html`: +```html + + +
+
+
📍
+
+

Address

+

Visit us at the location shown on the map

+ Open in Google Maps → +
+
+
+
🕒
+
+

Hours

+

Monday - Friday: 9:00 AM - 6:00 PM

+

Saturday: 10:00 AM - 4:00 PM

+

Sunday: Closed

+
+
+
+
📞
+
+

Contact

+

Phone: (555) 123-4567

+

Email: info@location.com

+
+
+
+ + + + + +
+
+
+

Get In Touch

+
+

We'd love to hear from you

+
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+ +
+
+
+
+ + + + + + + diff --git a/location-website/script.js b/location-website/script.js new file mode 100644 index 000000000..6bb6efa0d --- /dev/null +++ b/location-website/script.js @@ -0,0 +1,216 @@ +// Mobile Menu Toggle +const mobileMenuBtn = document.getElementById('mobileMenuBtn'); +const navLinks = document.querySelector('.nav-links'); + +mobileMenuBtn.addEventListener('click', () => { + mobileMenuBtn.classList.toggle('active'); + navLinks.classList.toggle('active'); +}); + +// Close mobile menu when clicking on a link +document.querySelectorAll('.nav-links a').forEach(link => { + link.addEventListener('click', () => { + mobileMenuBtn.classList.remove('active'); + navLinks.classList.remove('active'); + }); +}); + +// Navbar scroll effect +const navbar = document.querySelector('.navbar'); +let lastScroll = 0; + +window.addEventListener('scroll', () => { + const currentScroll = window.pageYOffset; + + if (currentScroll > 100) { + navbar.classList.add('scrolled'); + } else { + navbar.classList.remove('scrolled'); + } + + lastScroll = currentScroll; +}); + +// Smooth scroll for anchor links +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + + if (target) { + const offsetTop = target.offsetTop - 70; + window.scrollTo({ + top: offsetTop, + behavior: 'smooth' + }); + } + }); +}); + +// Form submission handler +const contactForm = document.getElementById('contactForm'); + +contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // Get form data + const formData = new FormData(contactForm); + const data = Object.fromEntries(formData); + + // Show success message + showNotification('Thank you for your message! We will get back to you soon.', 'success'); + + // Reset form + contactForm.reset(); +}); + +// Notification function +function showNotification(message, type = 'success') { + // Create notification element + const notification = document.createElement('div'); + notification.className = `notification notification-${type}`; + notification.textContent = message; + + // Add styles + notification.style.cssText = ` + position: fixed; + top: 100px; + right: 20px; + background: ${type === 'success' ? '#10b981' : '#ef4444'}; + color: white; + padding: 1rem 1.5rem; + border-radius: 8px; + box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + z-index: 9999; + animation: slideIn 0.3s ease; + max-width: 400px; + `; + + // Add animation + const style = document.createElement('style'); + style.textContent = ` + @keyframes slideIn { + from { + transform: translateX(400px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } + } + @keyframes slideOut { + from { + transform: translateX(0); + opacity: 1; + } + to { + transform: translateX(400px); + opacity: 0; + } + } + `; + document.head.appendChild(style); + + // Add to page + document.body.appendChild(notification); + + // Remove after 5 seconds + setTimeout(() => { + notification.style.animation = 'slideOut 0.3s ease'; + setTimeout(() => { + notification.remove(); + }, 300); + }, 5000); +} + +// Intersection Observer for fade-in animations +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; + +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); + +// Observe elements for animation +document.addEventListener('DOMContentLoaded', () => { + const animatedElements = document.querySelectorAll('.feature-item, .info-card, .contact-form'); + + animatedElements.forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(30px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); + }); +}); + +// Add parallax effect to hero section +window.addEventListener('scroll', () => { + const scrolled = window.pageYOffset; + const hero = document.querySelector('.hero'); + + if (hero && scrolled < window.innerHeight) { + hero.style.transform = `translateY(${scrolled * 0.5}px)`; + } +}); + +// Update current year in footer +const currentYear = new Date().getFullYear(); +const footerYear = document.querySelector('.footer-bottom p'); +if (footerYear) { + footerYear.textContent = footerYear.textContent.replace('2026', currentYear); +} + +// Add loading animation +window.addEventListener('load', () => { + document.body.style.opacity = '0'; + document.body.style.transition = 'opacity 0.5s ease'; + + setTimeout(() => { + document.body.style.opacity = '1'; + }, 100); +}); + +// Handle map iframe loading +const mapIframe = document.querySelector('.map-container iframe'); +if (mapIframe) { + mapIframe.addEventListener('load', () => { + console.log('Map loaded successfully'); + }); + + mapIframe.addEventListener('error', () => { + console.error('Error loading map'); + const mapContainer = document.querySelector('.map-container'); + mapContainer.innerHTML = ` +
+
📍
+

Map could not be loaded

+ + Open in Google Maps → + +
+ `; + }); +} diff --git a/location-website/styles.css b/location-website/styles.css new file mode 100644 index 000000000..c84b0caa9 --- /dev/null +++ b/location-website/styles.css @@ -0,0 +1,631 @@ +/* Reset and Base Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --primary-color: #2563eb; + --primary-dark: #1e40af; + --secondary-color: #10b981; + --text-dark: #1f2937; + --text-light: #6b7280; + --bg-light: #f9fafb; + --bg-white: #ffffff; + --border-color: #e5e7eb; + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--text-dark); + background-color: var(--bg-white); +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Navigation */ +.navbar { + position: fixed; + top: 0; + left: 0; + right: 0; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px); + box-shadow: var(--shadow-sm); + z-index: 1000; + transition: all 0.3s ease; +} + +.navbar.scrolled { + box-shadow: var(--shadow-md); +} + +.nav-content { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} + +.logo h1 { + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-color); +} + +.nav-links { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-links a { + text-decoration: none; + color: var(--text-dark); + font-weight: 500; + transition: color 0.3s ease; + position: relative; +} + +.nav-links a::after { + content: ''; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: var(--primary-color); + transition: width 0.3s ease; +} + +.nav-links a:hover { + color: var(--primary-color); +} + +.nav-links a:hover::after { + width: 100%; +} + +.mobile-menu-btn { + display: none; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; +} + +.mobile-menu-btn span { + width: 25px; + height: 3px; + background: var(--text-dark); + transition: all 0.3s ease; +} + +/* Hero Section */ +.hero { + position: relative; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + overflow: hidden; +} + +.hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; +} + +.hero-overlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.3); +} + +.hero-content { + position: relative; + z-index: 1; + text-align: center; + color: white; + animation: fadeInUp 1s ease; +} + +.hero-title { + font-family: 'Playfair Display', serif; + font-size: 4rem; + font-weight: 800; + margin-bottom: 1rem; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); +} + +.hero-subtitle { + font-size: 1.5rem; + margin-bottom: 2rem; + opacity: 0.95; +} + +.hero-buttons { + display: flex; + gap: 1rem; + justify-content: center; + flex-wrap: wrap; +} + +.btn { + padding: 1rem 2rem; + border-radius: 50px; + text-decoration: none; + font-weight: 600; + transition: all 0.3s ease; + display: inline-block; + border: 2px solid transparent; +} + +.btn-primary { + background: var(--primary-color); + color: white; +} + +.btn-primary:hover { + background: var(--primary-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.btn-secondary { + background: transparent; + color: white; + border-color: white; +} + +.btn-secondary:hover { + background: white; + color: var(--primary-color); + transform: translateY(-2px); +} + +.scroll-indicator { + position: absolute; + bottom: 30px; + left: 50%; + transform: translateX(-50%); + animation: bounce 2s infinite; +} + +.mouse { + width: 30px; + height: 50px; + border: 2px solid white; + border-radius: 15px; + position: relative; +} + +.mouse::before { + content: ''; + width: 4px; + height: 8px; + background: white; + position: absolute; + top: 8px; + left: 50%; + transform: translateX(-50%); + border-radius: 2px; + animation: scroll 2s infinite; +} + +/* Section Styles */ +section { + padding: 5rem 0; +} + +.section-header { + text-align: center; + margin-bottom: 3rem; +} + +.section-title { + font-family: 'Playfair Display', serif; + font-size: 2.5rem; + font-weight: 700; + color: var(--text-dark); + margin-bottom: 1rem; +} + +.title-underline { + width: 80px; + height: 4px; + background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); + margin: 0 auto 1rem; + border-radius: 2px; +} + +.section-description { + font-size: 1.125rem; + color: var(--text-light); + max-width: 600px; + margin: 0 auto; +} + +/* About Section */ +.about { + background: var(--bg-light); +} + +.about-content { + max-width: 900px; + margin: 0 auto; +} + +.about-text h3 { + font-size: 2rem; + margin-bottom: 1.5rem; + color: var(--text-dark); +} + +.about-text p { + font-size: 1.125rem; + color: var(--text-light); + margin-bottom: 1.5rem; + line-height: 1.8; +} + +.features { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +.feature-item { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow-md); + transition: all 0.3s ease; + text-align: center; +} + +.feature-item:hover { + transform: translateY(-5px); + box-shadow: var(--shadow-xl); +} + +.feature-icon { + font-size: 3rem; + margin-bottom: 1rem; +} + +.feature-item h4 { + font-size: 1.25rem; + margin-bottom: 0.5rem; + color: var(--text-dark); +} + +.feature-item p { + color: var(--text-light); + font-size: 0.95rem; +} + +/* Location Section */ +.location-content { + display: grid; + grid-template-columns: 1fr; + gap: 3rem; +} + +.map-container { + border-radius: 12px; + overflow: hidden; + box-shadow: var(--shadow-lg); +} + +.map-container iframe { + display: block; +} + +.location-info { + display: grid; + gap: 1.5rem; +} + +.info-card { + background: white; + padding: 2rem; + border-radius: 12px; + box-shadow: var(--shadow-md); + display: flex; + gap: 1.5rem; + transition: all 0.3s ease; +} + +.info-card:hover { + box-shadow: var(--shadow-lg); + transform: translateX(5px); +} + +.info-icon { + font-size: 2.5rem; + flex-shrink: 0; +} + +.info-content h4 { + font-size: 1.25rem; + margin-bottom: 0.5rem; + color: var(--text-dark); +} + +.info-content p { + color: var(--text-light); + margin-bottom: 0.25rem; +} + +.link { + color: var(--primary-color); + text-decoration: none; + font-weight: 500; + display: inline-block; + margin-top: 0.5rem; + transition: color 0.3s ease; +} + +.link:hover { + color: var(--primary-dark); +} + +/* Contact Section */ +.contact { + background: var(--bg-light); +} + +.contact-content { + max-width: 700px; + margin: 0 auto; +} + +.contact-form { + background: white; + padding: 3rem; + border-radius: 12px; + box-shadow: var(--shadow-lg); +} + +.form-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--text-dark); +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 0.75rem 1rem; + border: 2px solid var(--border-color); + border-radius: 8px; + font-family: inherit; + font-size: 1rem; + transition: all 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--primary-color); + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); +} + +.contact-form .btn { + width: 100%; + border: none; + cursor: pointer; + font-size: 1rem; +} + +/* Footer */ +.footer { + background: var(--text-dark); + color: white; + padding: 3rem 0 1rem; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-section h3 { + margin-bottom: 1rem; + font-size: 1.25rem; +} + +.footer-section p { + color: rgba(255, 255, 255, 0.8); + line-height: 1.8; +} + +.footer-section ul { + list-style: none; +} + +.footer-section ul li { + margin-bottom: 0.5rem; +} + +.footer-section ul li a { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-section ul li a:hover { + color: white; +} + +.social-links { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.social-link { + color: rgba(255, 255, 255, 0.8); + text-decoration: none; + transition: color 0.3s ease; +} + +.social-link:hover { + color: white; +} + +.footer-bottom { + text-align: center; + padding-top: 2rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer-bottom p { + color: rgba(255, 255, 255, 0.6); +} + +/* Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateX(-50%) translateY(0); + } + 40% { + transform: translateX(-50%) translateY(-10px); + } + 60% { + transform: translateX(-50%) translateY(-5px); + } +} + +@keyframes scroll { + 0% { + opacity: 1; + transform: translateX(-50%) translateY(0); + } + 100% { + opacity: 0; + transform: translateX(-50%) translateY(15px); + } +} + +/* Responsive Design */ +@media (max-width: 768px) { + .nav-links { + position: fixed; + top: 70px; + left: -100%; + flex-direction: column; + background: white; + width: 100%; + padding: 2rem; + box-shadow: var(--shadow-lg); + transition: left 0.3s ease; + } + + .nav-links.active { + left: 0; + } + + .mobile-menu-btn { + display: flex; + } + + .mobile-menu-btn.active span:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); + } + + .mobile-menu-btn.active span:nth-child(2) { + opacity: 0; + } + + .mobile-menu-btn.active span:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); + } + + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.125rem; + } + + .section-title { + font-size: 2rem; + } + + .contact-form { + padding: 2rem; + } + + .form-row { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .hero-title { + font-size: 2rem; + } + + .hero-buttons { + flex-direction: column; + width: 100%; + padding: 0 1rem; + } + + .btn { + width: 100%; + } +}