From f9c776b7a3d7e3f5c70f521acd7db72685fde264 Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Tue, 7 Jul 2020 13:28:55 +0200 Subject: [PATCH] feat: add header nav menu --- static/about.html | 39 +++++++++++++++++++++++++ static/assets/home.css | 48 +++++++++++++++++++++++++++---- static/home.html | 65 +++++++++++++++++++++++------------------- 3 files changed, 117 insertions(+), 35 deletions(-) create mode 100644 static/about.html diff --git a/static/about.html b/static/about.html new file mode 100644 index 0000000..81b2855 --- /dev/null +++ b/static/about.html @@ -0,0 +1,39 @@ + + + + Home + + + + + + + + + +
+
+
+ +
+
+ + Espace Condorcet Centre Social + +

Forum des associations

+
+ Cette année nous vous invitons à découvrir le forum virtuel des associations. +
+
+
+
+
+
+

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem alias sapiente neque? Dignissimos harum blanditiis fugiat eius alias nam repudiandae, et explicabo nihil eos, quos reprehenderit nobis aperiam quibusdam ad?

+
+
+ + + \ No newline at end of file diff --git a/static/assets/home.css b/static/assets/home.css index e7d131c..56e9499 100644 --- a/static/assets/home.css +++ b/static/assets/home.css @@ -1,11 +1,32 @@ .header { - border-bottom: 2px solid #C28100; + /* border-bottom: 2px solid #C28100; */ padding-bottom: 1.5em; padding-top: 1.5em; + background-color: #d35400; } .header-container { display: flex; + justify-content: space-between; +} + +.header-left { + display: flex; +} + +.header-menu { + display: flex; + align-items: flex-end; + +} + +.header-menu a { + color: white; + margin-right: 1em; +} + +.header-menu a:last-of-type { + margin-right: 0; } .header-image { @@ -27,6 +48,7 @@ .header-title { font-family: 'Roboto Slab', serif; margin: 0; + color: white; font-weight: 500; font-size: 2.5em; } @@ -35,16 +57,17 @@ margin: 0; text-decoration: underline; font-weight: 100; - color: #34495e; - transition: 0.2s; + color: #ecf0f1; + transition: opacity 0.2s; } .header-sub-title:hover { - color: #0029FF; + opacity: 0.9; + color: #ecf0f1; } .header-description { - color: #34495e; + color: #ecf0f1; } .content { @@ -143,11 +166,17 @@ } .card { + cursor: pointer; display: flex; border: 1px solid #bdc3c7; border-radius: 4px; margin-bottom: 1em; box-shadow: 0 0 8px 0px rgba(0,0,0,0.1); + transition: all 0.2s; +} + +.card:hover { + transform: scale(1.02); } .card-image { @@ -209,7 +238,7 @@ } } -@media (max-width: 900px) { +@media (max-width: 1000px) { .header { padding-top: 1em; padding-bottom: 1em; @@ -217,6 +246,13 @@ .header-container { display: block; } + .header-left { + display: block; + } + .header-menu { + justify-content: center; + margin-top: 1em; + } .header-content { padding: 0; } diff --git a/static/home.html b/static/home.html index 673fb8c..cd25905 100644 --- a/static/home.html +++ b/static/home.html @@ -13,19 +13,25 @@
-
- -
-
- - Espace Condorcet Centre Social - -

Forum des associations

-
- Cette année nous vous invitons à découvrir le forum virtuel des associations. +
+
+
+
+ + Espace Condorcet Centre Social + +

Forum des associations

+
+ Cette année nous vous invitons à découvrir le forum virtuel des associations. +
+
+
+
+ Mentions Légales + A propos
@@ -53,6 +59,7 @@