From 0d55418bf1842da2396a9dfa7929e8a7337ec54e Mon Sep 17 00:00:00 2001 From: asus Date: Sun, 19 Nov 2023 19:02:08 +0100 Subject: [PATCH] created a central area thinner than banners --- index.html | 245 ++++++++++++++++++++++------------- styles/elements/banners.css | 8 +- styles/elements/cv.css | 22 ++-- styles/elements/mouses.css | 3 +- styles/elements/sections.css | 5 + styles/elements/test.css | 24 ---- styles/style.css | 44 ++++--- 7 files changed, 205 insertions(+), 146 deletions(-) create mode 100644 styles/elements/sections.css delete mode 100644 styles/elements/test.css diff --git a/index.html b/index.html index ef2c589..263935f 100644 --- a/index.html +++ b/index.html @@ -16,25 +16,29 @@ - + -
-
-
-         
-                
-           
-               
-      
-
-
-               
-              
-             
-                 
-             
-
-
-
-
-                         
-                                         
-                           
-                                             
-                                
-
-
-                         
-                                                 
-                                       
-                                                  
-                                 
-
-
-
- - - - -
+
+

voici mon CV, que vous pouvez egalement télécharger en pdf

Informatique

@@ -171,7 +132,7 @@
@@ -179,23 +140,60 @@ -
+

hugogogo@protonmail.com

+ + + + -
+
+
+
+         
+                
+           
+               
+      
+
+
+               
+              
+             
+                 
+             
+
+
+
+
+                         
+                                         
+                           
+                                             
+                                
+
+
+                         
+                                                 
+                                       
+                                                  
+                                 
+
+
+ 
        
                           
@@ -268,9 +266,10 @@
                                 
                              
-
+
+
@@ -281,7 +280,7 @@ -
+ 
               
                 
@@ -354,7 +353,7 @@
  
       
-
+
@@ -367,7 +366,7 @@ -
+ 
                    
                    
@@ -432,7 +431,7 @@
         
           
-
+
@@ -445,7 +444,7 @@ -
+ 
                       
                       
@@ -509,7 +508,7 @@
                      
       
-
+
@@ -526,13 +525,13 @@ - @@ -546,8 +545,8 @@ - @@ -576,13 +575,13 @@ - @@ -595,8 +594,8 @@ - @@ -622,8 +621,8 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles/elements/banners.css b/styles/elements/banners.css index 5df6477..c4c7275 100644 --- a/styles/elements/banners.css +++ b/styles/elements/banners.css @@ -14,16 +14,16 @@ pre.banner.pause { pre.banner.reverse { animation-direction: reverse; } -pre.banner.t0_5 { +pre.banner.t05 { animation-duration: 0.5s; } -pre.banner.t1_0 { +pre.banner.t10 { animation-duration: 1s; } -pre.banner.t1_5 { +pre.banner.t15 { animation-duration: 1.5s; } -pre.banner.t2_0 { +pre.banner.t20 { animation-duration: 2s; } @keyframes slide { diff --git a/styles/elements/cv.css b/styles/elements/cv.css index ce63820..a7b1f45 100644 --- a/styles/elements/cv.css +++ b/styles/elements/cv.css @@ -1,27 +1,27 @@ -#cv_infos { - margin: 10px 10px 30px 10px; +#cv { } -#cv_infos h1, -#cv_infos h2, -#cv_infos h3, -#cv_infos h4, -#cv_infos h5, -#cv_infos h6 { + +#cv h1, +#cv h2, +#cv h3, +#cv h4, +#cv h5, +#cv h6 { /* place-self: center; margin-left: var(--list-padding); */ } -#cv_infos details { +#cv details { margin: 10px 0px; } -#cv_infos summary { +#cv summary { /* */ margin-left: var(--list-padding); } -#cv_infos summary + * { +#cv summary + * { margin-top: 10px; } diff --git a/styles/elements/mouses.css b/styles/elements/mouses.css index 7bb8a68..531f9f1 100644 --- a/styles/elements/mouses.css +++ b/styles/elements/mouses.css @@ -1,7 +1,7 @@ .mouse { position: relative; - margin: 0px; + margin: 20px 0px; } .frames_container { display: grid; @@ -48,6 +48,7 @@ pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);} #mouse_1 { place-self: center; + margin: auto; } #mouse_2 { left: 10%; diff --git a/styles/elements/sections.css b/styles/elements/sections.css new file mode 100644 index 0000000..cde8f7a --- /dev/null +++ b/styles/elements/sections.css @@ -0,0 +1,5 @@ +section { + justify-self: center; + margin: 50px 20px; +} + diff --git a/styles/elements/test.css b/styles/elements/test.css deleted file mode 100644 index 275e2d8..0000000 --- a/styles/elements/test.css +++ /dev/null @@ -1,24 +0,0 @@ - -#test::after { - content: "  \a   \a   \a  \a \a  \a  \a  \a  \a    \a    \a  \a     \a    \a  \a "; - white-space: pre-wrap; -/* - -   -    -    -   -  -   -   -   -   -     -     -   -      -     -  -  -*/ -} diff --git a/styles/style.css b/styles/style.css index dbaa05e..91e0904 100644 --- a/styles/style.css +++ b/styles/style.css @@ -5,10 +5,12 @@ html { --small-space: 10px; --medium-space: calc(var(--small-space) * 3); --big-space: calc(var(--small-space) * 10); - --list-padding: 40px; + --list-padding: 10px; } body { overflow-x: hidden; + margin: auto; + width: fit-content; } figure { overflow: hidden; @@ -25,10 +27,9 @@ pre { grid */ -#personnal_infos { grid-area: infos; } -#role_title { grid-area: title; } -#cv_infos { grid-area: cv; } -#mouse_1 { grid-area: mouse_1; } +#infos { grid-area: infos; } +#title_area { grid-area: title; } +#cv { grid-area: cv; } #mouse_2 { grid-area: mouse_2; } #mouse_3 { grid-area: mouse_3; } #mouse_4 { grid-area: mouse_4; } @@ -37,24 +38,29 @@ pre { #banner_3 { grid-area: banner_3;} #banner_4 { grid-area: banner_4;} #banner_5 { grid-area: banner_5;} +#banner_6 { grid-area: banner_6;} +#banner_7 { grid-area: banner_7;} +#banner_8 { grid-area: banner_8;} body { /* */ - margin: 0px; display: grid; grid: - ' title ' auto - ' banner_1 ' auto - ' mouse_1 ' auto - ' banner_2 ' auto - ' cv ' auto - ' banner_3 ' auto - ' banner_4 ' auto - ' mouse_2 ' auto - ' mouse_3 ' auto - ' banner_5 ' auto - ' mouse_4 ' auto - ' infos ' auto - / 1fr ; + ' banner_1 banner_1 banner_1 ' auto + ' . title . ' auto + ' banner_2 banner_2 banner_2 ' auto + ' . cv . ' auto + ' banner_3 banner_3 banner_3 ' auto + ' . mouse_2 . ' auto + ' banner_4 banner_4 banner_4 ' auto + ' banner_5 banner_5 banner_5 ' auto + ' . mouse_3 . ' auto + ' banner_6 banner_6 banner_6 ' auto + ' banner_7 banner_7 banner_7 ' auto + ' . mouse_4 . ' auto + ' banner_8 banner_8 banner_8 ' auto + ' . infos . ' auto + / 1fr auto 1fr ; } +