28172 sujets

CSS et mise en forme, CSS3

.navbar {
transition: all 0.4s;
}
color: #fff;
.navbar .nav-link {
color: #fff;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
color: #fff;
text-decoration: none;
}
.navbar .navbar-brand {
color: #fff;
}
.navbar.active {
background: #fff;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar.active .nav-link {
color: #555;
}
.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
color: #555;
text-decoration: none;
}
.navbar.active .navbar-brand {
color: #555;
}
@media (max-width: 991.98px) {
.navbar {
background: #fff;
}
.navbar .navbar-brand, .navbar .nav-link {
color: #555;
}
}
body {
min-height: 110vh;
background-color: #4ca1af;
background-image: linear-gradient(135deg, #4ca1af 0%, #c4e0e5 100%);
}
<!-- À des fins de démonstration -->
<div class="container">
<div class="pt-5 text-white">
<header class="py-5 mt-5">
<h1 class="display-4"><br/>00000000000</h1>
<p class="lead mb-1"><p class="lead"><strong class="font-weight-bold"><h6>0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000.</strong></h6></p>


<div class="py-5">

<p class="lead">Lorem ipsum dolor sit amet, <strong class="font-weight-bold">consectetur adipisicing </strong>elit. Explicabo consectetur odio voluptatum facere animi temporibus, distinctio tempore enim corporis quam <strong class="font-weight-bold">recusandae </strong>placeat! Voluptatum voluptate, ex modi illum quas nam distinctio.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br/>
<p class="lead">Lorem ipsum dolor sit amet, <strong class="font-weight-bold">consectetur adipisicing </strong>elit. Explicabo consectetur odio voluptatum facere animi temporibus, distinctio tempore enim corporis quam <strong class="font-weight-bold">recusandae </strong>placeat! Voluptatum voluptate, ex modi illum quas nam distinctio.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br/>
<p class="lead">Lorem ipsum dolor sit amet, <strong class="font-weight-bold">consectetur adipisicing </strong>elit. Explicabo consectetur odio voluptatum facere animi temporibus, distinctio tempore enim corporis quam <strong class="font-weight-bold">recusandae </strong>placeat! Voluptatum voluptate, ex modi illum quas nam distinctio.</p>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>
</div>
<div class="col-lg-4 col-md-6 mb-lg-0">
<h6 class="text-uppercase font-weight-bold mb-4">Newsletter</h6>
<p class="text-muted mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At itaque temporibus.</p>
<div class="p-1 rounded border">
<div class="input-group">
<input type="email" placeholder="Enter your email address" aria-describedby="button-addon1" class="form-control border-0 shadow-0">
<div class="input-group-append">
<button id="button-addon1" type="submit" class="btn btn-link"><i class="fa fa-paper-plane"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Copyrights -->

<div class="bg-light py-4">
<div class="container text-center">
<p class="text-muted mb-0 py-2">© Copyright 2021 – LANCELOT DU LAC.</p>
</div>
</div>



</footer>
Modérateur
Bonsoir reverde ,
peut tu éditer ton sujet et utiliser les balises [ code][ /code] afin de rendre ton code plus sexy et lisible. Smiley cligne
Tu les trouveras sous la zone d’édition.

Cdt

p.s. en passant ton code dans un éditeur pour l'indenter, on perçoit quelques erreurs d'imbrication ou de balises manquantes : https://jsfiddle.net/brsy2xd5/