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

More footer reponsivness

parent ea6e0074
Branches
Tags
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