A l'aide
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>
</script>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<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="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>Créé en 1945 par monsieur Henrich un ancien employé férroviaire notre but est de vous aider à plaire mais surtout à vous plaire.<br>
Fier de notre experience nous avous su en tous temps marquer les esprits et nous adapter à l'époque, <br>
pour preuve notre desing le plus connu l'Etoile fut porter par nombres de français avec fierté<br>
Nous mettons à votre disposition un coach qui vous aideras lors de votre transformation.<br>
Une aide et un suivie vous sera apporter meme apres celle-ci afin que vous puissier de vous meme comprendre et suivre la mode.
</p>
</div>
<img class="coach" src="img/gigachad.jpg">
<h2 class="h2">Philibert De La Pepiniere coach depuis 10 ans </h2>
<div class="servicescontainer">
<h1 div class="services">Nos Services</h1>
<div class="container">
<img class="a-img" src="img/relookinghomme.jpg" href="html/relookinghomme.html" >
<div class="overlay">Relooking France</div>
</div>
<div class="aviscontainer">
<h1 div class="avis">Nos Avis</h1>
<div class="avis1">
<h1 class="nom">Marie-Anne</h1>
<p ><br>Ce fut un moment agreable, <br> passer avec de vrais professionnels.<br>
Je recomande chaudement ce service <br> qui a sut rammener la beauté en moi </p>
<img class="imageprofil1" src="img/profil.png" >
</div>
<div class="avis2">
<h1 class="nom">Nabil</h1>
<p ><br>Wallah, roya comment je suis frais <br> sa va aller pecho de la gonz.<br>
Amar fait tourner le T max <br> sa va bz en boite de nuit ce soir</p>
<img class="imageprofil1" src="img/profil.png" >
</div>
<div class="avis3">
<h1 class="nom">Luke S</h1>
<p ><br>NON CE N'EST PAS VRAI C'EST IMPOSSIBLE <br>
NOOOOOOOOOOOOOOOOOOON</p>
<img class="imageprofil2" src="img/profil.png" >
</div>
</div>
</div>
</body>
</html>
pour les css
body {
background-color: white;
}
/*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: 100%;
position: relative;
margin: auto;
margin-top: 255px;
background-color: black;
}
.slide {
display: none;
}
.img1 {
position: absolute;
left: 570px;
}
.img2 {
position: relative;
left: 860px;
}
.active {
display: block;
animation: fade 0.8s;
}
/* Next & previous buttons */
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.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;
}
/* The dots/bullets/indicators */
.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;
}
.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;
margin-top: 30%;
}
.servicescontainer {
position: absolute;
background-color: #717171;
margin-top: 33%;
width: 100%;
margin-bottom: 50%;
}
/* Container needed to position the overlay. Adjust the width as needed */
.container {
position: absolute;
width: 50%;
max-width: 300px;
margin-bottom: -25%;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/* The overlay effect - lays on top of the container and over the image */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
/* Black see-through */
color: #f1f1f1;
width: 87%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
left: 100px;
}
/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
opacity: 1;
}
.servicescontainer p {
font-size: 1.2rem;
text-align: center;
margin: 0;
padding: 10px;
}
.servicescontainer a {
text-decoration: none;
color: inherit;
}
.services {
position: relative;
margin-left: 20%;
border-top-width: 2px;
border-top-style: solid;
border-top-color: purple;
text-align: center;
width: 50%;
}
.a-img {
position: relative;
width: 100%;
margin-left: 100px;
margin-top: 1%;
top: 4px;
}
.b-img {
position: relative;
width: 10%;
margin-left: 100px;
margin-top: 1%;
}
.aviscontainer {
position: relative;
margin-top: 30%;
}
.avis {
position: absolute;
margin-left: 3%;
margin-top: 25%;
border-top-width: 3px;
border-top-style: solid;
border-top-color: purple;
text-align: center;
width: 90%;
}
.avis1 {
position: absolute;
border: 2px solid purple;
padding: 5px;
margin-top: 30%;
margin-left: 3%;
min-width: 420px;
min-height: 120px;
}
.avis2 {
position: absolute;
border: 2px solid purple;
padding: 5px;
margin-top: 30%;
margin-left: 38%;
min-width: 420px;
min-height: 120px;
}
.avis3 {
position: absolute;
border: 2px solid purple;
padding: 5px;
margin-top: 30%;
margin-left: 70%;
min-width: 420px;
min-height: 120px;
}
.nom {
display: block;
position: relative;
margin: -12px 0 0 20px;
float: left;
color: purple;
font-size: 40px;
background: white;
margin-top: -30px;
}
.imageprofil1 {
position: absolute;
width: 25%;
margin-left: 300px;
margin-top: -85px;
}
.imageprofil2 {
position: absolute;
width: 25%;
margin-left: 300px;
margin-top: -48px;
}Ce que je veux
j'esseye de faire en sorte que lorque la souris passe sur une image dans mon servicescontainer l'image devient plus sombre avec un texte puis que l'ont peut cliquer dessus pour que cela nous envoie sur une autre page mais j'ai du mal si quelque'un peut m'aider par ce que la je suis a bout :'(
Ce que j'obtiens
Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(
1 réponse
Utilise :hover sur .slide
Qqch comme ça pour faire afficher le texte :
.slide .text {
visibility: hidden;
}
.slide:hover .text {
visibility: visible;
}Et pour changer la couleur du fond en rouge au survol :
.slide:hover {
background-color: red;
}À toi d'adapter suivant tes besoins.