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

added navbar

Browse Source
This commit is contained in:
asus
2023-12-06 15:45:28 +01:00
parent cf8ec07002
commit 59382b8d21
5 changed files with 37 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
index.html
View File

@@ -16,7 +16,7 @@
<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/nav.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/nav.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/sections.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/sections.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/home.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/hero.css" type="text/css" rel="stylesheet">
<link href="./styles/elements/projects.css" type="text/css" rel="stylesheet"> <link href="./styles/elements/projects.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">
@@ -35,11 +35,23 @@
--> -->
<body id="body"> <body id="body">
<main> <main id="top">
<header> <nav>
<h1 aria-label="hugo lamy" id="name" class="title"> <a href="#top">accueil</a>
<a href="#projects">projets</a>
<a href="#cv">cv</a>
<a href="#infos">contact</a>
</nav>
<!--
HERO SECTION
-->
<section class="section hero" id="hero">
<header>
<h1 aria-label="hugo lamy" id="name" class="title">
<span aria-hidden="true" class="pre"> <span aria-hidden="true" class="pre">
           
             
@@ -54,8 +66,8 @@
           
           
</span> </span>
</h1> </h1>
<h1 aria-label="programmeur informatique" id="title" class="title"> <h1 aria-label="programmeur informatique" id="title" class="title">
<span aria-hidden="true" class="pre"> <span aria-hidden="true" class="pre">
                           
                                       
@@ -70,33 +82,9 @@
                                       
                               
</span> </span>
</h1> </h1>
</header>
<nav>
<a href="#home">accueil</a>
<a href="#projects">projets</a>
<a href="#cv">cv</a>
<a href="#infos">contacte</a>
</nav>
<!--
HOME
-->
<section class="section home" id="home">
<header>
</header> </header>
<article>
</article>
<div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art"> <div class="frames_container mouse" id="mouse_1" role="img" aria-label="mouse animated in ASCII art">
<pre class="frame f1" aria-hidden="true"> <pre class="frame f1" aria-hidden="true">
@@ -190,14 +178,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
</pre> </pre>
</div> </div>
</section> </section>
<!--
END TITLE AREA
-->
@@ -330,9 +311,6 @@
</div> </div>
</section> </section>
<!--
END PROJECTS
-->
@@ -494,9 +472,6 @@
</div> </div>
</section> </section>
<!--
END CV
-->
@@ -584,9 +559,6 @@
</div> </div>
</section> </section>
<!--
END CV
-->

15
styles/elements/hero.css Normal file
View File

@@ -0,0 +1,15 @@
#hero {
grid-template-rows: 1fr auto auto;
height: 100vh;
/*
grid-template-rows: 1fr 50px auto auto;
*/
}
#hero header {
}
#hero .mouse {
}
#hero .banner {
}

14
styles/elements/home.css
View File

@@ -1,14 +0,0 @@
#home {
height: 100vh;
grid-template-rows: 1fr 1fr auto auto;
/*
grid-template-rows: 1fr 50px auto auto;
*/
}
#home article {
/*
height: 10000vh;
*/
}

4
styles/elements/nav.css
View File

@@ -3,11 +3,11 @@ nav {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
position: -webkit-sticky; position: fixed;
position: sticky;
top: 0; top: 0;
background-color: #f6f6f6; background-color: #f6f6f6;
z-index: 1; z-index: 1;
width: 100vw;
} }
nav a { nav a {
position: relative; position: relative;

1
styles/elements/sections.css
View File

@@ -16,6 +16,7 @@ section {
/ 1fr auto 1fr ; / 1fr auto 1fr ;
grid-gap: 10px; grid-gap: 10px;
gap: 10px; gap: 10px;
min-height: 100vh;
} }
section header { section header {