Загрузить файлы в «/»
This commit is contained in:
224
style.css
Normal file
224
style.css
Normal file
@@ -0,0 +1,224 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
font-family: Arial, sans-serif;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 20px 0;
|
||||
z-index: 10;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
nav a, nav .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
height: 40px;
|
||||
opacity: 0.65;
|
||||
transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
nav a:hover,
|
||||
nav .button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 0 20px;
|
||||
border: 2px solid white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 5rem;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: slideIn 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.5rem;
|
||||
max-width: 600px;
|
||||
margin-bottom: 30px;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: slideIn 1.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.hit-button {
|
||||
padding: 15px 30px;
|
||||
border: 2px solid white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: slideIn 1.5s ease-out forwards;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hit-button:hover {
|
||||
background-color: white;
|
||||
color: #24243e;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 0 15px rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
.hit-button.playing {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
0% { opacity: 0; transform: translateY(20px); }
|
||||
100% { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.particles {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation-name: float;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% { transform: translateY(0) translateX(0); opacity: 0.5; }
|
||||
50% { transform: translateY(-50px) translateX(20px); opacity: 1; }
|
||||
100% { transform: translateY(0) translateX(0); opacity: 0.5; }
|
||||
}
|
||||
|
||||
.content {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 60px 20px;
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.typewriter span {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.typewriter span.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#frog-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.frog {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
transition: opacity linear;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#start-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 1.3rem;
|
||||
font-weight: normal;
|
||||
color: white;
|
||||
text-align: center;
|
||||
z-index: 999;
|
||||
pointer-events: none;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
#start-text span {
|
||||
opacity: 0;
|
||||
transition: opacity 0.05s linear;
|
||||
}
|
||||
|
||||
.particles, #frog-container { pointer-events: none; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 { font-size: 2.5rem; }
|
||||
.hero p { font-size: 1rem; }
|
||||
nav a, nav .button { height: 30px; font-size: 0.9rem; }
|
||||
nav { gap: 20px; }
|
||||
.hit-button { font-size: 0.9rem; padding: 8px 15px; }
|
||||
.content { padding: 30px 10px; font-size: 1rem; }
|
||||
#start-text { font-size: 1rem; padding: 0 10px; }
|
||||
.frog { width: 13vw !important; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero h1 { font-size: 2rem; }
|
||||
.hero p { font-size: 0.9rem; }
|
||||
nav a, nav .button { height: 25px; font-size: 0.8rem; }
|
||||
nav { gap: 15px; }
|
||||
.hit-button { font-size: 0.8rem; padding: 6px 12px; }
|
||||
.content { padding: 20px 5px; font-size: 0.9rem; }
|
||||
#start-text { font-size: 0.9rem; padding: 0 5px; }
|
||||
.frog { width: 10vw !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user