Bonjour j'ai un soucis sur mon code j'essaye de créer une div mais elle n'apparait pas et étant débutant je ne vois pas d'ou vient l'erreur merci pour votre aide
screenshot de ce que ça donne : https://image.noelshack.com/fichiers/2020/08/5/1582300002-brave-esetx8dudx.png
Merci beaucoup pour votre aide
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My company </title>
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header class="header_all">
<nav>
<ul>
<li><a href="Contact.html">Contact</a> </li>
<li><a href="Store.html"> Store</a> </li>
<li><a href="Homepage.html">Home</a> </li>
<li style="float:left"><a href="#about">Location de voiture</a></li>
</ul>
<slider>
<slide><p>Slide 1</p></slide>
<slide><p>Slide 2</p></slide>
<slide><p>Slide 3</p></slide>
<slide><p>Slide 4</p></slide>
</slider>
<div class="presentation">
<P> test </P>
</div>
</ul>
</header>
</body>
</html>
body{
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
padding: 0;
margin: 0px;
}
.header_all ul{
text-align: center;
color: white;
}
.header_all li{
display: inline;
padding: 0 5%;
}
.header_all a :hover{
background-color: rgba(255,255,255, 0,6)
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgb(0, 0, 0);
}
li {
float: right;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 24px 8px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: rgb(151, 137, 8);
}
slider {
display: block;
width: 80%;
height: 80%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute;
}
slider > * {
position: absolute;
display: block;
width: 100%;
height: 100%;
background: #1f1f1f;
animation: slide 12s infinite;
overflow: hidden;
}
slide:nth-child(1){
left: 0%;
animation-delay: -1s;
background-image: url(image/Bannière\ voiture\ Mercedes\ M4.jpg);
background-size: cover;
max-width: 150%;
height: 250;
background-position: center;
}
slide:nth-child(2){
animation-delay: 2s;
background-image: url(2017_mercedes-benz_glc-coupe_mercedes-amg_glc43-coupeGLC-Coupe_8501.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(3){
animation-delay: 5s;
background-image: url(3.jpg);
background-size: cover;
background-position: center;
}
slide:nth-child(4){
left: 0%;
animation-delay: 8s;
background-image: url(4.jpg);
background-size: cover;
background-position: center;
}
slide p {
font-family: Comfortaa;
font-size: 70px;
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: #fff;
}
@keyframes slide {
0% { left: 100%; width: 100%; }
5% { left: 0%; }
25% { left: 0%; }
30% { left: -100%; width: 100%; }
30.0001% { left: -100%; width: 0%; }
100% { left: 100%; width: 0%; }
}
.presentation {
background-color: black;
width:500px;
height:80px;
}
screenshot de ce que ça donne : https://image.noelshack.com/fichiers/2020/08/5/1582300002-brave-esetx8dudx.png
Merci beaucoup pour votre aide