Added css for home page

661c2d14 · Kirby Ezekiel Santos · f8b86d55 · 661c2d14 · 661c2d14 · 661c2d14
Commit 661c2d14 authored Mar 18, 2020 by Kirby Ezekiel Santos
Showing with 57 additions and 11 deletions

bootstrap.min.css static/bootstrap.min.css +7 -0

styles.css static/styles.css +31 -0

home_page.html templates/home_page.html +15 -11

settings.py thegoodplace/settings.py +4 -0

No files found.
--- a/static/bootstrap.min.css
+++ b/static/bootstrap.min.css
--- a/static/styles.css
+++ b/static/styles.css
+body{
+  background: #DCD0C0;
+  font-family: 'Courier New', Courier, monospace;
+  color: #373737;
+}
+
+th{
+  text-align: center;
+}
+
+h2 {
+  text-align: center;
+}
+
+.container {
+  background: #F4F4F4;
+  padding: 15px;
+  margin: 10px;
+}
+
+.table{
+  font-size: 20px;
+}
+
+#page_header {
+  font-family: Helvetica, sans-serif;
+  padding: 15px;
+  font-size: 40px;
+  text-align: center;
+  text-shadow: 3px 2px #A9A9A9;
+}
--- a/templates/home_page.html
+++ b/templates/home_page.html
+{% load static %}
 <!DOCTYPE html>
 <html>
  <head>
    <title>The Good Place FroYo Shop</title>
+
+    <link rel="stylesheet" href="/static/bootstrap.min.css">
+    <link rel="stylesheet" href="/static/styles.css">
  </head>

  <body>
-    <div>
-      <h1 id="page_header">The Good Place FroYo Shop</h1>
+    <div class="col-lg-10 col-lg-10 mx-auto container">
+      <h1 id="page_header" class="col-lg-8">The Good Place FroYo Shop</h1>
    </div>

-    <div>
-      <h2 id="home_page_ingredients">Ingredients</h2>
+    <div class="col-lg-10 mx-auto container">
+      <h2 id="home_page_ingredients" class="col-lg-8 mx-auto">Ingredients</h2>
      <form method="get" action="http://localhost:8000/ingredients-list">
-        <button type="submit" id="button_to_ingredients">View available ingredients</button>
+        <button type="submit" id="button_to_ingredients" class="btn-block btn-outline-info">View available ingredients</button>
      </form>
    </div>

-    <div>
-      <h2 id="home_page_recipes">Recipes</h2>
+    <div class="col-lg-10 mx-auto container">
+      <h2 id="home_page_recipes" class="col-lg-8 mx-auto">Recipes</h2>
      <form method="get" action="http://localhost:8000/recipes-list">
-        <button type="submit" id="button_to_recipes">Go to recipes</button>
+        <button type="submit" id="button_to_recipes" class="btn-block btn-outline-info">Go to recipes</button>
      </form>
    </div>

-    <div>
-      <h2 id="home_page_orders">Orders</h2>
+    <div class="col-lg-10 mx-auto container">
+      <h2 id="home_page_orders" class="col-lg-8 mx-auto">Orders</h2>
      <form method="get" action="http://localhost:8000/orders-list">
-        <button type="submit" id="button_to_orders">Check current orders</button>
+        <button type="submit" id="button_to_orders" class="btn-block btn-outline-info">Check current orders</button>
      </form>
    </div>
  </body>

--- a/thegoodplace/settings.py
+++ b/thegoodplace/settings.py
@@ -117,5 +117,9 @@ USE_TZ = True

 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.0/howto/static-files/
+STATICFILES_DIRS = [
+    os.path.join(BASE_DIR, "static"),
+    "/static/",
+]

 STATIC_URL = '/static/'