maj js

index.html

@@ -60,7 +60,7 @@
 <section class="hero is-primary">
     <div class="hero-body">
       <p class="title">My SuperWebsite</p>
-      <p class="subtitle">Made with love and Bulma!</p>
+      <p class="subtitle">Made with HTML code!</p>
     </div>
 </section>
 
@@ -175,6 +175,21 @@
                 
     </div>
 
+<!-- CAROUSSEL -->
+<div class="carousel">
+  <div class="carousel-track" id="carouselTrack">
+    <div class="carousel-slide"><img src="./static/img/1.jpg" alt="1"></div>
+    <div class="carousel-slide"><img src="./static/img/2.jpg" alt="2"></div>
+    <div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div>
+  </div>
+</div><br>
+
+<!-- BOUTON -->
+  <div class="button-area">
+    <button id="trickyButton">Click me!</button>
+  </div>
+  <br>
+
 <!-- FOOTER -->
     <footer class="footer">
       <div class="content has-text-centered">

static/css/style.css

@@ -36,4 +36,53 @@ body {
     --bg-color: #3e4c59;
     --primary-text-color: #fff;
     --secondary-text-color: #ddd;
-}
+}
+
+/* CAROUSSEL */
+.carousel {
+  width: 1280px;
+  overflow: hidden;
+  margin: auto;
+  position: relative;
+  border: 2px solid #ccc;
+  border-radius: 10px;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+  transform: translateX(0);
+}
+
+.carousel-slide {
+  min-width: 1280px;
+  height: 700px;
+  flex-shrink: 0;
+}
+
+.carousel-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* BOUTON */
+.button-area {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid #ccc;
+  }
+  
+  #trickyButton {
+    position: absolute;
+    padding: 10px 20px;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    cursor: pointer;
+    left: 50px;
+    top: 50px;
+  }
+  

static/js/script.js

@@ -6,3 +6,36 @@ document.addEventListener("DOMContentLoaded", function() {
   document.body.classList.toggle("dark-mode");
   });
 });
+
+// CAROUSSEL
+document.addEventListener("DOMContentLoaded", function () {
+  const track = document.querySelector('.carousel-track');
+  let index = 0;
+
+  function updateSlide() {
+    const slideWidth = document.querySelector('.carousel-slide').offsetWidth;
+    track.style.transform = `translateX(-${index * slideWidth}px)`;
+  }
+
+  setInterval(() => {
+    index = (index + 1) % document.querySelectorAll('.carousel-slide').length;
+    updateSlide();
+  }, 3000);
+});
+
+// BOUTON
+document.addEventListener("DOMContentLoaded", function () {
+  const container = document.querySelector('.button-area');
+  const button = document.getElementById('trickyButton');
+
+  button.addEventListener('mouseenter', () => {
+    const maxX = container.clientWidth - button.offsetWidth;
+    const maxY = container.clientHeight - button.offsetHeight;
+
+    const randomX = Math.floor(Math.random() * maxX);
+    const randomY = Math.floor(Math.random() * maxY);
+
+    button.style.left = `${randomX}px`;
+    button.style.top = `${randomY}px`;
+  });
+});