Project 3: Portfolio: Creating the base template and navbar (+70, -0)

styles.css (+36, -0)

From: curriculum/section12/lectures/03_base_template_and_nav_bar/end/portfolio/static/css/styles.css

To: curriculum/section12/lectures/03_base_template_and_nav_bar/end/portfolio/static/css/styles.css

            
            new file mode 100644
index 0000000..be3d6a7
--- /dev/null
+++ b/curriculum/section12/lectures/03_base_template_and_nav_bar/end/portfolio/static/css/styles.css
@@ -0,0 +1,36 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: Lato, "sans-serif";
+}
+
+body {
+  margin-top: 80px;
+}
+
+.header {
+  text-align: center;
+}
+
+.nav {
+  margin-bottom: 3rem;
+  font-size: 1.2rem;
+}
+
+.nav__link {
+  text-decoration: none;
+  color: #1c2023;
+}
+
+.nav__link:not(:last-of-type) {
+  margin-right: 2.5rem;
+}
+
+.nav__link--active,
+.nav__link:hover {
+  font-weight: bold;
+}

base.html (+34, -0)

From: curriculum/section12/lectures/03_base_template_and_nav_bar/start/portfolio/templates/base.html

To: curriculum/section12/lectures/03_base_template_and_nav_bar/end/portfolio/templates/base.html

            
            index e69de29..f95a880 100644
--- a/curriculum/section12/lectures/03_base_template_and_nav_bar/start/portfolio/templates/base.html
+++ b/curriculum/section12/lectures/03_base_template_and_nav_bar/end/portfolio/templates/base.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta name="viewport" content="width=device-width">
+    <title>Bob Smith | Portfolio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}" />
+</head>
+
+<body>
+    <header class="header">
+        <h1>Bob Smith</h1>
+
+        <nav class="nav">
+            <a href="{{ url_for('home') }}" class="nav__link {{ 'nav__link--active' if request.path == url_for('home') }}">
+                Projects
+            </a>
+            <a href="{{ url_for('about') }}" class="nav__link {{ 'nav__link--active' if request.path == url_for('about') }}">
+                About
+            </a>
+            <a href="{{ url_for('contact') }}" class="nav__link {{ 'nav__link--active' if request.path == url_for('contact') }}">
+                Contact
+            </a>
+        </nav>
+    </header>
+
+    {% block content %}
+    {% endblock %}
+</body>
+
+</html>