Jinja2 Mastery: Level 1: How to handle CSS in larger pages (+18, -27)

            
                
            
            new file mode 100644
index 0000000..41f0d95
--- /dev/null
+++ b/curriculum/section09/lectures/07_handle_css_larger_pages/end/static/css/style.css
@@ -0,0 +1,15 @@
+.todo {
+  margin: 8px 16px;
+  padding: 12px 24px;
+  border: 1px solid black;
+  border-radius: 4px;
+}
+
+.todo--completed {
+  background-color: aquamarine;
+}
+
+.todo--pending {
+  background-color: darkred;
+  color: white;
+}
        

            
                
            
            index f0654f7..a83bcaa 100644
--- a/curriculum/section09/lectures/07_handle_css_larger_pages/start/templates/base.html
+++ b/curriculum/section09/lectures/07_handle_css_larger_pages/end/templates/base.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ title or "Todos" }}</title>
+  <link rel="stylesheet" href="/static/css/style.css" />
   {% block head %}
   {% endblock %}
 </head>
        

            
                
            
            index 8bc3056..1f79d28 100644
--- a/curriculum/section09/lectures/07_handle_css_larger_pages/start/templates/todo.html
+++ b/curriculum/section09/lectures/07_handle_css_larger_pages/end/templates/todo.html
@@ -1,36 +1,11 @@
 {% extends 'base.html' %}
 
-{% block head %}
-  {% if completed %}
-    <style>
-      p {
-        margin: 8px 16px;
-        background-color: aquamarine;
-        padding: 12px 24px;
-        border: 1px solid black;
-        border-radius: 4px;
-      }
-    </style>
-  {% else %}
-    <style>
-      p {
-        margin: 8px 16px;
-        background-color: darkred;
-        color: white;
-        padding: 12px 24px;
-        border: 1px solid black;
-        border-radius: 4px;
-      }
-    </style>
-  {% endif %}
-{% endblock %}
-
 {% block content %}
   <h1>{{ text }}</h1>
   
   {% if completed %}
-    <p>You've completed this todo! 🚀</p>
+    <p class="todo todo--completed">You've completed this todo! 🚀</p>
   {% else %}
-    <p>You haven't completed this yet. Why not do it now?</p>
+    <p class="todo todo--pending">You haven't completed this yet. Why not do it now?</p>
   {% endif %}
 {% endblock %}