Bonjous a tous:
*
je reviens vers vous apres pas mal de temp, car je refais une page et reste bloque sur quelque chose qui dois etre simple et logique pour vous:
Je narrive pas a aligner corectement mes 3 div en bas de ma page et a faire le changement d'image comme presenté sur se site.
https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/41-transformation-css/exe/transform-rotate.html
Merci pour votre aide futur.
Modifié par Gipsy88 (14 Jul 2023 - 14:39)
*
je reviens vers vous apres pas mal de temp, car je refais une page et reste bloque sur quelque chose qui dois etre simple et logique pour vous:
Je narrive pas a aligner corectement mes 3 div en bas de ma page et a faire le changement d'image comme presenté sur se site.
https://www.devenir-webmaster.com/V2/TUTO/CHAPITRE/HTML-CSS/41-transformation-css/exe/transform-rotate.html
Merci pour votre aide futur.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" >
<link rel="stylesheet" href="style.css" >
</head>
<body>
<header>
<nav>
<h1 class="logo">Survivre</h1>
<div class="toggle">
<i class="fas fa-bars ouvrir"></i>
<i class="fas fa-times fermer"></i>
</div>
<ul class="menu">
<li><a href="#">Acceuil</a></li>
<li><a href="#">Edc N1</a></li>
<li><a href="#">Edc n2</a></li>
<li><a href="#">Edc n3</a></li>
</ul>
</nav>
</header>
<!-- Le reste du contenu -->
<section class="section1">
<div class="content">
<h1 class="titre1"> La Survie Explication Simple et rapide </h1>
<p class="paragraphe1">
<mark class="opak">
Bonjour à tous voici un peu de lecture pour remettre certaines idées reçues à leurs places. <br>
<br>
Tout d'abord, il faut bien comprendre que survie => danger , et pas n'importe lequel puisqu'il s'agit d'un danger de mort imminente. <br>
<br>
Une situation de survie peut arriver à tout moment sous diverses formes.
</mark>
</p>
<p class="paragraphe1">
<mark class="opak">
Lorsque l’on sort de chez toi, on s’expose de suite à une possible situation d’urgence pour diverse cause possible, tels qu’une panne, perte de l’orientation, voir même une blessure.
Ceci peut nous arriver aussi bien à pied, vélo, voiture, moto, quad, etc.
</mark>
</p>
</div>
</section>
<section class="section2">
<h1 class="titre2"> Introduction </h1>
<div class="introduction">
<p class="paragraphe2">
Pour parer au mieux à une situation difficile, j’emporte mon sac à dos, qui est toujours à ma portée ou pas très loin de moi. <br>
<br>
Celui-ci est composé de <strong> "divers Kit" </strong> pour parer à toute éventualité, ou au moins au mieux. <br>
<br>
<b> <u> Mon moyen mnémotechnique : </u> </b> <br>
<br>
Lorsque je pars, je dois <strong> "naviguer" </strong>, mais si j’ai un problème, je dois <strong> "communiquer" </strong> ma position et me <strong> "signaler" </strong>, si je suis blessé, je dois me <strong> "soigner" </strong> et de nuit <strong> "m’éclairer" </strong>. <br>
Si la situation perdure, je dois <strong> "Boire" </strong>, me <strong> "chauffer" </strong> et me <strong> "protéger" </strong> des éléments, et éventuellement <strong> "manger" </strong>. <br>
<br>
</p>
</div>
</section>
<section class="section3">
<div class="introduction2">
<h2 class="soustitre">Les diffèrent éléments</h2>
<p class="paragraphe3">
- <strong> Naviguer </strong> <br>
- <strong> Communiquer </strong> <br>
- <strong> Signaler </strong> <br>
- <strong> Soigner </strong> <br>
- <strong> Eclairer </strong> <br>
- <strong> Boire </strong> <br>
- <strong> Chauffer </strong> <br>
- <strong> Protéger </strong> <br>
- <strong> Manger </strong> <br>
</p>
</div>
<div class="image">
<img src="frame/Image-Acceuil2.png" id="Image-Acceuil2" alt="">
</div>
</section>
<div class="floubtn">
<br>
<button class="btn1">Consulter</button>
<br>
</div>
<section class="section4">
<h1 class="titre2"> Validé W3C pour HTML5\CSS3 </h1>
<div>
<div class="copyright">
<h2 class="soustitre2">HTML</h2>
<p class="imghtml">
<a href="https://validator.w3.org/" onclick="window.open(this.href);return false">
<img class="img2" src="frame/htmllogo1.png" alt="Validation html 5">
<img class="img2bis" src="frame/htmllogo2.png" alt="Validation html 5">
</a>
</p>
</div>
<div class="copyright2">
<h2 class="soustitre2">Version :</h2>
<hr class="hr">
<p class="valid2">
Réalisé par Bruno.H <br>
<br>
Mis à jour le 14 juillet 2023. <br>
</p>
<hr class="hr">
</div>
<div class="copyright">
<h2 class="soustitre2">HTML</h2>
<p class="imgcss">
<a href="http://jigsaw.w3.org/css-validator/" onclick="window.open(this.href);return false">
<img class="img3" src="frame/csslogo1.png" alt="Validation CSS 3">
<img class="img3bis" src="frame/csslogo2.png" alt="Validation CSS 3">
</a>
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
}
body {
font-family: sans-serif;
background-image: url("frame/Image-Acceuil2.png"); /* image de fond */
background-position: 50%;/* position image */
background-size: 70%;/* taille image */
background-repeat: no-repeat;/* statut image */
background-color: black;/* remplacement image */
background-attachment: fixed;/* effet sur image */
}
header {
position: absolute;
width: 100%;
height: 100px;
top: 0;
left: 0;
background-color: transparent;
color: wheat;
padding: 0 20px 0 0;
}
nav {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between; /* */
align-items: center;
}
.logo {
font-size: 50px; /* Taille ecriture liste */
float: left; /* positionnement titre par apport liste */
margin: 10px 0px 10px 30px;/* marge logo */
color: white; /* couleur texte logo */
border-radius: 100%; /* bordure logo */
background-color: yellowgreen; /* couleur bordure logo */
text-shadow: goldenrod 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte menu */
}
.toggle {
display: none;
top: 0px;
left: 0px;
color: red;
}
.menu {
display: flex;
justify-content: space-between; /* */
align-items: center;
font-size: 20px;
list-style: none;
width: 350px;
}
.menu li a {
text-decoration: none;
color: yellowgreen;
transition-property: background-color, border; /* transition */
transition-duration: 0.5s; /* duree transition */
}
.menu li :hover
{
font-size: 30px;
color: red;
background-color: yellowgreen;
padding: 5px;
text-shadow: black 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: black 0.05em 0.05em 0.5em; /* ombre texte menu */
border: 5px ridge goldenrod;
border-radius: 10px;
}
/* Fin liens Menu */
@media all and (max-width: 600px) { /* (max-width: 991px) */
header {
background: transparent;
}
.toggle {
display: block;
top: 10px;
font-size: 2rem;
cursor: pointer;
position: relative;
z-index: 20;
}
.logo {
position: relative;
top: 10px;
z-index: 20;
color: red;
}
.ouvrir {
display: block;
color: red;
}
.fermer {
display: none;
color: red;
}
.open .ouvrir {
display: none;
}
.open .fermer {
display: block;
}
.menu {
position: absolute;
top: 80px;
right: 0%;
width: 40%;
height: auto;
background: blue;
flex-direction : column;
padding: 2rem;
justify-content: space-around;
transform: translateX(100%);
transition: transform 1s;
z-index: 20;
}
.menu li a {
font-size: 2rem;
}
.open .menu {
transform: translateX(0);
}
}
/* ----------------------------------------------------- */
/* Debut Section commune */
section
{
border: 10px ridge #404040; /* bordure des sections */
}
p
{
font-size: 18px; /* Taille ecriture text */
margin-left: 0px; /* espacement bord gauche text */
margin-top: 0px; /* espacement bord haut text */
}
/* Fin Section commune */
/* ----------------------------------------------------- */
/* Section 1 */
.titre1
{
margin-top: 100px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
color: wheat;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
text-align: center;
font-size: 50px; /* Taille ecriture text */
}
.paragraphe1
{
color: red;
margin-top: 20px; /* espacement bord haut titre1 */
margin-left: 50px; /* espacement bord haut titre1 */
margin-right: 50px;
font-size: 28px; /* Taille ecriture text */
}
.content
{
height: auto ;
backdrop-filter : blur(8px);
padding-bottom: 30Px;
}
.opak
{
opacity: 0.6; /* opacite du texte */
}
/* Section 1 */
/* ----------------------------------------------------- */
/* Section 2 Introduction */
.section2
{
background-color: grey;
height: auto;
}
.titre2
{
margin-top: 40px; /* espacement bord haut titre1 */
margin-bottom: 30px;
margin-left: 0px; /* espacement bord gauche titre1 */
background-color: #404040;
color: yellowgreen;
text-shadow: goldenrod 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 50px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
.paragraphe2
{
color: black;
margin-top: 20px; /* espacement bord haut titre1 */
margin-left: 30px; /* espacement bord haut titre1 */
margin-right: 50px;
font-size: 18px; /* Taille ecriture text */
}
/* Fin Section 2 Introduction */
/* ----------------------------------------------------- */
/* Section 3 Les differents éléments */
.section3
{
background-color: grey;
height: 800px;
}
.introduction2
{
width: 30%;
float: left;
}
.paragraphe3
{
color: black;
width: 100%;
height: 100%;
padding-top: 30%;
padding-left: 10%;
font-size: 18px; /* Taille ecriture text */
text-align: left;
}
.image
{
width: 70%;
float: right;
}
#Image-Acceuil2
{
padding-top: 150px;
height: 100%;
width: 100%;
}
.soustitre
{
border-radius: 100%; /* bordure logo */
background-color: #404040;
margin: 10px 0px 5px 10px;/* marge sous titre */
padding: 10px;
width: 300px;
color: wheat;
text-shadow: yellowgreen 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* contour du texte */
-webkit-text-stroke-color: grey; /* contour du texte */
text-align: center;
font-size: 40px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous titre */
}
/* Fin Section 3 Les differents éléments */
/* ----------------------------------------------------- */
/* Bouton Consulter */
.btn1
{
display: block; /* centrer elements */
margin-left: auto; /* centrer elements */
margin-right: auto; /* centrer elements */
padding-bottom: 10Px;
height: 70px;
width: 140px;
font-size: 30px;
background-color: yellowgreen;
border-radius: 100%;
color: red;
text-shadow: black 0.2em 0.2em 0.4em; /* ombre texte */
box-shadow: 2px 2px 10px greenyellow, 0px 0px 30px grey; /* ombre bouton */
}
.btn1:hover
{ background-color: yellow;
text-shadow: black 0.1em 0.1em 0.2em; /* ombre texte menu */
box-shadow: goldenrod 0.05em 0.05em 0.5em; /* ombre texte menu */
transition-property: background-color, border;
transition-duration:2s;
}
.floubtn
{
backdrop-filter : blur(10px);
}
/* Fin Bouton Consulter */
/* ----------------------------------------------------- */
/* Section 4 Validation Html/Css */
.section4
{
background-color: grey;
height: 600px;
}
.copyright
{
display: inline-block; /* Alignement 3 DIV float: left; ou display: table-cell;*/
width: 33%;
}
.soustitre2
{
text-align: center;
border-radius: 100%; /* bordure logo */
background-color: #404040;
margin: 10px auto;/* marge sous titre */
padding: 10px;
width: 200px;
color: wheat;
text-shadow: yellowgreen 0.4em 0.4em 1.0em; /* ombre titre */
-webkit-text-stroke: 2px; /* taille contour du texte */
-webkit-text-stroke-color: rgb(196, 129, 129); /* couleur contour du texte */
font-size: 40px; /* Taille ecriture text */
box-shadow: goldenrod 0.05em 0.05em 0.1em; /* ombre texte sous div */
}
/* image html W3C */
.img2
{
width: 100%; /* on affiche l'image au carré */
left:10px;
transition: all 1s ease;
}
.img2:hover
{
width: 100%; /* on affiche l'image au carré */
transform:rotate(360deg) scale(0,0);
}
.img2bis
{
width: 100%; /* on affiche l'image au carré */
transform:scale(1,0);
opacity:0;
}
img2bis .img2:hover {
opacity:1;
transform:scale(1,1);
}
/* fIN image html W3C */
/* ----------------------------------------------------- */
/* centre Mise a jours */
.copyright2
{
display: inline-block; /* Alignement 3 DIV float: left; ou display: table-cell;*/
width: 33%;
position: relative;
top:-325px;
}
p.valid2
{
margin: 10px 0;
background-color: transparent;
position: relative;
top:-0px;
width: 100%;
height: auto;
text-align: center;
font-size: 20px;
font-weight: bold;
color: rgb(59, 9, 9);
transition: transform 1s;
}
p.valid2:hover
{
padding:0px;
margin: 15px 0;
background-color: gray;
text-align: center; /* positionnement du texte*/
font-size: 30px; /* talle du texte*/
font-weight: bold; /* epaisseur texte */
color: wheat; /* Couleur texte */
text-shadow: rgb(66, 64, 64) 0.1em 0.1em 0.1em; /* ombre titre */
-webkit-text-stroke: 2px; /* Talle du contour du texte */
-webkit-text-stroke-color: rgb(185, 100, 100); /* Couleur contour du texte */
transform: scale(1.6);
box-shadow: black 0.1em 0.1em 0.3em; ; /* Bordure boite */
z-index: 9; /* Permet de mettre en premier plan la div */
position: relative;/* Toujours utiliser avec z-index */
}
.hr
{
width:100%;
color:firebrick;
background-color:firebrick;
height:3px;
padding: 0px 0px;
margin:30px 0 0 0;
box-shadow:8px 6px 9px #7F7F7F; /* bordure boite */
}
/* fin centre Mise a jours */
/* image css W3C */
.img3
{
width: 100%; /* on affiche l'image au carré */
left:10px;
transition: all 1s ease;
}
.img3:hover
{
width: 100%; /* on affiche l'image au carré */
transform:rotate(360deg) scale(0,0);
}
.img3bis
{
width: 100%; /* on affiche l'image au carré */
transform:scale(1,0);
opacity:0;
}
img3bis .img3:hover {
opacity:1;
transform:scale(1,1);
}
/* fIN image html W3C */
/* ----------------------------------------------------- */
Modifié par Gipsy88 (14 Jul 2023 - 14:39)