Charline Pasteur Avocate

commit a32175725440c958fcf84ab8869b947b18566ea5 Author: Anthony Mahé Date: Tue Mar 4 15:56:35 2025 +0100 Premier commit diff --git a/etoiles.png b/etoiles.png new file mode 100644 index 0000000..242e84c Binary files /dev/null and b/etoiles.png differ diff --git a/fond.png b/fond.png new file mode 100644 index 0000000..07e11c9 Binary files /dev/null and b/fond.png differ diff --git a/full.pdn b/full.pdn new file mode 100644 index 0000000..d06d9d2 Binary files /dev/null and b/full.pdn differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..4aa0e48 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + + Charline Pasteur Avocate + + + + + + +

+ +

+ + + \ No newline at end of file diff --git a/personnage1.png b/personnage1.png new file mode 100644 index 0000000..b0be5bb Binary files /dev/null and b/personnage1.png differ diff --git a/personnage2.png b/personnage2.png new file mode 100644 index 0000000..95bbb12 Binary files /dev/null and b/personnage2.png differ diff --git a/personnage3.png b/personnage3.png new file mode 100644 index 0000000..62ac9a7 Binary files /dev/null and b/personnage3.png differ diff --git a/personnages.png b/personnages.png new file mode 100644 index 0000000..f3f4b0a Binary files /dev/null and b/personnages.png differ diff --git a/photo.png b/photo.png new file mode 100644 index 0000000..610d129 Binary files /dev/null and b/photo.png differ diff --git a/styles copy.css b/styles copy.css new file mode 100644 index 0000000..dbdb209 --- /dev/null +++ b/styles copy.css @@ -0,0 +1,171 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + width: 100%; + height: 100%; + color: black; + background-color: #FFEDE5; + font-family: Arial, Helvetica, sans-serif; + font-weight: 700; + overflow-x: hidden; + /* Empêche le scroll horizontal */ +} + +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: white; + height: 4rem; + z-index: 1000; +} + +nav { + float: right; + background-color: transparent; + height: 100%; +} + +nav a { + display: inline-block; + color: rgb(227, 195, 14); + padding: 18px 12px; + text-decoration: none; + transition: ease-in .3s; +} + +nav a:hover { + color: white; + background: #6aa9e895; + cursor: pointer; +} + +.wrapper { + padding-top: 12rem; + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + perspective: 300px; + width: 100vw; + /* Force la largeur du viewport */ + overflow-x: hidden; +} + +.parallax__group { + position: relative; + height: 100vh; + width: 100vw; + transform-style: preserve-3d; +} + +.parallax__layer { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.sky { + background-color: white; + background: url('fond.png') no-repeat; + background-size: contain; + transform: translateZ(-600px) scale(3); + z-index: 1; +} + +.bushes { + background: url('etoiles.png') no-repeat; + background-size: contain; + transform: translateZ(-525px) scale(2.75); + z-index: 2; +} + +.water { + background: url('texte.png') no-repeat; + background-size: contain; + transform: translateZ(-400px) scale(2.33333333); + z-index: 3; +} + +.people1 { + background: url("personnages.png") no-repeat; + background-size: contain; + transform: translateZ(-250px) scale(1.833333333); + z-index: 4; +} + +.info-container { + background-color: #FFEDE5; +} + +/* Style du menu hamburger */ +.menu-icon { + display: none; + /* Caché par défaut */ + flex-direction: column; + cursor: pointer; + position: absolute; + right: 1rem; + top: 1rem; + z-index: 1001; +} + +.menu-icon span { + background: rgb(227, 195, 14); + display: block; + height: 3px; + width: 25px; + margin: 5px 0; + transition: 0.3s; +} + +/* Masquer la case à cocher */ +#menu-toggle { + display: none; +} + + +@media screen and (min-width:760px) { + .sky, + .bushes, + .water, + .people1 { + background-size: contain; + /* Remplit toute la largeur */ + /*background-position: center; Centre les images */ + } +} + +@media screen and (max-width: 760px) { + .menu-icon { + display: flex; + } + + nav { + display: none; + flex-direction: column; + position: absolute; + top: 4rem; + left: 0; + width: 100%; + background: white; + text-align: center; + } + + /* Quand la case est cochée, afficher le menu */ + #menu-toggle:checked+.menu-icon+nav { + display: flex; + } + + nav a { + padding: 15px; + display: block; + } +} diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..adf53ff --- /dev/null +++ b/styles.css @@ -0,0 +1,239 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +html, +body { + width: 100%; + height: 100%; + color: black; + background-color: #FFEDE5; + font-family: Arial, Helvetica, sans-serif; + font-weight: 700; + overflow-x: hidden; + /* Empêche le scroll horizontal */ +} + +/*.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: #d4af37; + height: 4rem; + z-index: 1000; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Ombre portée pour donner de la profondeur +} + +nav a { + display: inline-block; + color: white; /* Couleur du texte + padding: 18px 12px; + text-decoration: none; + transition: ease-in .3s; +} + +nav a:hover { + color: #d4af37; /* Couleur dorée au survol + background-color: white; /* Fond blanc au survol +}*/ + +.navbar { + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: white; + height: 4rem; + z-index: 1000; + overflow: hidden; /* Pour s'assurer que le pseudo-élément reste à l'intérieur */ +} + +nav { + float: right; + background-color: transparent; + height: 100%; +} + +nav a { + display: inline-block; + color: rgb(227, 195, 14); + padding: 18px 12px; + text-decoration: none; + transition: ease-in .3s; + font-size: 2rem; /* Augmente la taille de la police */ + /*font-family: Arial, Helvetica, sans-serif; Utilise Arial comme police principale */ + font-family: 'Times New Roman', Times, serif; /* Utilise Times New Roman comme police principale */ + +} + +nav a:hover { + color: black; + cursor: pointer; +} + +.wrapper { + padding-top: 12rem; + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + perspective: 300px; + width: 100vw; + /* Force la largeur du viewport */ + overflow-x: hidden; +} + +.parallax__group { + position: relative; + height: 100vh; + width: 100vw; + transform-style: preserve-3d; +} + +.parallax__layer { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.sky { + background-color: white; + background: url('fond.png') no-repeat; + background-size: contain; + transform: translateZ(-600px) scale(3); + z-index: 1; +} + +.bushes { + background: url('etoiles.png') no-repeat; + background-size: contain; + transform: translateZ(-525px) scale(2.75); + z-index: 2; +} + +.water { + background: url('texte.png') no-repeat; + background-size: contain; + transform: translateZ(-400px) scale(2.33333333); + z-index: 3; +} + +.people1 { + background: url("personnages.png") no-repeat; + background-size: contain; + transform: translateZ(-250px) scale(1.833333333); + z-index: 4; +} + +.info-container { + background-color: #FFEDE5; +} + +/* Style du menu hamburger */ +.menu-icon { + display: none; + /* Caché par défaut */ + flex-direction: column; + cursor: pointer; + position: absolute; + right: 1rem; + top: 1rem; + z-index: 1001; +} + +.menu-icon span { + background: rgb(227, 195, 14); + display: block; + height: 3px; + width: 25px; + margin: 5px 0; + transition: 0.3s; +} + +/* Masquer la case à cocher */ +#menu-toggle { + display: none; +} + +.info-container { + display: flex; /* Utilise flexbox pour aligner le contenu */ + align-items: center; /* Centre verticalement le contenu */ + padding: 2rem; /* Espace autour du contenu */ + background-color: rgba(255, 237, 229, 0.8); /* Fond légèrement coloré */ +} + +.about-content { + display: flex; /* Utilise flexbox pour le contenu de l'à propos */ + width: 100%; /* Prend toute la largeur */ + max-width: 1200px; /* Limite la largeur maximale */ + margin: 0 auto; /* Centre le contenu */ +} + +.about-image { + flex: 1; /* Prend un espace flexible */ + text-align: center; /* Centre l'image horizontalement */ + padding-right: 1rem; /* Espace entre l'image et le texte */ +} + +.about-image img { + width: 80%; /* Ajuste la taille de l'image */ + max-width: 300px; /* Largeur maximale pour l'image */ + border-radius: 15px; /* Bords arrondis */ + box-shadow: 0 0 15px rgba(255, 255, 255, 0.7); /* Halo lumineux */ +} + +.about-text { + flex: 2; /* Prend un espace flexible */ + color: black; /* Couleur du texte */ +} + +.about-text h2 { + font-size: 2rem; /* Taille de la police pour le titre */ + margin-bottom: 1rem; /* Espace sous le titre */ +} + +.about-text p { + font-size: 1rem; /* Taille de la police pour le texte */ +} + +@media screen and (min-width:761px) { + .sky, + .bushes, + .water, + .people1 { + background-size: contain; + /* Remplit toute la largeur */ + /*background-position: center; Centre les images */ + } +} + +@media screen and (max-width: 760px) { + .menu-icon { + display: flex; + } + + nav { + display: none; + flex-direction: column; + position: absolute; + top: 4rem; + left: 0; + width: 100%; + background: white; + text-align: center; + } + + /* Quand la case est cochée, afficher le menu */ + #menu-toggle:checked+.menu-icon+nav { + display: flex; + } + + nav a { + padding: 15px; + display: block; + } +} diff --git a/texte.png b/texte.png new file mode 100644 index 0000000..d44b351 Binary files /dev/null and b/texte.png differ