Aesthetic Apparel

Welcome to Aesthetic Apparel

Discover your unique style.

Shop Now

body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; color: #333; } header { background-color: #333; color: #fff; padding: 1rem 0; transition: background-color 0.3s ease; /* Header background transition */ } header:hover { background-color: #444; /* Darker background on hover */ } nav ul { list-style: none; padding: 0; margin: 0; text-align: center; } nav ul li { display: inline; margin: 0 1.5rem; } nav ul li a { color: #fff; text-decoration: none; font-weight: bold; position: relative; /* For underline animation */ transition: color 0.3s ease; } nav ul li a:hover { color: #ddd; } nav ul li a::after { content: ''; position: absolute; left: 0; bottom: -5px; /* Distance of underline from text */ width: 100%; height: 2px; background-color: #fff; transform: scaleX(0); /* Initially hidden */ transform-origin: left; transition: transform 0.3s ease; } nav ul li a:hover::after { transform: scaleX(1); /* Show underline on hover */ } .landing-page { background-image: url('images/background.jpg'); background-size: cover; background-position: center; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; } .hero { background-color: rgba(0, 0, 0, 0.5); padding: 2rem; border-radius: 10px; display: flex; /* Enable flexbox for hero section */ flex-direction: column; /* Stack items vertically */ align-items: center; /* Center items horizontally */ } .hero-logo { width: 200px; /* Adjust size as needed */ margin-bottom: 20px; /* Space between logo and text */ } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; } .shop-button { display: inline-block; padding: 1rem 2rem; background-color: #fff; color: #333; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .shop-button:hover { background-color: #ddd; color: #333; } footer { text-align: center; padding: 1rem 0; background-color: #333; color: #fff; position: fixed; bottom: 0; width: 100%; } /* Shop Page Styles */ .shop-page { padding: 2rem; } .shop-page h2 { text-align: center; margin-bottom: 2rem; } .clothing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .clothing-card { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */ animation: fadeInUp 0.5s ease-out forwards; /* Initial animation */ opacity: 0; /* Initially hidden for animation */ } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .clothing-card:nth-child(even) { animation-delay: 0.1s; /* Slightly delay even cards */ } .clothing-card:nth-child(odd) { animation-delay: 0.2s; /* Slightly delay odd cards */ } .clothing-card:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */ } .card-image { width: 100%; height: 200px; object-fit: cover; } .card-content { padding: 1rem; } .card-title { margin-top: 0; font-size: 1.2rem; } .card-price { color: #555; font-weight: bold; } /* Cart Page Styles */ .cart-page { padding: 2rem; } .cart-page h2 { text-align: center; margin-bottom: 2rem; } .cart-items { list-style: none; padding: 0; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #eee; } .cart-item:last-child { border-bottom: none; } .item-info { flex-grow: 1; } .item-image { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; margin-right: 1rem; } .item-details { display: flex; flex-direction: column; } .item-name { font-weight: bold; } .item-price { color: #555; } .item-quantity { margin-left: 1rem; } /* Checkout Page Styles */ .checkout-page { padding: 2rem; } .checkout-page h2 { text-align: center; margin-bottom: 2rem; } .checkout-list { list-style: none; padding: 0; } .checkout-item { padding: 1rem 0; border-bottom: 1px solid #eee; } .checkout-item:last-child { border-bottom: none; } // You can add any interactivity here if needed for the landing page console.log("Landing page script loaded"); Shop - Aesthetic Apparel

Our Clothing Line

Stylish T-Shirt

$25.00

Elegant Dress

$45.00

Casual Jeans

$35.00

Summer Shorts

$20.00

Winter Jacket

$60.00

Sporty Hoodie

$40.00

Leather Jacket

$75.00

Denim Jacket

$50.00

Chino Pants

$40.00

Cargo Shorts

$30.00

Polo Shirt

$30.00

Sweater

$45.00

Blouse

$35.00

Skirt

$30.00

Formal Shirt

$40.00

Trousers

$55.00

Coat

$80.00

Rain Jacket

$65.00

Track Pants

$35.00

Tank Top

$20.00

Shopping Cart - Aesthetic Apparel

Shopping Cart

Total: $0.00

Checkout - Aesthetic Apparel

Checkout History

Order #12345

Date: 2023-12-10

Items: 2

Total: $70.00

iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII= document.addEventListener('DOMContentLoaded', () => { const clothingCards = document.querySelectorAll('.clothing-card'); const itemDetailsModal = document.getElementById('item-details-modal'); const modalItemContent = document.getElementById('modal-item-content'); const closeButton = document.querySelector('.close-button'); const viewDetailsButtons = document.querySelectorAll('.view-details-button'); viewDetailsButtons.forEach(button => { button.addEventListener('click', () => { const itemId = button.dataset.itemId; // Fetch item details based on itemId (replace with actual data fetching) const itemDetails = getItemDetails(itemId); displayItemDetails(itemDetails); itemDetailsModal.style.display = "block"; }); }); closeButton.addEventListener('click', () => { itemDetailsModal.style.display = "none"; }); window.addEventListener('click', (event) => { if (event.target == itemDetailsModal) { itemDetailsModal.style.display = "none"; } }); function getItemDetails(itemId) { // Replace with actual data fetching logic (e.g., from an API or data object) // For now, using dummy data switch (itemId) { case '1': return { id: '1', image: 'images/clothing1.jpg', title: 'Stylish T-Shirt', description: 'A comfortable and stylish t-shirt for everyday wear.', price: 25.00 }; case '2': return { id: '2', image: 'images/clothing2.jpg', title: 'Elegant Dress', description: 'A beautiful dress perfect for special occasions.', price: 45.00 }; case '3': return { id: '3', image: 'images/clothing3.jpg', title: 'Casual Jeans', description: 'Classic jeans that offer both style and comfort.', price: 35.00 }; case '4': return { id: '4', image: 'images/clothing4.jpg', title: 'Summer Shorts', description: 'Light and breezy shorts ideal for warm weather.', price: 20.00 }; case '5': return { id: '5', image: 'images/clothing5.jpg', title: 'Winter Jacket', description: 'A warm and durable jacket to keep you cozy in winter.', price: 60.00 }; case '6': return { id: '6', image: 'images/clothing6.jpg', title: 'Sporty Hoodie', description: 'A comfortable hoodie perfect for workouts or casual wear.', price: 40.00 }; case '7': return { id: '7', image: 'images/clothing7.jpg', title: 'Leather Jacket', description: 'A stylish leather jacket for a cool and edgy look.', price: 75.00 }; case '8': return { id: '8', image: 'images/clothing8.jpg', title: 'Denim Jacket', description: 'A versatile denim jacket that pairs well with anything.', price: 50.00 }; case '9': return { id: '9', image: 'images/clothing9.jpg', title: 'Chino Pants', description: 'Comfortable and smart chino pants for a semi-formal style.', price: 40.00 }; case '10': return { id: '10', image: 'images/clothing10.jpg', title: 'Cargo Shorts', description: 'Practical cargo shorts with plenty of pocket space.', price: 30.00 }; case '11': return { id: '11', image: 'images/clothing11.jpg', title: 'Polo Shirt', description: 'A classic polo shirt, perfect for a smart casual look.', price: 30.00 }; case '12': return { id: '12', image: 'images/clothing12.jpg', title: 'Sweater', description: 'A cozy sweater to keep you warm and stylish.', price: 45.00 }; case '13': return { id: '13', image: 'images/clothing13.jpg', title: 'Blouse', description: 'An elegant blouse suitable for both work and evenings out.', price: 35.00 }; case '14': return { id: '14', image: 'images/clothing14.jpg', title: 'Skirt', description: 'A fashionable skirt that can be dressed up or down.', price: 30.00 }; case '15': return { id: '15', image: 'images/clothing15.jpg', title: 'Formal Shirt', description: 'A crisp formal shirt for business or special events.', price: 40.00 }; case '16': return { id: '16', image: 'images/clothing16.jpg', title: 'Trousers', description: 'Well-fitting trousers that offer style and comfort.', price: 55.00 }; case '17': return { id: '17', image: 'images/clothing17.jpg', title: 'Coat', description: 'A sophisticated coat to complete your winter wardrobe.', price: 80.00 }; case '18': return { id: '18', image: 'images/clothing18.jpg', title: 'Rain Jacket', description: 'A practical and waterproof rain jacket.', price: 65.00 }; case '19': return { id: '19', image: 'images/clothing19.jpg', title: 'Track Pants', description: 'Comfortable track pants for sports or lounging.', price: 35.00 }; case '20': return { id: '20', image: 'images/clothing20.jpg', title: 'Tank Top', description: 'A basic tank top, essential for summer or layering.', price: 20.00 }; default: return { title: 'Item not found', description: 'Details for this item are not available.' }; } } function displayItemDetails(item) { modalItemContent.innerHTML = `

${item.title}

${item.description}

$${item.price.toFixed(2)}

`; const addToCartButton = modalItemContent.querySelector('.add-to-cart-button'); addToCartButton.addEventListener('click', () => { const itemId = addToCartButton.dataset.itemId; const selectedItem = getItemDetails(itemId); addToCart(selectedItem); }); } function getCart() { const cartString = localStorage.getItem('shoppingCart'); return cartString ? JSON.parse(cartString) : []; } function saveCart(cart) { localStorage.setItem('shoppingCart', JSON.stringify(cart)); } function addToCart(item) { let cart = getCart(); cart.push(item); saveCart(cart); alert(\`\${item.title} added to cart!\`); // Basic feedback } }); document.addEventListener('DOMContentLoaded', () => { const cartItemsContainer = document.querySelector('.cart-items'); const cartTotalSpan = document.getElementById('cart-total'); function getCart() { const cartString = localStorage.getItem('shoppingCart'); return cartString ? JSON.parse(cartString) : []; } function displayCartItems() { const cartItems = getCart(); let cartTotal = 0; if (cartItems.length === 0) { cartItemsContainer.innerHTML = '

Your cart is empty.

'; cartTotalSpan.textContent = '0.00'; return; } cartItemsContainer.innerHTML = ''; // Clear existing items cartItems.forEach(item => { const cartItemElement = document.createElement('li'); cartItemElement.classList.add('cart-item'); cartItemElement.innerHTML = `

${item.title}

$${item.price.toFixed(2)}

Quantity:

`; cartItemsContainer.appendChild(cartItemElement); cartTotal += item.price; }); cartTotalSpan.textContent = cartTotal.toFixed(2); // Add event listeners for quantity changes (if needed for future quantity updates) const quantityInputs = document.querySelectorAll('.quantity-input'); quantityInputs.forEach(input => { input.addEventListener('change', (event) => { const itemId = event.target.dataset.itemId; const quantity = parseInt(event.target.value); // Update cart logic here if needed for quantity changes console.log(\`Item ID: \${itemId}, Quantity updated to: \${quantity}\`); }); }); } displayCartItems(); }); document.addEventListener('DOMContentLoaded', () => { // Checkout page specific scripts can be added here console.log('Checkout page script loaded'); }); /* shop.css */ .shop-page { padding: 2rem; } .shop-page h2 { text-align: center; margin-bottom: 2rem; } .clothing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .clothing-card { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */ animation: fadeInUp 0.5s ease-out forwards; /* Initial animation */ opacity: 0; /* Initially hidden for animation */ } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .clothing-card:nth-child(even) { animation-delay: 0.1s; /* Slightly delay even cards */ } .clothing-card:nth-child(odd) { animation-delay: 0.2s; /* Slightly delay odd cards */ } .clothing-card:hover { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */ } .card-image { width: 100%; height: 200px; object-fit: cover; } .card-content { padding: 1rem; } .card-title { margin-top: 0; font-size: 1.2rem; } .card-price { color: #555; font-weight: bold; } /* Modal Styles */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ border-radius: 10px; position: relative; } .close-button { color: #aaa; position: absolute; top: 0; right: 0; font-size: 28px; font-weight: bold; padding: 0 10px; } .close-button:hover, .close-button:focus { color: black; text-decoration: none; cursor: pointer; } #modal-item-content { text-align: center; } #modal-item-content img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 1rem; } #modal-item-content h3 { margin-bottom: 0.5rem; } #modal-item-content p { margin-bottom: 1rem; } .add-to-cart-button { padding: 0.75rem 1.5rem; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s ease; } .add-to-cart-button:hover { background-color: #555; } /* cart.css */ .cart-page { padding: 2rem; } .cart-page h2 { text-align: center; margin-bottom: 2rem; } .cart-items { list-style: none; padding: 0; } .cart-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #eee; } .cart-item:last-child { border-bottom: none; } .item-info { flex-grow: 1; } .item-image { width: 80px; height: 80px; object-fit: cover; border-radius: 5px; margin-right: 1rem; } .item-details { display: flex; flex-direction: column; } .item-name { font-weight: bold; } .item-price { color: #555; } .item-quantity { margin-left: 1rem; } .cart-summary { margin-top: 2rem; text-align: right; } .cart-summary p { font-size: 1.2rem; font-weight: bold; margin-bottom: 1rem; } .checkout-button { padding: 1rem 2rem; background-color: #333; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 1.1rem; transition: background-color 0.3s ease; } .checkout-button:hover { background-color: #555; } /* checkout.css */ .checkout-page { padding: 2rem; } .checkout-page h2 { text-align: center; margin-bottom: 2rem; } .checkout-list { list-style: none; padding: 0; } .checkout-item { padding: 1rem 0; border-bottom: 1px solid #eee; } .checkout-item:last-child { border-bottom: none; } .checkout-item h3 { margin-top: 0; margin-bottom: 0.5rem; } .checkout-item p { margin-bottom: 0.5rem; color: #555; } .view-order-button { padding: 0.5rem 1rem; background-color: #eee; color: #333; border: none; border-radius: 5px; cursor: pointer; font-size: 0.9rem; transition: background-color 0.3s ease; } .view-order-button:hover { background-color: #ddd; }