|
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap"); |
|
|
|
* { |
|
padding: 0; |
|
margin: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
font-family: "Poppins", sans-serif; |
|
|
|
--black: #242424; |
|
--white: #f5f5f5; |
|
--pill: #e0d4be; |
|
--red: #cc033f; |
|
} |
|
|
|
ul { |
|
list-style: none; |
|
} |
|
|
|
.page-wrap { |
|
position: relative; |
|
} |
|
|
|
header { |
|
width: 100%; |
|
min-height: 100vh; |
|
overflow-x: hidden; |
|
} |
|
|
|
/* NAV: Top Menu Section |
|
----------------------------------------------- */ |
|
nav { |
|
width: 100%; |
|
position: fixed; |
|
z-index: 10; |
|
padding: 1em 5em; |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
nav h1 { |
|
font-size: clamp(1.2rem, 6vw, 3rem); |
|
font-weight: normal; |
|
text-transform: uppercase; |
|
color: var(--pill); |
|
font-size: 1.3rem; |
|
background-color: var(--red); |
|
padding: 5px 10px; |
|
} |
|
nav ul { |
|
display: flex; |
|
color: var(--white); |
|
} |
|
nav ul li:not(#burger) { |
|
visibility: hidden; |
|
margin-right: 1.5em; |
|
} |
|
|
|
#burger { |
|
width: min-content; |
|
height: 28px; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-evenly; |
|
cursor: pointer; |
|
} |
|
#burger span { |
|
display: block; |
|
height: 3px; |
|
width: 22px; |
|
background-color: var(--red); |
|
border-radius: 200px; |
|
transition: transform 0.3s 0.3s; |
|
} |
|
|
|
.active span:nth-of-type(1) { |
|
transform: translateY(-3px) scaleX(1.3); |
|
} |
|
.active span:nth-of-type(3) { |
|
transform: translateY(3px) scaleX(1.3); |
|
} |
|
|
|
/* MAIN: Slider Section |
|
----------------------------------------------- */ |
|
main { |
|
width: 100vw; |
|
height: 100vh; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
article { |
|
width: 100%; |
|
height: 100%; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: var(--i); |
|
} |
|
|
|
.hero-info { |
|
position: absolute; |
|
top: 50%; |
|
left: 5%; |
|
transform: translateY(-50%); |
|
z-index: 8; |
|
} |
|
.hero-info h2 { |
|
font-size: clamp(2rem, 9vw, 5rem); |
|
line-height: clamp(2rem, 9vw, 5rem); |
|
text-transform: uppercase; |
|
} |
|
.hero-info h1 { |
|
color: var(--white); |
|
font-size: clamp(3.2rem, 10vw, 7rem); |
|
line-height: clamp(3.2rem, 10vw, 7rem); |
|
text-transform: uppercase; |
|
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5); |
|
} |
|
.hero-info h3 { |
|
color: var(--white); |
|
font-size: 1.6rem; |
|
font-weight: normal; |
|
margin-top: 2em; |
|
} |
|
@supports (-webkit-text-stroke: 3px var(--pill)) { |
|
.hero-info h2 { |
|
color: transparent; |
|
-webkit-text-stroke: 3px var(--pill); |
|
text-shadow: none; |
|
} |
|
} |
|
|
|
.hero-image { |
|
width: 100%; |
|
height: 100%; |
|
background-size: cover; |
|
background-position: center; |
|
background-repeat: no-repeat; |
|
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); |
|
} |
|
|
|
.hi-1 { |
|
background-image: url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"); |
|
} |
|
|
|
/* Photo by Lucas Favre |
|
https://unsplash.com/photos/BRTV55ErUZg |
|
----------------------------------------------- */ |
|
.hi-2 { |
|
background-image: url("https://images.unsplash.com/photo-1517057011470-8f36d636e6ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"); |
|
} |
|
|
|
/* Photo by Roell de Ram |
|
https://unsplash.com/photos/2DM7eOR5iyc |
|
----------------------------------------------- */ |
|
.hi-3 { |
|
background-image: url("https://images.unsplash.com/flagged/photo-1552035791-b3cc1632e933?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80"); |
|
} |
|
|
|
/* Photo by Go to Bernd Wahlbrinck |
|
https://unsplash.com/photos/lVVvYiR66kw |
|
----------------------------------------------- */ |
|
.hi-4 { |
|
background-image: url("https://images.unsplash.com/photo-1574700273608-7962d3602a9f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"); |
|
} |
|
|
|
/* Photo by Micheal Schofield |
|
https://unsplash.com/photos/d0ohwP3BRf4 |
|
----------------------------------------------- */ |
|
.hi-5 { |
|
background-image: url("https://images.unsplash.com/photo-1605045544284-d13c6d6a60a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"); |
|
} |
|
|
|
/* SECTION: Overlay Menu Section |
|
----------------------------------------------- */ |
|
section { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: 9; |
|
min-height: 100vh; |
|
padding: 8em 5em 2em 5em; |
|
background-color: var(--white); |
|
background-image: url("https://www.transparenttextures.com/patterns/church.png"); |
|
clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%); |
|
} |
|
|
|
.level-1 { |
|
display: grid; |
|
grid-template-columns: 65% 1fr; |
|
grid-auto-rows: min-content; |
|
grid-gap: 2em; |
|
} |
|
.level-1 h3 { |
|
font-weight: 600; |
|
font-size: 1.8rem; |
|
text-transform: uppercase; |
|
} |
|
.level-1 p { |
|
margin: 0.5em 0 0 0.5em; |
|
} |
|
.level-1 p small { |
|
font-size: 1rem; |
|
opacity: 0.5; |
|
cursor: pointer; |
|
} |
|
.level-1 p small:hover { |
|
opacity: 1; |
|
color: var(--red); |
|
} |
|
.level-1 ul > li { |
|
font-size: 1.2rem; |
|
padding: 0.3em; |
|
transition: color 0.3s; |
|
} |
|
.level-1 ul > li:hover { |
|
color: var(--red); |
|
cursor: pointer; |
|
} |
|
.level-1 li:nth-of-type(1) { |
|
grid-column: 1/2; |
|
grid-row: 1/4; |
|
} |
|
.level-1 li:nth-of-type(2) { |
|
grid-column: 2/3; |
|
grid-row: 1/2; |
|
} |
|
.level-1 li:nth-of-type(3) { |
|
grid-column: 2/3; |
|
grid-row: 2/3; |
|
} |
|
.level-1 li:nth-of-type(4) { |
|
grid-column: 2/3; |
|
grid-row: 3/4; |
|
} |
|
|
|
.level-2 { |
|
padding: 0.3em 1em; |
|
} |
|
.level-2 li p { |
|
color: var(--red); |
|
font-size: 1.3rem; |
|
font-weight: 600; |
|
margin: 1em 0; |
|
text-transform: uppercase; |
|
border-bottom: 1px solid #fde0ac; |
|
} |
|
|
|
.level-3 { |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
.level-3 li { |
|
padding: 0.5em 1em !important; |
|
background-color: var(--pill); |
|
border-radius: 500px; |
|
margin-right: 10px; |
|
margin-bottom: 10px; |
|
font-size: 1rem !important; |
|
cursor: pointer; |
|
color: var(--black); |
|
} |
|
|
|
@media screen and (max-width: 600px) { |
|
nav { |
|
padding: 1em 2em; |
|
} |
|
nav h1 { |
|
font-size: 0.9rem; |
|
} |
|
section { |
|
padding: 8em 2em 2em 2em; |
|
} |
|
.level-1 { |
|
grid-template-columns: 1fr; |
|
} |
|
.level-1 li:nth-of-type(1) { |
|
grid-column: 1/2; |
|
grid-row: 1/2; |
|
} |
|
.level-1 li:nth-of-type(2) { |
|
grid-column: 1/2; |
|
grid-row: 2/3; |
|
} |
|
.level-1 li:nth-of-type(3) { |
|
grid-column: 1/2; |
|
grid-row: 3/4; |
|
} |
|
.level-1 li:nth-of-type(4) { |
|
grid-column: 1/2; |
|
grid-row: 4/5; |
|
} |
|
} |