Donc voila je fais un petit site pour m'entrainer un peu, j ai fait deux code dystinct, un code separer pour le header, et un autre pour le footer. Les deux codes marche separement masi quand je l ai fusionne le header est mal afficher, pourtant les class ne sont pas les meme.
je vous met les deux code dystinct :
Header
html:
<header>
<nav>
<div class="logo">
<a href="/home/index.html">Rachel Creations</a>
</div>
<div id="menu-toggle" class="menu-icon">☰</div>
<ul class="nav-links">
<li><a href="/home/index.html">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Panier</a></li>
</ul>
</nav>
</header>
(je ne vous ai pas mis le script pour ouvrir le menu)
header {
background-color: var(--main-color);
padding: 20px;
position: relative;
z-index: 1;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo a {
font-size: 24px;
font-weight: bold;
color: var(--text-color);
text-decoration: none;
}
.menu-icon {
font-size: 24px;
color: var(--text-color);
cursor: pointer;
display: none;
z-index: 9999;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--overlay-color);
backdrop-filter: blur(5px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 999;
}
.menu-active .menu-overlay {
opacity: 1;
pointer-events: auto;
}
.menu-active .nav-links {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
.menu-active .nav-links li {
margin: 15px 0;
}
.menu-active .nav-links a {
color: var(--text-color);
}
menu-close {
font-size: 24px;
color: var(--text-color);
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
ET VOICI MON CODE Footer (ce n'est pas moi qui l ai fait) :
```<footer>
<div class="container">
<div class="row justify-content-center">
<div class="col-sm-4 col-md-3 item">
<h3>Navigation</h3>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Panier</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-3 item">
<h3>Contact</h3>
<ul>
<li><a href="#">06 00 00 00 00</a></li>
<li><a href="#">xxxxx@gmail.com</a></li>
<li><a href="#">Page Contact</a></li>
</ul>
</div>
<div class="col-sm-4 col-md-3 item">
<h3>Nos Politiques</h3>
<ul>
<li><a href="#">Politiques de confidentialité</a></li>
<li><a href="#">Politique de livraison</a></li>
<li><a href="#">Politique de retour</a></li>
</ul>
</div>
<div class="col-lg-3 item social">
<a href="#"><i class="icon ion-social-facebook"></i></a>
<a href="#"><i class="icon ion-social-pinterest"></i></a>
<a href="#"><i class="icon ion-social-twitter"></i></a>
<a href="#"><i class="icon ion-social-instagram"></i></a>
<p class="copyright">Rachel Créations © 2023</p>
</div>
</div>
</div>
</footer>``
.footer-clean {
padding:50px 0;
background-color: var(--main-color);
color:#4b4c4d;
}
.footer-clean h3 {
margin-top:0;
margin-bottom:12px;
font-weight:bold;
font-size:16px;
}
.footer-clean ul {
padding:0;
list-style:none;
line-height:1.6;
font-size:14px;
margin-bottom:0;
}
.footer-clean ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-clean ul a:hover {
opacity:1;
}
.footer-clean .item.social {
text-align:right;
}
@media (max-width:767px) {
.footer-clean .item {
text-align:center;
padding-bottom:20px;
}
}
@media (max-width: 768px) {
.footer-clean .item.social {
text-align:center;
}
}
.footer-clean .item.social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
border-radius:50%;
border:1px solid #ccc;
margin-left:10px;
margin-top:22px;
color:inherit;
opacity:0.75;
}
.footer-clean .item.social > a:hover {
opacity:0.9;
}
@media (max-width:991px) {
.footer-clean .item.social > a {
margin-top:40px;
}
}
@media (max-width:767px) {
.footer-clean .item.social > a {
margin-top:10px;
}
}
.footer-clean .copyright {
margin-top:14px;
margin-bottom:0;
font-size:13px;
opacity:0.6;
}
Donc voila j ai essaye de siplifier au maximun , j'aimerai donc fusionner les deux code pour que cela marche mais quand je l ai fusionne mon header s affiche mal en gros la class nav links se met en dessous de la class logo au lieu d etre sur la meme ligne et en justify content normalement
Merci de m'aidé ;)
Ne faite pas de remarque sur le grand nombre de fautes d'orthographe svp