From f2f6dce47c2dc35f6d9969da126827effe319dff Mon Sep 17 00:00:00 2001
From: nahed2019 <nanawalid@gmail.com>
Date: Tue, 20 Oct 2020 00:26:38 +0000
Subject: [PATCH 1/2] chang the layout for the Footer and style it

---
 static/css/style.css           |  10 ++-
 templates/includes/footer.html | 149 +++++++++++++++++----------------
 2 files changed, 84 insertions(+), 75 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 8382c7d0..01bebd1f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -78,14 +78,19 @@ footer {
     background-color: var(--p-grey);
 }
 
+
+
 footer h4 {
-    margin: 20px 0;
+    margin: 25px 0;
+    padding-left: 10px;
     font-weight: 500;
     letter-spacing: 1px;
 }
 
 footer p {
     text-align: justify;
+    font-weight: 400;
+    padding-left: 15px;
 }
 
 footer a:hover {
@@ -99,6 +104,7 @@ footer ul {
 
 footer ul li a {
     color: var(--s-grey);
+    padding-left: 15px;
 }
 
 .github-wrapper {
@@ -123,7 +129,7 @@ footer ul li a {
 .fab {
     font-size: 200%;
     margin: 0 20px;
-    color: var(--s-grey);
+    color: var(--p-orange);
     transition: transform .4s;
 }
 
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
index f7413442..50bdcb0e 100644
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@@ -1,74 +1,77 @@
-<div class="container">
-    <div class="row">
-        <div class="col-sm-6 col-md-3">
-            <h4>Policies</h4>
-            <ul>
-                <li>
-                    <!-- To link to own Privacy Policy page once built -->
-                    <a href="{% url 'privacy_policy' %}" target=" _blank">Privacy Policy</a>
-                </li>
-                <li>
-                    <!-- To link to own Plagiarism Policy page once built -->
-                    <a href="{% url 'plagiarism_policy' %}" target="_blank">Plagiarism Policy</a>
-                </li>
-                <li>
-                    <a href="https://docs.github.com/en/free-pro-team@latest/github/site-policy/github-terms-of-service"
-                        target="_blank">GitHub Terms of Service</a>
-                </li>
-            </ul>
-        </div>
-        <div class="col-sm-6 col-md-3">
-            <h4>
-                Resources
-            </h4>
-            <ul>
-                <li>
-                    <a href="{% url 'faq' %}">FAQ</a>
-                </li>
-                <li>
-                    <a href="{% url 'judging_criteria' %}">Judging Criteria</a>
-                </li>
-                <li>
-                    <a href="{% url 'useful_resources' %}">Useful Resources</a>
-                </li>
-                <li>
-                    <a href="https://codeinstitute.net/">Code Institute</a>
-                </li>
-                <li>
-                    <a href="https://hacktoberfest.digitalocean.com/" target="_blank">Hacktoberfest Official Site</a>
-                </li>
-            </ul>
-        </div>
-        <div class="col-md-6">
-            <h4>
-                About Us
-            </h4>
-            <p>
-                Code Institute is the leading global provider
-                of online coding education. Credit-rated by Edinburgh Napier University and validated by the Higher
-                Education Authority in Sweden, the Ministry of Communications in Singapore, and the Higher Education
-                Authority in Ireland.
-            </p>
-        </div>
-        <hr>
-        <div class="col github-wrapper">
-            <a href="https://www.facebook.com/Code.InstituteIRL/" target="_blank">
-                <i class="fab fa-facebook-square"></i>
-            </a>
-            <a href="https://twitter.com/codersinstitute" target="_blank">
-                <i class="fab fa-twitter-square"></i>
-            </a>
-            <a href="https://www.linkedin.com/school/code-institute/" target="_blank">
-                <i class="fab fa-linkedin"></i>
-            </a>
-            <a href="https://github.com/Code-Institute-Community/ci-hackathon-app" target="_blank">
-                <i class="fab fa-github"></i>
-            </a>
-        </div>
-    </div>
-    <div class="col copyright-wrapper">
-        <p>
-            <a href="https://codeinstitute.net/" target=" _blank">&copy; 2020 Code Institute</a>
-        </p>
-    </div>
+<div class="container-fluid">
+	<div class="row">
+		<div class="col-md-6 ">
+			<h4>
+				About Us
+			</h4>
+			<p>
+				Code Institute is the leading global provider
+				of online coding education. Credit-rated by Edinburgh Napier University and validated by the Higher
+				Education Authority in Sweden, the Ministry of Communications in Singapore, and the Higher Education
+				Authority in Ireland.
+			</p>
+		</div>
+        <div class="col-md-3 ">
+			<h4>
+				Resources
+			</h4>
+			<ul>
+				<li>
+					<a href="{% url 'faq' %}">FAQ</a>
+				</li>
+				<li>
+					<a href="{% url 'judging_criteria' %}">Judging Criteria</a>
+				</li>
+				<li>
+					<a href="{% url 'useful_resources' %}">Useful Resources</a>
+				</li>
+				<li>
+					<a href="https://codeinstitute.net/">Code Institute</a>
+				</li>
+				<li>
+					<a href="https://hacktoberfest.digitalocean.com/" target="_blank">Hacktoberfest Official
+						Site</a>
+				</li>
+			</ul>
+		</div>
+        <div class="col-md-3 ">
+			<h4>Policies</h4>
+			<ul>
+				<li>
+					<!-- To link to own Privacy Policy page once built -->
+					<a href="{% url 'privacy_policy' %}" target=" _blank">Privacy Policy</a>
+				</li>
+				<li>
+					<!-- To link to own Plagiarism Policy page once built -->
+					<a href="{% url 'plagiarism_policy' %}" target="_blank">Plagiarism Policy</a>
+				</li>
+				<li>
+					<a href="https://docs.github.com/en/free-pro-team@latest/github/site-policy/github-terms-of-service"
+						target="_blank">GitHub Terms of Service</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<hr>
+	<div class="col github-wrapper">
+		<a href="https://www.facebook.com/Code.InstituteIRL/" target="_blank">
+			<i class="fab fa-facebook-square"></i>
+		</a>
+		<a href="https://twitter.com/codersinstitute" target="_blank">
+			<i class="fab fa-twitter-square"></i>
+		</a>
+		<a href="https://www.linkedin.com/school/code-institute/" target="_blank">
+			<i class="fab fa-linkedin"></i>
+		</a>
+		<a href="https://github.com/Code-Institute-Community/ci-hackathon-app" target="_blank">
+			<i class="fab fa-github"></i>
+		</a>
+	</div>
 </div>
+<div class="col copyright-wrapper">
+	<p>
+		<a href="https://codeinstitute.net/" target=" _blank">&copy; 2020 Code Institute</a>
+	</p>
+</div>
+</div>
\ No newline at end of file

From 36a167295ab60d8d5ba73e8981a49a70262cca1c Mon Sep 17 00:00:00 2001
From: nahed2019 <nanawalid@gmail.com>
Date: Tue, 20 Oct 2020 21:50:12 +0000
Subject: [PATCH 2/2] added calss to footer h4,p. using CSS to create the
 border

---
 static/css/style.css           | 13 +++++---
 templates/includes/footer.html | 58 ++++++++++++++++++----------------
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 01bebd1f..a232a310 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -80,14 +80,14 @@ footer {
 
 
 
-footer h4 {
+.sub-footer-heading {
     margin: 25px 0;
-    padding-left: 10px;
+    padding-left: 20px;
     font-weight: 500;
     letter-spacing: 1px;
 }
 
-footer p {
+.sub-footer-text {
     text-align: justify;
     font-weight: 400;
     padding-left: 15px;
@@ -107,6 +107,10 @@ footer ul li a {
     padding-left: 15px;
 }
 
+.sub-footer{
+    border-top: 1px solid var(--s-grey);
+}
+
 .github-wrapper {
     display: flex;
     justify-content: center;
@@ -129,12 +133,13 @@ footer ul li a {
 .fab {
     font-size: 200%;
     margin: 0 20px;
-    color: var(--p-orange);
+    color: var(--s-grey);
     transition: transform .4s;
 }
 
 .fab:hover {
     transform: scale(1.3);
+    color: var(--p-orange);
 
 /* TEXT */
 .p-orange {
diff --git a/templates/includes/footer.html b/templates/includes/footer.html
index 50bdcb0e..3bbcbcb6 100644
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@@ -1,21 +1,21 @@
 <div class="container-fluid">
 	<div class="row">
 		<div class="col-md-6 ">
-			<h4>
+			<h4 class="sub-footer-heading">
 				About Us
 			</h4>
-			<p>
+			<p class="sub-footer-text">
 				Code Institute is the leading global provider
 				of online coding education. Credit-rated by Edinburgh Napier University and validated by the Higher
 				Education Authority in Sweden, the Ministry of Communications in Singapore, and the Higher Education
 				Authority in Ireland.
 			</p>
 		</div>
-        <div class="col-md-3 ">
-			<h4>
+		<div class="col-md-3 ">
+			<h4 class="sub-footer-heading">
 				Resources
 			</h4>
-			<ul>
+			<ul class="sub-footer-text">
 				<li>
 					<a href="{% url 'faq' %}">FAQ</a>
 				</li>
@@ -34,9 +34,9 @@ <h4>
 				</li>
 			</ul>
 		</div>
-        <div class="col-md-3 ">
-			<h4>Policies</h4>
-			<ul>
+		<div class="col-md-3 ">
+			<h4 class="sub-footer-heading">Policies</h4>
+			<ul class="sub-footer-text">
 				<li>
 					<!-- To link to own Privacy Policy page once built -->
 					<a href="{% url 'privacy_policy' %}" target=" _blank">Privacy Policy</a>
@@ -53,25 +53,27 @@ <h4>Policies</h4>
 		</div>
 	</div>
 
-	<hr>
-	<div class="col github-wrapper">
-		<a href="https://www.facebook.com/Code.InstituteIRL/" target="_blank">
-			<i class="fab fa-facebook-square"></i>
-		</a>
-		<a href="https://twitter.com/codersinstitute" target="_blank">
-			<i class="fab fa-twitter-square"></i>
-		</a>
-		<a href="https://www.linkedin.com/school/code-institute/" target="_blank">
-			<i class="fab fa-linkedin"></i>
-		</a>
-		<a href="https://github.com/Code-Institute-Community/ci-hackathon-app" target="_blank">
-			<i class="fab fa-github"></i>
-		</a>
+	<div class="row">
+		<div class="col github-wrapper">
+			<a href="https://www.facebook.com/Code.InstituteIRL/" target="_blank">
+				<i class="fab fa-facebook-square"></i>
+			</a>
+			<a href="https://twitter.com/codersinstitute" target="_blank">
+				<i class="fab fa-twitter-square"></i>
+			</a>
+			<a href="https://www.linkedin.com/school/code-institute/" target="_blank">
+				<i class="fab fa-linkedin"></i>
+			</a>
+			<a href="https://github.com/Code-Institute-Community/ci-hackathon-app" target="_blank">
+				<i class="fab fa-github"></i>
+			</a>
+		</div>
+	</div>
+	<div class="row sub-footer">
+		<div class="col copyright-wrapper">
+			<p>
+				<a href="https://codeinstitute.net/" target=" _blank">&copy; 2020 Code Institute</a>
+			</p>
+		</div>
 	</div>
-</div>
-<div class="col copyright-wrapper">
-	<p>
-		<a href="https://codeinstitute.net/" target=" _blank">&copy; 2020 Code Institute</a>
-	</p>
-</div>
 </div>
\ No newline at end of file