Mobile screens added.
This commit is contained in:
BenjaminToby
parent
8715cd578b
commit
1cd1ef1142
1
images/art-logo-2.svg
Normal file
1
images/art-logo-2.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.83 284.54"><defs><style>.cls-1{fill:#e14646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M46.5,90.09c10.74-3.75,8.58-18,8.87-28.32-.23-11.68-2.57-16.72-14.13-19.45C58,41.19,55,18,50.11,9.1,45.08,1.49,34.94,0,24.36,0A24.39,24.39,0,0,0,0,24.44V91.73C9.78,91.45,39.65,92.71,46.5,90.09ZM23.79,15.91c6.69-.36,7.85,2.16,7.79,8.7-.19,9.38.53,12-7.79,11.64Zm0,34.58c7.59.49,7.51.72,7.79,8.53-.63,7.21,3,18-7.79,17.06Z"/><polygon class="cls-1" points="102.25 73.42 84.8 73.42 84.8 53.31 99.65 53.31 99.65 35.91 84.8 35.91 84.8 18.57 100.67 18.57 100.67 0.26 61.01 0.26 61.01 91.73 102.25 91.73 102.25 73.42"/><polygon class="cls-1" points="126.08 50.15 138.45 91.73 159.3 91.73 159.3 0.26 139.41 0.26 139.41 41.45 126.08 0.26 106.19 0.26 106.19 91.73 126.08 91.73 126.08 50.15"/><path class="cls-1" d="M186,90.52c12.63-5.94,8.05-13.64,9.09-29.13V.26H171.27c-.1,3.76.25,69.87-.23,71.36-.66,4.23-4.83,4.66-8.81,4.12v16C168.23,91.65,181.44,92.19,186,90.52Z"/><path class="cls-1" d="M222,75.29h8.5l1.28,16.44h24.31L242.49.26H208.11L196,91.73h24.6Zm4.26-54.63q1.81,22.87,3.62,38.41h-8.19Q222.62,46.93,226.26,20.66Z"/><path class="cls-1" d="M278.06,31.39l8.73,60.34h14.74L309.81,30l0,61.75h20.79V.26H299.68L294.22,43C292.5,31.73,289.69,10.44,288,.26H257.24V91.73H278Z"/><rect class="cls-1" x="337.29" y="0.26" width="23.79" height="91.47"/><path class="cls-1" d="M401,.26V41.45L387.61.26H367.72V91.73h19.89V50.15L400,91.73h20.84V20.15A19.88,19.88,0,0,0,401,.26Z"/><path class="cls-1" d="M354.66,94.56H0v8.18a27.18,27.18,0,0,0,27.18,27.18h0V271.26H73.12V129.92H89.07c-4.15,16.71-2.16,56.87-2.66,79.87-2.64,46.06,10.47,74,57.15,74.75,46.95-.63,59.72-29,57.14-74.75-.49-22.88,1.4-63.58-2.64-79.87h12.61V271.26c43.22-.62,121.35,10.11,117-41.5,3.15-32.25-9.86-51.14-33.69-53.94,23.17-4.39,21.24-26.68,19.52-45.9h9.13l22.18,77.38v64h42.57v-64l23-77.38h0l10.51-35.36ZM149.83,130.41c3.09,8.34.81,93.19,1.47,104.26,0,11.18-.47,10.29-1.41,13.25-1.16,5.73-11.23,6-12.73.6-.9-2.59-1.35-1.41-1.35-12.44.91-11.68-2.17-97.46,1.92-106.16H149.6C149.68,130.08,149.76,130.23,149.83,130.41Zm131.85,94.14c0,16.48-18.59,16.27-25.06,16.48V191.59C280.29,191.71,283.11,199.57,281.68,224.55ZM270.15,130c2.78,5.28,1.32,29.26-.33,30.67-1.72,3.62-8.31,3.34-13.2,3.44V129.92h13.5Zm95.67,34.22q-.76-10.89-4.73-34.28h10.35Q367.89,149,365.82,164.2Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
1
images/art-logo-3.svg
Normal file
1
images/art-logo-3.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.83 284.28"><defs><style>.cls-1{fill:#e14646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,23.73A23.72,23.72,0,0,1,23.73,0h0Q35,0,40.76,1.75a16.89,16.89,0,0,1,9.35,7.09Q53.68,14.17,53.67,26q0,8-2.51,11.18t-9.92,4.85q8.25,1.88,11.19,6.19t2.94,13.26V70q0,9.27-2.12,13.74a11.39,11.39,0,0,1-6.75,6.1q-4.64,1.64-19,1.64H0Zm23.79-8.08V36q1.52-.06,2.37-.06,3.49,0,4.46-1.72t1-9.86a15.92,15.92,0,0,0-.79-6,3.77,3.77,0,0,0-2.06-2.17A18.5,18.5,0,0,0,23.79,15.65Zm0,34.58V75.82q5-.16,6.41-1.58t1.38-6.95V58.76q0-5.88-1.24-7.12T23.79,50.23Z"/><path class="cls-1" d="M61,0h39.66V18.31H84.79V35.65H99.65v17.4H84.79V73.17h17.46v18.3H61Z"/><path class="cls-1" d="M159.3,0V91.47H138.45L126.08,49.89V91.47H106.19V0h19.89l13.33,41.19V0Z"/><path class="cls-1" d="M195.06,0V61.13q0,13.73-.29,17.66a13.45,13.45,0,0,1-2.58,7.09A11.73,11.73,0,0,1,186,90.26q-3.91,1.21-11.83,1.21H162.23v-16c1.43.11,2.47.17,3.11.17a6,6,0,0,0,4-1.24,4.65,4.65,0,0,0,1.69-3,66,66,0,0,0,.23-7V0Z"/><path class="cls-1" d="M242.49,0l13.6,91.47H231.78L230.5,75H222l-1.43,16.44H196L208.11,0ZM229.88,58.81q-1.8-15.53-3.62-38.41-3.64,26.26-4.57,38.41Z"/><path class="cls-1" d="M330.63,0V91.47H309.84l0-61.75-8.28,61.75H286.79l-8.73-60.34,0,60.34H257.24V0H288q1.38,8.25,2.83,19.44l3.38,23.27L299.68,0Z"/><path class="cls-1" d="M361.07,0V91.47H337.29V0Z"/><path class="cls-1" d="M420.83,19.89V91.47H400L387.61,49.89V91.47H367.72V0h19.89L401,41.19V0h0A19.88,19.88,0,0,1,420.83,19.89Z"/><path class="cls-1" d="M202.7,209.53c0,19.09-.45,24.62-1.35,32.56A45.42,45.42,0,0,1,173.72,279q-12.09,5.28-28.16,5.28a71.59,71.59,0,0,1-27.4-5,45.66,45.66,0,0,1-28.34-36.67c-.94-7.83-1.41-13.54-1.41-33.09V177q0-28.64,1.35-40.54a45.42,45.42,0,0,1,27.63-36.91q12.09-5.26,28.17-5.28a71.61,71.61,0,0,1,27.39,5A45.66,45.66,0,0,1,201.29,136q1.41,11.73,1.41,41.07ZM153.3,147.1q0-13.26-1.47-16.95t-6-3.7a6.77,6.77,0,0,0-5.93,3q-2.06,3-2.05,17.66v88.72c0,11,.45,9.86,1.35,12.44s3,3.87,6.28,3.87,5.51-1.49,6.45-4.47,1.41-2.07,1.41-13.25Z"/><path class="cls-1" d="M80.37,129.41c.81-8.23,7.6-16,12.49-22.81,3.56-4.95,12.26-10.09,20-12.3H0v8.18a27.18,27.18,0,0,0,27.18,27.18h0V271H73.12V129.66"/><path class="cls-1" d="M210.67,94.3h45.84q21.72,0,32.9,3.38a32.64,32.64,0,0,1,18.07,13.69q6.87,10.3,6.87,33.21,0,15.49-4.85,21.6c-3.24,4.07-6,7.2-15.57,9.38,11,.35,33.7,11.5,33.7,37.57v16.38c0,11.94-2.81,41.49-53.81,41.49H210.67Zm46,30.23v39.3c2-.08,3.49-.11,4.58-.11q6.76,0,8.62-3.33t1.86-19q0-8.29-1.53-11.62c-1-2.22-2.34-3.62-4-4.21S261.35,124.6,256.62,124.53Zm0,66.8v49.44c6.47-.21,25.06,0,25.06-16.48V207.81C281.68,191.33,263.46,191.55,256.62,191.33Z"/><path class="cls-1" d="M420.83,94.3,387.33,207v64H344.76V207L312.45,94.3h42.21q9.9,51.74,11.16,69.64,3.82-28.29,12.8-69.64Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.8 KiB |
1
images/art-logo-4.svg
Normal file
1
images/art-logo-4.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420.83 284.28"><defs><style>.cls-1{fill:#e14646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,0H23.73Q35,0,40.76,1.75a16.89,16.89,0,0,1,9.35,7.09Q53.68,14.17,53.67,26q0,8-2.51,11.18t-9.92,4.85q8.25,1.88,11.19,6.19t2.94,13.26V70q0,9.27-2.12,13.74a11.39,11.39,0,0,1-6.75,6.1q-4.64,1.64-19,1.64H0ZM23.79,15.65V36q1.52-.06,2.37-.06,3.49,0,4.46-1.72t1-9.86a15.92,15.92,0,0,0-.79-6,3.77,3.77,0,0,0-2.06-2.17A18.5,18.5,0,0,0,23.79,15.65Zm0,34.58V75.82q5-.16,6.41-1.58t1.38-6.95V58.76q0-5.88-1.24-7.12T23.79,50.23Z"/><path class="cls-1" d="M61,0h39.66V18.31H84.79V35.65H99.65v17.4H84.79V73.17h17.46v18.3H61Z"/><path class="cls-1" d="M159.3,0V91.47H138.45L126.08,49.89V91.47H106.19V0h19.89l13.33,41.19V0Z"/><path class="cls-1" d="M195.06,0V61.13q0,13.73-.29,17.66a13.45,13.45,0,0,1-2.58,7.09A11.73,11.73,0,0,1,186,90.26q-3.91,1.21-11.83,1.21H162.23v-16c1.43.11,2.47.17,3.11.17a6,6,0,0,0,4-1.24,4.65,4.65,0,0,0,1.69-3,66,66,0,0,0,.23-7V0Z"/><path class="cls-1" d="M242.49,0l13.6,91.47H231.78L230.5,75H222l-1.43,16.44H196L208.11,0ZM229.88,58.81q-1.8-15.53-3.62-38.41-3.64,26.26-4.57,38.41Z"/><path class="cls-1" d="M330.63,0V91.47H309.84l0-61.75-8.28,61.75H286.79l-8.73-60.34,0,60.34H257.24V0H288q1.38,8.25,2.83,19.44l3.38,23.27L299.68,0Z"/><path class="cls-1" d="M361.07,0V91.47H337.29V0Z"/><path class="cls-1" d="M420.83,0V91.47H400L387.61,49.89V91.47H367.72V0h19.89L401,41.19V0Z"/><path class="cls-1" d="M201.7,209.53c0,19.09-.45,24.62-1.35,32.56A45.42,45.42,0,0,1,172.72,279q-12.09,5.28-28.16,5.28a71.59,71.59,0,0,1-27.4-5,45.66,45.66,0,0,1-28.34-36.67c-.94-7.83-1.41-13.54-1.41-33.09V177q0-28.64,1.35-40.54a45.42,45.42,0,0,1,27.63-36.91q12.09-5.26,28.17-5.28a71.61,71.61,0,0,1,27.39,5A45.66,45.66,0,0,1,200.29,136q1.41,11.73,1.41,41.07ZM152.3,147.1q0-13.26-1.47-16.95t-6-3.7a6.77,6.77,0,0,0-5.93,3q-2.06,3-2.05,17.66v88.72c0,11,.45,9.86,1.35,12.44s3,3.87,6.28,3.87,5.51-1.49,6.45-4.47,1.41-2.07,1.41-13.25Z"/><path class="cls-1" d="M80.37,129.41c.81-8.23,7.6-16,12.49-22.81,3.56-4.95,12.26-10.09,20-12.3H0v35.36H27.18V271H73.12V129.66"/><path class="cls-1" d="M210.67,94.3h45.84q21.72,0,32.9,3.38a32.64,32.64,0,0,1,18.07,13.69q6.87,10.3,6.87,33.21,0,15.49-4.85,21.6c-3.24,4.07-6,7.2-15.57,9.38,11,.35,33.7,11.5,33.7,37.57v16.38c0,11.94-2.81,41.49-53.81,41.49H210.67Zm46,30.23v39.3c2-.08,3.49-.11,4.58-.11q6.76,0,8.62-3.33t1.86-19q0-8.29-1.53-11.62c-1-2.22-2.34-3.62-4-4.21S261.35,124.6,256.62,124.53Zm0,66.8v49.44c6.47-.21,25.06,0,25.06-16.48V207.81C281.68,191.33,263.46,191.55,256.62,191.33Z"/><path class="cls-1" d="M420.83,94.3,387.33,207v64H344.76V207L312.45,94.3h42.21q9.9,51.74,11.16,69.64,3.82-28.29,12.8-69.64Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
1
images/art-logo.svg
Normal file
1
images/art-logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.83 284.54"><defs><style>.cls-1{fill:#e14646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M56.5,90.09c10.74-3.75,8.58-18,8.87-28.32-.23-11.68-2.57-16.71-14.13-19.45C68,41.19,65,18,60.11,9.1,51-4.73,24.93,1.74,10,.26V91.73C19.78,91.45,49.65,92.71,56.5,90.09ZM33.79,15.91c6.69-.36,7.85,2.16,7.79,8.7-.19,9.38.53,12-7.79,11.64Zm0,34.58c7.59.49,7.51.72,7.79,8.53-.63,7.21,3,18-7.79,17.06Z"/><polygon class="cls-1" points="112.25 73.42 94.8 73.42 94.8 53.31 109.65 53.31 109.65 35.91 94.8 35.91 94.8 18.57 110.67 18.57 110.67 0.26 71.01 0.26 71.01 91.73 112.25 91.73 112.25 73.42"/><polygon class="cls-1" points="136.08 50.15 148.45 91.73 169.3 91.73 169.3 0.26 149.41 0.26 149.41 41.45 136.08 0.26 116.19 0.26 116.19 91.73 136.08 91.73 136.08 50.15"/><path class="cls-1" d="M196,90.52c12.63-5.94,8.05-13.64,9.09-29.13V.26H181.27c-.1,3.76.25,69.87-.23,71.36-.66,4.23-4.83,4.66-8.81,4.12v16C178.23,91.65,191.44,92.19,196,90.52Z"/><path class="cls-1" d="M232,75.29h8.5l1.28,16.44h24.31L252.49.26H218.11L206,91.73h24.6Zm4.26-54.63q1.81,22.87,3.62,38.41h-8.19Q232.62,46.93,236.26,20.66Z"/><path class="cls-1" d="M288.06,31.39l8.73,60.34h14.74L319.81,30l0,61.75h20.79V.26H309.68L304.22,43C302.5,31.73,299.69,10.44,298,.26H267.24V91.73H288Z"/><rect class="cls-1" x="347.29" y="0.26" width="23.79" height="91.47"/><polygon class="cls-1" points="410.95 0.26 410.95 41.45 397.61 0.26 377.73 0.26 377.73 91.73 397.61 91.73 397.61 50.15 409.99 91.73 430.83 91.73 430.83 0.26 410.95 0.26"/><path class="cls-1" d="M364.66,94.56H10L0,129.92H37.18V271.26H83.12V129.92H99.07c-4.15,16.71-2.16,56.88-2.66,79.87-2.64,46.06,10.47,74,57.15,74.75,46.95-.63,59.72-29,57.14-74.75-.49-22.88,1.4-63.58-2.64-79.87h12.61V271.26c43.22-.62,121.35,10.11,117-41.5,3.15-32.25-9.86-51.14-33.69-53.94,23.17-4.39,21.24-26.68,19.52-45.9h9.13l22.18,77.38v64h42.57v-64l23-77.38h0l10.51-35.36ZM159.83,130.41c3.09,8.34.81,93.19,1.47,104.26,0,11.18-.47,10.29-1.41,13.25-1.16,5.73-11.23,6-12.73.6-.9-2.58-1.35-1.41-1.35-12.44.91-11.68-2.17-97.46,1.92-106.16H159.6C159.68,130.08,159.76,130.23,159.83,130.41Zm131.85,94.14c0,16.48-18.59,16.27-25.06,16.48V191.59C290.29,191.71,293.11,199.57,291.68,224.55ZM280.15,130c2.78,5.28,1.32,29.26-.33,30.67-1.72,3.62-8.31,3.34-13.2,3.44V129.92h13.5Zm95.67,34.22q-.76-10.89-4.73-34.28h10.35Q377.89,149,375.82,164.2Z"/></g></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -17,6 +17,11 @@ window.addEventListener("scroll", () => {
|
|||||||
element.style.transform = "translateY(" + (scroll * speed) + "px)";
|
element.style.transform = "translateY(" + (scroll * speed) + "px)";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if(window.innerWidth < 500) {
|
||||||
|
|
||||||
|
translate[0].style.transform = "translateY(" + (scroll * 0.1) + "px)";
|
||||||
|
}
|
||||||
|
|
||||||
// skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
|
// skewedBg.style.transform = "translateY(" + (scroll * skewedBg.dataset.speed) + "px) skewY(-3deg)";
|
||||||
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
|
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
|
||||||
|
|
||||||
@ -28,9 +33,12 @@ window.addEventListener("scroll", () => {
|
|||||||
//});
|
//});
|
||||||
|
|
||||||
window.addEventListener("load", () => {
|
window.addEventListener("load", () => {
|
||||||
document.getElementById("skewed-bg").classList.add("skewed-bg");
|
document.getElementById("skewed-bg-block").classList.add("skewed-bg");
|
||||||
document.getElementById("preloader").className = "preloader";
|
document.getElementById("preloader").className = "preloader";
|
||||||
document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper";
|
document.getElementById("hero-graphic-container").className = "hero-graphic-wrapper";
|
||||||
|
document.getElementById("hero-text-controller").className = "hero-text-block";
|
||||||
|
document.querySelector(".hero-text-wrapper > a").classList.add("scroll-into-view-intro-2");
|
||||||
|
document.querySelector(".hero-watermark").classList.add("scroll-into-view-intro-2");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
@ -41,7 +49,7 @@ window.addEventListener("load", () => {
|
|||||||
|
|
||||||
//##########################################################################################################
|
//##########################################################################################################
|
||||||
|
|
||||||
var targets = document.querySelector("#section-2");
|
var targets = document.querySelectorAll(".menu-color-change");
|
||||||
var windowRect = {
|
var windowRect = {
|
||||||
rootMargin: "0px 0px -400px 0px",
|
rootMargin: "0px 0px -400px 0px",
|
||||||
delay: 100,
|
delay: 100,
|
||||||
@ -56,15 +64,21 @@ function navColorFunction(entries, navColors) {
|
|||||||
if(entry.isIntersecting) {
|
if(entry.isIntersecting) {
|
||||||
document.querySelector("header").style.color = "white";
|
document.querySelector("header").style.color = "white";
|
||||||
document.querySelector(".hero-graphic-wrapper").style.opacity = "0";
|
document.querySelector(".hero-graphic-wrapper").style.opacity = "0";
|
||||||
|
document.querySelector(".aside-header > a").style.color = "white";
|
||||||
// translate[3].dataset.speed = .2;
|
// translate[3].dataset.speed = .2;
|
||||||
} else {
|
} else {
|
||||||
document.querySelector("header").style.color = "#222";
|
document.querySelector("header").style.color = "#222";
|
||||||
|
document.querySelector(".aside-header > a").style.color = "#222";
|
||||||
document.querySelector(".hero-graphic-wrapper").style.opacity = "1";
|
document.querySelector(".hero-graphic-wrapper").style.opacity = "1";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
navColors.observe(targets);
|
targets.forEach(entry => {
|
||||||
|
navColors.observe(entry);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//##########################################################################################################
|
//##########################################################################################################
|
||||||
@ -88,6 +102,11 @@ scrollIntoViewItems.forEach(item => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//##########################################################################################################
|
//##########################################################################################################
|
||||||
|
|
||||||
//var sectionOneText = document.querySelector("#section-2");
|
//var sectionOneText = document.querySelector("#section-2");
|
||||||
@ -106,12 +125,18 @@ function sect1Function(entries, sectionOneIo) {
|
|||||||
// } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) {
|
// } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) {
|
||||||
// translate[3].dataset.speed = .3;
|
// translate[3].dataset.speed = .3;
|
||||||
// }
|
// }
|
||||||
translate[4].dataset.speed = .2;
|
|
||||||
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
if(window.innerWidth > 800) {
|
||||||
|
translate[4].dataset.speed = .2;
|
||||||
|
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||||
|
}
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
if(window.innerWidth > 800) {
|
||||||
translate[4].dataset.speed = 0;
|
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||||
setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000);
|
translate[4].dataset.speed = 0;
|
||||||
|
setTimeout(()=> {translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";}, 1000);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -126,3 +151,46 @@ sectionOneIo.observe(translate[4]);
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//############################################################################## -- Hamburger
|
||||||
|
|
||||||
|
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
|
||||||
|
//document.querySelector(".hamburger-wrapper").addEventListener("blur", hamburgerCLickOut);
|
||||||
|
|
||||||
|
let hc = 0;
|
||||||
|
|
||||||
|
function hamburgerMenuToggle() {
|
||||||
|
if (hc == 0) {
|
||||||
|
document.querySelector("nav").className = "nav-mobile";
|
||||||
|
document.querySelector("#aside-heder-block").className = "aside-header-mobile";
|
||||||
|
} else {
|
||||||
|
document.querySelector("nav").className = "none";
|
||||||
|
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||||
|
hc = -1;
|
||||||
|
}
|
||||||
|
hc++;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
if(window.innerWidth > 800) {
|
||||||
|
document.querySelector("nav").className = "none";
|
||||||
|
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||||
|
hc = 0;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//function hamburgerCLickOut() {
|
||||||
|
// document.querySelector("nav").className = "none";
|
||||||
|
// document.querySelector("#aside-heder-block").className = "aside-header";
|
||||||
|
// hc = 0;
|
||||||
|
//}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
769
v2.css
769
v2.css
@ -27,9 +27,11 @@ html {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
/*background-color: #B8FFE1;*/
|
/*background-color: #B8FFE1;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -44,7 +46,7 @@ header {
|
|||||||
|
|
||||||
header > a {
|
header > a {
|
||||||
font-family: "hennigar";
|
font-family: "hennigar";
|
||||||
font-size: 24px;
|
font-size: 36px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
border: none;
|
border: none;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
@ -76,6 +78,7 @@ section {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 60px 40px;
|
padding: 60px 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
section > div {
|
section > div {
|
||||||
@ -91,6 +94,17 @@ section > div > div{
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: inherit;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*................................................... Text */
|
/*................................................... Text */
|
||||||
@ -126,7 +140,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 30px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
@ -140,11 +154,11 @@ h4 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
color: inherit;
|
color: rgba(0,0,0,0.6);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
@ -154,6 +168,8 @@ span {
|
|||||||
font-weight: inherit;
|
font-weight: inherit;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
letter-spacing: inherit;
|
||||||
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -201,7 +217,7 @@ input:focus {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*................................................... General classes and IDs */
|
/*############################################################# -- General classes and IDs -- */
|
||||||
|
|
||||||
.preloader-init {
|
.preloader-init {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@ -243,8 +259,71 @@ input:focus {
|
|||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.aside-header-mobile {
|
||||||
|
position: fixed;
|
||||||
|
top: 40px;
|
||||||
|
right: 40px;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
.aside-header > a {
|
.aside-header > a {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
transition: all .3s ease-out;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-link-block {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
margin-top: 10px;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-link-block > div:first-child {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
color: inherit;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email-link-block:hover {
|
||||||
|
background-color: #222;
|
||||||
|
border: none;
|
||||||
|
width: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-mail-anim {
|
||||||
|
position: absolute;
|
||||||
|
width: 140%;
|
||||||
|
height: 140%;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
opacity: .2;
|
||||||
|
border-radius: 50%;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
z-index: -100;
|
||||||
|
animation: asidecta 2s infinite;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes asidecta {
|
||||||
|
0% {width: 20px; height: 20px; opacity: .5;}
|
||||||
|
100% {width: 80px; height: 80px; opacity: 0;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.social-media-link-block {
|
.social-media-link-block {
|
||||||
@ -258,6 +337,51 @@ input:focus {
|
|||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hamburger-wrapper {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 20px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background-color: var(--main-color);
|
||||||
|
padding: 12px 10px;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 2000;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-line {
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-show {
|
||||||
|
display: flex;
|
||||||
|
animation: hamburgershow 1s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes hamburgershow {
|
||||||
|
0% {display: flex; opacity: 0; transform: translateX(-100);}
|
||||||
|
100% {display: flex; opacity: 1; transform: none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ################################################### Body*/
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.hero-graphic-wrapper-init {
|
.hero-graphic-wrapper-init {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: 600px;
|
height: 600px;
|
||||||
@ -275,11 +399,12 @@ input:focus {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-right: -20px;
|
margin-right: -20px;
|
||||||
animation: herographicintro 1.5s;
|
animation: herographicintro 1.3s;
|
||||||
/* animation-fill-mode: both;*/
|
animation-delay: 1.6s;
|
||||||
animation-delay: 1.3s;
|
|
||||||
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
|
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
|
||||||
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||||
|
opacity: 0;
|
||||||
|
animation-fill-mode: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes herographicintro {
|
@keyframes herographicintro {
|
||||||
@ -288,11 +413,12 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#benjamin-hero-text {
|
#benjamin-hero-text {
|
||||||
font-family: "hennigar";
|
background-image: url("images/art-logo-4.svg");
|
||||||
font-size: 105px;
|
background-position: center;
|
||||||
text-transform: uppercase;
|
background-size: contain;
|
||||||
letter-spacing: 0px;
|
background-repeat: no-repeat;
|
||||||
color: var(--main-color);
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toby-hero-text {
|
#toby-hero-text {
|
||||||
@ -322,8 +448,8 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-text-wrapper {
|
.hero-text-wrapper {
|
||||||
width: 240px;
|
width: 350px;
|
||||||
padding-top: 100px;
|
padding-top: 50px;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
@ -335,6 +461,7 @@ input:focus {
|
|||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: none;
|
border: none;
|
||||||
transition: all .3s ease;
|
transition: all .3s ease;
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-text-wrapper > a:hover {
|
.hero-text-wrapper > a:hover {
|
||||||
@ -348,7 +475,7 @@ input:focus {
|
|||||||
color: #222;
|
color: #222;
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
top: 480px;;
|
top: 480px;
|
||||||
right: 30vw;
|
right: 30vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -375,10 +502,26 @@ input:focus {
|
|||||||
left: 3px;
|
left: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-text-block {
|
.hero-text-block-init {
|
||||||
font-size: 24px;
|
font-size: 36px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
animation: herotextintro 1.2s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-delay: 1.8s;
|
||||||
|
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes herotextintro {
|
||||||
|
0% {transform: translateY(50px) rotateX(5deg); opacity: 0;}
|
||||||
|
100% {transform: none; opacity: 1;}
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-text-block > h1 {
|
.hero-text-block > h1 {
|
||||||
@ -408,14 +551,13 @@ input:focus {
|
|||||||
|
|
||||||
.hero-watermark {
|
.hero-watermark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 35em;
|
font-size: 40em;
|
||||||
font-family: "hennigar";
|
font-family: "hennigar";
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
color: rgba(0,0,0,0.05);
|
color: rgba(0,0,0,0.05);
|
||||||
letter-spacing: 5px;
|
letter-spacing: 20px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.below-fold {
|
.below-fold {
|
||||||
@ -426,7 +568,7 @@ input:focus {
|
|||||||
|
|
||||||
.skewed-bg {
|
.skewed-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100% !important;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
transform: skewY(-3deg);
|
transform: skewY(-3deg);
|
||||||
background-color: var(--main-color);
|
background-color: var(--main-color);
|
||||||
@ -439,8 +581,17 @@ input:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@keyframes skewintro {
|
@keyframes skewintro {
|
||||||
0%{transform: none; top: 0;}
|
0%{transform: none; top: 0; width: 100%;}
|
||||||
100%{transform: skewY(-3deg); top: -200px;}
|
100%{transform: skewY(-3deg); top: -200px; width: 100%;}
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
color: #222;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
position: relative;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-darkbg {
|
.container-darkbg {
|
||||||
@ -545,7 +696,14 @@ input:focus {
|
|||||||
border-bottom: 2px solid var(--main-color);
|
border-bottom: 2px solid var(--main-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-item-image {
|
.about-me-img-block {
|
||||||
|
width: 300px;
|
||||||
|
height: 500px;
|
||||||
|
background-color: aqua;
|
||||||
|
margin: -50px 80px 0px 0px;
|
||||||
|
border-radius: 20px;
|
||||||
|
background-image: url("images/portfolio-item-1.jpg");
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -562,16 +720,16 @@ input:focus {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*Animations*/
|
/* ################################################### Animations*/
|
||||||
|
|
||||||
.translate {
|
.translate {
|
||||||
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
transition: all .4s cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-in-bottom {
|
.fade-in-bottom {
|
||||||
animation: fadeinbottom 1s;
|
animation: fadeinbottom 1s;
|
||||||
animation-fill-mode: both;
|
animation-fill-mode: both;
|
||||||
animation-timing-function: ease-out;
|
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fadeinbottom {
|
@keyframes fadeinbottom {
|
||||||
@ -583,6 +741,22 @@ input:focus {
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.scroll-into-view-intro {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeinbottom 1s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||||
|
animation-delay: 1.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-into-view-intro-2 {
|
||||||
|
opacity: 0;
|
||||||
|
animation: fadeinbottom 1s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
|
||||||
|
animation-delay: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -617,7 +791,314 @@ input:focus {
|
|||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
|
|
||||||
|
header {
|
||||||
|
left: 20px;
|
||||||
|
top: 20px;
|
||||||
|
width: 200px;
|
||||||
|
z-index: 1000;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
header > a {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin-top: 10px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-mobile {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
background-color: white;
|
||||||
|
padding: 20px 20px 140px 20px;
|
||||||
|
width: 150px;
|
||||||
|
box-shadow: 0 0 40px -10px rgba(0,0,0,0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav > a {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 60px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section > div {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section > div.mobile-flip {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
section > div > div{
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*................................................... Text */
|
||||||
|
|
||||||
|
a {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*................................................... General classes and IDs */
|
||||||
|
|
||||||
|
.aside-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-header-mobile {
|
||||||
|
position: fixed;
|
||||||
|
top: 240px;
|
||||||
|
right: auto;
|
||||||
|
left: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
padding: 20px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
flex-direction: column;
|
||||||
|
z-index: 1000;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-header-mobile > a {
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px;
|
||||||
|
transition: all .3s ease-out;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger-wrapper {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*###################################*/
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
padding: 40px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-container {
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-wrapper-init {
|
||||||
|
width: 50%;
|
||||||
|
height: 600px;
|
||||||
|
margin-right: none;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-wrapper {
|
||||||
|
width: 50%;
|
||||||
|
height: 600px;
|
||||||
|
margin-right: none;
|
||||||
|
margin-left: 0px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#benjamin-hero-text {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-block {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-block > img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-wrapper {
|
||||||
|
width: 50%;
|
||||||
|
padding-top: 40px;
|
||||||
|
margin-left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down-link-block {
|
||||||
|
top: 520px;
|
||||||
|
right: auto;
|
||||||
|
width: 70px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-link-icon {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block-init {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block {
|
||||||
|
font-size: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block > h1 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block > h1 > span {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block > h1 > span:hover {
|
||||||
|
padding: 3px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-watermark {
|
||||||
|
font-size: 60vw;
|
||||||
|
line-height: 10px;
|
||||||
|
top: 25vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.below-fold {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skewed-bg {
|
||||||
|
height: 400px;
|
||||||
|
margin-top: -100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section > div.container {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
color: #222;
|
||||||
|
transform: none;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-darkbg {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
text-align: left;
|
||||||
|
width: 100%;
|
||||||
|
transform: none;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-column {
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
transform: none;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-watermark {
|
||||||
|
font-size: 30vw;
|
||||||
|
top: -250px;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item {
|
||||||
|
margin-left: 0;
|
||||||
|
top: 0;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item:hover {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item:first-child {
|
||||||
|
margin-top: 0px;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item:last-child {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item img {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-me-img-block {
|
||||||
|
width: 80%;
|
||||||
|
height: 500px;
|
||||||
|
margin: 0;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -625,20 +1106,244 @@ input:focus {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
@media (max-width: 600px) {
|
||||||
|
|
||||||
|
header {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*###################################*/
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
padding: 100px 20px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-container {
|
||||||
|
flex-direction: row;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-wrapper-init {
|
||||||
|
width: 50%;
|
||||||
|
height: 600px;
|
||||||
|
margin-right: none;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-wrapper {
|
||||||
|
widows: 40%;
|
||||||
|
min-width: 200px;
|
||||||
|
height: 600px;
|
||||||
|
margin-left: -20px;
|
||||||
|
margin-bottom: -40px;
|
||||||
|
top: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#benjamin-hero-text {
|
||||||
|
margin-bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-block {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-block > img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-wrapper {
|
||||||
|
width: 50%;
|
||||||
|
padding-top: 20px;
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-wrapper > a {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down-link-block {
|
||||||
|
top: 420px;
|
||||||
|
right: auto;
|
||||||
|
width: 70px;
|
||||||
|
height: 80px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-link-icon {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block-init {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block {
|
||||||
|
font-size: 24px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block > h1 {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block > h1 > span {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-block > h1 > span:hover {
|
||||||
|
padding: 3px 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-watermark {
|
||||||
|
top: 60vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.below-fold {
|
||||||
|
padding-top: 20px;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skewed-bg {
|
||||||
|
height: 400px;
|
||||||
|
margin-top: -70px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-watermark {
|
||||||
|
font-size: 30vw;
|
||||||
|
top: -200px;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item img {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-me-img-block {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
@media (max-width: 430px) {
|
||||||
|
|
||||||
|
|
||||||
|
/*###################################*/
|
||||||
|
|
||||||
|
.hero-section {
|
||||||
|
padding: 17vw 20px 0px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-container {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-wrapper-init {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
margin-right: none;
|
||||||
|
margin-left: -20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-wrapper {
|
||||||
|
width: 80%;
|
||||||
|
position: relative;
|
||||||
|
height: auto;
|
||||||
|
margin: 0;
|
||||||
|
top: 0;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#benjamin-hero-text {
|
||||||
|
margin-bottom: -50px;
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-block {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-graphic-block > img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 20px;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-bottom: 250px;
|
||||||
|
margin-top: -10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-down-link-block {
|
||||||
|
top: 750px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-watermark {
|
||||||
|
top: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.below-fold {
|
||||||
|
padding-top: 40px;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skewed-bg {
|
||||||
|
height: 400px;
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-watermark {
|
||||||
|
font-size: 30vw;
|
||||||
|
top: -200px;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item > div {
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portfolio-item img {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-me-img-block {
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
88
v2.html
88
v2.html
@ -10,8 +10,10 @@
|
|||||||
<title>Tben Design</title>
|
<title>Tben Design</title>
|
||||||
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
|
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
|
||||||
<link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
|
<link rel="shortcut icon" type="image/x-icon" href="/images-dw/favicon.ico">
|
||||||
<link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Impact" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons" rel="stylesheet">
|
||||||
<link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
|
<link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
|
||||||
|
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
|
||||||
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="v2.css">
|
<link rel="stylesheet" href="v2.css">
|
||||||
|
|
||||||
@ -19,10 +21,18 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<body><!-- ...................................................................................................................... Body -->
|
<body>
|
||||||
|
|
||||||
|
<!-- #################################################################################-- Preloader -->
|
||||||
|
|
||||||
<div class="preloader-init" id="preloader"></div>
|
<div class="preloader-init" id="preloader"></div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #################################################################################-- Header -->
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<a>Tben.Design</a>
|
<a>Tben.Design</a>
|
||||||
<nav>
|
<nav>
|
||||||
@ -33,34 +43,54 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="aside-header">
|
|
||||||
<a href="#">My Resume</a>
|
<div class="aside-header" id="aside-heder-block">
|
||||||
<a class="social-media-link-block"></a>
|
<a href="#"><span class="material-icons">face</span> My Resume</a>
|
||||||
|
<a class="email-link-block">
|
||||||
|
<div>
|
||||||
|
<span class="material-icons" style="margin-left: 3px;">mail</span>
|
||||||
|
Get in touch with me
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="aside-mail-anim"></div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section style="z-index:1;perspective:400px;">
|
<div class="hamburger-wrapper">
|
||||||
<div style="perspective:400px;transform-style:preserve-3d;">
|
<div class="hamburger-line"></div>
|
||||||
|
<div class="hamburger-line"></div>
|
||||||
|
<div class="hamburger-line"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #################################################################################-- Hero Section -->
|
||||||
|
|
||||||
|
<section style="z-index:1;perspective:400px;" class="hero-section">
|
||||||
|
<div style="perspective:400px;transform-style:preserve-3d;" class="hero-container">
|
||||||
<div class="hero-graphic-wrapper-init" id="hero-graphic-container">
|
<div class="hero-graphic-wrapper-init" id="hero-graphic-container">
|
||||||
<div class="translate" data-speed=".25">
|
<div class="hero-graphic-controller translate" data-speed=".25">
|
||||||
<div id="benjamin-hero-text">Benjamin</div>
|
<div id="benjamin-hero-text"></div>
|
||||||
<div id="toby-hero-text">Toby</div>
|
|
||||||
<div class="hero-graphic-block">
|
<div class="hero-graphic-block">
|
||||||
<img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
|
<img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hero-text-wrapper translate" data-speed=".15">
|
<div class="hero-text-wrapper translate" data-speed=".15" style="perspective:500px;transform-style:preserve-3d;">
|
||||||
<div class="hero-text-block">
|
<div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller">
|
||||||
Hi. I'm a
|
Hi. I'm a
|
||||||
<h1 style="font-family:inherit;">
|
<h1 style="font-family:inherit;">
|
||||||
<span>UI/UX Designer</span>,
|
<span>UI/UX Designer</span>,
|
||||||
<span>Web Designer</span>,
|
<span>Web Designer</span>,
|
||||||
<span>Frontend Web Developer</span>,
|
<span>Frontend Web Developer</span>,
|
||||||
<span>Graphic and Motion Designer</span>
|
<span>Graphic and Motion Designer</span>.
|
||||||
</h1>.
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<a href="#">Get me on LinkedIn</a>
|
<a href="#" id="linkedin-link-block">Get me on LinkedIn</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -70,6 +100,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #################################################################################-- Hero Watermark and scroll down link -->
|
||||||
|
|
||||||
<div class="hero-watermark"><span class="translate" data-speed=".6">T-BEN</span></div>
|
<div class="hero-watermark"><span class="translate" data-speed=".6">T-BEN</span></div>
|
||||||
|
|
||||||
@ -82,12 +113,13 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #################################################################################-- My Work Section -->
|
||||||
|
|
||||||
<section class="below-fold translate" data-speed=".1" id="section-2" style="perspective:600px;">
|
<section class="below-fold translate menu-color-change" data-speed=".1" id="section-2" style="perspective:600px;">
|
||||||
<div style="perspective:400px;transform-style:preserve-3d;">
|
<div style="perspective:400px;transform-style:preserve-3d;">
|
||||||
<div class="container-darkbg translate" data-speed="0" style="transform-style:preserve-3d;">
|
<div class="container-darkbg translate" data-speed="0" style="transform-style:preserve-3d;">
|
||||||
<h2 class="scroll-into-view">Some of my Work</h2>
|
<h2 class="scroll-into-view">Some of my Work</h2>
|
||||||
<p style="width: 350px;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
|
<p style="max-width:350px;color:inherit;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right-column" style="transform-style:preserve-3d;">
|
<div class="right-column" style="transform-style:preserve-3d;">
|
||||||
@ -109,7 +141,7 @@
|
|||||||
|
|
||||||
<div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">My Work</span></div>
|
<div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">My Work</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div id="skewed-bg"></div>
|
<div id="skewed-bg-block"></div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
@ -117,14 +149,32 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #################################################################################-- About Me Section -->
|
||||||
|
|
||||||
<section style="height: 2000px;z-index: -100;"></section>
|
<section style="z-index:-10;padding-top:500px;">
|
||||||
|
<div style="perspective:400px;transform-style:preserve-3d;" class="mobile-flip">
|
||||||
|
<div class="container translate" data-speed="0.04" style="transform-style:preserve-3d;">
|
||||||
|
<div class="about-me-img-block"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="right-column translate" data-speed="0.05" style="transform-style:preserve-3d;">
|
||||||
|
<h2 class="scroll-into-view">A little about Me</h2>
|
||||||
|
<p style="max-width:350px;" class="scroll-into-view">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">About Me</span></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<section style="height:2000px;"></section>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- #################################################################################-- Scripts -->
|
||||||
|
|
||||||
<script src="scripts/v2.js"></script>
|
<script src="scripts/v2.js"></script>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user