greg/website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

maj diverses

Browse Source
This commit is contained in:
Grégory Lebreton 2025-05-14 16:24:53 +02:00
parent d21dbb6d82
commit cd0dafee69
3 changed files with 80 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel="stylesheet" href="./static/css/style.css">
<script src="./static/js/script.js"></script>
@ -64,20 +65,6 @@
</div>
</section>
<br>
<!-- BOUTON DARK MODE -->
<div class="switch">
<input type="checkbox" id="switch" /><br>
<label for="switch">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
<span class="ball"></span>
</label>
</div>
<br>
<div class="content">
<h1>LES DEVELOPPEURS</h1>
<p>Voici la team</p>
@ -175,21 +162,61 @@
</div>
<br><hr><br>
<div class="has-text-centered">
<h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
</div>
<div class="has-text-centered">
<h3>CAROUSSEL</h3>
</div>
<!-- CAROUSSEL -->
<div class="carousel">
<div class="carousel-track" id="carouselTrack">
<div class="carousel-track">
<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>
<div class="has-text-centered">
<h3>TRICKY BOUTON</h3>
</div>
<!-- BOUTON -->
<div class="has-text-centered">
<div class="button-area">
<button id="trickyButton">Click me!</button>
</div>
</div>
<br>
<div class="has-text-centered">
<h3>COMPTEUR</h3>
</div>
<!-- COMPTEUR -->
<div class="content has-text-centered">
<button id="incrementer">Incrémenter</button>
<p>Compteur : <span id="compteur">0</span></p>
</div>
<div class="has-text-centered">
<h3>DARK MODE</h3>
</div>
<!-- BOUTON DARK MODE -->
<div class="switch">
<input type="checkbox" id="switch" /><br>
<label for="switch">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
<span class="ball"></span>
</label>
</div>
<!-- FOOTER -->
<footer class="footer">
<div class="content has-text-centered">
@ -203,4 +230,4 @@
</footer>
</body>
</html>
</html>

38
static/css/style.css
View File

@ -14,6 +14,10 @@
text-align: center;
}
h3 h1 {
color: var(--primary-text-color) !important;
}
/* DARK MODE */
:root {
--bg-color: #fff;
@ -66,23 +70,33 @@ body {
object-fit: cover;
}
/* BOUTON */
/* TRICKY BOUTON */
.button-area {
width: 100%;
height: 300px;
position: relative;
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;
}
#trickyButton {
position: absolute;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
left: 50px;
top: 50px;
}
#incrementer {
padding: 10px 20px;
background-color: #3f57c0 !important;
color: white !important;
border: none !important;
cursor: pointer !important;
left: 50px !important;
top: 120px !important;
}

12
static/js/script.js
View File

@ -38,4 +38,14 @@ document.addEventListener("DOMContentLoaded", function () {
button.style.left = `${randomX}px`;
button.style.top = `${randomY}px`;
});
});
});
// COMPTEUR
document.addEventListener("DOMContentLoaded", function () {
let compteur = 0;
document.getElementById("incrementer").addEventListener("click", () => {
compteur++;
document.getElementById("compteur").textContent = compteur;
});
});