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)";
|
||||
});
|
||||
|
||||
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,12 +125,18 @@ function sect1Function(entries, sectionOneIo) {
|
||||
// } else if (windowRect.thresholds > 0.5 && windowRect.thresholds < 1) {
|
||||
// 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 {
|
||||
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);
|
||||
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;
|
||||
//}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
88
v2.html
88
v2.html
@ -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> 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>
|
||||
|
||||
<section style="z-index:1;perspective:400px;">
|
||||
<div style="perspective:400px;transform-style:preserve-3d;">
|
||||
<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 me on 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 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 Me</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section style="height:2000px;"></section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Scripts -->
|
||||
|
||||
<script src="scripts/v2.js"></script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user