Begin work on nav bar and make it responsive

77ca2c53 · Ethan Clay (Student) · 2e1271af · 2e1271af · 77ca2c53 · 77ca2c53
Commit 77ca2c53 authored 7 months ago by Ethan Clay (Student)
--- a/__pycache__/app.cpython-38.pyc
+++ b/__pycache__/app.cpython-38.pyc
--- a/__pycache__/config.cpython-38.pyc
+++ b/__pycache__/config.cpython-38.pyc
--- a/app/static/images/nav_icon.jpeg
+++ b/app/static/images/nav_icon.jpeg
--- a/app/static/navigation.css
+++ b/app/static/navigation.css
+.nav_div img {
+    height: 70px;
+    margin-left: 35px;
+}
+
+.nav_div .navbar ul li {
+    list-style-type: none;
+    display: inherit;
+    flex-direction: row;
+    padding: 5px 0;
+}
+
+.nav_div .navbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height:70px;
+}
+
+.nav_div .navbar ul {
+    display: flex;
+    justify-content: space-evenly;
+    width:100%;
+}
+
+.nav_div {
+    display: flex;
+}
--- a/app/templates/navigation.html
+++ b/app/templates/navigation.html
 <!DOCTYPE html>
 <html>
    <head>
-        <link rel="stylesheet" href="../../static/navigation.css">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='navigation.css')}}">
    </head>
    <body>
-        <h1>Something</h1>
-    <nav>
-        <a href="{{ url_for('main.index') }}">Home Page</a>
-        <a href="#">Posts</a>
+        <div class="nav_div">
+            <!-- https://images.ctfassets.net/hrltx12pl8hq/7JnR6tVVwDyUM8Cbci3GtJ/bf74366cff2ba271471725d0b0ef418c/shutterstock_376532611-og.jpg -->
+            <img src="{{ url_for('static', filename='images/nav_icon.jpeg')}}">
+            <nav class="navbar">
+                <ul>
+                    <li><a href="#">Home</a></li>
+                    <li><a href="#">About</a></li>
+                    <li><a href="#">Pricing</a></li>
+                    <li><a href="#">Terms of use</a></li>
+                    <li><a href="#">Contact</a></li>
+                </ul>
            </nav>
+        </div>
+
        <hr>
+        
+        <h1>Content</h1>
        <div class="content">
            {% block content %} {% endblock %}
        </div>

--- a/static/navigation.css
+++ b/static/navigation.css
-/* CSS Stylesheet for Navigation bar */
-
-h1 {
-    font-size: 1050px;
-    color: red;
-}
\ No newline at end of file