Je souhaite remonter mes networks en haut et justifier mes pictos à gauche, je n'arrive pas à enlever l'espace gauche de cette liste, tout ce que je tente ne fonctionne pas... Voici une capture d'écran (de ce que je souhaite faire) en lien puis mon code en dessous !
https://ibb.co/HgDxVVs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="cybele.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
</head>
<body>
<div class="livraison">
Livraison gratuite pour commandes de plus de 100€
</div>
<div class="logopack">
<img src="Logo/Logo-cybèle.png" alt="Logo" class="logo">
<p>7 rue Beaubourg à Paris / Du lundi au samedi de 11 à 19h / +33 1 09 08 07 06
<div class="connexion">
<a href="#">S'inscrire / se connecter</a>
</div>
</div>
<header>
<div class="navgauche">
<a href="#">Accueil</a>
<a href="#">Œuvres</a>
<a href="#">Artistes</a>
<a href="#">Agenda</a>
<a href="#">Lieu</a>
<a href="#">Contact</a>
</div>
<div class="navdroite">
<a href="#">Carte cadeau</a>
<a href="#">Panier</a>
</div>
</header>
<main class="slide">
<div class="expo">
<img src="Logo/amelie-maison-art-02.png" alt="menu picture">
</div>
</main>
<main class="logis">
<div class="livraisons">
<i class="fa-solid fa-truck"></i> <br>
Livraisons garanties <br>
par des transporteurs spécialisés
</div>
<div class="paiement">
<i class="fa-solid fa-lock"></i> <br>
Paiement sécurisés <br>
par CB ou 3x sans frais
</div>
<div class="retours">
<i class="fa-solid fa-rotate-left"></i> <br>
Retours gratuits <br>
15 jours pour changer d’avis
</div>
</main>
<footer>
<section>
7 rue Beaubourg Paris (75003)<br>
+33 1 09 08 07 06<br>
bonjour@galeriecybèle.fr<br>
Du lundi au samedi de 11h à 19h<br><br>
Accès :<br>
Metro 11<br>
Arts et Métiers<br>
Rambuteau
</section>
<ul class="network">
Rejoignez-nous sur les réseaux<br>
<li><a href="#"><i class="fa-brands fa-tiktok"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
<div class="newsletter">
Abonnez-vous à la newsletter<br>
Soyez sûr de ne manquer aucune de nos nouveautés et promotions<br>
<label for="email"></label>
<input type="email" id="email"
pattern=".+@globex\.com" size="30" required> <br>
<input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
<label for="subscribeNews">J'accepte la politique de confidentialité de la galerie Cybèle</label>
</div>
</section>
</footer>
<p class="copyright">CD © 2023</p>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
.livraison {
background-color: blue;
color: white;
padding: 0.6rem;
font-size: 12px;
text-align: center;
font-family: 'Roboto', sans-serif;
}
.logo {
width: 11.5rem;
padding: 0.6rem;
}
header {
display: flex;
justify-content: space-between;
font-family: 'Roboto', sans-serif;
}
header nav li {
list-style-type: none;
font-family: 'Roboto', sans-serif;
}
a {
margin: 12px;
text-decoration: none;
color: blue;
}
.ul .small {
display: flex;
justify-content: space-between;
}
footer section .network {
font-family: 'Roboto', sans-serif;
}
footer li
{
list-style-type: none;
color: white;
background-color: #0000FF;
display : inline;
}
footer li a {
color: white;
}
footer
{
padding: 1.5em;
background-color: #0000FF;
padding-bottom: 97px;
color: white;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: space-evenly;
align-content: center;
}
p {
text-align: center;
color: white;
}
footer input {
border-style: none;
outline: none;
}
@media screen and (min-width: 768px) {
.expo {
display: flex;
justify-content: end;
}
header nav li {
display: inline;
}
p {
font-size: 11.5px;
font-family: 'Roboto', sans-serif;
color: grey;
}
.logopack {
display: flex;
align-items: flex-end;
justify-content: flex-start;
flex-direction: row;
color: #0000FF;
font-family: 'Roboto', sans-serif;
}
.logopack .connexion {
display: flex;
margin-left: auto
}
.logis {
color: #0000FF;
font-family: 'Roboto', sans-serif;
display: flex;
align-items: baseline;
justify-content: center;
}
.livraisons
{
text-align: center;
margin: 30px;
}
.paiement
{
text-align: center;
margin: 30px;
}
.retours
{
text-align: center;
margin: 30px;
}
i {
font-size: 21px;
margin-bottom: 19px;
}
.second {
font-size: 13px;
}
img {
display: flex;
}
}
