Skip to content
Snippets Groups Projects
Commit a2999244 authored by Ondrej Rehounek's avatar Ondrej Rehounek
Browse files

main: footer prototype

parent d2c6e542
No related branches found
No related tags found
2 merge requests!607Pirati.cz,!575Feature/pirati cz
Pipeline #9155 passed
Stage: build
Show whitespace changes
Inline Side-by-side
main/ui-main/public/index.html
+ 153
− 36
View file @ a2999244
......@@ -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">
<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">
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">
<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">
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">
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">
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 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">
&copy; 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>
......
main/ui-main/src/css/organisms/footer.pcss
+ 9
− 0
View file @ a2999244
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;
}
main/ui-main/tailwind.config.js
+ 3
− 2
View file @ a2999244
......@@ -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',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft