got a very basic navbar working, now need to learn the actual styling to make it fit
This commit is contained in:
parent
99e59d0cb9
commit
dc3b11cf03
@ -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;
|
||||
|
@ -2,6 +2,8 @@
|
||||
|
||||
{% block content %}
|
||||
|
||||
{% include "navbar.html" %}
|
||||
|
||||
<!-- {% include "forms.html" %} -->
|
||||
|
||||
{% include "test.html" %}
|
||||
|
18
flask_soc_site/templates/navbar.html
Normal file
18
flask_soc_site/templates/navbar.html
Normal 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>
|
Loading…
x
Reference in New Issue
Block a user