Skip to content

Commit

Permalink
Better NavBar
Browse files Browse the repository at this point in the history
  • Loading branch information
feove committed Jun 29, 2024
1 parent 73e63b2 commit a147cd7
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 23 deletions.
20 changes: 17 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iboren Website</title>
<title>Accueil</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Expand All @@ -29,15 +29,19 @@
</section>
</div>
<header>
<div class="logo-container">
<a href="index/download.html"><img src="media/iboren.png" id="ibo" alt="iboren"></a>
<div class="logo-bg">
<div class="logo-container">
<a href="index/download.html"><img src="media/iboren.png" id="ibo" alt="iboren"></a>
</div>
</div>
<nav>

<ul>
<li><a href="index.html" class ="active a-nav">Accueil</a></li>
<li><a href="index/download.html" class="a-nav">Téléchargement</a></li>
<li><a href="index/about.html" class="a-nav">A propos</a></li>
</ul>

</nav>
</header>
<div class="sec">
Expand Down Expand Up @@ -142,6 +146,16 @@ <h2>Qu'est ce que TreasHunt ?</h2>
</div>


<script>
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) {
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
});
</script>

<script>
window.addEventListener('scroll', function() {
Expand Down
21 changes: 17 additions & 4 deletions index/about.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
<link rel="stylesheet" type="text/css" href="../style/style-about.css">
<link rel="stylesheet" type="text/css" href="../style/navbar.css">
<title>Page de présentation de jeu</title>
<title>A propos</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
Expand All @@ -24,11 +24,13 @@
</div>

<header>
<div class="logo-container">
<img src="../media/iboren.png" id="ibo" alt="iboren">
<div class="logo-bg">
<div class="logo-container">
<a href="index/download.html"><img src="../media/iboren.png" id="ibo" alt="iboren"></a>
</div>
</div>
<nav>
<ul>
<ul style="padding-left: 0%; padding-top: 1%;">
<li><a href="../index.html" class ="a-nav">Accueil</a></li>
<li><a href="download.html" class="a-nav" >Téléchargement</a></li>
<li><a href="about.html" class="active a-nav">A propos</a></li>
Expand Down Expand Up @@ -217,6 +219,17 @@ <h2>Remastérisation</h2>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script>
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) {
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
});
</script>
<script>
$(".step").click(function() {
$(this).addClass("active").prevAll().addClass("active");
Expand Down
30 changes: 23 additions & 7 deletions index/download.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,29 @@
<link rel="stylesheet" type="text/css" href="../style/style-download.css">
<link rel="stylesheet" type="text/css" href="../style/navbar.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Page de présentation de jeu</title>
<title>Téléchargement</title>

</head>
<body>

<header>
<div class="logo-container">
<img src="../media/iboren.png" id="ibo" alt="iboren">
<div class="logo-bg">
<div class="logo-container">
<a href="index/download.html"><img src="../media/iboren.png" id="ibo" alt="iboren"></a>
</div>
</div>
<nav>
<ul>
<ul style="padding-left: 0%; padding-top: 1%;">
<li><a href="../index.html" class="a-nav" style="text-decoration-line: none;" >Accueil</a></li>
<li><a href="download.html" class="active a-nav" style="text-decoration-line: none;" >Téléchargement</a></li>
<li><a href="about.html" class="a-nav" style="text-decoration-line: none;" >A propos</a></li>
</ul>
</nav>
</header>
<div class="download-bg">
<div class="download-bg" style="margin-top: -0.1%;">
<img src="../media/parallax-forest.jpg" alt="Forest">
<div class="overlay">
<div class="content">
<div class="content" id="GameDownlaod">
<h2>Téléchargement du jeu</h2>
<div class="button">
<a href=" https://drive.google.com/file/d/11xE-5bLz7bsUUbfPod5eBQ3cOJmAzqUR/view" download>
Expand Down Expand Up @@ -108,7 +110,16 @@ <h3>Rapport De Projet</h3>
</div>
</div>


<script>
window.addEventListener('scroll', function() {
const header = document.querySelector('header');
if (window.scrollY > 100) {
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
});
</script>
<script>

const revealText = document.querySelector('.download-button')
Expand All @@ -126,11 +137,16 @@ <h3>Rapport De Projet</h3>

let forest = document.getElementById('hole');
let bords = document.getElementById('plaines');
let gamedownload = document.getElementById('GameDownlaod');
let originalWidth = forest.offsetWidth;
let lastScrollY = 0;

window.addEventListener('scroll', function() {
let currentScrollY = window.scrollY;
if (gamedownload){

gamedownload.style.top *= 0.1;
}


});
Expand Down
65 changes: 58 additions & 7 deletions style/navbar.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ body {
font-family: 'Roboto', sans-serif;
}


header {
text-decoration: none;
list-style: none;
Expand All @@ -17,19 +18,37 @@ header {
justify-content: space-between;
align-items: center;
z-index: 99999999999999;
background-color: rgba(131, 131, 131, 0.454);

font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #000000;
border-radius: 15px;
}
header nav {
background: linear-gradient(rgba(71, 71, 71, 0.588), rgba(134, 134, 134, 0.485));
padding: 0.9em 2em;
border-radius: 5vw;
margin-top: -1%;
transition: border-radius 0.5s ease, padding 1s ease, transform 0.5s ease, box-shadow 0.5s ease;
}

body.scrolled header nav {
border-radius: 1vw;
padding: 0.6em 1.5em;
transform: scale(0.96);
box-shadow: 0 0 20px 2px rgba(255, 255, 255, 0.7); /* Flash effect */
}





header nav ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
margin: 0 0;
}

header nav ul li {
Expand Down Expand Up @@ -86,19 +105,51 @@ header nav ul li a:not(:hover):not(.active) {
}

.logo-container {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
padding: 0.5em 1em;
padding: 0.4em 0.1em;
border-radius: 10px;
width: 15%;
min-width: 120px;
width: 50%;
min-width: 170px;
max-width: 200px;
box-shadow: 5px 6px 6px rgba(0, 0, 0, 0.6);
transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
border: 2px solid transparent;
}

body.scrolled .logo-container {
transform: scale(0.95);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
border: 3px solid rgba(0, 0, 0, 0.7);

}
.logo-bg {
background: linear-gradient(rgba(16, 16, 16, 0.716), rgba(134, 134, 134, 0.704));
padding: 0.8em 0.5em;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
opacity: 1;
transition: opacity 0.8s ease;
border-radius: 10px;
border: 2px solid rgba(0, 0, 0, 0.366);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

body.scrolled .logo-bg {
opacity: 0;
}


#ibo {
width: 100%;
height: auto;
border-radius: 10px;
margin-left: 10px;


}

::-webkit-scrollbar {
Expand Down Expand Up @@ -129,7 +180,7 @@ header nav ul li a:not(:hover):not(.active) {
transition: background 0.3s;
}

/* Media Queries */

@media (max-width: 1200px) {
header {
padding: 1% 3%;
Expand Down
2 changes: 2 additions & 0 deletions style/style-about.css
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ p{

}



.progress-image {
display: block;
margin: 0 auto;
Expand Down
4 changes: 2 additions & 2 deletions style/style-home.css
Original file line number Diff line number Diff line change
Expand Up @@ -147,8 +147,8 @@ section {
}

.text-box.reveal {
opacity: 1; /* Make visible */
transform: translateY(0); /* Reset position */
opacity: 1;
transform: translateY(0);
}

.background-Picture {
Expand Down

0 comments on commit a147cd7

Please sign in to comment.