Skip to content

Mode Sombre + Flèche Haut #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PibouleauJB wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Mode Sombre + Flèche Haut #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 22 additions & 15 deletions StylesCommentaire.Css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ body {

.navigateur ul {
display: flex;
justify-content: left;
list-style: none;
padding: 0;
margin: 0;
Expand All @@ -57,13 +58,28 @@ body {
color: black;
font-weight: bold;
margin: 0 15px;
}
}

.navigateur a {
text-decoration: none;
color: black;
font-weight: bold;
}
.navigateur a {
text-decoration: none;
color: black;
font-weight: bold;
}

.navigateur button {
position: absolute;
left: 10px;
top: 3px;
width: 100px;
height: 30px;
background-color: #e169f4;
color: white;
border: red;
border-style:solid;
border-width: 2px;
border-color: #cf69e4;
cursor: pointer;
}

/* Contenu principal */
.contenuecommentaire {
Expand Down Expand Up @@ -150,15 +166,6 @@ form textarea {
background-color: deeppink;
}

footer {
text-align: center;
padding: 10px;
background-color: hotpink;
color: white;
margin-top: 20px;
font-size: 16px;
}


/*
@media (max-width: 768px) {
Expand Down
15 changes: 15 additions & 0 deletions StylesProfil.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,21 @@ body {
font-weight: bold;
}

.navigateur button {
position: absolute;
left: 10px;
top: 3px;
width: 100px;
height: 30px;
background-color: #e169f4;
color: white;
border: red;
border-style:solid;
border-width: 2px;
border-color: #cf69e4;
cursor: pointer;
}

.contenueProfil {
background-color: white;
margin: 20px auto;
Expand Down
5 changes: 3 additions & 2 deletions commentaire.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,17 @@
<body>
<nav class="navigateur">
<ul>
<button onclick="darkFunction()" id="Mode" title="Passer skibidiblog en sombre">Mode sombre</button>
<li class="btn"><a href="index.html"> Accueil </a></li>
<li class="btn"><a href="profil.html"> Profil </a></li>
<li class="btn"><a href="#"> Commentaire </a></li>
</ul>
</nav>


<!-- Bouton back to up permet de remonter en haut de la page -->
<button onclick="topFunction()" id="Haut" title="Retour en haut">⬆️</button>
<button id="Haut">⬆️</button>

<button onclick="darkFunction()" id="Mode sombre" title="Passer skibidiblog en sombre">Mode</button>

<header class="titreBlog">
<h1>SKIBIDIBLOG</h1>
Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<!-- endroit ou on pourrat naviger entre les différente page du site (remplacer les # par les lier)-->
<nav class="navigateur">
<ul>
<button onclick="darkFunction()" id="Mode" title="Passer skibidiblog en sombre">Mode sombre</button>
<li class="btn"><a href="#"> Acceuil </a></li>
<li class="btn"><a href="profil.html"> Profil </a></li>
<li class="btn"><a href="commentaire.html"> Commentaire </a></li>
Expand All @@ -22,9 +23,8 @@
<!-- bouton back to up permet de remonter en haut de la page -->


<button onclick="darkFunction()" id="Mode sombre" title="Passer skibidiblog en sombre">Mode sombre</button>
<button onclick="cRetour()" id="Haut" title="retour en haut">⬆️</button>

<button id="Haut">⬆️</button>


<!-- le header permet de créer une sorte d'en tête avec un titre-->
<header class="titreBlog">
Expand Down
24 changes: 19 additions & 5 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,22 @@ function darkFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
function cRetour() {
window.onscroll = function(ev) {
document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
};
}
// Sélection du bouton
const HautButton = document.getElementById("Haut");

// Ajouter un écouteur sur le défilement de la fenêtre
window.addEventListener("scroll", () => {
if (window.scrollY > 300) {
HautButton.style.display = "block";
} else {
HautButton.style.display = "none";
}
});

// Ajouter un écouteur sur le clic du bouton
HautButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
behavior: "smooth", // Défilement fluide
});
});
4 changes: 3 additions & 1 deletion profil.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@
<!-- Endroit où l'on pourra naviguer entre les différentes pages du site (remplacer les # par les liens) -->
<nav class="navigateur">
<ul>
<button onclick="darkFunction()" id="Mode" title="Passer skibidiblog en sombre">Mode sombre</button>
<li class="btn"><a href="index.html"> Accueil </a></li>
<li class="btn"><a href="#"> Profil </a></li>
<li class="btn"><a href="commentaire.html"> Commentaire </a></li>
</ul>
</nav>

<button onclick="darkFunction()" id="Mode sombre" title="Passer skibidiblog en sombre">Mode sombre</button>
<button id="Haut">⬆️</button>


<!-- le header permet de créer une sorte d'en tête avec un titre-->
<header class="titreBlog">
Expand Down
15 changes: 15 additions & 0 deletions stylesIndex.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,21 @@ body {
font-size: 16px;
}

.navigateur button {
position: absolute;
left: 10px;
top: 3px;
width: 100px;
height: 30px;
background-color: #e169f4;
color: white;
border: red;
border-style:solid;
border-width: 2px;
border-color: #cf69e4;
cursor: pointer;
}

.titreBlog {
text-align: center;
margin: 20px 0;
Expand Down