From 4305cb6ce309714443411f2606ed22e7199d1381 Mon Sep 17 00:00:00 2001
From: Dorian Lesbre <dorian.lesbre@gmail.com>
Date: Sun, 27 Dec 2020 11:57:11 +0100
Subject: [PATCH] Added navigation bar below header

---
 home/static/css/style.css | 49 +++++++++++++++++++++++++++++++++++----
 home/templates/home.html  |  6 +++++
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/home/static/css/style.css b/home/static/css/style.css
index 1157666..ebc70a2 100644
--- a/home/static/css/style.css
+++ b/home/static/css/style.css
@@ -10,15 +10,19 @@ body {
 	background-color: #FFF;
 }
 
-a:link {
+section a:link {
 	text-decoration: underline;
 	color: rgb(62, 62, 255);
 }
 
 .header {
-	background-color: #006809;
-	margin-top: 0;
-	padding: 5px 5px 20px 20px;
+  display: flex;
+	background-color: #00b80f;
+  border-bottom: 5px solid #006809;
+	margin: 0px;
+	border-top: 0px;
+  align-items: center;
+	padding: 0px 0px 20px 20px;
 }
 
 .header h1, .header h1 a, .header h1 a:visited, .header h1 a:active {
@@ -26,6 +30,43 @@ a:link {
 	font-size: 60px;
 	text-decoration: none;
 	text-align: center;
+	width: 100%;
+}
+
+nav {
+  display: flex;
+  justify-content: center space-around;
+  background-color: #006809;
+  color: white;
+  margin: 0;
+  padding: 0 30px;
+  border-bottom: 5px solid #006809;
+}
+
+nav div {
+	text-align: center;
+
+	text-decoration: bold;
+	width: 100%;
+	/* background-color: #00b80f; */
+	border-radius: 0%;
+}
+
+nav a {
+	margin-left: 5px;
+	margin-right: 5px;
+	padding: 5px 5px 5px 5px;
+	font-size: 20px;
+	color: white;
+	text-decoration: none;
+	text-emphasis: bold;
+	width: 100%;
+}
+
+nav a:hover {
+	transition-property: background-color;
+	background-color: #00b80f;
+	transition-duration: 0.5s;
 }
 
 section {
diff --git a/home/templates/home.html b/home/templates/home.html
index 2192992..488f470 100644
--- a/home/templates/home.html
+++ b/home/templates/home.html
@@ -15,6 +15,12 @@
 				<h1><a href="/">The site's title</a></h1>
 			</div>
 		</header>
+		<nav>
+			<a href="/" class="internal"><div class="navlink">Inscriptions</div></a>
+			<a href="/" class="internal"><div class="navlink">Activités</div></a>
+			<a href="/" class="internal"><div class="navlink">Bouton</div></a>
+			<a href="/" class="internal"><div class="navlink">Bouton autre</div></a>
+		</nav>
 		<section>
 			<h1>A Title</h1>
 			<p>a paragraph</p>
-- 
GitLab