Etheryo/saoulbonmonsieur
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Navbar tweaks

Browse source
This commit is contained in:
Yohan Boujon 2023-06-18 16:40:22 +02:00
parent aa6f87f4b4
commit dd303c50f4
4 changed files with 29 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/navbar.html
View file

@ -1 +1,4 @@
<p>Saul Bon Monsieur</p> <nav id="navbar_component">
<p>Saul Bon Monsieur</p>
</nav>
<div id="navbar_padding"></div>

14
css/navbar.css Normal file
View file

@ -0,0 +1,14 @@
#navbar_component {
align-items: center;
display: flex;
height: 5rem;
padding: 0 5rem;
position: fixed;
top: 0;
width: 100%;
background-color: #f5a122;
}
#navbar_padding{
padding: 2.5rem;
}

7
css/saoulbonmonsieur.css
View file

@ -1,3 +1,10 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
scroll-behavior: smooth;
}
.test { .test {
width: 15%; width: 15%;
height: 15%; height: 15%;

4
index.html
View file

@ -6,12 +6,16 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="lib/anime.min.js"></script> <script src="lib/anime.min.js"></script>
<script src="js/componentloader.js"></script> <script src="js/componentloader.js"></script>
<link href="css/navbar.css" rel="stylesheet">
<link href="css/saoulbonmonsieur.css" rel="stylesheet"> <link href="css/saoulbonmonsieur.css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="navbar"></div> <div id="navbar"></div>
<h1>Saul Bonmonsieur</h1>
<img class="test" src="assets/saoul.png"></img> <img class="test" src="assets/saoul.png"></img>
<button onclick="superAnim()">Animate !</button> <button onclick="superAnim()">Animate !</button>
</body> </body>