bl-frontend-rs/css/footer.css

130 lines
2.3 KiB
CSS

.footer {
width: 80%;
height: 425px;
margin-top: 150px;
background-color: #00113B;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px 10vw;
}
.footer-before-line {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.footer-before-line-first-column {
display: flex;
flex-direction: column;
justify-content: end;
align-items: start;
gap: 10px;
height: 100%;
}
.footer-before-line-first-column-logo {
object-fit: cover;
width: 50px;
height: 75px;
}
.footer-before-line-first-column-paragraph {
width: 40vw;
font-family: Poppins;
font-size: clamp(9px, 1.8vw, 16px);
color: white;
line-height: 24px;
opacity: 75%;
text-align: justify;
}
.footer-before-line-second-column {
display: flex;
flex-direction: column;
justify-content: end;
align-items: end;
gap: 10px;
width: clamp(100px, 28vw, 185px);
flex-grow: 0;
height: 100%;
}
.footer-before-line-second-column-title {
color: white;
font-family: Poppins;
font-size: 18px;
font-weight: 600;
width: 100%;
text-align: start;
}
.footer-before-line-second-column-description {
color: white;
font-family: Poppins;
font-size: clamp(9px, 1.8vw, 16px);
font-weight: 400;
line-height: 20px;
opacity: 75%;
width: 100%;
white-space: pre-line;
text-align: start;
}
.footer-line {
background-color: white;
width: 100%;
height: 1px;
margin: 20px 0px;
}
.footer-after-line {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}
.footer-after-line-copyright {
font-family: Poppins;
font-size: 11px;
color: white;
opacity: 75%;
width: 45vw;
text-align: start;
}
.footer-after-line-socials {
display: flex;
flex-direction: row;
justify-content: end;
gap: 10px;
align-items: center;
width: 100px;
}
.footer-after-line-social-frame {
display: flex;
justify-content: center;
align-items: center;
width: 35px;
height: 35px;
border-radius: 100%;
text-decoration: none;
background-color: #4C40F7;
color: white
}
.footer-after-line-social-frame :hover {
cursor: pointer;
}