mouse positions
This commit is contained in:
asus
90
index.html
90
index.html
@@ -8,11 +8,15 @@
|
||||
<title>hugulumu.fr</title>
|
||||
<meta name="description" content="site web de hugo lamy, developpeur">
|
||||
<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/text.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/banners.css" type="text/css" rel="stylesheet">
|
||||
<link href="./styles/elements/mouses.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>
|
||||
|
||||
<!--
|
||||
@@ -65,18 +69,6 @@
|
||||
|
||||
<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
|
||||
-->
|
||||
<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>
|
||||
|
||||
|
||||
@@ -101,7 +93,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</figure>
|
||||
<!--
|
||||
END ROLE TITLE
|
||||
-->
|
||||
@@ -110,14 +102,14 @@
|
||||
<!--
|
||||
CV INFOS
|
||||
-->
|
||||
<section id="cv_infos" class="vertical child-left">
|
||||
<section style="display:none;" id="cv_infos" data-flex="vertical left">
|
||||
<h1>Informatique</h1>
|
||||
<ul>
|
||||
<li>École 42, Paris, 2021-2022, tronc commun - niveau 10</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>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>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer">https://kosmopolit.bitbucket.io</a>, 2021</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"></a>, 2021</li>
|
||||
<li>Site vitrine, association Kosmopolit, <a href="https://kosmopolit.bitbucket.io" target="_blank" rel="noopener noreferrer"></a>, 2021</li>
|
||||
</ul>
|
||||
<h1>Bénévolat</h1>
|
||||
<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
|
||||
-->
|
||||
<div class="frames_container" id="mouse_1">
|
||||
<figure class="frames_container mouse" id="mouse_1">
|
||||
<pre class="frame f1">
|
||||
|
||||
|
||||
@@ -228,7 +235,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</figure>
|
||||
<!--
|
||||
END MOUSE 1
|
||||
-->
|
||||
@@ -241,7 +248,7 @@
|
||||
<!--
|
||||
MOUSE 2
|
||||
-->
|
||||
<div class="frames_container" id="mouse_2">
|
||||
<figure class="frames_container mouse" id="mouse_2">
|
||||
<pre class="frame f1">
|
||||
|
||||
|
||||
@@ -314,7 +321,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</figure>
|
||||
<!--
|
||||
END MOUSE 2
|
||||
-->
|
||||
@@ -327,7 +334,7 @@
|
||||
<!--
|
||||
MOUSE 3
|
||||
-->
|
||||
<div class="frames_container" id="mouse_3">
|
||||
<figure class="frames_container mouse" id="mouse_3">
|
||||
<pre class="frame f1">
|
||||
|
||||
|
||||
@@ -392,7 +399,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</figure>
|
||||
<!--
|
||||
END MOUSE 3
|
||||
-->
|
||||
@@ -405,7 +412,7 @@
|
||||
<!--
|
||||
MOUSE 4
|
||||
-->
|
||||
<div class="frames_container" id="mouse_4">
|
||||
<figure class="frames_container mouse" id="mouse_4">
|
||||
<pre class="frame f1">
|
||||
|
||||
|
||||
@@ -469,7 +476,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</div>
|
||||
</figure>
|
||||
<!--
|
||||
END MOUSE 4
|
||||
-->
|
||||
@@ -479,14 +486,20 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
BANNER 1
|
||||
-->
|
||||
<pre class="banner" id="banner_1">
|
||||
<figure id="banner_1">
|
||||
<pre class="banner">
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
<!--
|
||||
END BANNER 1
|
||||
-->
|
||||
@@ -500,7 +513,8 @@
|
||||
<!--
|
||||
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>
|
||||
</figure>
|
||||
<!--
|
||||
END BANNER 2
|
||||
-->
|
||||
@@ -528,11 +543,13 @@
|
||||
<!--
|
||||
BANNER 3
|
||||
-->
|
||||
<pre class="banner t2_0 reverse" id="banner_3">
|
||||
<figure id="banner_3">
|
||||
<pre class="banner t2_0 reverse">
|
||||
|
||||
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
<!--
|
||||
END BANNER 3
|
||||
-->
|
||||
@@ -545,7 +562,8 @@
|
||||
<!--
|
||||
BANNER 4
|
||||
-->
|
||||
<pre class="banner t0_5" id="banner_4">
|
||||
<figure id="banner_4">
|
||||
<pre class="banner t0_5">
|
||||
|
||||
|
||||
|
||||
@@ -556,6 +574,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
<!--
|
||||
END BANNER 4
|
||||
-->
|
||||
@@ -570,7 +589,8 @@
|
||||
<!--
|
||||
BANNER 5
|
||||
-->
|
||||
<pre class="banner reverse" id="banner_5">
|
||||
<figure id="banner_5">
|
||||
<pre class="banner reverse">
|
||||
|
||||
|
||||
|
||||
@@ -587,6 +607,7 @@
|
||||
|
||||
|
||||
</pre>
|
||||
</figure>
|
||||
<!--
|
||||
END BANNER 5
|
||||
-->
|
||||
@@ -596,8 +617,5 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
|
||||
.mouse {
|
||||
position: relative;
|
||||
margin: 20px 0px 0px 0px;
|
||||
}
|
||||
.frames_container {
|
||||
display: grid;
|
||||
width: fit-content;
|
||||
margin-left: 0px;
|
||||
|
||||
/*
|
||||
border: 1px solid blue;
|
||||
*/
|
||||
@@ -44,3 +46,16 @@ pre.frame.f4 {animation-delay: calc(var(--tframes) * 75/100);}
|
||||
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 {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
figure {
|
||||
overflow: hidden;
|
||||
}
|
||||
script, style {
|
||||
display: none;
|
||||
}
|
||||
@@ -39,17 +42,17 @@ body {
|
||||
*/
|
||||
display: grid;
|
||||
grid:
|
||||
' title ' 1fr
|
||||
' cv ' 1fr
|
||||
' mouse_1 ' 1fr
|
||||
' mouse_2 ' 1fr
|
||||
' mouse_3 ' 1fr
|
||||
' mouse_4 ' 1fr
|
||||
' banner_1 ' 1fr
|
||||
' banner_2 ' 1fr
|
||||
' banner_3 ' 1fr
|
||||
' banner_4 ' 1fr
|
||||
' banner_5 ' 1fr
|
||||
' infos ' 1fr
|
||||
/ 100% ;
|
||||
' title ' auto
|
||||
' banner_2 ' auto
|
||||
' cv ' auto
|
||||
' mouse_1 ' auto
|
||||
' banner_3 ' auto
|
||||
' mouse_2 ' auto
|
||||
' banner_4 ' auto
|
||||
' mouse_3 ' auto
|
||||
' banner_5 ' auto
|
||||
' mouse_4 ' auto
|
||||
' banner_1 ' auto
|
||||
' infos ' auto
|
||||
/ 1fr ;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user