From db0530ec8d3c9612f80696c4c830967821de436e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 27 Sep 2025 10:28:05 +0000 Subject: [PATCH 1/2] Initial plan From 1478ac2ea831285221b16ab1a04aaabc1ff5ab16 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 27 Sep 2025 10:39:33 +0000 Subject: [PATCH 2/2] Implement complete homepage design matching mockup Co-authored-by: prasadhonrao <1454174+prasadhonrao@users.noreply.github.com> --- index.html | 256 +++++++++++++++++++++++++ styles.css | 534 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 790 insertions(+) create mode 100644 index.html create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..29af3dd --- /dev/null +++ b/index.html @@ -0,0 +1,256 @@ + + + + + + AIOutlet - Fashion & Lifestyle + + + + +
+
+
+ + +
+ 🔍 + 👤 + 🛒 +
+
+
+
+ + +
+
+
+
+
+ Fashion Model +
+
+

New Collection

+

Spring Summer 2024

+ +
+
+
+
+ Accessories +
+
+

Accessories

+

From $29

+
+
+
+
+ New Arrivals +
+
+

New Arrivals

+

Latest Trends

+
+
+
+
+ Shoes +
+
+

Shoes

+

Comfort & Style

+
+
+
+
+ Handbags +
+
+

Handbags

+

Premium Quality

+
+
+
+
+
+ + +
+
+

Shopping Categories

+
+
+
+ Fashion +
+
+

Fashion

+
+
+
+
+ Furniture +
+
+

Furniture

+
+
+
+
+ Sunglasses +
+
+

Sunglasses

+
+
+
+
+ Bags +
+
+

Bags

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

Free Shipping

+

Free shipping for order above $150

+
+
+
+
+

Money Guarantee

+

Within 30 days for an exchange

+
+
+
+
+

Online Support

+

24 hours a day, 7 days a week

+
+
+
+
+

Flexible Payment

+

Pay with multiple credit cards

+
+
+
+
+ + +
+
+
+

Get 25% off during our one-time sale

+

Limited time offer - Don't miss out on this amazing deal

+ +
+
+
+ + +
+
+
+
+
+ DJ +
+
+
+

Daily Johnson

+

"Love the quality and style of the clothes I purchased from this website. Great customer service as well. Highly recommended!"

+
+
+
+
+ + +
+
+ +
+
+ + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..229021d --- /dev/null +++ b/styles.css @@ -0,0 +1,534 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + line-height: 1.6; + color: #333; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Header */ +.header { + background: white; + padding: 1rem 0; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + position: sticky; + top: 0; + z-index: 100; +} + +.header-content { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo h1 { + color: #333; + font-size: 1.8rem; + font-weight: bold; +} + +.nav-list { + display: flex; + list-style: none; + gap: 2rem; +} + +.nav-link { + text-decoration: none; + color: #333; + font-weight: 500; + transition: color 0.3s; +} + +.nav-link:hover { + color: #007bff; +} + +.header-icons { + display: flex; + gap: 1rem; +} + +.icon-link { + color: #333; + font-size: 1.2rem; + text-decoration: none; + transition: color 0.3s; +} + +.icon-link:hover { + color: #007bff; +} + +/* Hero Section */ +.hero { + padding: 2rem 0; + background: #f8f9fa; +} + +.hero-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-template-rows: auto auto; + gap: 1rem; + height: 500px; +} + +.hero-item { + position: relative; + overflow: hidden; + border-radius: 8px; +} + +.hero-item.large { + grid-row: 1 / 3; +} + +.hero-item img, +.hero-item .placeholder-img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s; +} + +.hero-item:hover img, +.hero-item:hover .placeholder-img { + transform: scale(1.05); +} + +.hero-content { + position: absolute; + bottom: 20px; + left: 20px; + color: white; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); +} + +.hero-content h2 { + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.hero-content h3 { + font-size: 1.2rem; + margin-bottom: 0.5rem; +} + +.hero-content p { + margin-bottom: 1rem; + opacity: 0.9; +} + +.btn-primary { + background: #007bff; + color: white; + border: none; + padding: 12px 24px; + border-radius: 5px; + cursor: pointer; + font-weight: 500; + transition: background 0.3s; +} + +.btn-primary:hover { + background: #0056b3; +} + +.btn-secondary { + background: #333; + color: white; + border: none; + padding: 15px 30px; + border-radius: 5px; + cursor: pointer; + font-weight: 500; + font-size: 1rem; + transition: background 0.3s; +} + +.btn-secondary:hover { + background: #555; +} + +/* Categories Section */ +.categories { + padding: 4rem 0; +} + +.section-title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 3rem; + color: #333; +} + +.categories-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 2rem; + max-width: 800px; + margin: 0 auto; +} + +.category-item { + position: relative; + height: 300px; + overflow: hidden; + border-radius: 12px; + cursor: pointer; +} + +.category-item img, +.category-item .placeholder-img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s; +} + +.category-item:hover img, +.category-item:hover .placeholder-img { + transform: scale(1.05); +} + +.category-content { + position: absolute; + bottom: 20px; + left: 20px; + color: white; + text-shadow: 0 2px 4px rgba(0,0,0,0.7); +} + +.category-content h3 { + font-size: 1.5rem; + font-weight: 600; +} + +/* Features Section */ +.features { + padding: 4rem 0; + background: #f8f9fa; +} + +.features-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; +} + +.feature-item { + text-align: center; + padding: 2rem; +} + +.feature-icon { + width: 80px; + height: 80px; + background: #007bff; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 1rem; + color: white; + font-size: 2rem; + position: relative; +} + +/* Placeholder Images */ +.placeholder-img { + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + color: white; + font-weight: bold; + font-size: 1.2rem; + text-shadow: 0 2px 4px rgba(0,0,0,0.5); + transition: transform 0.3s; +} + +.placeholder-img span { + background: rgba(0,0,0,0.3); + padding: 0.5rem 1rem; + border-radius: 4px; +} + +.main-hero { background: linear-gradient(45deg, #e74c3c, #c0392b); } +.accessories { background: linear-gradient(45deg, #3498db, #2980b9); } +.arrivals { background: linear-gradient(45deg, #2ecc71, #27ae60); } +.shoes { background: linear-gradient(45deg, #f39c12, #e67e22); } +.handbags { background: linear-gradient(45deg, #9b59b6, #8e44ad); } +.cat-fashion { background: linear-gradient(45deg, #e67e22, #d35400); } +.cat-furniture { background: linear-gradient(45deg, #34495e, #2c3e50); } +.cat-sunglasses { background: linear-gradient(45deg, #1abc9c, #16a085); } +.cat-bags { background: linear-gradient(45deg, #e91e63, #c2185b); } +.avatar { + background: linear-gradient(45deg, #95a5a6, #7f8c8d); + border-radius: 50%; + font-size: 1.5rem; +} + +.feature-item h3 { + font-size: 1.3rem; + margin-bottom: 1rem; + color: #333; +} + +.feature-item p { + color: #666; + line-height: 1.5; +} + +/* CSS-based icons */ +.feature-icon.shipping::before { + content: "🚚"; + font-size: 2rem; +} + +.feature-icon.guarantee::before { + content: "↩ī¸"; + font-size: 2rem; +} + +.feature-icon.support::before { + content: "🎧"; + font-size: 2rem; +} + +.feature-icon.payment::before { + content: "đŸ’ŗ"; + font-size: 2rem; +} + +/* Promotional Banner */ +.promo-banner { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 4rem 0; + text-align: center; +} + +.promo-content h2 { + font-size: 2.5rem; + margin-bottom: 1rem; +} + +.promo-content p { + font-size: 1.1rem; + margin-bottom: 2rem; + opacity: 0.9; +} + +/* Testimonial */ +.testimonial { + padding: 4rem 0; + background: #f8f9fa; +} + +.testimonial-content { + display: flex; + align-items: center; + gap: 2rem; + max-width: 800px; + margin: 0 auto; + padding: 2rem; + background: white; + border-radius: 12px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} + +.testimonial-avatar .placeholder-img { + width: 80px; + height: 80px; +} + +.testimonial-avatar img { + width: 80px; + height: 80px; + border-radius: 50%; + object-fit: cover; +} + +.testimonial-text h3 { + color: #333; + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.testimonial-text p { + color: #666; + font-style: italic; + line-height: 1.6; +} + +/* Newsletter */ +.newsletter { + padding: 4rem 0; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.newsletter-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4rem; + align-items: center; +} + +.newsletter-info h2 { + font-size: 2rem; + margin-bottom: 1rem; +} + +.newsletter-info p { + opacity: 0.9; + line-height: 1.6; +} + +.newsletter-form { + background: rgba(255,255,255,0.1); + padding: 2rem; + border-radius: 12px; +} + +.newsletter-form h3 { + margin-bottom: 0.5rem; + font-size: 1.3rem; +} + +.newsletter-form p { + margin-bottom: 1.5rem; + opacity: 0.9; +} + +.email-form { + display: flex; + gap: 1rem; +} + +.email-input { + flex: 1; + padding: 12px; + border: none; + border-radius: 5px; + font-size: 1rem; +} + +/* Footer */ +.footer { + background: #333; + color: white; + padding: 3rem 0 1rem; +} + +.footer-content { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + margin-bottom: 2rem; +} + +.footer-column h3 { + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.footer-column ul { + list-style: none; +} + +.footer-column ul li { + margin-bottom: 0.5rem; +} + +.footer-column ul li a { + color: #ccc; + text-decoration: none; + transition: color 0.3s; +} + +.footer-column ul li a:hover { + color: white; +} + +.footer-bottom { + border-top: 1px solid #555; + padding-top: 1rem; + text-align: center; + color: #ccc; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .hero-grid { + grid-template-columns: 1fr; + grid-template-rows: repeat(5, 200px); + height: auto; + } + + .hero-item.large { + grid-row: 1; + } + + .categories-grid { + grid-template-columns: 1fr; + } + + .features-grid { + grid-template-columns: repeat(2, 1fr); + } + + .newsletter-content { + grid-template-columns: 1fr; + gap: 2rem; + } + + .footer-content { + grid-template-columns: repeat(2, 1fr); + } + + .email-form { + flex-direction: column; + } + + .nav-list { + display: none; + } +} + +@media (max-width: 480px) { + .features-grid { + grid-template-columns: 1fr; + } + + .footer-content { + grid-template-columns: 1fr; + } + + .section-title { + font-size: 2rem; + } + + .promo-content h2 { + font-size: 2rem; + } + + .testimonial-content { + flex-direction: column; + text-align: center; + } +} \ No newline at end of file