parent
2ef7bed513
commit
39317d6e4b
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Caractéristiques longues</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<header><h1>Caractéristiques longues</h1></header>
|
||||
|
||||
<article>
|
||||
|
||||
<div>
|
||||
<p1>Caractéristiques longues</p1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="main">Revenir</a>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Ma vie étudiante</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<header><h1/>Ma vie étudiante</h1></header>
|
||||
<a href="main">Revenir</a>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,130 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Ma vie perso</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<header><h1>Ma vie perso</h1></header>
|
||||
|
||||
<center>
|
||||
<table border="10"height="150">
|
||||
|
||||
<tr>
|
||||
<th>Heures</th>
|
||||
<th width="100px">Lundi</th>
|
||||
<th width="100px">Mardi</th>
|
||||
<th width="100px">Mercredi</th>
|
||||
<th width="100px">Jeudi</th>
|
||||
<th width="100px">Vendredi</th>
|
||||
<th width="100px">Samedi</th>
|
||||
<th width="100px">Dimanche</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>6h30</td>
|
||||
<td colspan="7">Réveil</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>7h30</td>
|
||||
<td rowspan="10">Cours</td>
|
||||
<td rowspan="10">Cours</td>
|
||||
<td rowspan="10">Cours</td>
|
||||
<td rowspan="6">Cours</td>
|
||||
<td rowspan="10">Cours</td>
|
||||
<td rowspan="6">Cours ou Ski (l'hiver hein)</td>
|
||||
<td rowspan="6">Ski l'hiver ou apéro l'été</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>8h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>9h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>10h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>11h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>12h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>13h30</td>
|
||||
<td>Rentrer et mangeaille</td>
|
||||
<td>Rentrer et mangeaille</td>
|
||||
<td>Rentrer et mangeaille</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>14h30</td>
|
||||
<td rowspan="2">Pause</td>
|
||||
<td rowspan="8">Ca dépend</td>
|
||||
<td rowspan="8">Ca dépend</td>
|
||||
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>15h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>16h30</td>
|
||||
<td rowspan="3">Travail perso</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>17h30</td>
|
||||
<td rowspan="2">Rentrer et pause</td>
|
||||
<td rowspan="2">Rentrer et pause</td>
|
||||
<td rowspan="2">Rentrer et pause</td>
|
||||
<td rowspan="2">Rentrer et pause</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>18h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>19h30</td>
|
||||
<td rowspan="3">Travail perso et pause mangeaille</td>
|
||||
<td rowspan="3">Travail perso et pause mangeaille</td>
|
||||
<td rowspan="3">Travail Perso et pause mangeaille</td>
|
||||
<td rowspan="3">Ca dépend</td>
|
||||
<td rowspan="3">Travail perso et pause mangeaille</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>20h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>21h30</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>22h30</td>
|
||||
<td colspan="7">Dodo</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</center>
|
||||
<a href ="main">Revenir</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<title>Présentation longue</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<header><h1>Présentation longue</h1></header>
|
||||
|
||||
<article>
|
||||
|
||||
<div>
|
||||
<p1>Présentation longue</p1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a href="main">Revenir</a>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 22 KiB |
@ -0,0 +1,154 @@
|
||||
1. Général : ajustement du body
|
||||
|
||||
css
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
margin: 0; et padding: 0; : Retire les marges et les espaces par défaut que certains navigateurs appliquent automatiquement.
|
||||
width: 100%; : Assure que la largeur du corps de la page occupe tout l'espace disponible horizontalement.
|
||||
height: 100%; : Définit la hauteur du body à 100% de la hauteur de la fenêtre.
|
||||
overflow-x: hidden; : Empêche le défilement horizontal si le contenu dépasse la largeur de la page (par exemple, les images). Cela garde la mise en page propre.
|
||||
|
||||
2. Style des sections (div)
|
||||
|
||||
css
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-attachment: scroll;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
width: 100%; : Chaque section occupe toute la largeur de la page.
|
||||
|
||||
height: 100vh; : Définit la hauteur de chaque section à 100% de la hauteur de la fenêtre (1 vh = 1% de la hauteur de la fenêtre). Cela signifie que chaque section avec une image de fond occupera tout l'écran, donnant l'impression de "slides" ou de pages distinctes à chaque défilement.
|
||||
|
||||
background-attachment: scroll; : L'image de fond défile normalement avec la page (pas d'effet "parallax" ici, mais cela peut être activé en remplaçant par fixed si souhaité).
|
||||
|
||||
background-size: cover; : Cette propriété fait en sorte que l'image de fond couvre l'intégralité de la section sans se déformer. L'image sera redimensionnée proportionnellement tout en remplissant l'espace, sans laisser de zone vide.
|
||||
|
||||
background-position: center; : Centre l'image de fond dans la section. Si l'image est plus grande que la section, seule la partie centrale sera visible.
|
||||
|
||||
display: flex; : Active Flexbox, un modèle de mise en page qui permet un alignement flexible du contenu. Cela permet de facilement centrer du contenu à l'intérieur d'une section.
|
||||
|
||||
justify-content: center; : Centre le contenu horizontalement (alignement horizontal au centre).
|
||||
|
||||
align-items: center; : Centre le contenu verticalement dans la section (alignement vertical au centre). Combiné avec justify-content: center, cela centre le texte ou le contenu à la fois horizontalement et verticalement.
|
||||
|
||||
text-align: center; : Aligne le texte à l'intérieur de chaque section au centre.
|
||||
|
||||
color: white; : Change la couleur du texte en blanc, ce qui assure qu'il est bien visible sur les images de fond.
|
||||
|
||||
font-size: 2rem; : Augmente la taille du texte pour qu'il soit suffisamment lisible. rem est une unité relative qui prend comme référence la taille de police de l'élément racine (généralement 16px, donc 2rem = 32px).
|
||||
|
||||
overflow: hidden; : Empêche tout débordement de contenu en dehors de la section. Par exemple, si une image ou du texte dépasse la hauteur de la section, cela coupe ce contenu.
|
||||
|
||||
3. Image de profil (#photo)
|
||||
|
||||
css
|
||||
|
||||
#photo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px;
|
||||
width: 30%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
position: absolute; : Positionne l'image de profil de manière absolue par rapport à son conteneur parent. Cela signifie que l'image ne suit plus le flux normal de la page et peut être placée où l'on veut.
|
||||
|
||||
top: 0; et right: 0; : Place l'image en haut à droite du conteneur.
|
||||
|
||||
margin: 10px; : Ajoute un petit espace de 10px entre l'image et le bord de la page.
|
||||
|
||||
width: 30%; et height: 75%; : Dimensionne l'image de manière à ce qu'elle prenne 30% de la largeur de la page et 75% de la hauteur.
|
||||
|
||||
4. Le header (header)
|
||||
|
||||
css
|
||||
|
||||
header {
|
||||
height: 100vh;
|
||||
background-image: url("Puy2.jpg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
height: 100vh; : Le header prend également toute la hauteur de la fenêtre (comme les sections suivantes).
|
||||
|
||||
background-image: url("Puy2.jpg"); : Définit l'image de fond pour le header.
|
||||
|
||||
background-size: cover; : Comme pour les autres sections, l'image de fond couvre toute la surface disponible dans le header.
|
||||
|
||||
background-repeat: no-repeat; : Empêche la répétition de l'image si elle est plus petite que la zone de fond.
|
||||
|
||||
background-position: center; : Centre l'image de fond.
|
||||
|
||||
Flexbox : Comme pour les autres sections, Flexbox est utilisé pour centrer le contenu du header à la fois horizontalement et verticalement.
|
||||
|
||||
5. Style des articles et du texte (article h2)
|
||||
|
||||
css
|
||||
|
||||
article h2 {
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
color: white; : Le texte des titres h2 est en blanc pour être bien visible sur les images de fond.
|
||||
|
||||
background-color: rgba(0, 0, 0, 0.5); : Le fond du texte est semi-transparent (le noir avec une opacité de 50%). Cela permet de voir partiellement l'image de fond à travers le texte, tout en rendant le texte plus lisible.
|
||||
|
||||
padding: 10px; : Ajoute un espacement interne autour du texte pour qu'il ne touche pas directement les bords du fond semi-transparent.
|
||||
|
||||
border-radius: 5px; : Ajoute des coins légèrement arrondis à l'arrière-plan du texte pour un effet esthétique.
|
||||
|
||||
6. Spécificités des sections avec des images de fond
|
||||
|
||||
css
|
||||
|
||||
#automobile {
|
||||
background-image: url("RS4.jpg");
|
||||
}
|
||||
|
||||
#ski {
|
||||
background-image: url("ski.jpg");
|
||||
}
|
||||
|
||||
#avion {
|
||||
background-image: url("avion.jpg");
|
||||
}
|
||||
|
||||
Ces règles spécifiques ajoutent les images de fond pour chaque section (#automobile, #ski, #avion).
|
||||
Comme ces sections héritent des règles générales pour les div, les images seront centrées, couvriront toute la section et ne se répéteront pas.
|
||||
|
||||
Résultat attendu :
|
||||
|
||||
Après ces modifications :
|
||||
|
||||
Chaque section aura une image de fond qui couvre tout l'écran (100% de la hauteur).
|
||||
Le texte sera centré dans chaque section avec un arrière-plan semi-transparent pour une meilleure lisibilité.
|
||||
Le défilement vertical sera fluide et agréable, avec des sections pleine page comme sur des sites modernes comme celui d'Apple.
|
||||
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<LINK rel="stylesheet" type="text/css" href="style.css">
|
||||
<title>MyLife</title>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id = "header_background"></div>
|
||||
<a href="Perso" class="pages">Ma vie perso</a>
|
||||
<a href="Etudes" class="pages">Ma vie étudiante</a>
|
||||
<img src="moi3.png" alt="Ma grosse tete la" title="ça pousse" id="photo"/>
|
||||
</div>
|
||||
</header>
|
||||
<div id="automobile" class="background">
|
||||
<a href="Automobile" class="titleBackground">L'automobile</a>
|
||||
</div>
|
||||
<div id="ski" class="background">
|
||||
<a href="Ski" class="titleBackground">Le ski</a>
|
||||
</div>
|
||||
<div id="avion" class="background">
|
||||
<a href="Avion" class="titleBackground">L'aéronautique</a>
|
||||
</div>
|
||||
<div id="informatique" class="background">
|
||||
<a href="Informatique" class="titleBackground">L'informatique</a>
|
||||
<div id="gradient"></div>
|
||||
</div>
|
||||
<div id="piedPage">
|
||||
<a href="Perso">Ma vie perso</a>
|
||||
<a href="Etudes">Ma vie étudiante</a>
|
||||
<aside>
|
||||
<h2 id="reseaux">Réseaux sociaux</h2>
|
||||
<div id="liens">
|
||||
<a href="http://instagram.com"><img src="insta.png" id="insta" class="logo"></a>
|
||||
<a href="http://x.com"><img src="x.png" id="x" class="logo"></a>
|
||||
<a href="http://youtube.com"><img src="youtube.png" id="youtube" class="logo"></a>
|
||||
<a href="http://discord.com"><img src="discord.png" id="discord" class="logo"></a>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
<footer>footer</footer>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 862 KiB |
@ -0,0 +1,128 @@
|
||||
/* Style global */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
border: dashed purple;
|
||||
}
|
||||
|
||||
/* Style pour chaque section avec image de fond */
|
||||
.background {
|
||||
width: 100%; /* Chaque div prend tt la largeur de l'écra */
|
||||
height: 100vh; /* Chaque div prend tt la hauteur de l'écran */
|
||||
background-attachment: scroll; /* Permet de "rattacher" les images au site ce qui crée un défilement d'image un peu comme apple */
|
||||
background-size: cover; /* L'image de fond couvre toute et se redimensionne auto pour garder ses proportions la div */
|
||||
background-position: center; /* Centre background dans la div */
|
||||
display: flex; /* Aide à la mise en colonne des background mais j'en sais pas plus */
|
||||
justify-content: center; /* Centrer horizontalement le txt dans une div*/
|
||||
align-items: center; /* Centrer verticalement le txt dans une div*/
|
||||
text-align: center; /* Grace a flexbox inutile*/
|
||||
color: white; /* Couleur de la div */
|
||||
font-size: 2rem; /* Après recherche, dépend des browsers mais 1 rem représente 1 * font-size de la racine qui est 16px en général */
|
||||
overflow: hidden; /* Empèche de défiler horizontalement si les images dépassent sur les côtés de la fenêtre */
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
#photo {
|
||||
position: absolute; /* L'image reste à la même position même lors du défilement */
|
||||
display:block;
|
||||
right: 22vw;
|
||||
bottom:0vh;
|
||||
height: 85vh; /* L'image prend toute la hauteur de la fenêtre */
|
||||
width: auto; /* Laisse la largeur s'adapter automatiquement à la hauteur */
|
||||
rotate: 320deg;
|
||||
transform: scaleX(-1);
|
||||
z-index:0;
|
||||
|
||||
}
|
||||
|
||||
#a{
|
||||
margin-left:95%;
|
||||
z-index:2;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 100vh; /* Header prend aussi tout l'écran */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgb(51, 45, 45);
|
||||
border: dashed green;
|
||||
}
|
||||
|
||||
#header_background {
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 30vw;
|
||||
display: flex;
|
||||
right: 0vw;
|
||||
background-color:rgb(73, 73, 73);
|
||||
box-shadow: -30px 0 15px rgba(0, 0, 0, 0.5); /* Ombre de 25px à droite */
|
||||
z-index: 1;
|
||||
border: dashed red;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pages{
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#automobile {
|
||||
background-image: url("RS4.jpg");
|
||||
}
|
||||
|
||||
#ski {
|
||||
background-image: url("ski.jpg");
|
||||
}
|
||||
|
||||
#avion {
|
||||
background-image: url("avion.jpg");
|
||||
}
|
||||
|
||||
#informatique{
|
||||
background-image: url("matrix.jpg");
|
||||
display:flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#gradient{
|
||||
width: 100vw;
|
||||
height: 100px;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
|
||||
}
|
||||
|
||||
.titleBackground{
|
||||
color: rgba(255, 255, 255, 0.596);
|
||||
background-color: rgba(0, 0, 0, 0.5); /* Ajoute un fond semi-transparent derrière le texte */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.titleBackground:hover{
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#reseaux{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#liens{
|
||||
border: dashed blue;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.logo{
|
||||
height: 50px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#piedPage{
|
||||
background: linear-gradient(black, green);
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#photo {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 10px; /* Pour ajouter un petit espace entre l'image et le bord */
|
||||
width: 30%;
|
||||
height: 75%;
|
||||
}
|
||||
|
||||
header {
|
||||
background-image: url("Puy2.jpg");
|
||||
background-attachment: scroll;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
overflow-x: hidden;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
#automobile{
|
||||
background-image: url("RS4.jpg");
|
||||
}
|
||||
|
||||
#ski{
|
||||
background-image: url("ski.jpg");
|
||||
}
|
||||
|
||||
#avion{
|
||||
background-image: url("avion.jpg");
|
||||
}
|
||||
|
||||
#automobile, #ski {
|
||||
margin: 0;
|
||||
background-attachment: scroll;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
div {
|
||||
margin: 0;
|
||||
background-attachment: scroll;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
padding: 0;
|
||||
width:100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
After Width: | Height: | Size: 41 KiB |
Loading…
Reference in new issue