diff --git a/CaracteristiquesLongues b/CaracteristiquesLongues new file mode 100644 index 0000000..2f06bc2 --- /dev/null +++ b/CaracteristiquesLongues @@ -0,0 +1,31 @@ + + + + + + + Caractéristiques longues + + + + + + +

Caractéristiques longues

+ +
+ +
+ Caractéristiques longues +
+ +
+ Revenir +
+ +
+ + + + + diff --git a/Etudes b/Etudes new file mode 100644 index 0000000..cb973b5 --- /dev/null +++ b/Etudes @@ -0,0 +1,20 @@ + + + + + + + Ma vie étudiante + + + + + + +

Ma vie étudiante

+ Revenir + + + + + diff --git a/Perso b/Perso new file mode 100644 index 0000000..26fc3bb --- /dev/null +++ b/Perso @@ -0,0 +1,130 @@ + + + + + + + Ma vie perso + + + + + + + +

Ma vie perso

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeuresLundiMardiMercrediJeudiVendrediSamediDimanche
6h30Réveil
7h30CoursCoursCoursCoursCoursCours ou Ski (l'hiver hein)Ski l'hiver ou apéro l'été
8h30
9h30
10h30
11h30
12h30
13h30Rentrer et mangeailleRentrer et mangeailleRentrer et mangeaille
14h30PauseCa dépendCa dépend
15h30
16h30Travail perso
17h30Rentrer et pauseRentrer et pauseRentrer et pauseRentrer et pause
18h30
19h30Travail perso et pause mangeailleTravail perso et pause mangeailleTravail Perso et pause mangeailleCa dépendTravail perso et pause mangeaille
20h30
21h30
22h30Dodo
+
+ Revenir + + + diff --git a/PresentationLongue b/PresentationLongue new file mode 100644 index 0000000..40afdc4 --- /dev/null +++ b/PresentationLongue @@ -0,0 +1,31 @@ + + + + + + + Présentation longue + + + + + + +

Présentation longue

+ +
+ +
+ Présentation longue +
+ +
+ Revenir +
+ +
+ + + + + diff --git a/Puy b/Puy new file mode 100644 index 0000000..64031af Binary files /dev/null and b/Puy differ diff --git a/Puy2.jpg b/Puy2.jpg new file mode 100644 index 0000000..a6225f9 Binary files /dev/null and b/Puy2.jpg differ diff --git a/RS4.jpg b/RS4.jpg new file mode 100644 index 0000000..508709e Binary files /dev/null and b/RS4.jpg differ diff --git a/S1.PNG b/S1.PNG new file mode 100644 index 0000000..c02dd66 Binary files /dev/null and b/S1.PNG differ diff --git a/Vieu.PNG b/Vieu.PNG new file mode 100644 index 0000000..a07700c Binary files /dev/null and b/Vieu.PNG differ diff --git a/avion.jpg b/avion.jpg new file mode 100644 index 0000000..078afb4 Binary files /dev/null and b/avion.jpg differ diff --git a/channels4_profile.jpg b/channels4_profile.jpg new file mode 100644 index 0000000..8a23c78 Binary files /dev/null and b/channels4_profile.jpg differ diff --git a/discord.png b/discord.png new file mode 100644 index 0000000..05d16a6 Binary files /dev/null and b/discord.png differ diff --git a/doc_css_main b/doc_css_main new file mode 100644 index 0000000..38a4bc5 --- /dev/null +++ b/doc_css_main @@ -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. \ No newline at end of file diff --git a/insta.png b/insta.png new file mode 100644 index 0000000..d3b9817 Binary files /dev/null and b/insta.png differ diff --git a/main b/main new file mode 100644 index 0000000..966f8ee --- /dev/null +++ b/main @@ -0,0 +1,51 @@ + + + + + + + + + MyLife + + + + +
+
+ Ma vie perso + Ma vie étudiante + Ma grosse tete la + +
+
+ L'automobile +
+
+ Le ski +
+
+ L'aéronautique +
+
+ L'informatique +
+
+
+ Ma vie perso + Ma vie étudiante + +
+ + + + + diff --git a/matrix b/matrix new file mode 100644 index 0000000..48bb899 Binary files /dev/null and b/matrix differ diff --git a/matrix.jpg b/matrix.jpg new file mode 100644 index 0000000..48bb899 Binary files /dev/null and b/matrix.jpg differ diff --git a/moi1.png b/moi1.png new file mode 100644 index 0000000..2794dce Binary files /dev/null and b/moi1.png differ diff --git a/moi1.webp b/moi1.webp new file mode 100644 index 0000000..89b4075 Binary files /dev/null and b/moi1.webp differ diff --git a/moi2.webp b/moi2.webp new file mode 100644 index 0000000..99179eb Binary files /dev/null and b/moi2.webp differ diff --git a/moi3.png b/moi3.png new file mode 100644 index 0000000..400aadb Binary files /dev/null and b/moi3.png differ diff --git a/moi3.webp b/moi3.webp new file mode 100644 index 0000000..34e2b98 Binary files /dev/null and b/moi3.webp differ diff --git a/ski.jpg b/ski.jpg new file mode 100644 index 0000000..ffaedfb Binary files /dev/null and b/ski.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..fc30082 --- /dev/null +++ b/style.css @@ -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); +} \ No newline at end of file diff --git a/testcss b/testcss new file mode 100644 index 0000000..bbaae74 --- /dev/null +++ b/testcss @@ -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; +} diff --git a/x.png b/x.png new file mode 100644 index 0000000..556780d Binary files /dev/null and b/x.png differ diff --git a/youtube.png b/youtube.png new file mode 100644 index 0000000..d15b3f5 Binary files /dev/null and b/youtube.png differ