sha/mebli
1
0
Fork 0
mirror of https://github.com/shadoll/mebli.git synced 2025-12-20 03:26:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update index.html

Browse Source
This commit is contained in:
sHa
2025-03-09 22:39:01 +02:00
committed by GitHub
parent 00860a8e25
commit a7a63d87f4
1 changed files with 33 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
index.html
View File

@@ -7,6 +7,24 @@
<style> <style>
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: Arial, sans-serif; } html, body { height: 100%; font-family: Arial, sans-serif; }
.header {
background: rgba(0, 0, 0, 0.7);
color: white;
text-align: center;
padding: 15px;
font-size: 24px;
font-weight: bold;
position: relative;
overflow: hidden;
}
.header span {
display: inline-block;
animation: magnify 3s ease-in-out infinite alternate;
}
@keyframes magnify {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.5); }
}
.slider { .slider {
display: grid; display: grid;
grid-template-rows: 1fr auto; grid-template-rows: 1fr auto;
@@ -42,6 +60,9 @@
</style> </style>
</head> </head>
<body> <body>
<div class="header">
<span>m</span><span>e</span><span>b</span><span>.</span><span>l</span><span>i</span>
</div>
<div class="slider"> <div class="slider">
<div class="slides"> <div class="slides">
<div class="slide active" style="background-image: url('wall1.jpg');"></div> <div class="slide active" style="background-image: url('wall1.jpg');"></div>
@@ -54,13 +75,25 @@
<script> <script>
let index = 0; let index = 0;
const slides = document.querySelectorAll('.slide'); const slides = document.querySelectorAll('.slide');
const letters = document.querySelectorAll('.header span');
function nextSlide() { function nextSlide() {
slides[index].classList.remove('active'); slides[index].classList.remove('active');
index = (index + 1) % slides.length; index = (index + 1) % slides.length;
slides[index].classList.add('active'); slides[index].classList.add('active');
} }
function animateText() {
letters.forEach((letter, i) => {
letter.style.animation = 'none';
setTimeout(() => {
letter.style.animation = `magnify 3s ease-in-out ${i * 200}ms infinite alternate`;
}, 10);
});
}
setInterval(nextSlide, 3000); setInterval(nextSlide, 3000);
animateText();
</script> </script>
</body> </body>
</html> </html>