got a very basic navbar working, now need to learn the actual styling to make it fit

This commit is contained in:
Joost Agterhoek 2025-04-26 21:22:04 +02:00
parent 99e59d0cb9
commit dc3b11cf03
3 changed files with 62 additions and 0 deletions

View File

@ -15,6 +15,48 @@ body {
margin: 0;
}
a {
text-decoration: none;
}
.navbar {
display: flex;
align-items: center;
background-color: #333333;
}
.navbar a {
color: #e7e7e7;
}
.navbar ul {
margin: 0;
padding: 0;
list-style-type: 0;
display: flex;
align-items: center;
}
.navbar .brand {
display: block;
color: #e7e7e7;
padding: 0 24px;
font-size: 24px;
}
.navbar ul li a {
color: #e7e7e7;
padding: 24px;
display: block;
}
.navbar ul a:hover,
.navbar ul a:focus {
background-color: #272727;
}
.headings {
color: #fdc105;
display: flex;

View File

@ -2,6 +2,8 @@
{% block content %}
{% include "navbar.html" %}
<!-- {% include "forms.html" %} -->
{% include "test.html" %}

View File

@ -0,0 +1,18 @@
<!--
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
-->
<!--Continue from: https://dev.to/roccosangellino/how-to-build-a-simple-navbar-with-html-and-css-945-->
<nav class="navbar">
<ul>
<li><b><a href="#">Home</a></b></li>
<li><b><a href="#">History</a></b></li>
</ul>
</nav>