#F01 Footer Content & Styling #53

.gitignore

@@ -9,3 +9,6 @@ __pycache__/
 settings.json
 .gitpod.yml
 .venv/
+setup.bat
+Pipfile
+Pipfile.lock

home/urls.py

@@ -2,5 +2,11 @@
 from . import views
 
 urlpatterns = [
-    path("", views.index, name="home")
+    path("", views.index, name="home"),
+    path("faq/", views.faq, name="faq"),
+    path("judging_criteria/", views.judging_criteria, name="judging_criteria"),
+    path("plagiarism_policy/", views.plagiarism_policy, name="plagiarism_policy"),
+    path("privacy_policy/", views.privacy_policy, name="privacy_policy"),
+    path("useful_resources/", views.useful_resources, name="useful_resources"),
 ]
+

home/views.py

@@ -5,3 +5,33 @@ def index(request):
     """ A view to return the index page """
 
     return render(request, "home/index.html")
+
+
+def faq(request):
+    """ A view to return the FAQ page """
+
+    return render(request, "faq.html")
+
+
+def judging_criteria(request):
+    """ A view to return the Judging Criteria page """
+
+    return render(request, "judging-criteria.html")
+
+
+def plagiarism_policy(request):
+    """ A view to return the Plagiarism Policy page """
+
+    return render(request, "plagiarism-policy.html")
+
+
+def privacy_policy(request):
+    """ A view to return the Privacy Policy page """
+
+    return render(request, "privacy-policy.html")
+
+
+def useful_resources(request):
+    """ A view to return the Useful Resources page """
+
+    return render(request, "useful-resources.html")

static/css/style.css

@@ -1,102 +1,159 @@
-:root {
-    /* P = Primary | S = Secondary | T = Tertiary */
-    --p-orange: #E84610;
-    --p-blue: #009FE3;
-    --p-grey: #4A4A4F;
-    --p-navy: #445261;
-    --p-red: #D63649;
-    --s-grey: #E6ECF0;
-    --s-yellow: #EFB920;
-    --s-pink: #FF5A60;
-    --s-teal: #23BBBB;
-    --t-grey: #E0E7FF;
-    --white: #FFFFFF;
-    --black: #000000;
-    --bg-grey: #F5F5F5;
-}
-
-html, body {
-    height: 100%;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-    font-family: Montserrat, sans-serif;
-    background-color: var(--bg-grey);
-    color: var(--p-grey);
-}
-
-/* NAVBAR */
-.navbar {
-    background-color: var(--white);
-    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, .2);
-}
-
-.navbar-brand {
-    background: url("../img/ci-logo.svg") no-repeat center;
-    height: 40px;
-    width: 200px;
-}
-
-.navbar-nav .nav-item {
-    margin: 0 1em;
-}
-
-.navbar-light .navbar-nav .nav-link {
-    color: var(--p-orange);
-}
-
-/* MAIN */
-main {
-    margin-top: 2em;
-    flex: 1 0 auto;
-}
-
-/* BUTTONS */
-.btn-ci {
-    background-color: transparent;
-    color: var(--p-orange);
-    border: 3px solid var(--p-orange);
-    transition: all .4s;
-}
-
-.btn-ci:hover {
-    background-color: var(--p-orange);
-    color: var(--s-grey);
-}
-
-/* FOOTER */
-footer {
-    flex-shrink: 0;
-    color: var(--s-grey);
-    background-color: var(--p-grey);
-}
-
-/* TEXT */
-.p-orange {
-    color: var(--p-orange);  
-}
-
-.p-blue {
-    color: var(--p-blue);  
-}
-
-/* CARDS */
-.card-link:hover {
-    color: rgba(0, 0, 0, .7); 
-}
-
-.card-title {
-    font-family: Rubik, sans-serif;
-}
-
-/* PAGINATION */
-.page-item .page-link {
-    color: var(--p-orange);
-}
-
-.page-item.active .page-link {
-    background-color: var(--p-orange);
-    border-color: var(--p-orange);
+:root {
+    /* P = Primary | S = Secondary | T = Tertiary */
+    --p-orange: #E84610;
+    --p-blue: #009FE3;
+    --p-grey: #4A4A4F;
+    --p-navy: #445261;
+    --p-red: #D63649;
+    --s-grey: #E6ECF0;
+    --s-yellow: #EFB920;
+    --s-pink: #FF5A60;
+    --s-teal: #23BBBB;
+    --t-grey: #E0E7FF;
+    --white: #FFFFFF;
+    --black: #000000;
+    --bg-grey: #F5F5F5;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    font-family: Montserrat, sans-serif;
+    background-color: var(--bg-grey);
+    color: var(--p-grey);
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+/* NAVBAR */
+.navbar {
+    background-color: var(--white);
+    box-shadow: 0 2px 9px 0 rgba(0, 0, 0, .2);
+}
+
+.navbar-brand {
+    background: url("../img/ci-logo.svg") no-repeat center;
+    height: 40px;
+    width: 200px;
+}
+
+.navbar-nav .nav-item {
+    margin: 0 1em;
+}
+
+.navbar-light .navbar-nav .nav-link {
+    color: var(--p-orange);
+}
+
+/* MAIN */
+main {
+    margin-top: 2em;
+    flex: 1 0 auto;
+}
+
+/* BUTTONS */
+.btn-ci {
+    background-color: transparent;
+    color: var(--p-orange);
+    border: 3px solid var(--p-orange);
+    transition: all .4s;
+}
+
+.btn-ci:hover {
+    background-color: var(--p-orange);
+    color: var(--s-grey);
+}
+
+/* FOOTER */
+footer {
+    flex-shrink: 0;
+    color: var(--s-grey);
+    background-color: var(--p-grey);
+}
+
+footer h4 {
+    margin: 20px 0;
+    font-weight: 500;
+    letter-spacing: 1px;
+}
+
+footer p {
+    text-align: justify;
+}
+
+footer a:hover {
+    color: var(--p-orange);
+}
+
+footer ul {
+    padding: 0;
+    list-style: none;
+}
+
+footer ul li a {
+    color: var(--s-grey);
+}
+
+.github-wrapper {
+    display: flex;
+    justify-content: center;
+    margin: 15px 0;
+}
+
+.copyright-wrapper {
+    margin: 5px 0;
+    text-align: center;
+}
+
+.copyright-wrapper p {
+    text-align: center;
+}
+
+.copyright-wrapper a {
+    color: var(--s-grey);
+}
+
+.fab {
+    font-size: 200%;
+    margin: 0 20px;
+    color: var(--s-grey);
+    transition: transform .4s;
+}
+
+.fab:hover {
+    transform: scale(1.3);
+
+/* TEXT */
+.p-orange {
+    color: var(--p-orange);  
+}
+
+.p-blue {
+    color: var(--p-blue);  
+}
+
+/* CARDS */
+.card-link:hover {
+    color: rgba(0, 0, 0, .7); 
+}
+
+.card-title {
+    font-family: Rubik, sans-serif;
+}
+
+/* PAGINATION */
+.page-item .page-link {
+    color: var(--p-orange);
+}
+
+.page-item.active .page-link {
+    background-color: var(--p-orange);
+    border-color: var(--p-orange);
 }

templates/faq.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% load static %}
+{% block content %}
+
+<h1>FAQ</h1>
+<!-- help needed -->
+
+{% endblock %}