diff --git a/about.html b/about.html new file mode 100644 index 0000000..048ad47 --- /dev/null +++ b/about.html @@ -0,0 +1,134 @@ + + + + + Our Story - Global Tea Emporium + + + +
+
+ +
+ +
+ +
+ + +
+

How It All Began

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

Our Mission & Values

+

+ Global Tea Emporium was founded on the belief that + great tea should be more than just a beverage – it should be an + experience that connects you to the land, the people, and the + traditions that created it. +

+ +
+
+

Authenticity First

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

Sustainability & Fair Trade

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

Education & Community

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ +
+

Quality Without Compromise

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+
+ +
+

Meet Our Tea Family

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ + + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..a8c338b --- /dev/null +++ b/contact.html @@ -0,0 +1,95 @@ + + + + + Contact Us - Global Tea Emporium + + + +
+
+ +
+ +
+ +
+ + +
+

Get in Touch

+
+
+

Visit Our Store

+

Global Tea Emporium

+

123 Tea Avenue

+

Teaville, TE 12345

+

United Teas

+
+ +
+

Contact Information

+

Phone: (123) 456-7890

+

Email: info@teasexample.com

+

Hours: Monday - Saturday: 9:00 AM - 6:00 PM

+

Sunday: 11:00 AM - 4:00 PM

+
+
+
+ +
+

Send Us a Message

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+ + + + diff --git a/script.js b/script.js index e69de29..844be58 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,83 @@ +// Global Tea Emporium - JavaScript Functionality + +// Contact Form Handling +document.addEventListener('DOMContentLoaded', function() { + const contactForm = document.querySelector('.contact-form'); + + if (contactForm) { + contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + + // Get form data + const formData = new FormData(contactForm); + const data = Object.fromEntries(formData); + + // Simple form validation + if (!data.name || !data.email || !data.subject || !data.message) { + alert('Please fill in all required fields.'); + return; + } + + // Email validation + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (!emailRegex.test(data.email)) { + alert('Please enter a valid email address.'); + return; + } + + // Simulate form submission + alert(`Thank you for your message, ${data.name}! We'll get back to you soon at ${data.email}.`); + + // Reset form + contactForm.reset(); + }); + } +}); + +// Smooth scrolling for navigation links +document.addEventListener('DOMContentLoaded', function() { + const navLinks = document.querySelectorAll('.main-nav a'); + + navLinks.forEach(link => { + link.addEventListener('click', function(e) { + // Check if it's an internal link + if (this.hostname === window.location.hostname) { + // Add a subtle animation effect + this.style.transform = 'scale(0.95)'; + setTimeout(() => { + this.style.transform = 'scale(1)'; + }, 150); + } + }); + }); +}); + +// Add hover effects to service items +document.addEventListener('DOMContentLoaded', function() { + const serviceItems = document.querySelectorAll('.services-list li, .value-item, .timeline-item'); + + serviceItems.forEach(item => { + item.addEventListener('mouseenter', function() { + this.style.transform = 'translateY(-2px)'; + this.style.transition = 'transform 0.3s ease'; + }); + + item.addEventListener('mouseleave', function() { + this.style.transform = 'translateY(0)'; + }); + }); +}); + +// Active navigation highlighting +document.addEventListener('DOMContentLoaded', function() { + const currentPage = window.location.pathname.split('/').pop(); + const navLinks = document.querySelectorAll('.main-nav a'); + + navLinks.forEach(link => { + const linkPage = link.getAttribute('href'); + if (linkPage === currentPage || (currentPage === '' && linkPage === 'index.html')) { + link.style.backgroundColor = '#daa520'; + link.style.color = '#5d4037'; + } + }); +}); diff --git a/styles.css b/styles.css index 4634bf0..d7e3775 100644 --- a/styles.css +++ b/styles.css @@ -157,6 +157,110 @@ footer a:hover { text-decoration: underline; } +/* Contact Page Styles */ +.contact-details { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin-top: 20px; +} + +.contact-item { + background-color: #f5e1c4; + padding: 25px; + border-radius: 10px; + border-left: 5px solid #daa520; +} + +.contact-item h3 { + color: #8b4513; + font-size: 22px; + margin-bottom: 15px; +} + +.contact-form-section { + background-color: #fffaf0; +} + +.contact-form { + max-width: 600px; + margin: 0 auto; +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + color: #8b4513; + font-weight: bold; + margin-bottom: 5px; +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 12px; + border: 2px solid #daa520; + border-radius: 5px; + font-family: 'Georgia', serif; + font-size: 16px; + background-color: #fff; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #8b4513; + box-shadow: 0 0 5px rgba(139, 69, 19, 0.3); +} + +.submit-btn { + background-color: #8b4513; + color: white; + padding: 15px 30px; + border: none; + border-radius: 5px; + font-size: 18px; + font-family: 'Georgia', serif; + cursor: pointer; + transition: background-color 0.3s; +} + +.submit-btn:hover { + background-color: #daa520; +} + +/* About Page Styles */ +.story-origins, +.story-mission, +.story-team { + background-color: #fffaf0; +} + +.values-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; + margin-top: 25px; +} + +.value-item { + background-color: #f5e1c4; + padding: 25px; + border-radius: 10px; + border-left: 5px solid #daa520; +} + +.value-item h3 { + color: #8b4513; + font-size: 22px; + margin-bottom: 15px; +} + /* Responsive Design */ @media (max-width: 768px) { .main-nav ul { @@ -175,4 +279,9 @@ footer a:hover { section { padding: 20px; } + + .contact-details, + .values-list { + grid-template-columns: 1fr; + } }