Probleme de fond

geronimo4tr
Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- lien police d'ecriture dancing script trouver sur google font font-family: 'Dancing Script', cursive; -->
    <link rel="preconnect" href="https://fonts.googleapis.com">                          
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>         
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">     

    <!--font-family: 'Montserrat', sans-serif;-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap" rel="stylesheet">

<!--font-family: 'Cabin', sans-serif;-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@1,500&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/style.css">  
    <title>Relooking</title>
    <style type="text/css"> 

</style>           

    <body >

        <!--Bandeau-->
    <nav>
       <ul>
        <div class="header">
            <div class="logo"><img class="logoImage"  src="img/logo.jpg" alt="French Relooking" /> </div>
            <div class="parent">
            <li class="menu"><a class="boutonlien" href="RelookFrance.html">Accueil </a>
            <li class="menu"><a class="boutonlien">Relooking Personnelle</a>
                <ul class="sous" >
                    <li><a href="html/relookinghomme.html">Relooking Homme</a></li>
                    <li><a href="html/relookingfemme.html">Relooking Femme</a></li>
                    <li><a href="html/relookingenfant.html">Relooking Enfant</a></li>
        </ul>
        </li>
        <li class="menu"><a class="boutonlien">Relooking Professionnel</a>
            <ul class="sous" >
                <li><a href="index.html">Relooking Homme</a></li>
                <li><a href="index.html">Relooking Femme</a></li>
               </ul>
        </li>
        <li class="menu"><a class="boutonlien">Formation</a>
            <ul class="sous" >
                <li><a href="html/formationintensive.html">Formation Intensive</a></li>
                <li><a href="html/formationadistance.html">Formation à Distance</a></li>
               </ul>
        </li>
        <li class="menu"><a class="boutonlien" href="html/boutique.html">Boutique</a>
        </li>
        <li class="menu"><a class="boutonlien">Aide</a>
            <ul class="sous" >
                <li><a href="html/contact.html">Nous Contacter</a></li>
                <li><a href="html/coachs.html">Nos Coachs</a></li>
               </ul>
               <li class="menu"><a class="boutonlien" href="html/forum;html">Forum</a>
                </li>
            </div>
        </nav>
    </div>
    <!--Fin Bandeau-->

    <div class="slidecontainer">
        <script src="java/app.js"></script>
        <div class="slide">
            <div class="img1">
            <img src="img/shrek.png" > 
        </div>
          <div class="text">Avant</div>
          <div class="img2">
          <img src="img/hulk.png" > 
        </div>
          <div class="text2">Aprés</div>
        </div>

        <div class="slide">
            <img src="img/img2.jpg" style="width:100%">
          <div class="text">Caption Text</div>
        </div>

        <div class="slide">
            <img src="img/img3.jpg" style="width:100%">
          <div class="text">Caption Text</div>
        </div>

         <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
         <a class="next" onclick="plusSlides(1)">&#10095;</a>
       </div>
       <br>

       <div style="text-align:center">
         <span class="dot" onclick="currentSlide(1)"></span>
         <span class="dot" onclick="currentSlide(2)"></span>
         <span class="dot" onclick="currentSlide(3)"></span>
       </div>
    </div>

    <div class="presentation">
    <div class="fond">
        <img src="img/blanc.jpg" style="width:34%;">

        <div class="cadre">
            <h1>France Relook pour un look qui vous ressemble</h1>
            <h4> <br>Envie d'un nouveaux départ chez France Relook nous vous aidons à franchir le premier pas.<br><br> </h4>
                    <p>bla bla bla bla </p>
        </div>
        <img class="coach" src="img/gigachad.jpg">
        <h2 class="h2">Philibert De La Pepiniere coach depuis 10 ans </h2>

        <div class="avis">
        <h1>Nos Avis</h1>
        <div class="avis1">
            <h1>marrion</h1>
            <h4>bla bla bla bla </h4>
        </div>
    </div>
</div>
    </body>
</html>

Pour Le CSS

body{
  background-color: black;
}

/*bandeau principale*/
*{
  margin: 0px;
  padding: 0px;

}
.logo{
  float: left;        /*pour ne pas decaler les liens*/
}
nav{
  width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 0px;
}
nav ul{
  list-style-type: none;
}
nav ul li{
  float: left;
  width: 10%;    /*distance entre les differents liens du bandeau*/
  text-align: center;
  position: relative;
}
nav ul::after{
  content: "";
  display: table;
  clear: both;
}

nav a{
  display: block;
  text-decoration: none;
  color: black;
  border-bottom: 2px solid transparent;
  padding: 10px 0px;
}

nav a:hover{
  color: purple;
  border-bottom: 2px solid purple;
}

.sous{
  display: none;
  box-shadow: 0px 1px 2px #CCC;
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

nav > ul li:hover .sous{
  display: block;
}

.sous li{
  float: none;
  width: 100%;
  text-align: left;
}

.sous a{
  padding: 10px;
  border-bottom: none;
}
.sous a:hover{
  border-bottom: none;
  background-color: RGBa(200,200,200,0.1);
}

.header{
  width:100%;
  height: 255px;
  font-family: 'Montserrat', sans-serif;
  color:white;
  background-color: black;
   }

   .boutonlien{
  color:white;
   font-size: 125%;   /*125% pour montserrat ou 2rem pour dancing script cursive */
   margin-top: 80px;    
    }    

    /*alligner les liens */
    .parent {
      display: flex;
      justify-content: center; /* Tant qu'à faire autant aligner horizontalement aussi :p */
      align-items: center;
      }
    /* Fin bandeau principale*/ 

    .slidecontainer{
      max-width: 1000px;
  position: relative;
  margin: auto;
  margin-top: 255px;
  }
    .slide{
      display: none;
    }

    .img1
    {
      position: absolute;
      left:138px;
    }

    .img2
    {
      position: relative;
      left:430px;
    }

    .active {
      display: block;
      animation: fade 0.8s;
    }

    /* Next & previous buttons */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 35px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-family: Dancing Script;
  right: 220px;
}

.text2 {
  color: #f2f2f2;
  font-size: 35px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-family: Dancing Script;
  left: 90px;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.presentation
{
  position: absolute;
  background-color: white;
  width: 100%;
  margin-bottom: 0px;
}

.fond
{  
  height:100%;
   width: 100%;
  }

  .cadre
{
  top: 5%;
  left: 30px;
  position: absolute;
  border: 3px solid purple;
  padding: 5px;
  background-color:white ;
 }

 h1{
  font-family: Dancing Script;
  color: purple;
 }

 h4
 {
  font-family: 'Montserrat', sans-serif;
color: grey;
 }

 p
 {
  font-family: 'Cabin', sans-serif;
 }

.coach
{
  position: absolute;
  right: 250px;
  top: 5%;
}

.h2{
  right:250px;
  position: absolute;
  top:85%
}

.avis
{
margin-left: 50%  
}

.avis1
{
  position: absolute;
  border:3px solid purple;
  padding: 5px;

}

Ce que je veux

Bonjour j'esseye de continuer mon site avec des avis que des client pourait avoir

Ce que j'obtiens
Mon site a deux couleurs de fond celle de base noir et blanc que j'ai obtenue en prenant l'image d'un pixel blanc que j'ai etendu lorsque que j'arive a la fin du code dans la section que j'esseye de faire avis et que je la mets en position absolute le fond d'ecrant de base noir réaparer et je n'arrive pas a trouver de solution merci d'avance pour tout aide fournis

Aucune réponse