Heyyy I'm falling text, help me please!!!
you made it to the bottom 🎀
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
color: white;
scroll-behavior: smooth;
}
/* Header */
header {
background: #1c2b36;
text-align: center;
padding: 10px;
}
/* Sections */
.hero {
height: 100vh;
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
/* Background images */
.section1 {
background-image: url('ocean1.jpg');
}
.section2 {
background-image: url('ocean2.jpg');
}
.section3 {
background-image: url('ocean3.jpg');
}
/* Overlay */
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.9);
text-align: center;
max-width: 700px;
padding: 20px;
background: rgba(0,0,0,0.35);
border-radius: 12px;
opacity: 0;
transition: all 1s ease;
}
.overlay.show {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* Text */
h2 {
font-size: 2.5rem;
margin-bottom: 15px;
}
p {
font-size: 1.2rem;
margin-bottom: 20px;
}
/* Buttons */
button {
background: white;
color: black;
border: none;
padding: 12px 20px;
font-size: 1rem;
border-radius: 20px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #ddd;
transform: scale(1.1);
}
/* 🐟 Floating animations */
.fish {
position: absolute;
width: 120px;
bottom: 20%;
left: -150px;
animation: swim 20s linear infinite;
}
.jellyfish {
position: absolute;
width: 100px;
right: 10%;
bottom: 10%;
animation: float 6s ease-in-out infinite;
}
.orca {
position: absolute;
width: 200px;
left: -200px;
bottom: 30%;
animation: swim 25s linear infinite;
}
/* Keyframes */
@keyframes swim {
from { transform: translateX(0); }
to { transform: translateX(120vw); }
}
@keyframes float {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
dive deeper ↓
hover me
stop looking at me