build me a clone https://www.chewy.com/ make its looks eexactly same
Browse files- README.md +8 -5
- index.html +51 -19
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: PetPalace 🐾
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: blue
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://deepsite.hf.co).
|
index.html
CHANGED
|
@@ -1,19 +1,51 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>PetPalace - Pet Food, Products, Supplies at Low Prices</title>
|
| 7 |
+
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
|
| 11 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 12 |
+
<style>
|
| 13 |
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
| 14 |
+
body { font-family: 'Inter', sans-serif; }
|
| 15 |
+
.hero-gradient { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
| 16 |
+
.card-hover { transition: all 0.3s ease; }
|
| 17 |
+
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
|
| 18 |
+
.nav-link { position: relative; }
|
| 19 |
+
.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #667eea; transition: width 0.3s ease; }
|
| 20 |
+
.nav-link:hover::after { width: 100%; }
|
| 21 |
+
.autocomplete-item { transition: background-color 0.2s ease; }
|
| 22 |
+
.autocomplete-item:hover { background-color: #f3f4f6; }
|
| 23 |
+
.cart-badge { animation: bounce 0.5s ease-in-out; }
|
| 24 |
+
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
|
| 25 |
+
.product-card { transition: all 0.3s ease; }
|
| 26 |
+
.product-card:hover { transform: scale(1.02); }
|
| 27 |
+
.category-card { transition: all 0.3s ease; }
|
| 28 |
+
.category-card:hover { background-color: #f9fafb; }
|
| 29 |
+
.mobile-menu { transform: translateX(-100%); transition: transform 0.3s ease; }
|
| 30 |
+
.mobile-menu.open { transform: translateX(0); }
|
| 31 |
+
.search-suggestions { max-height: 400px; overflow-y: auto; }
|
| 32 |
+
.promo-banner { background: linear-gradient(90deg, #ff6b6b 0%, #feca57 100%); }
|
| 33 |
+
.deal-timer { font-variant-numeric: tabular-nums; }
|
| 34 |
+
.star-rating { color: #fbbf24; }
|
| 35 |
+
.price-tag { font-weight: 700; color: #dc2626; }
|
| 36 |
+
.original-price { text-decoration: line-through; color: #6b7280; }
|
| 37 |
+
.savings-badge { background-color: #dcfce7; color: #166534; }
|
| 38 |
+
.brand-logo { filter: grayscale(100%) opacity(0.6); transition: filter 0.3s ease; }
|
| 39 |
+
.brand-logo:hover { filter: grayscale(0%) opacity(1); }
|
| 40 |
+
.testimonial-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
| 41 |
+
.footer-link { transition: color 0.3s ease; }
|
| 42 |
+
.footer-link:hover { color: #667eea; }
|
| 43 |
+
.social-icon { transition: transform 0.3s ease; }
|
| 44 |
+
.social-icon:hover { transform: scale(1.1); }
|
| 45 |
+
.autocomplete-highlight { background-color: #fef3c7; }
|
| 46 |
+
.loading-spinner { border: 3px solid #f3f4f6; border-top: 3px solid #667eea; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
|
| 47 |
+
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
| 48 |
+
.notification { animation: slideInRight 0.3s ease-out; }
|
| 49 |
+
@keyframes slideInRight { from {
|
| 50 |
+
</head>
|
| 51 |
+
</html>
|