Change 400 image to be background, Add styling and 500.html

Edb83 · Jun 2, 2021 · 1451a1f · 1451a1f
1 parent 4aa7433
commit 1451a1f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git a/static/css/base.css b/static/css/base.css
@@ -535,20 +535,21 @@ input[type=number] {
 
 /* 404 page */
 
+.background-404 {
+    background-image: url('/media/404.svg');
+    background-size: 25vh;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-position-x: right;
+}
+
 .dead-center {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 
-.bottom-right {
-    position: absolute;
-    top: 80%;
-    left: 84%;
-    transform: translate(-50%, -50%);
-}
-
 /* Media queries */
 
 @media (min-width: 1024px) {

diff --git a/templates/404.html b/templates/404.html
@@ -2,18 +2,18 @@
 {% load static %}
 {% block extra_title %} - 404{% endblock %}
 {% block content %}
-<div class="dead-center">
-    <h1>Oops! Page not found!</h1>
-    <div>
-        <a href="{% url 'products' %}" class="btn btn-outline-dark mt-5">
-            <span class="icon">
-                <i class="fas fa-chevron-left"></i>
-            </span>
-            Juices
-        </a>
+<div class="background-404">
+    <div class="dead-center">
+        <h1>Oops! Page not found!</h1>
+        <div>
+            <a href="{% url 'products' %}" class="btn btn-outline-dark mt-2">
+                <span class="icon">
+                    <i class="fas fa-chevron-left"></i>
+                </span>
+                Back to the Juice!
+            </a>
+        </div>
     </div>
 </div>
-<div class="bottom-right">
-    <img src="{{ MEDIA_URL }}404.svg" alt="">
-</div>
+
 {% endblock %}
diff --git a/templates/500.html b/templates/500.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+{% load static %}
+{% block extra_title %} - 500{% endblock %}
+{% block content %}
+<div class="background-404">
+    <div class="dead-center">
+        <h1>Uh oh! Problems here...</h1>
+        <div>
+            <a href="{% url 'products' %}" class="btn btn-outline-dark mt-2">
+                <span class="icon">
+                    <i class="fas fa-chevron-left"></i>
+                </span>
+                Back to the Juice!
+            </a>
+        </div>
+    </div>
+</div>
+
+{% endblock %}