From a29992448e87b8f2e2cb58f4c3d3b9c651649141 Mon Sep 17 00:00:00 2001
From: Ondrej Rehounek <ondra.rehounek@seznam.cz>
Date: Thu, 11 Aug 2022 19:03:13 +0200
Subject: [PATCH] main: footer prototype
---
main/ui-main/public/index.html | 189 +++++++++++++++++----
main/ui-main/src/css/organisms/footer.pcss | 9 +
main/ui-main/tailwind.config.js | 5 +-
3 files changed, 165 insertions(+), 38 deletions(-)
diff --git a/main/ui-main/public/index.html b/main/ui-main/public/index.html
index eb3b1ce68..8c501cf9f 100644
--- a/main/ui-main/public/index.html
+++ b/main/ui-main/public/index.html
@@ -82,13 +82,13 @@
<img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
alt="user image"/>
<h5 class="font-alt mb-2">Tomáš Marný</h5>
- <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
<p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod
tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
- <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ <i class="ico--twitter text-turquoise-400 text-xl"></i>
</div>
</div>
<div class="box border border-grey-100">
@@ -96,13 +96,13 @@
<img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
alt="user image"/>
<h5 class="font-alt mb-2">Tomáš Marný</h5>
- <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
<p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod
tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
- <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ <i class="ico--twitter text-turquoise-400 text-xl"></i>
</div>
</div>
<div class="box border border-grey-100">
@@ -110,13 +110,13 @@
<img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
alt="user image"/>
<h5 class="font-alt mb-2">Tomáš Marný</h5>
- <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
<p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod
tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
- <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ <i class="ico--twitter text-turquoise-400 text-xl"></i>
</div>
</div>
<div class="box border border-grey-100">
@@ -124,13 +124,13 @@
<img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
alt="user image"/>
<h5 class="font-alt mb-2">Tomáš Marný</h5>
- <small class="mb-4 text-turquoise-500">@pirat.tomas.marny</small>
+ <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
<p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod
tempor invidunt ut labore
et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
- <i class="ico--twitter text-turquoise-500 text-xl"></i>
+ <i class="ico--twitter text-turquoise-400 text-xl"></i>
</div>
</div>
</div>
@@ -146,7 +146,7 @@
</main>
<footer class="bg-black text-white pt-12">
- <div class="container">
+ <div class="footer__container">
<div class="font-alt mb-10 text-right text-2xl">
Zůstaňte s námi v konaktu
</div>
@@ -176,80 +176,197 @@
</a>
</div>
</div>
- <div class="flex flex-wrap w-full">
- <div class="w-48">
+ <div class="flex flex-wrap mb-16 w-full">
+ <div>
<h6 class="font-alt text-2xl mb-12">
Navigace
</h6>
- <div class="flex flex-col max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5">
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
</div>
</div>
- <div class="w-48">
+ <div>
<h6 class="font-alt text-2xl mb-12">
- Navigace
+ Transparance
</h6>
- <div class="flex flex-col max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5">
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
</div>
</div>
- <div class="w-48">
+ <div>
<h6 class="font-alt text-2xl mb-12">
- Navigace
+ Osobní stránky
+ </h6>
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ olgarichterova.cz
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ gregorova.eu
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ mikulas-peksa.eu
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ kolaja.eu
+ </a>
+ </div>
+ </div>
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Další projekty
</h6>
- <div class="flex flex-col max-h-60">
- <a class="cursor-pointer hover:no-underline mb-5">
+ <div class="grid grid-flow-col grid-rows-6 max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ budoucnostresimeted.cz
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Jak pracujeme
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Program
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Lidé
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Jak pracujeme
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Program
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
- <a class="cursor-pointer hover:no-underline mb-5">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
Lidé
</a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ voda.pirati.cz
+ </a>
+ </div>
+ </div>
+ <div>
+ <h6 class="font-alt text-2xl mb-12">
+ Média
+ </h6>
+ <div class="flex flex-col flex-wrap max-h-60">
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Foto
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Video
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Newsletter
+ </a>
+ <a class="cursor-pointer hover:no-underline mb-5 w-48">
+ Grafika
+ </a>
+ </div>
+ </div>
+ </div>
+ <div class="flex flex-wrap items-end pb-2">
+ <div class="text-grey-300 w-full lg:w-1/2">
+ © Piráti 2022. Všechna práva vyhlazena.<br>
+ Sdílejte a nechte ostatní sdílet za stejných podmínek.
+ </div>
+ <div class="flex justify-endw-full lg:w-1/2">
+ <div class="flex ml-4">
+ <div class="mr-5">
+ <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
+ </div>
+ <div class="flex flex-col">
+ <h6 class="font-alt text-2xl text-uppercase">
+ Veronika Šmídová
+ </h6>
+ <strong class="font-bold mb-1 text-grey-300">
+ Tisková mluvčí
+ </strong>
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
+ </div>
+ <div class="flex ml-4">
+ <div class="mr-5">
+ <img class="rounded-full shadow-sm w-20 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image">
+ </div>
+ <div class="flex flex-col">
+ <h6 class="font-alt text-2xl text-uppercase">
+ Veronika Šmídová
+ </h6>
+ <strong class="font-bold mb-1 text-grey-300">
+ Tisková mluvčí
+ </strong>
+ <span>
+ +420 778 111 466
+ </span>
+ <span class="text-turquoise-500">
+ veronika.smidova@pirati.cz
+ </span>
+ </div>
</div>
</div>
</div>
diff --git a/main/ui-main/src/css/organisms/footer.pcss b/main/ui-main/src/css/organisms/footer.pcss
index 6a6594e57..5c1400e35 100644
--- a/main/ui-main/src/css/organisms/footer.pcss
+++ b/main/ui-main/src/css/organisms/footer.pcss
@@ -1,3 +1,12 @@
footer {
clip-path: polygon(0 7%, 100% 0, 100% 100%, 0% 100%);
}
+
+.footer__container {
+ /* TODO responsive (if needed...) */
+
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 1416px;
+ padding: 2rem;
+}
diff --git a/main/ui-main/tailwind.config.js b/main/ui-main/tailwind.config.js
index 793f22294..a9ca499da 100644
--- a/main/ui-main/tailwind.config.js
+++ b/main/ui-main/tailwind.config.js
@@ -109,7 +109,8 @@ module.exports = {
'300': '#027da8',
},
'turquoise': {
- '500': '#1BC0E3'
+ '400': '#1BC0E3',
+ '500': '#25A5B9'
},
'cyan': {
'100': '#a7d4d1',
@@ -137,7 +138,7 @@ module.exports = {
padding: {
default: '1rem',
xl: '2rem',
- },
+ }
},
textDecorationColor: { // defaults to theme => theme('colors')
'white': '#fff',
--
GitLab