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

57
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <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="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel="stylesheet" href="./static/css/style.css"> <link rel="stylesheet" href="./static/css/style.css">
<script src="./static/js/script.js"></script> <script src="./static/js/script.js"></script>
@ -64,20 +65,6 @@
</div> </div>
</section> </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"> <div class="content">
<h1>LES DEVELOPPEURS</h1> <h1>LES DEVELOPPEURS</h1>
<p>Voici la team</p> <p>Voici la team</p>
@ -175,21 +162,61 @@
</div> </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 --> <!-- CAROUSSEL -->
<div class="carousel"> <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/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/2.jpg" alt="2"></div>
<div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div> <div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div>
</div> </div>
</div><br> </div><br>
<div class="has-text-centered">
<h3>TRICKY BOUTON</h3>
</div>
<!-- BOUTON --> <!-- BOUTON -->
<div class="has-text-centered">
<div class="button-area"> <div class="button-area">
<button id="trickyButton">Click me!</button> <button id="trickyButton">Click me!</button>
</div> </div>
</div>
<br> <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 -->
<footer class="footer"> <footer class="footer">
<div class="content has-text-centered"> <div class="content has-text-centered">

38
static/css/style.css
View File

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

10
static/js/script.js
View File

@ -39,3 +39,13 @@ document.addEventListener("DOMContentLoaded", function () {
button.style.top = `${randomY}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;
});
});