Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

base Navbar CSS and HTML

Browse source
This commit is contained in:
Yohan Boujon 2023-06-19 19:32:54 +02:00
parent 55413d8a54
commit d072c19c8f
3 changed files with 77 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/navbar.html
View file

@ -1,9 +1,23 @@
<nav id="navbar_component"> <nav id="navbar_component">
<div id="navbar_text-container">
<ul>
<li>
<a href="#0">Votre Avocat</a>
</li>
<li>
<a href="#0">Droits Appliqués</a>
<div class="navbar_dropdown">
<a href="#0">Droit Pénal</a>
<a href="#0">Droit des Affaires</a>
</div>
</li>
<li>
<a href="#0">Contact</a>
</li>
</ul>
</div>
<div id="navbar_logo-container"> <div id="navbar_logo-container">
<img class="navbar_logo" src="../assets/Logo.png"><img> <img class="navbar_logo" src="../assets/Logo.png"><img>
</div> </div>
<div id="navbar_text-container">
<p><bold>Saoul Bon Monsieur</bold></p>
</div>
</nav> </nav>
<div id="navbar_padding"></div> <div id="navbar_padding"></div>

2
css/index.css
View file

@ -56,7 +56,6 @@ p {
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
height: 10rem; height: 10rem;
top: 40%; top: 40%;
z-index: 0;
position: absolute; position: absolute;
} }
@ -74,7 +73,6 @@ p {
color: black; color: black;
width: 100%; width: 100%;
margin: 2rem 2rem; margin: 2rem 2rem;
z-index: 1;
} }
.description-img { .description-img {

64
css/navbar.css
View file

@ -1,3 +1,7 @@
#navbar_padding {
padding: 2.5rem;
}
#navbar_component { #navbar_component {
align-items: center; align-items: center;
display: flex; display: flex;
@ -7,13 +11,16 @@
top: 0; top: 0;
width: 100%; width: 100%;
background-color: #f5a122; background-color: #f5a122;
z-index:2; z-index: 3;
overflow: initial;
} }
#navbar_logo-container { #navbar_logo-container {
height: 5rem; height: 5rem;
width: 5rem; width: 5rem;
display: flex; display: flex;
position: fixed;
right: 5rem;
} }
.navbar_logo { .navbar_logo {
@ -23,9 +30,58 @@
#navbar_text-container { #navbar_text-container {
font-family: 'Josefin Sans', sans-serif; font-family: 'Josefin Sans', sans-serif;
position: fixed; position: fixed;
right: 5rem;
} }
#navbar_padding{ #navbar_text-container li {
padding: 2.5rem; border-radius: 4px;
display: inline-block;
padding: 1rem 0;
transition: all .3s ease 0s;
}
#navbar_text-container a,
button {
border-radius: .25rem;
color: black;
font-weight: 800;
padding: 1rem 1rem;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
transition: all .3s ease 0s;
}
#navbar_text-container a:hover {
transform: translateY(-2px);
background-color: rgba(255, 255, 255, 0.75);
color: #9e6b1f;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.navbar_dropdown {
align-items: center;
background-color: rgba(255, 255, 255, 0.75);
top: 5rem;
backdrop-filter: blur(16px);
border-radius: .25rem;
box-shadow: 0 8px 16px rgba(136, 93, 12, 0.15);
flex-direction: column;
float: none;
justify-content: center;
position: absolute;
width: auto;
overflow: initial;
display: none;
z-index: 10;
}
.navbar_dropdown a {
border-radius: 0 !important;
width: 100%;
}
.navbar_dropdown a:hover {
transform: translateX(5px) !important;
background-color: #f5a122 !important;
color: white !important;
} }