mouse positions
This commit is contained in:
asus
90
index.html
90
index.html
@@ -8,11 +8,15 @@
|
|||||||
<title>hugulumu.fr</title>
|
<title>hugulumu.fr</title>
|
||||||
<meta name="description" content="site web de hugo lamy, developpeur">
|
<meta name="description" content="site web de hugo lamy, developpeur">
|
||||||
<link href="./styles/style.css" type="text/css" rel="stylesheet">
|
<link href="./styles/style.css" type="text/css" rel="stylesheet">
|
||||||
|
<link href="./styles/reset.css" type="text/css" rel="stylesheet">
|
||||||
<link href="./styles/global.css" type="text/css" rel="stylesheet">
|
<link href="./styles/global.css" type="text/css" rel="stylesheet">
|
||||||
<link href="./styles/text.css" type="text/css" rel="stylesheet">
|
<link href="./styles/text.css" type="text/css" rel="stylesheet">
|
||||||
<link href="./styles/pre.css" type="text/css" rel="stylesheet">
|
<link href="./styles/pre.css" type="text/css" rel="stylesheet">
|
||||||
<link href="./styles/frames.css" type="text/css" rel="stylesheet">
|
<link href="./styles/elements/mouses.css" type="text/css" rel="stylesheet">
|
||||||
<link href="./styles/banners.css" type="text/css" rel="stylesheet">
|
<link href="./styles/elements/banners.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/infos.css" type="text/css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
@@ -65,18 +69,6 @@
|
|||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!--
|
|
||||||
PERSONNAL INFOS
|
|
||||||
-->
|
|
||||||
<section id="personnal_infos">
|
|
||||||
<p>+33 (0)7 67 04 11 14</p>
|
|
||||||
<p>www.hugulumu.fr</p>
|
|
||||||
<p>hugogogo@protonmail.com</p>
|
|
||||||
</section>
|
|
||||||
<!--
|
|
||||||
END PERSONNAL INFOS
|
|
||||||
-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -86,7 +78,7 @@
|
|||||||
<!--
|
<!--
|
||||||
ROLE TITLE
|
ROLE TITLE
|
||||||
-->
|
-->
|
||||||
<div id="role_title" class="horizontal child-left width-content wrap gap margin-medium margin-top margin-bottom">
|
<figure id="role_title" style="gap:10px 30px; margin:30px 0px;" data-flex="horizontal center wrap">
|
||||||
<pre>
|
<pre>
|
||||||
|
|
||||||
|
|
||||||
@@ -101,7 +93,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END ROLE TITLE
|
END ROLE TITLE
|
||||||
-->
|
-->
|
||||||
@@ -110,14 +102,14 @@
|
|||||||
<!--
|
<!--
|
||||||
CV INFOS
|
CV INFOS
|
||||||
-->
|
-->
|
||||||
<section id="cv_infos" class="vertical child-left">
|
<section style="display:none;" id="cv_infos" data-flex="vertical left">
|
||||||
<h1>Informatique</h1>
|
<h1>Informatique</h1>
|
||||||
<ul>
|
<ul>
|
||||||
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
|
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</li>
|
||||||
<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
|
<li>SIMPLON, développeur full-stack JavaScript, 2018</li>
|
||||||
<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer">https://2022.lejourdesprofs.org/#programme</a>, 2022</li>
|
<li>Backend, plugin WordPress avec API Google Maps, <a href="https://2022.lejourdesprofs.org/#programme" target="_blank" rel="noopener noreferrer"></a>, 2022</li>
|
||||||
<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer">https://www.bloc-house.org</a>, 2021</li>
|
<li>Full-stack, reprise d’un site d’artistes en php, <a href="https://www.bloc-house.org" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
|
||||||
<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer">https://kosmopolit.bitbucket.io</a>, 2021</li>
|
<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
|
||||||
</ul>
|
</ul>
|
||||||
<h1>Bénévolat</h1>
|
<h1>Bénévolat</h1>
|
||||||
<ul>
|
<ul>
|
||||||
@@ -151,11 +143,26 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
PERSONNAL INFOS
|
||||||
|
-->
|
||||||
|
<section id="personnal_infos" style="margin: 50px auto;">
|
||||||
|
<p>+33 (0)7 67 04 11 14</p>
|
||||||
|
<p>www.hugulumu.fr</p>
|
||||||
|
<p>hugogogo@protonmail.com</p>
|
||||||
|
</section>
|
||||||
|
<!--
|
||||||
|
END PERSONNAL INFOS
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
MOUSE 1
|
MOUSE 1
|
||||||
-->
|
-->
|
||||||
<div class="frames_container" id="mouse_1">
|
<figure class="frames_container mouse" id="mouse_1">
|
||||||
<pre class="frame f1">
|
<pre class="frame f1">
|
||||||
|
|
||||||
|
|
||||||
@@ -228,7 +235,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END MOUSE 1
|
END MOUSE 1
|
||||||
-->
|
-->
|
||||||
@@ -241,7 +248,7 @@
|
|||||||
<!--
|
<!--
|
||||||
MOUSE 2
|
MOUSE 2
|
||||||
-->
|
-->
|
||||||
<div class="frames_container" id="mouse_2">
|
<figure class="frames_container mouse" id="mouse_2">
|
||||||
<pre class="frame f1">
|
<pre class="frame f1">
|
||||||
|
|
||||||
|
|
||||||
@@ -314,7 +321,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END MOUSE 2
|
END MOUSE 2
|
||||||
-->
|
-->
|
||||||
@@ -327,7 +334,7 @@
|
|||||||
<!--
|
<!--
|
||||||
MOUSE 3
|
MOUSE 3
|
||||||
-->
|
-->
|
||||||
<div class="frames_container" id="mouse_3">
|
<figure class="frames_container mouse" id="mouse_3">
|
||||||
<pre class="frame f1">
|
<pre class="frame f1">
|
||||||
|
|
||||||
|
|
||||||
@@ -392,7 +399,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END MOUSE 3
|
END MOUSE 3
|
||||||
-->
|
-->
|
||||||
@@ -405,7 +412,7 @@
|
|||||||
<!--
|
<!--
|
||||||
MOUSE 4
|
MOUSE 4
|
||||||
-->
|
-->
|
||||||
<div class="frames_container" id="mouse_4">
|
<figure class="frames_container mouse" id="mouse_4">
|
||||||
<pre class="frame f1">
|
<pre class="frame f1">
|
||||||
|
|
||||||
|
|
||||||
@@ -469,7 +476,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
</div>
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END MOUSE 4
|
END MOUSE 4
|
||||||
-->
|
-->
|
||||||
@@ -479,14 +486,20 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
BANNER 1
|
BANNER 1
|
||||||
-->
|
-->
|
||||||
<pre class="banner" id="banner_1">
|
<figure id="banner_1">
|
||||||
|
<pre class="banner">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END BANNER 1
|
END BANNER 1
|
||||||
-->
|
-->
|
||||||
@@ -500,7 +513,8 @@
|
|||||||
<!--
|
<!--
|
||||||
BANNER 2
|
BANNER 2
|
||||||
-->
|
-->
|
||||||
<pre class="banner reverse t1_0" id="banner_2">
|
<figure id="banner_2">
|
||||||
|
<pre class="banner reverse t1_0">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -514,6 +528,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END BANNER 2
|
END BANNER 2
|
||||||
-->
|
-->
|
||||||
@@ -528,11 +543,13 @@
|
|||||||
<!--
|
<!--
|
||||||
BANNER 3
|
BANNER 3
|
||||||
-->
|
-->
|
||||||
<pre class="banner t2_0 reverse" id="banner_3">
|
<figure id="banner_3">
|
||||||
|
<pre class="banner t2_0 reverse">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END BANNER 3
|
END BANNER 3
|
||||||
-->
|
-->
|
||||||
@@ -545,7 +562,8 @@
|
|||||||
<!--
|
<!--
|
||||||
BANNER 4
|
BANNER 4
|
||||||
-->
|
-->
|
||||||
<pre class="banner t0_5" id="banner_4">
|
<figure id="banner_4">
|
||||||
|
<pre class="banner t0_5">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -556,6 +574,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END BANNER 4
|
END BANNER 4
|
||||||
-->
|
-->
|
||||||
@@ -570,7 +589,8 @@
|
|||||||
<!--
|
<!--
|
||||||
BANNER 5
|
BANNER 5
|
||||||
-->
|
-->
|
||||||
<pre class="banner reverse" id="banner_5">
|
<figure id="banner_5">
|
||||||
|
<pre class="banner reverse">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -587,6 +607,7 @@
|
|||||||
|
|
||||||
|
|
||||||
</pre>
|
</pre>
|
||||||
|
</figure>
|
||||||
<!--
|
<!--
|
||||||
END BANNER 5
|
END BANNER 5
|
||||||
-->
|
-->
|
||||||
@@ -596,8 +617,5 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,9 +1,11 @@
|
|||||||
|
|
||||||
|
.mouse {
|
||||||
|
position: relative;
|
||||||
|
margin: 20px 0px 0px 0px;
|
||||||
|
}
|
||||||
.frames_container {
|
.frames_container {
|
||||||
display: grid;
|
display: grid;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-left: 0px;
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
border: 1px solid blue;
|
border: 1px solid blue;
|
||||||
*/
|
*/
|
||||||
@@ -44,3 +46,16 @@ pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
|||||||
100% {opacity: 0;}
|
100% {opacity: 0;}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#mouse_1 {
|
||||||
|
place-self: center;
|
||||||
|
}
|
||||||
|
#mouse_2 {
|
||||||
|
left: 10%;
|
||||||
|
}
|
||||||
|
#mouse_3 {
|
||||||
|
left: 60%;
|
||||||
|
}
|
||||||
|
#mouse_4 {
|
||||||
|
left: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -9,6 +9,9 @@ html {
|
|||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
figure {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
script, style {
|
script, style {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -39,17 +42,17 @@ body {
|
|||||||
*/
|
*/
|
||||||
display: grid;
|
display: grid;
|
||||||
grid:
|
grid:
|
||||||
' title ' 1fr
|
' title ' auto
|
||||||
' cv ' 1fr
|
' banner_2 ' auto
|
||||||
' mouse_1 ' 1fr
|
' cv ' auto
|
||||||
' mouse_2 ' 1fr
|
' mouse_1 ' auto
|
||||||
' mouse_3 ' 1fr
|
' banner_3 ' auto
|
||||||
' mouse_4 ' 1fr
|
' mouse_2 ' auto
|
||||||
' banner_1 ' 1fr
|
' banner_4 ' auto
|
||||||
' banner_2 ' 1fr
|
' mouse_3 ' auto
|
||||||
' banner_3 ' 1fr
|
' banner_5 ' auto
|
||||||
' banner_4 ' 1fr
|
' mouse_4 ' auto
|
||||||
' banner_5 ' 1fr
|
' banner_1 ' auto
|
||||||
' infos ' 1fr
|
' infos ' auto
|
||||||
/ 100% ;
|
/ 1fr ;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user