Spaces:
Running
Running
less opacity on hero (less pink overlay) .. rea add thevector animation you had
Browse files- index.html +7 -1
- style.css +22 -2
index.html
CHANGED
|
@@ -11,8 +11,14 @@
|
|
| 11 |
<body>
|
| 12 |
<custom-navbar></custom-navbar>
|
| 13 |
<section class="hero" style="background-image: url('https://huggingface.co/spaces/spwotton/try-me-today/resolve/main/images/Gemini_Generated_Image_culcz1culcz1culc.png'); background-size: cover; background-position: center;">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 14 |
<div class="hero-overlay"></div>
|
| 15 |
-
|
| 16 |
<div class="logo-container">
|
| 17 |
<h1 class="brand-name">Try Me Today</h1>
|
| 18 |
<p class="tagline">Cocina Estudio Creativo</p>
|
|
|
|
| 11 |
<body>
|
| 12 |
<custom-navbar></custom-navbar>
|
| 13 |
<section class="hero" style="background-image: url('https://huggingface.co/spaces/spwotton/try-me-today/resolve/main/images/Gemini_Generated_Image_culcz1culcz1culc.png'); background-size: cover; background-position: center;">
|
| 14 |
+
<svg class="hero-vector" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
|
| 15 |
+
<path fill="rgba(255,248,243,0.3)" fill-opacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,138.7C960,139,1056,117,1152,106.7C1248,96,1344,96,1392,96L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
| 16 |
+
</svg>
|
| 17 |
+
<svg class="hero-vector hero-vector-2" viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg">
|
| 18 |
+
<path fill="rgba(228,147,122,0.2)" fill-opacity="1" d="M0,192L48,181.3C96,171,192,149,288,154.7C384,160,480,192,576,197.3C672,203,768,181,864,165.3C960,149,1056,139,1152,149.3C1248,160,1344,192,1392,208L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
|
| 19 |
+
</svg>
|
| 20 |
<div class="hero-overlay"></div>
|
| 21 |
+
<div class="hero-content">
|
| 22 |
<div class="logo-container">
|
| 23 |
<h1 class="brand-name">Try Me Today</h1>
|
| 24 |
<p class="tagline">Cocina Estudio Creativo</p>
|
style.css
CHANGED
|
@@ -40,16 +40,36 @@ body {
|
|
| 40 |
position: relative;
|
| 41 |
overflow: hidden;
|
| 42 |
}
|
| 43 |
-
|
| 44 |
.hero-overlay {
|
| 45 |
position: absolute;
|
| 46 |
top: 0;
|
| 47 |
left: 0;
|
| 48 |
right: 0;
|
| 49 |
bottom: 0;
|
| 50 |
-
background: linear-gradient(135deg, rgba(228,147,122,0.
|
| 51 |
z-index: 1;
|
| 52 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 53 |
.hero::before {
|
| 54 |
content: '';
|
| 55 |
position: absolute;
|
|
|
|
| 40 |
position: relative;
|
| 41 |
overflow: hidden;
|
| 42 |
}
|
|
|
|
| 43 |
.hero-overlay {
|
| 44 |
position: absolute;
|
| 45 |
top: 0;
|
| 46 |
left: 0;
|
| 47 |
right: 0;
|
| 48 |
bottom: 0;
|
| 49 |
+
background: linear-gradient(135deg, rgba(228,147,122,0.6) 0%, rgba(245,168,142,0.6) 100%);
|
| 50 |
z-index: 1;
|
| 51 |
}
|
| 52 |
+
|
| 53 |
+
.hero-vector {
|
| 54 |
+
position: absolute;
|
| 55 |
+
bottom: 0;
|
| 56 |
+
left: 0;
|
| 57 |
+
width: 100%;
|
| 58 |
+
height: 200px;
|
| 59 |
+
z-index: 2;
|
| 60 |
+
animation: waveFloat 8s ease-in-out infinite;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.hero-vector-2 {
|
| 64 |
+
height: 150px;
|
| 65 |
+
animation: waveFloat 8s ease-in-out infinite reverse;
|
| 66 |
+
animation-delay: 2s;
|
| 67 |
+
}
|
| 68 |
+
|
| 69 |
+
@keyframes waveFloat {
|
| 70 |
+
0%, 100% { transform: translateY(0); }
|
| 71 |
+
50% { transform: translateY(-20px); }
|
| 72 |
+
}
|
| 73 |
.hero::before {
|
| 74 |
content: '';
|
| 75 |
position: absolute;
|