<header class="m-header">
<div class="m-logo">the FAKE COLLECTIVE</div>
</header>
<nav class="m-nav">
<ul class="m-nav__list">
<li class="m-nav__listItem" id="_airportTerminal">
<a href="#airportTerminal" class="a-link a-nav__link">airport terminal</a>
</li>
<li class="m-nav__listItem" id="_skyscraper">
<a href="#skyscraper" class="a-link a-nav__link">skyscraper</a>
</li>
<li class="m-nav__listItem" id="_skyscraper2">
<a href="#skyscraper2" class="a-link a-nav__link">another skyscraper</a>
</li>
</ul>
</nav>
<main>
<div id="airportTerminal" class="m-imageContainer">
<figure class="m-image">
<img class="a-image" src="https://picsum.photos/2000/1500/?gravity=center&image=1033" alt="">
<figcaption class="a-caption">Fake location airport terminal</figcaption>
</figure>
</div>
<div id="skyscraper" class="m-imageContainer">
<figure class="m-image">
<img class="a-image" src="https://picsum.photos/2000/1500/?gravity=center&image=1031" alt="">
<figcaption class="a-caption">Nowhere land skyscraper</figcaption>
</figure>
</div>
<div id="skyscraper2" class="m-imageContainer">
<figure class="m-image">
<img class="a-image" src="https://picsum.photos/2000/1500/?gravity=center&image=983" alt="">
<figcaption class="a-caption">Nowhere land skyscraper 2</figcaption>
</figure>
</div>
</main>
<footer class="m-footer">
<div class="m-logo -big m-footer__logo"><span class="a-logo__text">the</span><span class="a-logo__text -fake">FAKE</span><span class="a-logo__text -colective">COLLECTIVE</span></div>
<div class="m-social">
<div class="m-social__item">
<a href="#" class="a-link a-social__link">
<svg class="a-social__icon" style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
</svg>
</a>
</div>
<div class="m-social__item">
<a href="#" class="a-link a-social__link">
<svg class="a-social__icon" viewBox="0 0 24 24">
<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
</svg>
</a>
</div>
<div class="m-social__item">
<a href="#" class="a-link a-social__link">
<svg class="a-social__icon" viewBox="0 0 24 24">
<path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z" />
</svg>
</a>
</div>
<div class="m-social__item">
<a href="#" class="a-link a-social__link">
<svg class="a-social__icon" viewBox="0 0 24 24">
<path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
</svg>
</a>
</div>
</div>
</footer>
<div class="m-overlay">
<div class="a-overlay"></div>
<div class="m-overlay__logo">
<div class="m-logo -big"><span class="a-logo__text">the</span><span class="a-logo__text -fake">FAKE</span><span class="a-logo__text -colective">COLLECTIVE</span></div>
</div>
</div>
$min-footer_height: 300px;
$brand-color_01: #ff0;
$brand-color_02: #333;
$ui-color_01: #fff;
$ui-color_02: $brand-color_02;
$ui-color_03: #fff;
$blend_mode-overlay: darken;
@import url('https://fonts.googleapis.com/css?family=Monoton|Raleway');
html {
font-size: 16px;
}
body {
font-family: 'Raleway';
background-color: $ui-color_03;
}
%helper {
&__centeredContent {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
&__logoType {
font-family: 'Monoton', cursive;
}
}
.a {
&-image {
max-width: 100%;
max-height: calc(75vh - 100px);
filter: saturate(0) contrast(1.5);
transition: filter .2s ease-in-out;
}
&-overlay {
background-color: $brand-color_01;
transform: skewY(2deg);
height: 100%;
}
&-logo__text {
display: block;
.m-logo.-big & {
line-height: 1em;
}
&.-fake {
font-size: 4.6rem;
}
}
&-caption {
width: calc(100% - 1rem);
text-align: right;
font-size: 0.825rem;
line-height: 1em;
padding: .5rem;
text-transform: uppercase;
background-color: $brand-color_01;
}
&-link {
&, &:focus, &:active, &:visited {
text-decoration: none;
color: black;
}
}
&-nav__link {
text-transform: uppercase;
display: inline-block;
padding: .5rem;
&, &:focus, &:active, &:visited {
color: currentColor;
}
}
&-social {
&__link {
padding: .5rem;
display: inline-block;
}
&__icon {
width: 1.5rem;
height: 1.5rem;
color: currentColor;
path {
fill: currentColor;
}
}
}
}
.m {
&-logo {
@extend %helper__logoType;
font-size: 2rem;
line-height: 2em;
}
&-image {
&Container {
height: 75vh;
width: 60vw;
@extend %helper__centeredContent;
margin: auto;
}
}
&-footer {
height: 25vh;
min-height: $min-footer_height;
@extend %helper__centeredContent;
@extend %helper__logoType;
flex-wrap: wrap;
&__logo {
color: lighten($brand-color_02, 60%);
position: relative;
top: 56px;
}
}
&-overlay {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 25vh;
min-height: $min-footer_height;
mix-blend-mode: $blend_mode-overlay;
background-image: linear-gradient(to top, $brand-color_01, $brand-color_01 50%, transparent 50%);
pointer-events: none;
&__logo {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
@extend %helper__centeredContent;
}
}
&-header {
@extend %helper__centeredContent;
margin-top: 1rem;
}
&-nav {
z-index: 3;
position: sticky;
top: 0;
padding: 1rem 0;
@extend %helper__centeredContent;
&__list {
list-style: none;
padding: 0;
margin: 0;
}
&__listItem {
display: inline-block;
background-image: linear-gradient(to bottom, $brand-color_02, $brand-color_02 50%, $brand-color_01 50%, $brand-color_01);
background-size: auto 200%;
background-position: center 0%;
color: $ui-color_01;
transition: background-position .25s ease;
&:hover, &.-active {
background-position: center 100%;
color: $ui-color_02;
}
}
}
&-social {
flex-basis: 100%;
@extend %helper__centeredContent;
}
}
View Compiled
const initSmoothScroll = () => {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
};
const initObservable = () => {
const updateNavItems = (currentActiveId) => {
const prev = document.querySelector('.m-nav__listItem.-active');
if (prev) {
prev.classList.remove('-active');
}
const current = document.querySelector(`#_${currentActiveId}`);
if (current) {
current.classList.add('-active');
}
}
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio >= 1) {
updateNavItems(entry.target.id);
}
});
}, {
root: null,
rootMargin: "0px",
threshold: 1.0
});
const imageContainers = document.querySelectorAll(".m-imageContainer");
imageContainers.forEach(elem => observer.observe(elem));
};
const init = () => {
initSmoothScroll();
initObservable();
};
if (
document.readyState === "complete" ||
(document.readyState !== "loading" && !document.documentElement.doScroll)
) {
init();
} else {
document.addEventListener("DOMContentLoaded", init);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.