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)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</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