Project 3: Portfolio: Adding a contact page to our Flask app (+65, -0)

            
                
            
            index 6415dda..a9cf8e9 100644
--- a/curriculum/section12/lectures/05_adding_contact_page_to_flask_app/start/portfolio/static/css/styles.css
+++ b/curriculum/section12/lectures/05_adding_contact_page_to_flask_app/end/portfolio/static/css/styles.css
@@ -44,3 +44,37 @@ body {
   padding: 0 1rem;
   line-height: 150%;
 }
+
+.contact {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+.contact__details {
+  /* 1ch is equivalent to the width of the 0 character at the current
+       font size. This allows to create a roughly one letter gap bewteen
+       the contact label and the associated contact detail */
+
+  margin-left: 1ch;
+}
+
+.contact__link {
+  color: #000;
+  text-decoration: none;
+
+  /* We can modify the text decoration colour and thickness to
+       create a custom underline, but the text-decoration-thickness
+       property isn't currently supported on Chrome.
+       
+       Using box-shadow to simulate the underline gives us a
+       cross-browser solution. */
+
+  box-shadow: 0 3px 0 0 #4cafda;
+}
+
+.contact__link:hover {
+  color: #4cafda;
+}
        

            
                
            
            index e69de29..8cb6a3a 100644
--- a/curriculum/section12/lectures/05_adding_contact_page_to_flask_app/start/portfolio/templates/contact.html
+++ b/curriculum/section12/lectures/05_adding_contact_page_to_flask_app/end/portfolio/templates/contact.html
@@ -0,0 +1,31 @@
+{% extends 'base.html' %}
+{% block content %}
+    <main class="main main--contact">
+        <dl>
+            <div class="contact">
+                <dt>Email:</dt>
+                <dd class="contact__details">
+                    <a class="contact__link" href="mailto:jose@tecladocode.com">
+                        jose [at] tecladocode.com
+                    </a>
+                </dd>
+            </div>
+            <div class="contact">
+                <dt>GitHub:</dt>
+                <dd class="contact__details">
+                    <a class="contact__link" href="https://github.com/tecladocode">
+                        @tecladocode
+                    </a>
+                </dd>
+            </div>
+            <div class="contact">
+                <dt>Twitter:</dt>
+                <dd class="contact__details">
+                    <a class="contact__link" href="https://twitter.com/tecladocode">
+                        @tecladocode
+                    </a>
+                </dd>
+            </div>
+        </dl>
+    </main>
+{% endblock %}