diff --git a/main/ui-main/public/index.html b/main/ui-main/public/index.html
index eb3b1ce687a995c8ce6d8c749ca07f94ad4df015..8c501cf9f280f070047ba9c5c6cc646167b5a5f2 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 6a6594e57f3486f5ee8755a6226b198cd8bfdf2b..5c1400e35e0d76ce5f583c844e8c6974e9d0a738 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 793f22294bfd2cad9d4195298b40a0458af5c464..a9ca499da8194f93cb01a7a50728ff0953e61837 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',