Mobile screens added.

This commit is contained in:
BenjaminToby 2021-06-06 17:10:42 +01:00
parent 8715cd578b
commit 1cd1ef1142
7 changed files with 886 additions and 59 deletions

1
images/art-logo-2.svg Normal file
View 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
View 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
View 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
View 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

View File

@ -17,6 +17,11 @@ window.addEventListener("scroll", () => {
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)";
watermark.style.transform = "translateY(" + (scroll * watermark.dataset.speed) + "px) translateX(-50%)";
@ -28,9 +33,12 @@ window.addEventListener("scroll", () => {
//});
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("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 = {
rootMargin: "0px 0px -400px 0px",
delay: 100,
@ -56,15 +64,21 @@ function navColorFunction(entries, navColors) {
if(entry.isIntersecting) {
document.querySelector("header").style.color = "white";
document.querySelector(".hero-graphic-wrapper").style.opacity = "0";
document.querySelector(".aside-header > a").style.color = "white";
// translate[3].dataset.speed = .2;
} else {
document.querySelector("header").style.color = "#222";
document.querySelector(".aside-header > a").style.color = "#222";
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");
@ -106,13 +125,19 @@ function sect1Function(entries, sectionOneIo) {
// } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) {
// translate[3].dataset.speed = .3;
// }
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 {
if(window.innerWidth > 800) {
translate[4].style.transition = "all 1.8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
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
View File

@ -27,9 +27,11 @@ html {
body {
width: 100%;
display: block;
margin: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
/*background-color: #B8FFE1;*/
}
@ -44,7 +46,7 @@ header {
header > a {
font-family: "hennigar";
font-size: 24px;
font-size: 36px;
text-transform: uppercase;
border: none;
letter-spacing: 1px;
@ -76,6 +78,7 @@ section {
justify-content: center;
padding: 60px 40px;
position: relative;
width: 100%;
}
section > div {
@ -91,6 +94,17 @@ section > div > div{
flex-direction: column;
}
/*
div {
display: flex;
position: relative;
align-items: center;
justify-content: center;
font-size: inherit;
color: inherit;
}
*/
/*................................................... Text */
@ -126,7 +140,7 @@ h1 {
}
h2 {
font-size: 30px;
font-size: 36px;
}
h3 {
@ -140,11 +154,11 @@ h4 {
}
p {
font-size: 16px;
font-size: 20px;
line-height: 1.5;
margin-top: 0px;
margin-bottom: 20px;
color: inherit;
color: rgba(0,0,0,0.6);
width: 100%;
font-weight: 400;
}
@ -154,6 +168,8 @@ span {
font-weight: inherit;
font-family: 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 {
position: fixed;
@ -243,8 +259,71 @@ input:focus {
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 {
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 {
@ -258,6 +337,51 @@ input:focus {
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 {
width: 400px;
height: 600px;
@ -275,11 +399,12 @@ input:focus {
flex-direction: column;
align-items: center;
margin-right: -20px;
animation: herographicintro 1.5s;
/* animation-fill-mode: both;*/
animation-delay: 1.3s;
animation: herographicintro 1.3s;
animation-delay: 1.6s;
animation-timing-function: cubic-bezier( 0.215, 0.61, 0.355, 1 );
transition: all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 );
opacity: 0;
animation-fill-mode: both;
}
@keyframes herographicintro {
@ -288,11 +413,12 @@ input:focus {
}
#benjamin-hero-text {
font-family: "hennigar";
font-size: 105px;
text-transform: uppercase;
letter-spacing: 0px;
color: var(--main-color);
background-image: url("images/art-logo-4.svg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 250px;
}
#toby-hero-text {
@ -322,8 +448,8 @@ input:focus {
}
.hero-text-wrapper {
width: 240px;
padding-top: 100px;
width: 350px;
padding-top: 50px;
align-items: flex-start;
margin-left: 50px;
}
@ -335,6 +461,7 @@ input:focus {
border-radius: 5px;
border: none;
transition: all .3s ease;
opacity: 0;
}
.hero-text-wrapper > a:hover {
@ -348,7 +475,7 @@ input:focus {
color: #222;
font-size: 36px;
font-weight: 700;
top: 480px;;
top: 480px;
right: 30vw;
display: flex;
align-items: center;
@ -375,10 +502,26 @@ input:focus {
left: 3px;
}
.hero-text-block {
font-size: 24px;
.hero-text-block-init {
font-size: 36px;
font-weight: 500;
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 {
@ -408,14 +551,13 @@ input:focus {
.hero-watermark {
position: absolute;
font-size: 35em;
font-size: 40em;
font-family: "hennigar";
z-index: -1;
top: -20px;
left: 50%;
transform: translateX(-50%);
color: rgba(0,0,0,0.05);
letter-spacing: 5px;
letter-spacing: 20px;
white-space: nowrap;
}
.below-fold {
@ -426,7 +568,7 @@ input:focus {
.skewed-bg {
position: absolute;
width: 100%;
width: 100% !important;
height: 400px;
transform: skewY(-3deg);
background-color: var(--main-color);
@ -439,8 +581,17 @@ input:focus {
}
@keyframes skewintro {
0%{transform: none; top: 0;}
100%{transform: skewY(-3deg); top: -200px;}
0%{transform: none; top: 0; width: 100%;}
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 {
@ -545,7 +696,14 @@ input:focus {
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 {
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 {
animation: fadeinbottom 1s;
animation-fill-mode: both;
animation-timing-function: ease-out;
animation-timing-function: cubic-bezier( 0.39, 0.575, 0.565, 1 );
}
@keyframes fadeinbottom {
@ -583,6 +741,22 @@ input:focus {
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) {
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,19 +1106,243 @@ 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
View File

@ -10,8 +10,10 @@
<title>Tben Design</title>
<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 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="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
<link rel="stylesheet" href="v2.css">
@ -19,10 +21,18 @@
<body><!-- ...................................................................................................................... Body -->
<body>
<!-- #################################################################################-- Preloader -->
<div class="preloader-init" id="preloader"></div>
<!-- #################################################################################-- Header -->
<header>
<a>Tben.Design</a>
<nav>
@ -33,34 +43,54 @@
</nav>
</header>
<div class="aside-header">
<a href="#">My Resume</a>
<a class="social-media-link-block"></a>
<div class="aside-header" id="aside-heder-block">
<a href="#"><span class="material-icons">face</span>&nbsp;&nbsp;My&nbsp;Resume</a>
<a class="email-link-block">
<div>
<span class="material-icons" style="margin-left: 3px;">mail</span>
&nbsp;&nbsp;&nbsp;Get&nbsp;in&nbsp;touch&nbsp;with&nbsp;me
</div>
<section style="z-index:1;perspective:400px;">
<div style="perspective:400px;transform-style:preserve-3d;">
<div class="aside-mail-anim"></div>
</a>
</div>
<div class="hamburger-wrapper">
<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="translate" data-speed=".25">
<div id="benjamin-hero-text">Benjamin</div>
<div id="toby-hero-text">Toby</div>
<div class="hero-graphic-controller translate" data-speed=".25">
<div id="benjamin-hero-text"></div>
<div class="hero-graphic-block">
<img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
</div>
</div>
</div>
<div class="hero-text-wrapper translate" data-speed=".15">
<div class="hero-text-block">
<div class="hero-text-wrapper translate" data-speed=".15" style="perspective:500px;transform-style:preserve-3d;">
<div class="hero-text-block-init" style="transform-style:preserve-3d;" id="hero-text-controller">
Hi. I'm a
<h1 style="font-family:inherit;">
<span>UI/UX Designer</span>,
<span>Web Designer</span>,
<span>Frontend Web Developer</span>,
<span>Graphic and Motion Designer</span>
</h1>.
<span>Graphic and Motion Designer</span>.
</h1>
</div>
<a href="#">Get me on LinkedIn</a>
<a href="#" id="linkedin-link-block">Get&nbsp;me&nbsp;on&nbsp;LinkedIn</a>
</div>
</div>
</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>
@ -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 class="container-darkbg translate" data-speed="0" style="transform-style:preserve-3d;">
<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 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&nbsp;Work</span></div>
</div>
<div id="skewed-bg"></div>
<div id="skewed-bg-block"></div>
</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&nbsp;Me</span></div>
</div>
</section>
<section style="height:2000px;"></section>
<!-- #################################################################################-- Scripts -->
<script src="scripts/v2.js"></script>