adding js
This commit is contained in:
parent
a8b7859e22
commit
a1ff23c306
134
about.html
Normal file
134
about.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Our Story - Global Tea Emporium</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img
|
||||
src="images/1757630393.png"
|
||||
class="logo"
|
||||
alt="Global Tea Emporium Logo"
|
||||
/>
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">Our Story</a></li>
|
||||
<li><a href="teas.html">Our Teas</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="banner">
|
||||
<h1>Our Story</h1>
|
||||
<p class="tagline">
|
||||
From Passion to Purpose: The Global Tea Emporium Journey
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="story-origins">
|
||||
<h2>How It All Began</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="story-mission">
|
||||
<h2>Our Mission & Values</h2>
|
||||
<p>
|
||||
<strong>Global Tea Emporium</strong> was founded on the belief that
|
||||
great tea should be more than just a beverage – it should be an
|
||||
<em>experience</em> that connects you to the land, the people, and the
|
||||
traditions that created it.
|
||||
</p>
|
||||
|
||||
<div class="values-list">
|
||||
<div class="value-item">
|
||||
<h3>Authenticity First</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="value-item">
|
||||
<h3>Sustainability & Fair Trade</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="value-item">
|
||||
<h3>Education & Community</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="value-item">
|
||||
<h3>Quality Without Compromise</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="story-team">
|
||||
<h2>Meet Our Tea Family</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Global Tea Emporium. All rights reserved.</p>
|
||||
<p>
|
||||
Visit our <a href="contact.html">Contact page</a> to connect with our
|
||||
tea experts.
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
95
contact.html
Normal file
95
contact.html
Normal file
@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Contact Us - Global Tea Emporium</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img
|
||||
src="images/1757630393.png"
|
||||
class="logo"
|
||||
alt="Global Tea Emporium Logo"
|
||||
/>
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="about.html">Our Story</a></li>
|
||||
<li><a href="teas.html">Our Teas</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="banner">
|
||||
<h1>Contact Global Tea Emporium</h1>
|
||||
<p class="tagline">We're Here <strong>tea</strong> help you</p>
|
||||
</section>
|
||||
|
||||
<section class="contact-info">
|
||||
<h2>Get in Touch</h2>
|
||||
<div class="contact-details">
|
||||
<div class="contact-item">
|
||||
<h3>Visit Our Store</h3>
|
||||
<p><strong>Global Tea Emporium</strong></p>
|
||||
<p>123 Tea Avenue</p>
|
||||
<p>Teaville, TE 12345</p>
|
||||
<p>United Teas</p>
|
||||
</div>
|
||||
|
||||
<div class="contact-item">
|
||||
<h3>Contact Information</h3>
|
||||
<p><strong>Phone:</strong> (123) 456-7890</p>
|
||||
<p><strong>Email:</strong> info@teasexample.com</p>
|
||||
<p><strong>Hours:</strong> Monday - Saturday: 9:00 AM - 6:00 PM</p>
|
||||
<p>Sunday: 11:00 AM - 4:00 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-form-section">
|
||||
<h2>Send Us a Message</h2>
|
||||
<form class="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Your Name:</label>
|
||||
<input type="text" id="name" name="name" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address:</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">Phone Number (optional):</label>
|
||||
<input type="tel" id="phone" name="phone" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">Subject:</label>
|
||||
<input type="text" id="subject" name="subject" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Your Message:</label>
|
||||
<textarea id="message" name="message" rows="6" required></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="submit-btn">Send Message</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Global Tea Emporium. All rights reserved.</p>
|
||||
<p>
|
||||
Visit our <a href="about.html">Our Story page</a> to learn more about
|
||||
our tea journey.
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
83
script.js
83
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';
|
||||
}
|
||||
});
|
||||
});
|
||||
109
styles.css
109
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;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user