perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created a central area thinner than banners

Browse Source
This commit is contained in:
asus
2023-11-19 19:02:08 +01:00
parent f80c7608b2
commit 0d55418bf1
7 changed files with 205 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
index.html
View File

@@ -16,25 +16,29 @@
<link href="./styles/elements/title.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/title.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/cv.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/cv.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/infos.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/infos.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/test.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
</head> </head>
<!-- <!--
ids : ids :
<id="personnal_infos"> <section id="infos">
<id="role_title"> <section id="cv">
<id="cv_infos"> <figure id="name">
<id="mouse_1"> <figure id="title">
<id="mouse_2"> <figure id="mouse_1">
<id="mouse_3"> <figure id="mouse_2">
<id="mouse_4"> <figure id="mouse_3">
<id="banner_1"> <figure id="mouse_4">
<id="banner_2"> <figure id="banner_1">
<id="banner_3"> <figure id="banner_2">
<id="banner_4"> <figure id="banner_3">
<id="banner_5"> <figure id="banner_4">
<figure id="banner_5">
<figure id="banner_6">
<figure id="banner_7">
<figure id="banner_8">
original : • 8226 U+2022 original : • 8226 U+2022
:  57442 U+E062 :  57442 U+E062
@@ -70,54 +74,11 @@
<body> <body>
<!-- <!--
ROLE TITLE CV
--> -->
<section id="role_title"> <section id="cv" data-flex="vertical left">
<figure id="name" style="gap:10px 30px;" data-flex="horizontal center wrap"> <h2>voici mon CV, que vous pouvez egalement <a>télécharger en pdf</a></h2>
<pre>
     
      
      
       
    
</pre>
<pre>
     
      
     
     
     
</pre>
</figure>
<figure id="title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
<pre>
             
                   
                 
                   
                
</pre>
<pre>
              
                  
                  
                   
               
</pre>
</figure>
</section>
<!--
END ROLE TITLE
-->
<!--
CV INFOS
-->
<section id="cv_infos" data-flex="vertical left">
<details> <details>
<summary> <summary>
<h2>Informatique</h2> <h2>Informatique</h2>
@@ -171,7 +132,7 @@
</details> </details>
</section> </section>
<!-- <!--
END CV INFOS END CV
--> -->
@@ -179,23 +140,60 @@
<!-- <!--
PERSONNAL INFOS INFOS
--> -->
<section id="personnal_infos" style="margin: 50px auto;"> <section id="infos">
<p>hugogogo@protonmail.com</p> <p>hugogogo@protonmail.com</p>
</section> </section>
<!-- <!--
END PERSONNAL INFOS END INFOS
--> -->
<!-- <!--
MOUSE 1 TITLE AREA
--> -->
<figure class="frames_container mouse" id="mouse_1"> <section id="title_area">
<figure id="name" style="gap:10px 30px;" data-flex="horizontal center wrap">
<pre>
     
      
      
       
    
</pre>
<pre>
     
      
     
     
     
</pre>
</figure>
<figure id="title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
<pre>
             
                   
                 
                   
                
</pre>
<pre>
              
                  
                  
                   
               
</pre>
</figure>
<figure class="frames_container mouse" id="mouse_1">
<pre class="frame f1"> <pre class="frame f1">
     
@@ -268,9 +266,10 @@
       
       
</pre> </pre>
</figure> </figure>
</section>
<!-- <!--
END MOUSE 1 END TITLE AREA
--> -->
@@ -281,7 +280,7 @@
<!-- <!--
MOUSE 2 MOUSE 2
--> -->
<figure class="frames_container mouse" id="mouse_2"> <figure class="frames_container mouse" id="mouse_2">
<pre class="frame f1"> <pre class="frame f1">
   
     
@@ -354,7 +353,7 @@
 
</pre> </pre>
</figure> </figure>
<!-- <!--
END MOUSE 2 END MOUSE 2
--> -->
@@ -367,7 +366,7 @@
<!-- <!--
MOUSE 3 MOUSE 3
--> -->
<figure class="frames_container mouse" id="mouse_3"> <figure class="frames_container mouse" id="mouse_3">
<pre class="frame f1"> <pre class="frame f1">
@@ -432,7 +431,7 @@
   
</pre> </pre>
</figure> </figure>
<!-- <!--
END MOUSE 3 END MOUSE 3
--> -->
@@ -445,7 +444,7 @@
<!-- <!--
MOUSE 4 MOUSE 4
--> -->
<figure class="frames_container mouse" id="mouse_4"> <figure class="frames_container mouse" id="mouse_4">
<pre class="frame f1"> <pre class="frame f1">
@@ -509,7 +508,7 @@
       
   
</pre> </pre>
</figure> </figure>
<!-- <!--
END MOUSE 4 END MOUSE 4
--> -->
@@ -526,13 +525,13 @@
<!-- <!--
BANNER 1 BANNER 1
--> -->
<figure id="banner_1"> <figure id="banner_1">
<pre class="banner"> <pre class="banner">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
</pre> </pre>
</figure> </figure>
<!-- <!--
END BANNER 1 END BANNER 1
--> -->
@@ -546,8 +545,8 @@
<!-- <!--
BANNER 2 BANNER 2
--> -->
<figure id="banner_2"> <figure id="banner_2">
<pre class="banner reverse t1_0"> <pre class="banner reverse t10">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
@@ -561,7 +560,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
</pre> </pre>
</figure> </figure>
<!-- <!--
END BANNER 2 END BANNER 2
--> -->
@@ -576,13 +575,13 @@
<!-- <!--
BANNER 3 BANNER 3
--> -->
<figure id="banner_3"> <figure id="banner_3">
<pre class="banner t2_0 reverse"> <pre class="banner t20 reverse">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
</pre> </pre>
</figure> </figure>
<!-- <!--
END BANNER 3 END BANNER 3
--> -->
@@ -595,8 +594,8 @@
<!-- <!--
BANNER 4 BANNER 4
--> -->
<figure id="banner_4"> <figure id="banner_4">
<pre class="banner t0_5"> <pre class="banner t05">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
@@ -607,7 +606,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
</pre> </pre>
</figure> </figure>
<!-- <!--
END BANNER 4 END BANNER 4
--> -->
@@ -622,8 +621,8 @@
<!-- <!--
BANNER 5 BANNER 5
--> -->
<figure id="banner_5"> <figure id="banner_5">
<pre class="banner reverse"> <pre class="banner reverse t15">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
@@ -640,7 +639,79 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
</pre> </pre>
</figure> </figure>
<!--
END BANNER 5
-->
<!--
BANNER 6
-->
<figure id="banner_6">
<pre class="banner t20">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
</pre>
</figure>
<!--
END BANNER 6
-->
<!--
BANNER 7
-->
<figure id="banner_7">
<pre class="banner t05 reverse">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
</pre>
</figure>
<!--
END BANNER 7
-->
<!--
BANNER 8
-->
<figure id="banner_8">
<pre class="banner t10 reverse">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
</pre>
</figure>
<!-- <!--
END BANNER 5 END BANNER 5
--> -->

8
styles/elements/banners.css
View File

@@ -14,16 +14,16 @@ pre.banner.pause {
pre.banner.reverse { pre.banner.reverse {
animation-direction: reverse; animation-direction: reverse;
} }
pre.banner.t0_5 { pre.banner.t05 {
animation-duration: 0.5s; animation-duration: 0.5s;
} }
pre.banner.t1_0 { pre.banner.t10 {
animation-duration: 1s; animation-duration: 1s;
} }
pre.banner.t1_5 { pre.banner.t15 {
animation-duration: 1.5s; animation-duration: 1.5s;
} }
pre.banner.t2_0 { pre.banner.t20 {
animation-duration: 2s; animation-duration: 2s;
} }
@keyframes slide { @keyframes slide {

22
styles/elements/cv.css
View File

@@ -1,27 +1,27 @@
#cv_infos { #cv {
margin: 10px 10px 30px 10px;
} }
#cv_infos h1,
#cv_infos h2, #cv h1,
#cv_infos h3, #cv h2,
#cv_infos h4, #cv h3,
#cv_infos h5, #cv h4,
#cv_infos h6 { #cv h5,
#cv h6 {
/* /*
place-self: center; place-self: center;
margin-left: var(--list-padding); margin-left: var(--list-padding);
*/ */
} }
#cv_infos details { #cv details {
margin: 10px 0px; margin: 10px 0px;
} }
#cv_infos summary { #cv summary {
/* /*
*/ */
margin-left: var(--list-padding); margin-left: var(--list-padding);
} }
#cv_infos summary + * { #cv summary + * {
margin-top: 10px; margin-top: 10px;
} }

3
styles/elements/mouses.css
View File

@@ -1,7 +1,7 @@
.mouse { .mouse {
position: relative; position: relative;
margin: 0px; margin: 20px 0px;
} }
.frames_container { .frames_container {
display: grid; display: grid;
@@ -48,6 +48,7 @@ pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
#mouse_1 { #mouse_1 {
place-self: center; place-self: center;
margin: auto;
} }
#mouse_2 { #mouse_2 {
left: 10%; left: 10%;

5
styles/elements/sections.css Normal file
View File

@@ -0,0 +1,5 @@
section {
justify-self: center;
margin: 50px 20px;
}

24
styles/elements/test.css
View File

@@ -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;
/*
 
  
  
 

 
 
 
 
   
   
 
    
   
 
*/
}

44
styles/style.css
View File

@@ -5,10 +5,12 @@ html {
--small-space: 10px; --small-space: 10px;
--medium-space: calc(var(--small-space) * 3); --medium-space: calc(var(--small-space) * 3);
--big-space: calc(var(--small-space) * 10); --big-space: calc(var(--small-space) * 10);
--list-padding: 40px; --list-padding: 10px;
} }
body { body {
overflow-x: hidden; overflow-x: hidden;
margin: auto;
width: fit-content;
} }
figure { figure {
overflow: hidden; overflow: hidden;
@@ -25,10 +27,9 @@ pre {
grid grid
*/ */
#personnal_infos { grid-area: infos; } #infos { grid-area: infos; }
#role_title { grid-area: title; } #title_area { grid-area: title; }
#cv_infos { grid-area: cv; } #cv { grid-area: cv; }
#mouse_1 { grid-area: mouse_1; }
#mouse_2 { grid-area: mouse_2; } #mouse_2 { grid-area: mouse_2; }
#mouse_3 { grid-area: mouse_3; } #mouse_3 { grid-area: mouse_3; }
#mouse_4 { grid-area: mouse_4; } #mouse_4 { grid-area: mouse_4; }
@@ -37,24 +38,29 @@ pre {
#banner_3 { grid-area: banner_3;} #banner_3 { grid-area: banner_3;}
#banner_4 { grid-area: banner_4;} #banner_4 { grid-area: banner_4;}
#banner_5 { grid-area: banner_5;} #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 { body {
/* /*
*/ */
margin: 0px;
display: grid; display: grid;
grid: grid:
' title ' auto ' banner_1 banner_1 banner_1 ' auto
' banner_1 ' auto ' . title . ' auto
' mouse_1 ' auto ' banner_2 banner_2 banner_2 ' auto
' banner_2 ' auto ' . cv . ' auto
' cv ' auto ' banner_3 banner_3 banner_3 ' auto
' banner_3 ' auto ' . mouse_2 . ' auto
' banner_4 ' auto ' banner_4 banner_4 banner_4 ' auto
' mouse_2 ' auto ' banner_5 banner_5 banner_5 ' auto
' mouse_3 ' auto ' . mouse_3 . ' auto
' banner_5 ' auto ' banner_6 banner_6 banner_6 ' auto
' mouse_4 ' auto ' banner_7 banner_7 banner_7 ' auto
' infos ' auto ' . mouse_4 . ' auto
/ 1fr ; ' banner_8 banner_8 banner_8 ' auto
' . infos . ' auto
/ 1fr auto 1fr ;
} }