Footers
Footer v.2
22 Mar 2023
Футер с використанням tailwind
HTML
SCSS
PostCSS
JS
<footer class="footer">
<div class="cont tab-sm:relative">
<div class="flex justify-between max-w-[1107px] mb-[57px] tab-sm:flex-col tab-sm:mb-[67px]">
<a href="./index.html" class="footer__logo">
<img src="./images/logo-white.svg" alt="Natural Talents" />
</a>
<ul class="footer__contacts space-y-[45px] ml-[35px] tab-sm:ml-0 tab-sm:space-y-0 tab-sm:flex-wrap tab-sm:flex tab-sm:justify-between tab-sm:mt-[84px] tab-sm:mb-[32px] mob:flex-col mob:tab-sm:space-y-[20px]">
<li class="footer__contacts-item">
<label>Give us a call</label>
<a class="footer__contacts-link" href="tel:+01223 612231">01223 612231</a>
</li>
<li class="footer__contacts-item">
<label>Drop us a line</label>
<a class="footer__contacts-link" href="mailto:info@natural-talents.co.uk">
info@natural-talents.co.uk
</a>
</li>
</ul>
<div class="footer__address tab-sm:!max-w-full mob:!max-w-[187px]">
<label>Visit us</label>
<a href="#" class="footer__address-link" target="_blank" title="Address">
Natural Talents, 1010 Cambourne Business Pk, Cambridge
CB23 6DP
</a>
</div>
</div>
<div class="footer__bottom flex justify-between items-center tab-md:flex-col-reverse tab-md:items-start tab-sm:flex-col tab-sm:space-y-">
<p class="credits text-[16px] mob-lg:text-[14px] mob-lg:mb-[15px]">© 2023 Natural Talents</p>
<nav class="footer__navbar flex space-x-[42px] tab-md:my-10 tab-sm:mt-0 mob-lg:space-x-0 mob-lg:flex-wrap">
<a href="./terms.html" class="mob-lg:w-full mob-lg:mb-[5px]">Terms and Conditions</a>
<a href="./policy.html" class="mob-lg:!mr-[53px]">Privacy policy</a>
<a href="./cookies.html">Use of Cookies</a>
</nav>
<div class="footer__socials flex space-x-[10px] tab-sm:absolute tab-sm:right-0 tab-sm:top-0">
<a href="#" class="footer__socials-link" target="_blank" rel="noopener nofollow noreferrer">
<i class="icon-twitter"></i>
</a>
<a href="#" class="footer__socials-link" target="_blank" rel="noopener nofollow noreferrer">
<i class="icon-linkedin"></i>
</a>
</div>
</div>
<a
href="https://www.boldidentities.com/"
target="_blank"
id="bold-credits"
class="mt-14 mx-auto block w-fit tab-md:mx-0 tab-md:mr-auto"
>
<img src="./images/BOLD-logo-white.gif" alt="">
</a>
</div>
</footer>
.footer {
padding: 60px 0 40px;
background: var(--green-grad);
@include media(1150) {
background-position: 76% 55%;
background-size: 100%;
}
@include media(800) {
background-size: 226%;
}
* {
color: var(--white);
}
label {
display: block;
font-size: ac(18px, 16px);
}
&__logo {
width: ac(146px, 98px);
height: ac(146px, 98px);
flex-shrink: 0;
transition: transform 0.3s ease-in-out;
&:hover {
transform: scale(1.06);
}
}
&__socials-link {
width: 50px;
height: 50px;
border-radius: 50%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
i {
transition: all 0.3s ease;
position: relative;
z-index: 1;
font-size: 20px;
color: var(--black);
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--white);
transition: all 0.5s ease;
border-radius: 50%;
}
&:hover {
&:before {
transform: scale(0);
}
i {
transform: scale(1.4);
color: var(--white);
}
}
}
&__address {
max-width: 187px;
&-link {
text-decoration: underline;
transition: 0.3s ease;
text-decoration-color: transparent;
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
&:hover {
text-decoration: underline;
text-decoration-color: var(--white);
-webkit-text-decoration-color: var(--white);
-moz-text-decoration-color: var(--white);
}
}
}
&__contacts, &__address {
a {
font-size: ac(22px, 18px);
}
}
.bottom-info {
a, p {
font-weight: 350;
}
p {
font-size: ac(16px, 14px);
}
}
a:not(.footer__logo, .socials-link, .footer__address-link) {
position: relative;
overflow: hidden;
&:before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
right: 0;
background: var(--white);
border-radius: 10px;
transition: 0.4s ease-in-out;
}
/* Hovering link */
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
}
}
}
.footer {
padding: 60px 0 40px;
background: var(--green-grad);
@mixin media 1150 {
background-position: 76% 55%;
background-size: 100%;
}
@mixin media 800 {
background-size: 226%;
}
* {
color: var(--white);
}
label {
display: block;
font-size: ac(18px, 16px);
}
&__logo {
size: ac(146px ,98px);
flex-shrink: 0;
transition: setTransition(transform);
&:hover {
transform: scale(1.06);
}
}
&__socials-link {
size: 50px;
border-radius: 50%;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
i {
transition: all 0.3s ease;
position: relative;
z-index: 1;
font-size: 20px;
color: var(--black);
}
&:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: var(--white);
transition: all 0.5s ease;
border-radius: 50%;
}
&:hover {
&:before {
transform: scale(0);
}
i {
transform: scale(1.4);
color: var(--white);
}
}
}
&__address {
max-width: 187px;
&-link {
text-decoration: underline;
transition: 0.3s ease;
text-decoration-color: transparent;
-webkit-text-decoration-color: transparent;
-moz-text-decoration-color: transparent;
&:hover {
text-decoration: underline;
text-decoration-color: var(--white);
-webkit-text-decoration-color: var(--white);
-moz-text-decoration-color: var(--white);
}
}
}
&__contacts, &__address {
a {
font-size: ac(22px, 18px);
}
}
.bottom-info {
a, p {
font-weight: 350;
}
p {
font-size: ac(16px, 14px);
}
}
a:not(.footer__logo, .socials-link, .footer__address-link) {
position: relative;
overflow: hidden;
&:before {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
right: 0;
background: var(--white);
border-radius: 10px;
transition: 0.4s ease-in-out;
}
/* Hovering link */
&:hover {
&:before {
left: 0;
right: auto;
width: 100%;
}
}
}
}
// Variables in tailwind.config.cjs
theme: {
screens: {
"tab-md': {'max': '991px'},
"tab-sm": {'max': '769px'},
"mob": {'max': '415px'},
"mob-lg": {'max': '551px'}
},
},
