Spaces:
Running
Running
| body { | |
| margin: 0; | |
| font-family: 'Arial', sans-serif; | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| color: #fff; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 50px 0; | |
| } | |
| .kinetic-title { | |
| font-size: 4rem; | |
| font-weight: bold; | |
| animation: pulse 2s infinite; | |
| text-transform: uppercase; | |
| background: -webkit-linear-gradient(#00ffcc, #ff007a); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .subtitle { | |
| font-size: 1.5rem; | |
| opacity: 0.8; | |
| } | |
| .hero { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 60vh; | |
| } | |
| .product-image { | |
| width: 50%; | |
| height: 400px; | |
| background: url('cream.png') no-repeat center/cover; /* Замените на реальное изображение */ | |
| filter: drop-shadow(0 0 20px rgba(0, 255, 204, 0.5)); | |
| transform: rotateY(20deg); | |
| transition: transform 0.5s ease; | |
| } | |
| .product-image:hover { | |
| transform: rotateY(0deg); | |
| } | |
| .hero-text { | |
| width: 45%; | |
| } | |
| .hero-text h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 20px; | |
| } | |
| .cta-button { | |
| padding: 15px 30px; | |
| font-size: 1.2rem; | |
| border: none; | |
| background: #00ffcc; | |
| color: #0f0c29; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .cta-button:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 20px #00ffcc; | |
| } | |
| .features { | |
| display: flex; | |
| justify-content: space-around; | |
| padding: 50px 0; | |
| } | |
| .feature-card { | |
| width: 30%; | |
| padding: 20px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 15px; | |
| text-align: center; | |
| transition: transform 0.3s ease, background 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| background: rgba(0, 255, 204, 0.2); | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } |