Spaces:
Running
Running
7% more opacity. add an animation get rid of weird rectangle svg thing
Browse files- index.html +0 -6
- style.css +7 -19
index.html
CHANGED
|
@@ -11,12 +11,6 @@
|
|
| 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">
|
|
|
|
| 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 |
<div class="hero-content">
|
| 16 |
<div class="logo-container">
|
style.css
CHANGED
|
@@ -46,29 +46,17 @@ body {
|
|
| 46 |
left: 0;
|
| 47 |
right: 0;
|
| 48 |
bottom: 0;
|
| 49 |
-
background: linear-gradient(135deg, rgba(228,147,122,0.
|
| 50 |
z-index: 1;
|
| 51 |
}
|
| 52 |
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 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 |
-
|
| 70 |
-
|
| 71 |
-
50% { transform: translateY(-20px); }
|
| 72 |
}
|
| 73 |
.hero::before {
|
| 74 |
content: '';
|
|
@@ -178,7 +166,7 @@ body {
|
|
| 178 |
.dessert {
|
| 179 |
position: absolute;
|
| 180 |
font-size: 2rem;
|
| 181 |
-
opacity: 0.
|
| 182 |
animation: floatDessert 15s infinite ease-in-out;
|
| 183 |
}
|
| 184 |
.dessert-1 { top: 10%; left: 10%; animation-delay: 0s; }
|
|
|
|
| 46 |
left: 0;
|
| 47 |
right: 0;
|
| 48 |
bottom: 0;
|
| 49 |
+
background: linear-gradient(135deg, rgba(228,147,122,0.67) 0%, rgba(245,168,142,0.67) 100%);
|
| 50 |
z-index: 1;
|
| 51 |
}
|
| 52 |
|
| 53 |
+
@keyframes pulse {
|
| 54 |
+
0%, 100% { transform: scale(1); }
|
| 55 |
+
50% { transform: scale(1.05); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 56 |
}
|
| 57 |
|
| 58 |
+
.brand-name {
|
| 59 |
+
animation: pulse 3s ease-in-out infinite;
|
|
|
|
| 60 |
}
|
| 61 |
.hero::before {
|
| 62 |
content: '';
|
|
|
|
| 166 |
.dessert {
|
| 167 |
position: absolute;
|
| 168 |
font-size: 2rem;
|
| 169 |
+
opacity: 0.22;
|
| 170 |
animation: floatDessert 15s infinite ease-in-out;
|
| 171 |
}
|
| 172 |
.dessert-1 { top: 10%; left: 10%; animation-delay: 0s; }
|