Skip to content

Commit

Permalink
Update NavBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@feove
feove committed Jun 28, 2024
1 parent 87093fa commit 73e63b2
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 62 deletions.
20 changes: 10 additions & 10 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@

</style>
<body>
<div class="black-background">
<section>
<div class="parallax">
<div class="background-layer" data-speed="5"></div>
<img src="media/Forestpt1.png" class="layer" id="plain" data-speed="0">
<img src="media/Forestpt2.png" class="layer" id="sky" data-speed="2">
<a href="index/download.html"><img src="media/logo_v0.png" class="logo-rotate" id="logo" alt="Logo"></a>
</div>
</section>
</div>
<header>
<div class="logo-container">
<a href="index/download.html"><img src="media/iboren.png" id="ibo" alt="iboren"></a>
Expand All @@ -30,16 +40,6 @@
</ul>
</nav>
</header>
<div class="black-background">
<section>
<div class="parallax">
<div class="background-layer" data-speed="5"></div>
<img src="media/Forestpt1.png" class="layer" id="plain" data-speed="0">
<img src="media/Forestpt2.png" class="layer" id="sky" data-speed="2">
<a href="index/download.html"><img src="media/logo_v0.png" class="logo-rotate" id="logo" alt="Logo"></a>
</div>
</section>
</div>
<div class="sec">
<div class="translucent-background">
<div class="wrapper">
Expand Down
26 changes: 9 additions & 17 deletions index/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,34 @@

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
height: 800vh;

margin: 0;
padding: 0;
overflow-x: hidden;

backdrop-filter: blur(0px);
}

</style>
</head>
<body>


<div class="parallax">

<img src="../media/mount.png" class="layer" id="sky" alt="sky">
<img src="../media/herb.png" class="layer" id="plain" alt="herbe">

</div>

</div>


<header>
<div class="logo-container">
<img src="../media/iboren.png" id="ibo" alt="iboren">
</div>
<nav>
<ul>
<li><a href="../index.html" style="text-decoration-line: none;" class="a-nav" >Accueil</a></li>
<li><a href="download.html" style="text-decoration-line: none;" class="a-nav" >Téléchargement</a></li>
<li><a href="about.html" style="text-decoration-line: none;" class="a-nav active">A propos</a></li>
<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>
</ul>
</nav>
</header>







<div class="sec">
Expand Down
133 changes: 107 additions & 26 deletions style/navbar.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
margin: 0;
font-family: 'Roboto', sans-serif;
}

header {
text-decoration: none;
Expand All @@ -9,58 +13,85 @@ header {
left: 0;
width: 100%;
display: flex;
padding: 1% 2%;
padding: 0.5% 2%;
justify-content: space-between;
align-items: center;
z-index: 13;
background-color: rgba(131, 131, 131, 0.454);
font-family: 'Roboto', sans-serif;
font-weight: 300;
color: #000;
border-radius: 15px;
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 ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 0;
}

header nav ul li {
margin-left: 10px;
margin-left: 1vw;
}

header nav ul li a {
padding: 12px 24px;
color: #fff;
border-radius: 15px;
padding: 0.8em 1.5em;
color: #000;
border-radius: 15px;
font-size: 1.1em;
font-weight: 700;
font-weight: 700;
text-transform: uppercase;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
background: white;
transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
z-index: 1;
}

header nav ul li a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 300%;
background: rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
z-index: -1;
}

header nav ul li a:hover::before {
transform: translate(-50%, -50%) scale(1);
}

header nav ul li a:hover {
background-color: rgb(255, 255, 255);
color: #000;
color: #fff;
transform: scale(1.05);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.1);
}

header nav ul li a.active {
background-color: rgb(255, 255, 255);
color: #000;
background: linear-gradient(45deg, #34e89e, #0f3443);
color: #fff;
}


header nav ul li a:not(:hover) {
background-color: rgba(71, 173, 100, 0.813);
header nav ul li a:not(:hover):not(.active) {
background: white;
}

.logo-container {
background-color: white;
padding: 8px 15px;
padding: 0.5em 1em;
border-radius: 10px;
width: 17%;
width: 15%;
min-width: 120px;
max-width: 200px;
}

#ibo {
Expand Down Expand Up @@ -90,12 +121,62 @@ header nav ul li a:not(:hover) {

.a-nav {
margin: 0;
background: var(--primary);
color: var(--text);
display: inline-block;
border-radius: 15px;
padding: 12px 24px;
box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
border-radius: 15px;
padding: 12px 24px;
text-decoration: none;
transition: background 0.3s;
}

/* Media Queries */
@media (max-width: 1200px) {
header {
padding: 1% 3%;
}
header nav ul li a {
padding: 0.7em 1.2em;
font-size: 1em;
}
}

@media (max-width: 992px) {
.logo-container {
width: 20%;
}
header nav ul li a {
padding: 0.6em 1em;
font-size: 0.9em;
}
}

@media (max-width: 768px) {
.logo-container {
width: 25%;
}
header nav ul li {
margin-left: 0.5em;
}
header nav ul li a {
padding: 0.5em 0.8em;
font-size: 0.8em;
}
}

@media (max-width: 576px) {
.logo-container {
width: 30%;
}
header nav ul {
flex-direction: column;
align-items: flex-start;
}
header nav ul li {
margin-left: 0;
margin-bottom: 0.5em;
}
header nav ul li a {
padding: 0.4em 0.6em;
font-size: 0.7em;
}
}
24 changes: 15 additions & 9 deletions style/style-about.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,23 @@
list-style: none;
box-sizing: border-box;
/* font-family: Oswald, sans-serif; */
text-decoration: none;
list-style: none;

}

body {
height: 800vh;
margin: 0;

overflow-x: hidden;
text-decoration: none;
list-style: none;
}

p{
font-family: 'Bogart', sans-serif;

}

.progress-image {
Expand Down Expand Up @@ -144,6 +156,7 @@ p{
position:absolute;
width:100%;
margin-top:-10px;

}

#progress-bar-container li:before {
Expand Down Expand Up @@ -448,7 +461,6 @@ p{
--primary: #acaebb;
--dark-primary: #303F9F;
--light-primary: #C5CAE9;
--text: #FFFFFF;
--primary-text: #212121;
--secondary-text: #757575;
--timeline-circle-gradient: linear-gradient(135deg, #6DD5FA, #FFFFFF);
Expand Down Expand Up @@ -699,7 +711,7 @@ h1 {
.a-style {
margin: 0;
background: var(--primary);
color: var(--text);
color: #FFFFFF;
display: inline-block;
border-radius: 5px;
padding: 10px 20px;
Expand Down Expand Up @@ -729,7 +741,7 @@ h1 {
}

.timeline-img-header h2 {
color: var(--text);
color: #FFFFFF;
position: absolute;
bottom: 5px;
left: 20px;
Expand Down Expand Up @@ -974,12 +986,6 @@ blockquote {


/* ----------------------------------------------------------------------------- */
.repertory {
font-size: 2.5rem;
text-align: center;

animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
0% {
Expand Down

0 comments on commit 73e63b2

Please sign in to comment.