-
Notifications
You must be signed in to change notification settings - Fork 0
mujiswag/trendyloft
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TRENDYLOFT | Simplicity with a Spark</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #8A2BE2;
--secondary: #00CED1;
--accent: #FF6347;
--light: #f8f9fa;
--dark: #212529;
--gradient: linear-gradient(135deg, var(--primary), var(--secondary));
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--light);
color: var(--dark);
overflow-x: hidden;
}
/* Header Styles */
header {
background: var(--gradient);
color: white;
padding: 1rem 5%;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.logo {
font-size: 1.8rem;
font-weight: 700;
text-decoration: none;
color: white;
}
.mobile-menu {
display: none;
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
background: var(--gradient);
color: white;
padding: 6rem 5% 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="rgba(255,255,255,0.1)"/></svg>');
background-size: cover;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-button {
display: inline-block;
background: var(--accent);
color: white;
padding: 0.8rem 2rem;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255,99,71,0.4);
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(255,99,71,0.6);
}
/* Product Showcase */
.section-title {
text-align: center;
margin: 4rem 0 2rem;
font-size: 2.2rem;
color: var(--primary);
position: relative;
}
.section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: var(--gradient);
border-radius: 2px;
}
.products {
padding: 2rem 5%;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.product-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.product-image {
height: 200px;
width: 100%;
object-fit: cover;
}
.product-info {
padding: 1.5rem;
}
.product-info h3 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
color: var(--dark);
}
.product-info p {
color: #666;
margin-bottom: 1rem;
line-height: 1.5;
}
.price {
font-weight: 700;
color: var(--primary);
font-size: 1.2rem;
margin-bottom: 1rem;
display: block;
}
.product-actions {
display: flex;
justify-content: space-between;
}
.buy-button {
background: var(--primary);
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.buy-button:hover {
background: var(--secondary);
}
.wishlist-btn {
background: none;
border: none;
color: #999;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s ease;
}
.wishlist-btn:hover {
color: var(--accent);
transform: scale(1.1);
}
/* Featured Section */
.featured {
background: linear-gradient(to right, #f8f9fa, #e9ecef);
padding: 4rem 5%;
text-align: center;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.featured-item {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 8px 15px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.featured-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.featured-icon {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.featured-item h3 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
color: var(--dark);
}
.featured-item p {
color: #666;
line-height: 1.6;
}
/* Contact Section */
.contact {
padding: 4rem 5%;
background: white;
}
.contact-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
margin-top: 2rem;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
}
.contact-icon {
width: 50px;
height: 50px;
background: var(--gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.contact-text h3 {
font-size: 1.2rem;
margin-bottom: 0.3rem;
color: var(--dark);
}
.contact-text p {
color: #666;
}
.contact-form {
background: #f8f9fa;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--dark);
}
.form-control {
width: 100%;
padding: 0.8rem 1rem;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-control:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}
textarea.form-control {
resize: vertical;
min-height: 120px;
}
.submit-btn {
background: var(--gradient);
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
}
/* Footer */
footer {
background: var(--dark);
color: white;
padding: 3rem 5% 2rem;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.5rem;
}
.footer-column h3::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: var(--gradient);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: #ccc;
text-decoration: none;
transition: all 0.3s ease;
}
.footer-links a:hover {
color: var(--secondary);
padding-left: 5px;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
color: white;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--gradient);
transform: translateY(-3px);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 2rem;
}
.return-note {
background: rgba(255,99,71,0.2);
padding: 1rem;
border-radius: 8px;
font-weight: 500;
color: #ffcccc;
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: white;
padding: 2rem;
border-radius: 15px;
max-width: 500px;
width: 90%;
text-align: center;
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.modal-title {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--primary);
}
.modal-message {
margin-bottom: 1.5rem;
color: #666;
}
.modal-button {
background: var(--gradient);
color: white;
border: none;
padding: 0.8rem 2rem;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.modal-button:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.3);
}
/* Responsive Design */
@media (max-width: 992px) {
.contact-container {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2.8rem;
}
}
@media (max-width: 768px) {
.mobile-menu {
display: block;
}
.hero {
padding: 4rem 5% 3rem;
}
.hero h1 {
font-size: 2.3rem;
}
.hero p {
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.section-title {
font-size: 1.8rem;
}
.product-grid, .featured-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<!-- Header -->
<header>
<a href="#" class="logo">TRENDYLOFT</a>
<div class="mobile-menu">
<i class="fas fa-bars"></i>
</div>
</header>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>TRENDYLOFT</h1>
<p>Simplicity with a Spark</p>
<a href="#products" class="cta-button">Explore Collection</a>
</div>
</section>
<!-- Product Showcase -->
<section class="products" id="products">
<h2 class="section-title">Our Products</h2>
<div class="product-grid">
<!-- Product 1 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Wireless Earbuds" class="product-image">
<div class="product-info">
<h3>Wireless Earbuds</h3>
<p>Premium sound quality with active noise cancellation and 24-hour battery life.</p>
<span class="price">$129.99</span>
<div class="product-actions">
<button class="buy-button">Add to Cart</button>
<button class="wishlist-btn"><i class="far fa-heart"></i></button>
</div>
</div>
</div>
<!-- Product 2 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Smart Watch" class="product-image">
<div class="product-info">
<h3>Fitness Smart Watch</h3>
<p>Track your health metrics, receive notifications, and stay connected on the go.</p>
<span class="price">$199.99</span>
<div class="product-actions">
<button class="buy-button">Add to Cart</button>
<button class="wishlist-btn"><i class="far fa-heart"></i></button>
</div>
</div>
</div>
<!-- Product 3 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1598327105666-5b89351aff97?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Portable Charger" class="product-image">
<div class="product-info">
<h3>Portable Power Bank</h3>
<p>20,000mAh capacity with fast charging for all your devices.</p>
<span class="price">$49.99</span>
<div class="product-actions">
<button class="buy-button">Add to Cart</button>
<button class="wishlist-btn"><i class="far fa-heart"></i></button>
</div>
</div>
</div>
<!-- Product 4 -->
<div class="product-card">
<img src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Bluetooth Speaker" class="product-image">
<div class="product-info">
<h3>Bluetooth Speaker</h3>
<p>Waterproof speaker with 360° sound and 12-hour playtime.</p>
<span class="price">$79.99</span>
<div class="product-actions">
<button class="buy-button">Add to Cart</button>
<button class="wishlist-btn"><i class="far fa-heart"></i></button>
</div>
</div>
</div>
</div>
</section>
<!-- Featured Items -->
<section class="featured">
<h2 class="section-title">Featured Tech</h2>
<div class="featured-grid">
<!-- Featured 1 -->
<div class="featured-item">
<div class="featured-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>Smartphones</h3>
<p>Latest models with cutting-edge technology and stunning displays.</p>
</div>
<!-- Featured 2 -->
<div class="featured-item">
<div class="featured-icon">
<i class="fas fa-laptop"></i>
</div>
<h3>Laptops</h3>
<p>Powerful performance for work and play in sleek, portable designs.</p>
</div>
<!-- Featured 3 -->
<div class="featured-item">
<div class="featured-icon">
<i class="fas fa-headphones"></i>
</div>
<h3>Audio</h3>
<p>Immersive sound experience with our premium audio collection.</p>
</div>
<!-- Featured 4 -->
<div class="featured-item">
<div class="featured-icon">
<i class="fas fa-camera"></i>
</div>
<h3>Cameras</h3>
<p>Capture life's moments with our professional-grade cameras.</p>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact">
<h2 class="section-title">Get in Touch</h2>
<div class="contact-container">
<div class="contact-info">
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-text">
<h3>Phone</h3>
<p>+923347348669</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-text">
<h3>Email</h3>
<p>muji10@gmail.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fab fa-instagram"></i>
</div>
<div class="contact-text">
<h3>Instagram</h3>
<p>@TRENDYLOFT</p>
</div>
</div>
</div>
<div class="contact-form">
<form id="contactForm">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" class="form-control" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" class="form-control" required></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>TRENDYLOFT</h3>
<p>Simplicity with a Spark. We bring the latest tech innovations to your doorstep with style and simplicity.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Featured</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Categories</h3>
<ul class="footer-links">
<li><a href="#">Smartphones</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Audio</a></li>
<li><a href="#">Wearables</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Newsletter</h3>
<p>Subscribe to get updates on new products and special offers.</p>
<form id="newsletterForm">
<div class="form-group">
<input type="email" placeholder="Your Email" class="form-control">
</div>
<button type="submit" class="submit-btn">Subscribe</button>
</form>
</div>
</div>
<div class="footer-bottom">
<div class="return-note">
<p><strong>Note:</strong> Items listed on this website are not eligible for return or exchange.</p>
</div>
<p>© 2023 TRENDYLOFT. All Rights Reserved.</p>
</div>
</footer>
<!-- Modal -->
<div id="confirmationModal" class="modal">
<div class="modal-content">
<h3 class="modal-title">Message Sent Successfully!</h3>
<p class="modal-message">Thank you for your message. TRENDYLOFT will get back to you soon.</p>
<button class="modal-button" id="closeModal">Close</button>
</div>
</div>
<script>
// Modal functionality
const modal = document.getElementById('confirmationModal');
const closeModal = document.getElementById('closeModal');
function showModal() {
modal.style.display = 'flex';
}
function hideModal() {
modal.style.display = 'none';
}
closeModal.addEventListener('click', hideModal);
// Close modal when clicking outside
window.addEventListener('click', function(event) {
if (event.target === modal) {
hideModal();
}
});
// Contact form submission
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;
// In a real implementation, you would send this data to a server
// For this demo, we'll show a success message
console.log('Form submitted:', { name, email, message });
// Show confirmation modal
showModal();
// Reset form
this.reset();
});
// Newsletter subscription
document.getElementById('newsletterForm').addEventListener('submit', function(e) {
e.preventDefault();
const email = this.querySelector('input[type="email"]').value;
if (email) {
// In a real implementation, you would send this data to a server
console.log('Newsletter subscription:', email);
// Show confirmation modal
showModal();
// Reset form
this.reset();
} else {
alert('Please enter your email address.');
}
});
// Product card interactions
document.querySelectorAll('.buy-button').forEach(button => {
button.addEventListener('click', function() {
const productName = this.closest('.product-info').querySelector('h3').textContent;
alert(`Added ${productName} to cart!`);
});
});
document.querySelectorAll('.wishlist-btn').forEach(button => {
button.addEventListener('click', function() {
this.innerHTML = this.innerHTML.includes('far') ?
'<i class="fas fa-heart"></i>' :
'<i class="far fa-heart"></i>';
const productName = this.closest('.product-info').querySelector('h3').textContent;
alert(`Item ${this.innerHTML.includes('fas') ? 'added to' : 'removed from'} wishlist!`);
});
});
</script>
</body>
</html>
About
No description, website, or topics provided.
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published