Replace index.html

portfolio/templates/index.html

-{% block title %}<h1 class="text-center page-title" style="font-size: 2em; font-weight: bold; margin-bottom: 50px;">Password Protected Portfolio</h1>{% endblock title %}
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
+{% block title %}
+<h1 class="text-center page-title" style="font-size: 2em; font-weight: bold; margin-bottom: 50px;">Password Protected Portfolio</h1>
+{% endblock title %}
+
 {% block content %}
+<div class="d-flex justify-content-center">
+<div class="alert alert-danger" role="alert">
+<div class="container mt-5">
+  <div class="row">
+    <div class="col-12">
+      {% with messages = get_flashed_messages() %}
+        {% if messages %}
+        <div class="alert alert-danger" role="alert" style="margin-top: 20px;">
+          {% for message in messages %}
+              {{ message }}
+            {% endfor %}
+          </div>
+        {% endif %}
+      {% endwith %}
+    </div>
+  </div>
+</div>
+</div>
 <div class="container text-center">
   <div class="row">
     <div class="col-md-6 offset-md-3 form-container">
@@ -17,18 +39,5 @@
     </div>
   </div>
 </div>
-<div class="container mt-5">
-  <div class="row">
-    <div class="col-12">
-      {% with messages = get_flashed_messages() %}
-        {% if messages %}
-        <div class="alert alert-danger" role="alert" style="margin-top: 20px;">
-          {% for message in messages %}
-              {{ message }}
-            {% endfor %}
-          </div>
-        {% endif %}
-      {% endwith %}
-    </div>
-  </div>
+
 {% endblock content %}