Voila mon code, c'est juste une topbar,
Merci à toi pour ton aide
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="shortcut icon" href="img/logo1.png" type="image/png">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Delius+Unicase:wght@700&display=swap" rel="stylesheet"> <title>Réseau Social</title>
</head>
<body>
<header class="topbar">
<div class="topbar-left">
<a class="topbar-logo" href="#"><img src="/img/logo1.png" width="50" alt="Logo du site"></a>
<a class="topbar-marque" href="#">BlaBla Social</a>
</div>
<div class="topbar-centre">
<input type="text" name="search" id="" placeholder="rechercher ici">
<button type="submit">OK</button>
</div>
<nav class="topbar-right">
<a href="#" class="active">Accueil</a>
<a href="#">Historique</a>
<a href="#">Évènements</a>
<a href="#">Contact</a>
</nav>
</header>
<footer>
<div class="conteneur-flex">
<div class="element-flex">1</div>
<div class="element-flex">2</div>
<div class="element-flex">3</div>
</div>
</footer>
</body>
</html>
SCSS :
.topbar {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background-image: linear-gradient(45deg, rgba(252, 175, 9, .9)55%, rgba(252, 175, 9, 0.4), rgba(252, 175, 9, .6));
box-shadow: -1px 4px 13px 1px rgba(0, 0, 0, 0.2);
}
.topbar-left {
display: flex;
flex-flow: row wrap;
// justify-content: space-between;
align-items: center;
.topbar-logo {
margin-left: 50px;
margin-top: 2px;
}
.topbar-marque {
font-family: 'Delius Unicase', cursive;
text-decoration: none;
font-size: 18px;
letter-spacing: 2px;
color: $main-color-orange-hover;
}
}
.topbar-centre {
input {
font-family: inherit;
padding: 3px;
width: 300px;
font-size: 17px;
text-align: center;
border: 2px ridge #cccccc;
border-radius: 10px;
box-shadow: inset 0px 0px 2px 0px rgba(42, 42, 42, .75);
}
&:focus {
outline: none;
}
button {
box-shadow: inset 0px 0px 2px 0px rgba(42, 42, 42, .75);
background: linear-gradient(to bottom, #ffffff 5%, #fcfcfc 100%);
background-color: #ffffff;
border-radius: 10px;
border: 2px ridge #cccccc;
display: inline-block;
cursor: pointer;
color: $main-color-orange-darken;
font-size: 15px;
font-weight: 600;
padding: 4px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
font-family: inherit;
transform: translateY(-1px);
&:hover {
background: linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color: #e9e9e9;
color: $main-color-orange-hover;
}
&:active {
position: relative;
top: 1px;
}
}
}
.topbar-right {
margin-right: 30px;
color: $main-color-orange-darken;
a {
padding: 18px 15px;
text-decoration: none;
color: inherit;
font-size: 17px;
&:hover {
color: $main-color-orange-hover;
background-color: $main-color-orange-lighten;
border-radius: 2px;
}
}
}
MEDIA QUERRY :
@media screen and (max-width: 1102px) {
.topbar {
display: block !important;
text-align: center;
}
.topbar-left {
.topbar-logo {
width: 100%;
margin: 0 auto;
}
.topbar-marque {
width: 100%;
margin: 0 auto;
transform: translateX(22px);
padding-bottom: 10px;
}
}
.topbar-centre {
padding: 5px 0 5px 0;
input {
margin: 0 auto !important;
width: 50 !important;
}
button {
display: none !important;
}
}
.topbar-right {
margin: 0 auto;
width: 100%;
padding: 10px 0 15px 0;
a {
padding: 15px 10px !important;
border-radius: 2px !important;
}
}
}