| <!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> |
| |
| @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@400;700&display=swap'); |
| |
| |
| :root { |
| --primary: #FF6B6B; |
| --secondary: #4ECDC4; |
| --accent: #FFE66D; |
| --light: #F7FFF7; |
| --dark: #292F36; |
| --fun-purple: #A67DB8; |
| } |
| |
| |
| * { |
| 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 { |
| 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 { |
| 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 { |
| 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 { |
| 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 { |
| 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 { |
| 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 { |
| 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 { |
| 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 { |
| 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; |
| } |
| |
| |
| @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>© 2023 Flip & Wear. All rights reserved. | <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| const menuBtn = document.getElementById('menu-btn'); |
| const nav = document.getElementById('main-nav'); |
| |
| menuBtn.addEventListener('click', () => { |
| menuBtn.classList.toggle('active'); |
| nav.classList.toggle('active'); |
| }); |
| |
| |
| function flipItem(item) { |
| const img = item.querySelector('img'); |
| |
| |
| item.classList.toggle('flipped'); |
| |
| |
| 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'; |
| } |
| |
| |
| const icon = item.querySelector('.flip-btn i'); |
| icon.style.transform = icon.style.transform === 'rotate(180deg)' ? 'rotate(0deg)' : 'rotate(180deg)'; |
| } |
| |
| |
| 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; |
| |
| |
| const cartIcon = document.querySelector('.cart-icon i'); |
| cartIcon.style.transform = 'scale(1.2)'; |
| setTimeout(() => { |
| cartIcon.style.transform = 'scale(1)'; |
| }, 300); |
| |
| |
| item.style.boxShadow = '0 0 0 5px rgba(78, 205, 196, 0.5)'; |
| setTimeout(() => { |
| item.style.boxShadow = ''; |
| }, 500); |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| |
| |
| if (nav.classList.contains('active')) { |
| menuBtn.classList.remove('active'); |
| nav.classList.remove('active'); |
| } |
| }); |
| }); |
| |
| |
| 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> |
