Testlend2 / styles.css
flpolprojects's picture
Rename style.css to styles.css
1d969a7 verified
raw
history blame
2.09 kB
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;
}