diff --git a/amphi b/amphi new file mode 100644 index 0000000..4349df6 Binary files /dev/null and b/amphi differ diff --git a/cafe.jpg b/cafe.jpg new file mode 100644 index 0000000..3c7145e Binary files /dev/null and b/cafe.jpg differ diff --git a/main b/main index 2644b9b..a08b8b0 100644 --- a/main +++ b/main @@ -12,9 +12,7 @@
-
- Ma vie perso - Ma vie étudiante +
Ma grosse tete la
@@ -32,10 +30,20 @@
- Ma vie perso - Ma vie étudiante -
-
- Ma grosse tete la -
- + diff --git a/style.css b/style.css index 8f6e046..efc89c2 100644 --- a/style.css +++ b/style.css @@ -3,7 +3,6 @@ body { margin: 0; padding: 0; overflow-x: hidden; - border: dashed purple; display: flex; flex-direction:column; } @@ -25,44 +24,33 @@ body { 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{ + display: flex; + justify-content: flex-end; + overflow: hidden; + height: 100vh; } -header { - height: 100vh; /* Header prend aussi tout l'écran */ +#header_wall{ + width: 0vw; display: flex; justify-content: center; align-items: center; - background-color: rgb(51, 45, 45); - border: dashed green; + padding-right: 30vw; + background-color: rgb(73, 73, 73) } -#header_background { - position: absolute; +#photo{ + position:relative; + rotate: 320deg; + transform: scaleX(-1); 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; + width:auto; + justify-self: flex-start; + z-index:-1; + right: -65px; + top: 8vh; + right:200px; } .pages{ @@ -96,16 +84,12 @@ header { .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 */ + font-size: 10vh; padding: 10px; border-radius: 5px; text-decoration: none; } -#titleInformatique{ - position: absolute; - align-self:center; -} - .titleBackground:hover{ color: white; background-color: rgba(0, 0, 0); /* Ajoute un fond semi-transparent derrière le texte */ @@ -113,15 +97,9 @@ header { border-radius: 5px; } -#reseaux{ - text-align: center; -} - -#liens{ - border: dashed blue; - display: flex; - align-items: flex-start; - justify-content: space-around; +#titleInformatique{ + position: absolute; + align-self:center; } .logo{ @@ -129,11 +107,6 @@ header { width: auto; } -#piedPage{ - background: linear-gradient(black, rgb(73, 73, 73)); - height: 500px; -} - #testdiv{ width: 100%; /* Chaque div prend tt la largeur de l'écra */ height: 100vh; /* Chaque div prend tt la hauteur de l'écran */ @@ -144,8 +117,96 @@ header { #imgtest{ height:100vh; width:100%; - background-size: cover; + size: cover; overflow-x: hidden; - object-fit: contain; + object-fit: cover; +} + + +#piedPage{ + background: linear-gradient(black, rgb(73, 73, 73)); + height: 120vh; + display: flex; + align-items:center; + justify-content:flex-end; + flex-direction:column; + padding-bottom: 5vh; + padding-top: 20vh; +} + +.pages{ + color: rgb(73, 73, 73); + font-size: 10vh; + align-self: baseline; + justify-self: space-around; + text-decoration: none; +} + +.illustrations{ + height: 30vh; + border-radius: 20%; +} + +#cafe:hover{ + filter: brightness(60%); +} + +#amphi:hover{ + filter: brightness(60%); +} + +#cafe{ + margin-left:8vw; +} + +#amphi{ + margin-right:8vw; +} + +.divpages{ + width: 100vw; + display:flex; + padding-top:0; +} + +.titleillustrations{ + color: white; + margin:0; + padding:0; + font-size: 300%; + display: flex; + margin: 5% +} + +#paraperso{ + height:100%; + width:100%; + display:flex; + align-items: center; +} + +#paraetudes{ + height:100%; + width:100%; + display:flex; + align-items: center; + justify-content: flex-end; +} + +#asidetitle{ + display:flex; + flex-direction: column; +} + +#reseauxtitle{ + text-align: center; + justify-content: space-around; +} + +#liens{ + display: flex; + align-items: flex-start; + justify-content: space-around; + width:100vw; } diff --git a/test.txt b/test.txt index e69de29..f5a044f 100644 --- a/test.txt +++ b/test.txt @@ -0,0 +1,43 @@ +#photo { + 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: flex-end; + align-items: center; + background-color: rgb(51, 45, 45); + border: dashed green; + flex-wrap: wrap; +} + +#header_wall{ + 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: 3; + border: dashed red; + justify-content: flex-start; +} + + + + + + + Ma vie perso + Ma vie étudiante \ No newline at end of file