Spaces:

perborgen
/

flip-wear

Running

App Files Files Community

perborgen commited on Mar 31

Commit

730faff

verified ·

1 Parent(s): 88ea08e

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1258 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Flip Wear
-emoji: 📉
-colorFrom: gray
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: flip-wear
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1258 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flip & Wear | No-Wrong-Way Kids Clothing</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Google Fonts */
+        @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@400;700&display=swap');
+        /* Color Variables */
+        :root {
+            --primary: #FF6B6B;
+            --secondary: #4ECDC4;
+            --accent: #FFE66D;
+            --light: #F7FFF7;
+            --dark: #292F36;
+            --fun-purple: #A67DB8;
+        }
+        /* Base Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Comic Neue', cursive;
+            background-color: var(--light);
+            color: var(--dark);
+            line-height: 1.6;
+            overflow-x: hidden;
+        }
+        h1, h2, h3, h4 {
+            font-family: 'Fredoka One', cursive;
+            color: var(--primary);
+            letter-spacing: 1px;
+        }
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        /* Header Styles */
+        header {
+            position: relative;
+            background-color: var(--light);
+            padding: 20px 0;
+            box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+            z-index: 100;
+        }
+        .header-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .logo-img {
+            width: 50px;
+            height: 50px;
+            background-color: var(--primary);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--light);
+            font-size: 24px;
+            transform: rotate(0deg);
+            animation: rotate 5s linear infinite paused;
+        }
+        .logo:hover .logo-img {
+            animation-play-state: running;
+        }
+        @keyframes rotate {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .logo-text {
+            font-family: 'Fredoka One', cursive;
+            font-size: 1.8rem;
+            color: var(--primary);
+        }
+        .logo-text span {
+            color: var(--secondary);
+        }
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 30px;
+        }
+        nav a {
+            font-weight: 700;
+            position: relative;
+            padding: 5px 0;
+        }
+        nav a:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 3px;
+            background: var(--secondary);
+            bottom: 0;
+            left: 0;
+            transition: width 0.3s ease;
+        }
+        nav a:hover:after {
+            width: 100%;
+        }
+        .cart-icon {
+            position: relative;
+            cursor: pointer;
+        }
+        .cart-count {
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            background-color: var(--accent);
+            color: var(--dark);
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+        }
+        /* Hero Section */
+        .hero {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            color: var(--light);
+            padding: 80px 0;
+            position: relative;
+            overflow: hidden;
+        }
+        .hero-content {
+            display: flex;
+            align-items: center;
+            gap: 50px;
+            position: relative;
+            z-index: 2;
+        }
+        .hero-text {
+            flex: 1;
+        }
+        .hero h1 {
+            font-size: 3.5rem;
+            color: var(--light);
+            margin-bottom: 20px;
+            line-height: 1.2;
+        }
+        .hero h1 span {
+            color: var(--accent);
+            text-shadow: 2px 2px 0 var(--dark);
+        }
+        .hero p {
+            font-size: 1.2rem;
+            margin-bottom: 30px;
+            max-width: 600px;
+        }
+        .btn {
+            display: inline-block;
+            padding: 12px 30px;
+            background-color: var(--accent);
+            color: var(--dark);
+            border-radius: 50px;
+            font-weight: bold;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            transition: all 0.3s ease;
+            border: none;
+            cursor: pointer;
+            font-family: 'Fredoka One', cursive;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
+        }
+        .btn.secondary {
+            background-color: transparent;
+            border: 2px solid var(--light);
+            color: var(--light);
+            margin-left: 15px;
+        }
+        .btn.secondary:hover {
+            background-color: rgba(255,255,255,0.1);
+        }
+        .hero-image {
+            flex: 1;
+            position: relative;
+            min-height: 400px;
+        }
+        .clothing-item {
+            position: absolute;
+            width: 250px;
+            height: 250px;
+            border-radius: 20px;
+            background-color: var(--light);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.5s ease;
+            cursor: pointer;
+            overflow: hidden;
+        }
+        .clothing-item:hover {
+            transform: scale(1.05) rotate(5deg);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.2);
+        }
+        .clothing-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: all 0.5s ease;
+        }
+        .shirt {
+            top: 0;
+            left: 0;
+        }
+        .pants {
+            top: 50px;
+            left: 150px;
+        }
+        .dress {
+            top: 20px;
+            left: 300px;
+        }
+        .clothing-item.backside {
+            transform: rotateY(180deg);
+        }
+        .flip-btn {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: rgba(255,255,255,0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 2;
+        }
+        .flip-btn:hover {
+            background-color: rgba(255,255,255,0.8);
+            transform: scale(1.1);
+        }
+        /* Features Section */
+        .features {
+            padding: 80px 0;
+            background-color: var(--light);
+        }
+        .section-title {
+            text-align: center;
+            margin-bottom: 60px;
+        }
+        .section-title h2 {
+            font-size: 2.5rem;
+            color: var(--primary);
+        }
+        .section-title p {
+            color: var(--dark);
+            font-size: 1.1rem;
+            max-width: 700px;
+            margin: 0 auto;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 40px;
+        }
+        .feature-card {
+            background-color: white;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
+            transition: all 0.3s ease;
+            text-align: center;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
+        }
+        .feature-icon {
+            width: 80px;
+            height: 80px;
+            background-color: var(--accent);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            font-size: 30px;
+            color: var(--dark);
+        }
+        .feature-card h3 {
+            margin-bottom: 15px;
+            color: var(--dark);
+        }
+        .feature-card p {
+            color: #666;
+        }
+        /* How It Works */
+        .how-it-works {
+            padding: 80px 0;
+            background-color: var(--secondary);
+            color: var(--light);
+        }
+        .how-it-works .section-title h2 {
+            color: var(--light);
+        }
+        .how-it-works .section-title p {
+            color: rgba(255,255,255,0.9);
+        }
+        .steps {
+            display: flex;
+            gap: 30px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .step {
+            flex: 1;
+            min-width: 250px;
+            position: relative;
+            text-align: center;
+        }
+        .step-number {
+            width: 60px;
+            height: 60px;
+            background-color: var(--accent);
+            color: var(--dark);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.5rem;
+            margin: 0 auto 20px;
+        }
+        .step h3 {
+            color: var(--light);
+            margin-bottom: 15px;
+        }
+        .step p {
+            color: rgba(255,255,255,0.9);
+        }
+        .step + .step:after {
+            content: '';
+            position: absolute;
+            top: 30px;
+            left: -30px;
+            width: 30px;
+            height: 2px;
+            background-color: var(--accent);
+        }
+        /* Gallery Section */
+        .gallery {
+            padding: 80px 0;
+        }
+        .gallery-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 20px;
+        }
+        .gallery-item {
+            position: relative;
+            border-radius: 15px;
+            overflow: hidden;
+            height: 300px;
+            cursor: pointer;
+        }
+        .gallery-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            transition: transform 0.5s ease;
+        }
+        .gallery-item:hover img {
+            transform: scale(1.1);
+        }
+        .gallery-item:hover .overlay {
+            opacity: 1;
+        }
+        .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+            padding: 20px;
+            text-align: center;
+        }
+        .overlay h3 {
+            color: white;
+            margin-bottom: 10px;
+        }
+        /* CTA Section */
+        .cta {
+            padding: 80px 0;
+            background-color: var(--primary);
+            text-align: center;
+            color: var(--light);
+        }
+        .cta h2 {
+            color: var(--light);
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+        }
+        .cta p {
+            max-width: 700px;
+            margin: 0 auto 40px;
+            font-size: 1.1rem;
+        }
+        /* Before/After Section */
+        .before-after {
+            padding: 80px 0;
+            background-color: var(--light);
+        }
+        .ba-container {
+            display: flex;
+            gap: 30px;
+            margin-top: 40px;
+        }
+        .ba-item {
+            flex: 1;
+            text-align: center;
+        }
+        .ba-item img {
+            width: 100%;
+            max-width: 400px;
+            border-radius: 15px;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+        }
+        .ba-item h3 {
+            margin-top: 20px;
+            color: var(--dark);
+        }
+        /* Testimonials */
+        .testimonials {
+            padding: 80px 0;
+            background-color: var(--fun-purple);
+            color: white;
+        }
+        .testimonial-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+            margin-top: 40px;
+        }
+        .testimonial-card {
+            background-color: rgba(255,255,255,0.1);
+            padding: 30px;
+            border-radius: 15px;
+            transition: all 0.3s ease;
+        }
+        .testimonial-card:hover {
+            background-color: rgba(255,255,255,0.2);
+            transform: translateY(-5px);
+        }
+        .testimonial-text {
+            font-style: italic;
+            margin-bottom: 20px;
+        }
+        .testimonial-author {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .author-img {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+        .author-info h4 {
+            color: var(--accent);
+            margin-bottom: 5px;
+        }
+        .author-info p {
+            font-size: 0.9rem;
+            opacity: 0.8;
+        }
+        /* Footer */
+        footer {
+            background-color: var(--dark);
+            color: var(--light);
+            padding: 60px 0 20px;
+        }
+        .footer-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 40px;
+            margin-bottom: 40px;
+        }
+        .footer-logo {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 20px;
+        }
+        .footer-logo .logo-img {
+            background-color: var(--light);
+            color: var(--primary);
+        }
+        .footer-logo .logo-text {
+            color: var(--light);
+        }
+        .footer-logo .logo-text span {
+            color: var(--secondary);
+        }
+        .footer-about p {
+            margin-bottom: 20px;
+        }
+        .social-links {
+            display: flex;
+            gap: 15px;
+        }
+        .social-icon {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: rgba(255,255,255,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        .social-icon:hover {
+            background-color: var(--primary);
+            transform: translateY(-5px);
+        }
+        .footer-links h3 {
+            color: var(--light);
+            margin-bottom: 20px;
+            font-size: 1.2rem;
+        }
+        .footer-links ul {
+            list-style: none;
+        }
+        .footer-links li {
+            margin-bottom: 10px;
+        }
+        .footer-links a {
+            transition: all 0.3s ease;
+            color: rgba(255,255,255,0.7);
+        }
+        .footer-links a:hover {
+            color: var(--accent);
+            padding-left: 5px;
+        }
+        .newsletter input {
+            width: 100%;
+            padding: 12px 15px;
+            border-radius: 50px;
+            border: none;
+            margin-bottom: 15px;
+            font-family: inherit;
+        }
+        .newsletter .btn {
+            width: 100%;
+            background-color: var(--primary);
+            color: white;
+        }
+        .copyright {
+            text-align: center;
+            padding-top: 20px;
+            border-top: 1px solid rgba(255,255,255,0.1);
+            color: rgba(255,255,255,0.7);
+            font-size: 0.9rem;
+        }
+        /* Responsive Styles */
+        @media (max-width: 992px) {
+            .hero-content {
+                flex-direction: column;
+                text-align: center;
+            }
+            .hero-text {
+                margin-bottom: 40px;
+            }
+            .hero-image {
+                width: 100%;
+                min-height: 350px;
+            }
+            .hero h1 {
+                font-size: 2.8rem;
+            }
+            .ba-container {
+                flex-direction: column;
+                align-items: center;
+            }
+        }
+        @media (max-width: 768px) {
+            nav {
+                position: fixed;
+                top: 90px;
+                left: 0;
+                width: 100%;
+                background-color: var(--light);
+                padding: 20px;
+                box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+                transform: translateY(-150%);
+                transition: transform 0.3s ease;
+                z-index: 90;
+            }
+            nav.active {
+                transform: translateY(0);
+            }
+            nav ul {
+                flex-direction: column;
+                gap: 20px;
+            }
+            .menu-btn {
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+                cursor: pointer;
+            }
+            .menu-btn span {
+                width: 25px;
+                height: 3px;
+                background-color: var(--primary);
+                transition: all 0.3s ease;
+            }
+            .menu-btn.active span:nth-child(1) {
+                transform: rotate(45deg) translate(5px, 6px);
+            }
+            .menu-btn.active span:nth-child(2) {
+                opacity: 0;
+            }
+            .menu-btn.active span:nth-child(3) {
+                transform: rotate(-45deg) translate(5px, -6px);
+            }
+            .step + .step:after {
+                display: none;
+            }
+            .steps {
+                flex-direction: column;
+                gap: 40px;
+            }
+            .clothing-item {
+                width: 200px;
+                height: 200px;
+            }
+            .shirt {
+                top: 20px;
+                left: 20px;
+            }
+            .pants {
+                top: 70px;
+                left: 100px;
+            }
+            .dress {
+                top: 120px;
+                left: 180px;
+            }
+        }
+        @media (max-width: 576px) {
+            .hero h1 {
+                font-size: 2.2rem;
+            }
+            .hero p, .section-title p, .cta p {
+                font-size: 1rem;
+            }
+            .btn {
+                padding: 10px 20px;
+                font-size: 0.8rem;
+            }
+            .section-title h2 {
+                font-size: 2rem;
+            }
+            .hero-image {
+                min-height: 250px;
+            }
+            .clothing-item {
+                width: 150px;
+                height: 150px;
+            }
+            .shirt {
+                top: 20px;
+                left: 20px;
+            }
+            .pants {
+                top: 60px;
+                left: 70px;
+            }
+            .dress {
+                top: 100px;
+                left: 120px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="container header-container">
+            <a href="#" class="logo">
+                <div class="logo-img">
+                    <i class="fas fa-tshirt"></i>
+                </div>
+                <div class="logo-text">Flip<span>&</span>Wear</div>
+            </a>
+            <nav id="main-nav">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#shop">Shop</a></li>
+                    <li><a href="#how-it-works">How It Works</a></li>
+                    <li><a href="#gallery">Gallery</a></li>
+                    <li><a href="#testimonials">Testimonials</a></li>
+                    <li><a href="#about">About Us</a></li>
+                </ul>
+            </nav>
+            <div class="cart-icon">
+                <i class="fas fa-shopping-cart"></i>
+                <span class="cart-count">0</span>
+            </div>
+            <div class="menu-btn" id="menu-btn">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    </header>
+    <section class="hero">
+        <div class="container hero-content">
+            <div class="hero-text">
+                <h1>Clothes that <span>flip</span> the script on dressing!</h1>
+                <p>With our innovative reversible designs, your child can't wear it wrong - inside out, backwards, every way is right! Made with love, quality fabrics, and endless fun patterns.</p>
+                <div class="hero-actions">
+                    <a href="#shop" class="btn">Shop Now</a>
+                    <a href="#how-it-works" class="btn secondary">How It Works</a>
+                </div>
+            </div>
+            <div class="hero-image">
+                <div class="clothing-item shirt">
+                    <img src="https://images.unsplash.com/photo-1605885475490-a19ae5b3b27b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Child wearing reversible shirt side A">
+                    <div class="flip-btn" onclick="flipItem(this.parentElement)">
+                        <i class="fas fa-sync-alt"></i>
+                    </div>
+                </div>
+                <div class="clothing-item pants">
+                    <img src="https://images.unsplash.com/photo-1556909114-44e2d8c7cab8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Child wearing reversible pants side A">
+                    <div class="flip-btn" onclick="flipItem(this.parentElement)">
+                        <i class="fas fa-sync-alt"></i>
+                    </div>
+                </div>
+                <div class="clothing-item dress">
+                    <img src="https://images.unsplash.com/photo-1599447536630-9552f3464eb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=766&q=80" alt="Child wearing reversible dress side A">
+                    <div class="flip-btn" onclick="flipItem(this.parentElement)">
+                        <i class="fas fa-sync-alt"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="features" id="shop">
+        <div class="container">
+            <div class="section-title">
+                <h2>Why Choose Flip & Wear?</h2>
+                <p>Our clothes are designed to make mornings easier and playtime more fun!</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-random"></i>
+                    </div>
+                    <h3>Reversible Designs</h3>
+                    <p>Every piece can be worn inside out or backwards with no wrong way to wear it. Double the outfits with each piece!</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-child"></i>
+                    </div>
+                    <h3>Kids Friendly</h3>
+                    <p>Tagless labels, soft fabrics, and easy closures make our clothes perfect for independent little dressers.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-leaf"></i>
+                    </div>
+                    <h3>Eco-Conscious</h3>
+                    <p>Made from organic, sustainable materials that are gentle on sensitive skin and the planet.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="how-it-works" id="how-it-works">
+        <div class="container">
+            <div class="section-title">
+                <h2>How It Works</h2>
+                <p>Our patented Flip & Wear technology makes getting dressed foolproof</p>
+            </div>
+            <div class="steps">
+                <div class="step">
+                    <div class="step-number">1</div>
+                    <h3>Dual-Sided Designs</h3>
+                    <p>Each garment features two coordinated patterns or colors, both beautifully finished.</p>
+                </div>
+                <div class="step">
+                    <div class="step-number">2</div>
+                    <h3>360° Comfort</h3>
+                    <p>Seamless construction with no scratchy tags or seams that can only face one way.</p>
+                </div>
+                <div class="step">
+                    <div class="step-number">3</div>
+                    <h3>Easy Mix & Match</h3>
+                    <p>Our collection coordinates beautifully, so any combination works together.</p>
+                </div>
+                <div class="step">
+                    <div class="step-number">4</div>
+                    <h3>Double the Fun</h3>
+                    <p>Each piece is essentially two outfits in one, making your money go further.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="before-after">
+        <div class="container">
+            <div class="section-title">
+                <h2>Two Looks in One</h2>
+                <p>See how our reversible designs transform with a simple flip!</p>
+            </div>
+            <div class="ba-container">
+                <div class="ba-item">
+                    <img src="https://images.unsplash.com/photo-1600189261863-223f5e50f42f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Reversible outfit side A">
+                    <h3>Sunny Day Look</h3>
+                </div>
+                <div class="ba-item">
+                    <img src="https://images.unsplash.com/photo-1600189261831-b3d3adf2c592?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Same outfit reversed">
+                    <h3>Starry Night Look</h3>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="gallery" id="gallery">
+        <div class="container">
+            <div class="section-title">
+                <h2>Double the Looks, Double the Fun</h2>
+                <p>See our reversible outfits in action</p>
+            </div>
+            <div class="gallery-grid">
+                <div class="gallery-item">
+                    <img src="https://images.unsplash.com/photo-1614373532017-88b9a1425e1a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Child wearing reversible outfit side A">
+                    <div class="overlay">
+                        <h3>Sunny Side Up</h3>
+                        <p>Bright yellow with polka dots</p>
+                    </div>
+                </div>
+                <div class="gallery-item">
+                    <img src="https://images.unsplash.com/photo-1512485694743-9c9538b4e6f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Same outfit reversed">
+                    <div class="overlay">
+                        <h3>Flip Side</h3>
+                        <p>Cool blue with star pattern</p>
+                    </div>
+                </div>
+                <div class="gallery-item">
+                    <img src="https://images.unsplash.com/photo-1590005354167-6baf7a6d4e7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Child wearing reversible outfit">
+                    <div class="overlay">
+                        <h3>Jungle Adventure</h3>
+                        <p>Green with animal friends</p>
+                    </div>
+                </div>
+                <div class="gallery-item">
+                    <img src="https://images.unsplash.com/photo-JNLgJsI2Dt8" alt="Child standing in reversible clothes">
+                    <div class="overlay">
+                        <h3>Urban Explorer</h3>
+                        <p>Modern gray with urban art</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="testimonials" id="testimonials">
+        <div class="container">
+            <div class="section-title">
+                <h2>What Parents Are Saying</h2>
+                <p>Don't just take our word for it - hear from happy parents!</p>
+            </div>
+            <div class="testimonial-grid">
+                <div class="testimonial-card">
+                    <div class="testimonial-text">
+                        "Flip & Wear has saved us so many morning battles! My 4-year-old can dress himself now and always gets it 'right' - no matter how it goes on."
+                    </div>
+                    <div class="testimonial-author">
+                        <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Sarah M." class="author-img">
+                        <div class="author-info">
+                            <h4>Sarah M.</h4>
+                            <p>Mom of 2</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial-card">
+                    <div class="testimonial-text">
+                        "The quality is amazing - we've washed these clothes dozens of times and they still look new. And my daughter loves showing off both sides to her friends!"
+                    </div>
+                    <div class="testimonial-author">
+                        <img src="https://images.unsplash.com/photo3-2fb367eb5c122?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="James T." class="author-img">
+                        <div class="author-info">
+                            <h4>James T.</h4>
+                            <p>Dad of 3</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial-card">
+                    <div class="testimonial-text">
+                        "As a preschool teacher, I recommend these to all my parents. The reversible designs help kids develop independence and confidence in dressing themselves."
+                    </div>
+                    <div class="testimonial-author">
+                        <img src="https://images.unsplash.com/photo-1607746882042-944664df772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ms. Rodriguez" class="author-img">
+                        <div class="author-info">
+                            <h4>Ms. Rodriguez</h4>
+                            <p>Preschool Teacher</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="cta">
+        <div class="container">
+            <h2>Ready for Stress-Free Mornings?</h2>
+            <p>Join thousands of parents who've made the switch to Flip & Wear and say goodbye to wardrobe battles!</p>
+            <a href="#shop" class="btn">Shop the Collection</a>
+        </div>
+    </section>
+    <footer id="about">
+        <div class="container">
+            <div class="footer-container">
+                <div class="footer-about">
+                    <div class="footer-logo">
+                        <div class="logo-img">
+                            <i class="fas fa-tshirt"></i>
+                        </div>
+                        <div class="logo-text">Flip<span>&</span>Wear</div>
+                    </div>
+                    <p>Making childhood dressing fun, easy, and creative since 2020. Our mission is to help kids express their independence with clothes that adapt to them.</p>
+                    <div class="social-links">
+                        <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
+                        <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
+                        <a href="#" class="social-icon"><i class="fab fa-pinterest-p"></i></a>
+                        <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <h3>Quick Links</h3>
+                    <ul>
+                        <li><a href="#">Home</a></li>
+                        <li><a href="#shop">Shop</a></li>
+                        <li><a href="#how-it-works">How It Works</a></li>
+                        <li><a href="#gallery">Gallery</a></li>
+                        <li><a href="#testimonials">Testimonials</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links">
+                    <h3>Customer Care</h3>
+                    <ul>
+                        <li><a href="#">Contact Us</a></li>
+                        <li><a href="#">FAQs</a></li>
+                        <li><a href="#">Shipping & Returns</a></li>
+                        <li><a href="#">Size Guide</a></li>
+                        <li><a href="#">Care Instructions</a></li>
+                    </ul>
+                </div>
+                <div class="newsletter">
+                    <h3>Stay Updated</h3>
+                    <p>Subscribe to our newsletter for new releases, special offers, and parenting tips!</p>
+                    <form>
+                        <input type="email" placeholder="Your email address">
+                        <button type="submit" class="btn">Subscribe</button>
+                    </form>
+                </div>
+            </div>
+            <div class="copyright">
+                <p>&copy; 2023 Flip & Wear. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Toggle mobile menu
+        const menuBtn = document.getElementById('menu-btn');
+        const nav = document.getElementById('main-nav');
+        menuBtn.addEventListener('click', () => {
+            menuBtn.classList.toggle('active');
+            nav.classList.toggle('active');
+        });
+        // Flip clothing items in hero section
+        function flipItem(item) {
+            const img = item.querySelector('img');
+            // Toggle flipped class
+            item.classList.toggle('flipped');
+            // Change the image source based on current state
+            if (item.classList.contains('shirt')) {
+                img.src = item.classList.contains('flipped')
+                    ? 'https://images.unsplash.com/photo-1600189261863-223f5e50f42f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80'
+                    : 'https://images.unsplash.com/photo-1605885475490-a19ae5b3b27b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80';
+            } else if (item.classList.contains('pants')) {
+                img.src = item.classList.contains('flipped')
+                    ? 'https://images.unsplash.com/photo-1416339698674-4f118dd3388b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80'
+                    : 'https://images.unsplash.com/photo-1556909114-44e2d8c7cab8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80';
+            } else if (item.classList.contains('dress')) {
+                img.src = item.classList.contains('flipped')
+                    ? 'https://images.unsplash.com/photo-1590005354167-6baf7a6d4e7a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80'
+                    : 'https://images.unsplash.com/photo-1599447536630-9552f3464eb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=766&q=80';
+            }
+            // Rotate the flip button icon
+            const icon = item.querySelector('.flip-btn i');
+            icon.style.transform = icon.style.transform === 'rotate(180deg)' ? 'rotate(0deg)' : 'rotate(180deg)';
+        }
+        // Simple cart counter
+        let cartCount = 0;
+        const cartItems = document.querySelectorAll('.clothing-item, .gallery-item');
+        const cartCounter = document.querySelector('.cart-count');
+        cartItems.forEach(item => {
+            item.addEventListener('click', (e) => {
+                if (!e.target.classList.contains('flip-btn') && !e.target.closest('.flip-btn') && !e.target.closest('.overlay')) {
+                    cartCount++;
+                    cartCounter.textContent = cartCount;
+                    // Add animation to cart icon
+                    const cartIcon = document.querySelector('.cart-icon i');
+                    cartIcon.style.transform = 'scale(1.2)';
+                    setTimeout(() => {
+                        cartIcon.style.transform = 'scale(1)';
+                    }, 300);
+                    // Add item to cart animation
+                    item.style.boxShadow = '0 0 0 5px rgba(78, 205, 196, 0.5)';
+                    setTimeout(() => {
+                        item.style.boxShadow = '';
+                    }, 500);
+                }
+            });
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+                // Close mobile menu if open
+                if (nav.classList.contains('active')) {
+                    menuBtn.classList.remove('active');
+                    nav.classList.remove('active');
+                }
+            });
+        });
+        // Add parallax effect to hero images on mouse move
+        document.addEventListener('mousemove', (e) => {
+            const clothingItems = document.querySelectorAll('.clothing-item');
+            const x = e.clientX / window.innerWidth;
+            const y = e.clientY / window.innerHeight;
+            clothingItems.forEach((item, index) => {
+                const offsetX = (x - 0.5) * 20 * (index + 1);
+                const offsetY = (y - 0.5) * 10 * (index + 1);
+                if (!item.classList.contains('flipped')) {
+                    item.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${offsetX / 2}deg)`;
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>