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

209
index.html
View File

@@ -16,25 +16,29 @@
<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/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>
<!--
ids :
<id="personnal_infos">
<id="role_title">
<id="cv_infos">
<id="mouse_1">
<id="mouse_2">
<id="mouse_3">
<id="mouse_4">
<id="banner_1">
<id="banner_2">
<id="banner_3">
<id="banner_4">
<id="banner_5">
<section id="infos">
<section id="cv">
<figure id="name">
<figure id="title">
<figure id="mouse_1">
<figure id="mouse_2">
<figure id="mouse_3">
<figure id="mouse_4">
<figure id="banner_1">
<figure id="banner_2">
<figure id="banner_3">
<figure id="banner_4">
<figure id="banner_5">
<figure id="banner_6">
<figure id="banner_7">
<figure id="banner_8">
original : • 8226 U+2022
:  57442 U+E062
@@ -70,54 +74,11 @@
<body>
<!--
ROLE TITLE
CV
-->
<section id="role_title">
<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>
</section>
<!--
END ROLE TITLE
-->
<!--
CV INFOS
-->
<section id="cv_infos" data-flex="vertical left">
<section id="cv" data-flex="vertical left">
<h2>voici mon CV, que vous pouvez egalement <a>télécharger en pdf</a></h2>
<details>
<summary>
<h2>Informatique</h2>
@@ -171,7 +132,7 @@
</details>
</section>
<!--
END CV INFOS
END CV
-->
@@ -179,22 +140,59 @@
<!--
PERSONNAL INFOS
INFOS
-->
<section id="personnal_infos" style="margin: 50px auto;">
<section id="infos">
<p>hugogogo@protonmail.com</p>
</section>
<!--
END PERSONNAL INFOS
END INFOS
-->
<!--
MOUSE 1
TITLE AREA
-->
<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">
@@ -269,8 +267,9 @@
   
</pre>
</figure>
</section>
<!--
END MOUSE 1
END TITLE AREA
-->
@@ -547,7 +546,7 @@
BANNER 2
-->
<figure id="banner_2">
<pre class="banner reverse t1_0">
<pre class="banner reverse t10">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
@@ -577,7 +576,7 @@
BANNER 3
-->
<figure id="banner_3">
<pre class="banner t2_0 reverse">
<pre class="banner t20 reverse">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
@@ -596,7 +595,7 @@
BANNER 4
-->
<figure id="banner_4">
<pre class="banner t0_5">
<pre class="banner t05">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
@@ -623,7 +622,7 @@
BANNER 5
-->
<figure id="banner_5">
<pre class="banner reverse">
<pre class="banner reverse t15">
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                                                                                                                                                                                                                                                           
@@ -650,5 +649,77 @@
<!--
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
-->
</body>
</html>

8
styles/elements/banners.css
View File

@@ -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 {

22
styles/elements/cv.css
View File

@@ -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;
}

3
styles/elements/mouses.css
View File

@@ -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%;

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;
--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 ;
}