Skip to content
Snippets Groups Projects
Commit 11a2b2f9 authored by xaralis's avatar xaralis
Browse files

More footer reponsivness

parent ea6e0074
No related branches found
No related tags found
No related merge requests found
<footer class="footer bg-grey-700 text-white"> <footer class="footer bg-grey-700 text-white">
<div class="footer__main py-4 lg:py-8 container container--default"> <div class="footer__main py-4 lg:py-16 container container--default">
<section class="footer__brand"> <section class="footer__brand">
<img <img
src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg" src="https://www.va-fighters.com/pirati/krajska-sablona/dist/assets/img/logo.svg"
...@@ -60,35 +60,37 @@ ...@@ -60,35 +60,37 @@
{{> molecules-basic-social-icon-group(classes: "text-white pb-4") }} {{> molecules-basic-social-icon-group(classes: "text-white pb-4") }}
{{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }} {{> atoms-basic-contact-line(icon: "fas fa-envelope", caption: "Dejte nám vědět") }}
</div> </div>
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth mb-2") }} <div class="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
{{> atoms-icon-button(cta: "Přispěj", icon: "fas fa-hand-holding-usd", classes: "btn--white btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
{{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }} {{> atoms-icon-button(cta: "Naloď se", icon: "fas fa-anchor", classes: "btn--green-100 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth") }}
</div>
</section> </section>
</div> </div>
<section class="footer__sub-links lg:border-t border-grey-400"> <section class="footer__sub-links lg:border-t border-grey-400">
<div class="container container--default"> <div class="container container--default">
<div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0"> <div class="flex flex-col lg:flex-row lg:space-x-4 lg:items-center py-4 lg:py-8 border-t border-grey-400 lg:border-t-0">
<span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span> <span class="lg:w-1/4 text-xl uppercase text-white">Otevřenost</span>
<ul class="lg:w-2/4 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200"> <ul class="lg:w-2/4 lg:pr-8 grid grid-cols-1 lg:grid-cols-3 lg:gap-4 items-center mt-6 space-y-2 lg:mt-0 lg:space-y-0 text-grey-200">
<li> <li class="w-full">
<a href="#">Transparentní účet</a> <a href="#">Transparentní účet</a>
</li> </li>
<li> <li class="w-full">
<a href="#">Registr smluv</a> <a href="#">Registr smluv</a>
</li> </li>
<li> <li class="w-full">
<a href="#">Otevřené účetnictví</a> <a href="#">Otevřené účetnictví</a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</section> </section>
<section class="footer-section bg-black py-4 md:py-8"> <section class="footer-section bg-black py-4 lg:py-12">
<div class="container container--default"> <div class="container container--default">
<div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-4"> <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-4">
{{> molecules-condensed-badge(hideOccupation: true) }} {{> molecules-condensed-badge(hideOccupation: true) }}
{{> molecules-condensed-badge(hideOccupation: true) }} {{> molecules-condensed-badge(hideOccupation: true) }}
{{> molecules-condensed-badge(hideOccupation: true) }} {{> molecules-condensed-badge(hideOccupation: true) }}
<div class="lg:col-span-3 xl:col-span-1 lg:mt-0 lg:text-center xl:text-right"> <div class="lg:col-span-3 xl:col-span-1 lg:mt-4 xl:mt-0 lg:text-center xl:text-right">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth lg:btn--autowidth text-lg btn--fading") }} {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth lg:btn--autowidth text-lg btn--fading") }}
</div> </div>
</div> </div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment