church-website/src/components/Banner/styles.module.scss
2026-03-06 15:10:14 +01:00

68 lines
No EOL
971 B
SCSS

@import 'template.scss';
.banner {
position: relative;
height: 634px;
background-color: $shade1;
background-image: url("banner2.jpg");
background-size: cover;
background-position: center center;
opacity: 0.7;
}
.logo {
position: absolute;
bottom: 20px;
left: 30px;
}
.nameContainer {
opacity: 1;
color: $white;
font-family: var(--header-font);
position: absolute;
bottom: 50px;
right: 0;
width: 50vw;
line-height: 1.7em;
}
.catholic {
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
}
.name {
font-size: 90px;
font-weight: 700;
margin-bottom: 30px;
line-height: 1em;
}
.location {
font-size: 40px;
font-weight: 700;
}
@media screen and (max-width: 576px) {
.logo {
left: -20px;
bottom: -30px;
}
.nameContainer {
padding: 20px;
position: relative;
top: 100px;
}
.name {
font-size: 50px;
line-height: 0.8em;
}
.catholic, .location {
font-size: 30px;
}
}