|
<!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> |
