Untitled
user_5708622
plain_text
21 days ago
6.2 kB
8
Indexable
Never
<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Lula | Video Box</title> <style> :root { --background: rgba(255, 255, 255, 0.7); --light-color: #ffffff; --dark-color: #000000; } * { padding: 0; margin: 0; } body { overflow: hidden; font-family: Arial, sans-serif; } video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); z-index: -1; } .container { display: flex; max-width: 900px; margin: 0 auto; height: auto; position: absolute; left: 0; right: 0; justify-content: space-around; z-index: 2; } .box { position: relative; cursor: pointer; overflow: hidden; transition: .5s ease-in-out; margin: 0 10px; transform: translateY(-150%); animation: slideDown 1s ease-out forwards; } .container2 .box { animation: slideDown2 1s ease-out forwards; } .box img { width: 100px; height: auto; border-radius: 20px; object-fit: cover; } .box p { display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--background); color: var(--dark-color); padding: 10px; border-radius: 20px; width: 80px; height: 80px; margin: -2px 0 0 0; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease-in-out; } .box:hover p { opacity: 1; } .box:hover { transform: scale(1.1); } .container2 { display: flex; max-width: 900px; margin: 0 auto; height: auto; position: absolute; left: 0; right: 0; justify-content: space-around; z-index: 1; } @keyframes slideDown { 0% { transform: translateY(-800%); } 100% { transform: translateY(150%); } } @keyframes slideDown2 { 0% { transform: translateY(-200%); } 100% { transform: translateY(270%); } } .box:nth-child(1) { animation-delay: .2s; } .box:nth-child(2) { animation-delay: .4s; } .box:nth-child(3) { animation-delay: .6s; } .box:nth-child(4) { animation-delay: 2.2s; } .box:nth-child(5) { animation-delay: 2.4s; } .box:nth-child(6) { animation-delay: 2.6s; } @media screen and (min-width: 768px) { .container { padding: 0 20px 0 20px; } .box p { width: 180px; height: 180px; border-radius: 20px; font-size: 18px; } .box img { width: 200px; height: auto; } .footer { font-size: 18px; } } @media screen and (min-width: 1024px) { .container { padding: 0 30px 0 30px; } .box p { width: 230px; height: 230px; border-radius: 20px; font-size: 22px; } .box img { width: 250px; height: auto; } .footer { font-size: 20px; } } footer { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: var(--light-color); font-size: 14px; } </style> </head> <body> <video autoplay loop muted> <source src="https://html-css-js.lulamc.repl.co/your-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="container"> <div class="box"> <img src="https://media.discordapp.net/attachments/1121669554045734932/1173199128914841650/image1.png" alt="Image 1"> <p>Text 1</p> </div> <div class="box"> <img src="https://media.discordapp.net/attachments/1121669554045734932/1173199128914841650/image1.png" alt="Image 2"> <p>Text 2</p> </div> <div class="box"> <img src="https://media.discordapp.net/attachments/1121669554045734932/1173199128914841650/image1.png" alt="Image 3"> <p>Text 3</p> </div> </div> <div class="container2"> <div class="box"> <img src="https://media.discordapp.net/attachments/1121669554045734932/1173199128914841650/image1.png" alt="Image 4"> <p>Text 4</p> </div> <div class="box"> <img src="https://media.discordapp.net/attachments/1121669554045734932/1173199128914841650/image1.png" alt="Image 5"> <p>Text 5</p> </div> <div class="box"> <img src="https://media.discordapp.net/attachments/1121669554045734932/1173199128914841650/image1.png" alt="Image 6"> <p>Text 6</p> </div> </div> <footer> Copyright by Lula 2023 </footer> </body> </html>
Leave a Comment