first commit in new environment
This commit is contained in:
BenjaminToby
parent
38f00597ae
commit
1e17252358
254
index.html
254
index.html
@ -7,91 +7,97 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<title>Tben Design</title>
|
||||
<title>Tben Design V3</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=Poppins:400,500,700,800|Satisfy" rel="stylesheet">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="v3.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body><!-- ...................................................................................................................... Body -->
|
||||
<body>
|
||||
|
||||
<div id="wavy-line"></div>
|
||||
<!-- #################################################################################-- Preloader -->
|
||||
|
||||
<div class="body-bg"></div>
|
||||
<div class="preloader-init" id="preloader"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Header -->
|
||||
|
||||
<header>
|
||||
<a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy';">Tben</span>design</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="navlink-li"><a href="#" class="navlink">About Me</a></li>
|
||||
<li class="navlink-li"><a href="#" class="navlink">My Work</a></li>
|
||||
<li class="navlink-li"><a href="#" class="navlink">Experience & Certifications</a></li>
|
||||
<li class="navlink-li"><button class="nav-cta-button">Let's Talk</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="hamburger">
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container-1200px hero-content-container">
|
||||
<div class="column-50">
|
||||
<h1 class="my-name">Benjamin Toby.</h1>
|
||||
<h2 class="hero-subtext">Hi! I'm a
|
||||
<a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
|
||||
<a class="hero-content-link" id="web-design">Web Designer</a>,
|
||||
<a class="hero-content-link" id="frontend-dev">Frontend Web Developer</a>,
|
||||
<a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
|
||||
</h2>
|
||||
|
||||
<div class="hero-ctas-block">
|
||||
<a href="https://www.linkedin.com/in/benjamin-toby/" class="linkedin-link">
|
||||
<div class="linkedin-block">
|
||||
<div class="linkedin-profile-pic-block">
|
||||
<img src="images/Profile-Pic.jpg" alt="" width="40" height="40">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="linkedin-cta-text">Find me on Linkedin</h3>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#">
|
||||
<img src="images/logo-v3.svg" alt="">
|
||||
<div>Tben.<br>Design</div>
|
||||
</a>
|
||||
|
||||
<button class="main-cta-button">Hire Me</button>
|
||||
<nav>
|
||||
<a href="#">About Me</a>
|
||||
<a href="#">My Work</a>
|
||||
<a href="#">Resume</a>
|
||||
<a href="#">Contact Me</a>
|
||||
<a href="#" class="social-media-links material-icons" id="mail">mail</a>
|
||||
<a href="#" class="social-media-links material-icons" id="linkedin">adb</a>
|
||||
<a href="#" class="social-media-links material-icons" id="behance">mouse</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="header-controller"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Hero -->
|
||||
|
||||
<section class="hero-section">
|
||||
<div></div>
|
||||
|
||||
<div>
|
||||
<div class="main-text-block">
|
||||
Hi. I’m a
|
||||
<h1 class="main-hero-text">
|
||||
<a href="">UI UX Designer</a>,
|
||||
<a href="">Web Designer</a>,
|
||||
<a href="">Frontend Web Developer</a>,
|
||||
<a href="">Graphic and motion Designer</a>.
|
||||
</h1>
|
||||
</div>
|
||||
<button class="main-cta-button">Let's Talk</button>
|
||||
</div>
|
||||
|
||||
<div class="column-50 centered-content" id="animation-half-column">
|
||||
<div class="face-wrapper" id="my-face-wrapper">
|
||||
<div id="my-face"></div>
|
||||
<div id="color-overlay"></div>
|
||||
<div class="hero-image-blur"></div>
|
||||
<!--
|
||||
<div class="paint-spatter"></div>
|
||||
<div class="morphing-shapes-container">
|
||||
</div>
|
||||
-->
|
||||
<div id="morph-shape-1"></div>
|
||||
<div id="morph-shape-2"></div>
|
||||
<div id="morph-shape-3"></div>
|
||||
<img src="images/clouds.jpg" alt="" id="clouds">
|
||||
<img src="images/mountains.png" alt="" id="mountains">
|
||||
|
||||
<div class="benjamin-image-block"></div>
|
||||
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- My Work -->
|
||||
|
||||
<section class="my-work-section">
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">Some of My Work</h2>
|
||||
<p class="scroll-into-view-content">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 id="bg-circle"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-1200px" style="justify-content:center;align-items:center;padding:0;margin-top:-20px;">
|
||||
<a class="scroll-down-link-block"><div class="scroll-down-icon">›</div></a>
|
||||
<div class="scroll-into-view">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -102,9 +108,119 @@
|
||||
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.8/lottie.min.js" integrity="sha512-w58XJ/0dVbEfZVJoJyBUOTMGBWmIW4jEYJSA0898d2L0Ghpum0FvwK7qTuHhkTctApzrchv3Neli+28ajI4+fg==" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<!-- #################################################################################-- About Me -->
|
||||
|
||||
<section class="about-me-section">
|
||||
<div class="scroll-into-view">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">About Me</h2>
|
||||
<p class="scroll-into-view-content">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>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- My Specialties -->
|
||||
|
||||
<section class="my-specialties-section">
|
||||
<h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
|
||||
<p class="scroll-into-view-content">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>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Contact Me -->
|
||||
|
||||
<section class="my-work-section">
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">So. Let's have a chat</h2>
|
||||
<p class="scroll-into-view-content">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="scroll-into-view">
|
||||
|
||||
<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Name" class="fcf-label">Your name</label>
|
||||
<div class="fcf-input-group">
|
||||
<input type="text" id="Name" name="Name" class="fcf-form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Email" class="fcf-label">Your email address</label>
|
||||
<div class="fcf-input-group">
|
||||
<input type="email" id="Email" name="Email" class="fcf-form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Message" class="fcf-label">Your message</label>
|
||||
<div class="fcf-input-group">
|
||||
<textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
|
||||
</div>
|
||||
|
||||
<div class="fcf-credit" id="fcf-credit">
|
||||
Simple HTML email form provided by: <a href="https://www.freecontactform.com" target="_blank">FreeContactForm.com</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Scripts -->
|
||||
|
||||
<script src="scripts/anime.min.js"></script>
|
||||
<script src="scripts/v3.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
1312
scripts/anime.js
1312
scripts/anime.js
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
463
scripts/main.js
463
scripts/main.js
@ -1,175 +1,362 @@
|
||||
var faceWrapper = document.getElementById("my-face-wrapper");
|
||||
|
||||
lottie.setQuality("low");
|
||||
|
||||
var myFaceContainer = document.getElementById("my-face");
|
||||
var morphShape1Container = document.getElementById("morph-shape-1");
|
||||
var morphShape2Container = document.getElementById("morph-shape-2");
|
||||
var morphShape3Container = document.getElementById("morph-shape-3");
|
||||
|
||||
var myFace = lottie.loadAnimation({
|
||||
container: myFaceContainer,
|
||||
path: "scripts/face.json",
|
||||
renderer: "svg",
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
|
||||
|
||||
//############################################# -- Intro Animations
|
||||
|
||||
const heroTextSection = document.querySelector(".hero-section > div:nth-child(2)");
|
||||
const myImageBlock = document.querySelector(".benjamin-image-block");
|
||||
const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
|
||||
const mainTextBlock = document.querySelector(".main-text-block");
|
||||
const mainCTA = document.querySelector(".main-cta-button");
|
||||
const allHeaderElements = document.querySelectorAll("header *");
|
||||
const mountains = document.querySelectorAll("#mountains");
|
||||
const clouds = document.querySelectorAll("#clouds");
|
||||
|
||||
|
||||
function intro() {
|
||||
|
||||
anime({
|
||||
targets: heroTextSection,
|
||||
width: [0, "50%"],
|
||||
translateX: [200, 0],
|
||||
easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
|
||||
duration: 1500,
|
||||
delay: 1000,
|
||||
});
|
||||
|
||||
var morphShape1 = lottie.loadAnimation({
|
||||
container: morphShape1Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
anime({
|
||||
targets: allHeaderElements,
|
||||
translateX: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 800,
|
||||
delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
|
||||
});
|
||||
|
||||
var morphShape2 = lottie.loadAnimation({
|
||||
container: morphShape2Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
anime({
|
||||
targets: myBigTextBlock,
|
||||
translateY: [100, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1200,
|
||||
delay: 2000,
|
||||
});
|
||||
|
||||
morphShape1.setSpeed(1.5);
|
||||
|
||||
var morphShape3 = lottie.loadAnimation({
|
||||
container: morphShape3Container,
|
||||
path: "scripts/morphing-shape-1.json",
|
||||
renderer: "svg",
|
||||
loop: true,
|
||||
autoplay: true,
|
||||
anime({
|
||||
targets: myImageBlock,
|
||||
translateY: [100, 0],
|
||||
opacity: [0, 0.8],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1500,
|
||||
delay: 2200,
|
||||
});
|
||||
|
||||
morphShape3.setSpeed(2);
|
||||
anime({
|
||||
targets: mainTextBlock,
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1200,
|
||||
delay: 2500,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainCTA,
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1200,
|
||||
delay: 2600,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mountains,
|
||||
translateY: [200, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
|
||||
duration: 1500,
|
||||
delay: 1000,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: clouds,
|
||||
opacity: [0.2, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: 800,
|
||||
});
|
||||
|
||||
function steadyState() {
|
||||
myFace.playSegments([44, 205], true);
|
||||
myFace.loop = true;
|
||||
}
|
||||
|
||||
var startSteadyState;
|
||||
// Intro Initialization
|
||||
|
||||
function introInit() {
|
||||
|
||||
anime({
|
||||
targets: heroTextSection,
|
||||
width: [0],
|
||||
translateX: 200,
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: allHeaderElements,
|
||||
translateX: [-20],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: myBigTextBlock,
|
||||
translateY: [100],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: myImageBlock,
|
||||
translateY: [100],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainTextBlock,
|
||||
translateX: [-50],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainCTA,
|
||||
translateX: [-50],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mountains,
|
||||
opacity: 0,
|
||||
duration: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
introInit();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Header Scroll interactions
|
||||
|
||||
var headerController = document.querySelector("#header-controller");
|
||||
var windowRect = {
|
||||
rootMargin: "0px",
|
||||
};
|
||||
|
||||
var headerObserver = new IntersectionObserver(changeHeader, windowRect);
|
||||
|
||||
function changeHeader(entry) {
|
||||
|
||||
if(entry[0].isIntersecting) {
|
||||
document.querySelector("header").className = "none";
|
||||
anime({
|
||||
targets: "header img",
|
||||
width: 40,
|
||||
height: 100,
|
||||
top: 0,
|
||||
duration: 400,
|
||||
easing: "easeOutCubic",
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: "header > a > div",
|
||||
translateX: 0,
|
||||
opacity: 1,
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
} else {
|
||||
document.querySelector("header").classList.add("scrolled");
|
||||
anime({
|
||||
targets: "header img",
|
||||
width: 60,
|
||||
height: 130,
|
||||
top: 20,
|
||||
duration: 400,
|
||||
easing: "easeOutCubic",
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: "header > a > div",
|
||||
translateX: -50,
|
||||
opacity: 0,
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Window Load
|
||||
|
||||
setTimeout(() => {
|
||||
headerObserver.observe(headerController);
|
||||
}, 3000);
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
myFace.playSegments([0, 50], true);
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 1000);
|
||||
setTimeout(() => {intro();}, 1000);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Secitons intersection Observer
|
||||
|
||||
var sections = document.querySelectorAll(".scroll-into-view");
|
||||
//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
|
||||
var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
|
||||
|
||||
function sectionsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view");
|
||||
|
||||
// anime({
|
||||
// targets: contents[entry.target.firstElementChild],
|
||||
// width: [0, "50%"],
|
||||
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
|
||||
// opacity: [0, 1],
|
||||
// duration: 1200,
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
sections.forEach(item => {
|
||||
sectionsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//############################################# -- Content intersection Observer
|
||||
|
||||
const contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
|
||||
const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
|
||||
|
||||
function contentsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view-content");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
contents.forEach(item => {
|
||||
contentsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
|
||||
const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
|
||||
const myToolsParagraph = document.querySelector(".my-specialties-section p");
|
||||
|
||||
let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------- Services mouseover
|
||||
document.querySelectorAll(".hero-content-link").forEach(item => {
|
||||
item.addEventListener("mouseover", () => {
|
||||
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
document.getElementById("bg-circle").style.transform = "rotate3d(20,-20,0,20deg) translate3d(-50%,-55%,-300px)";
|
||||
myFaceContainer.style.mixBlendMode = "screen";
|
||||
|
||||
});
|
||||
const myToolsIconsAnimated = anime({
|
||||
targets: myToolsIcons,
|
||||
translateX: [-20, 0],
|
||||
translateY: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: anime.stagger(150, {start: 200}),
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
|
||||
});
|
||||
|
||||
document.getElementById("ui-ux-design").addEventListener("mouseover", () => {
|
||||
function myToolsFn(entries) {
|
||||
|
||||
if(entries[0].isIntersecting) {
|
||||
myToolsIconsAnimated.play();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
myToolsIO.observe(myToolsParagraph);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Contact Form
|
||||
|
||||
//var form = document.getElementById("my-form");
|
||||
//
|
||||
// async function handleSubmit(event) {
|
||||
// event.preventDefault();
|
||||
// var status = document.getElementById("my-form-status");
|
||||
// var data = new FormData(event.target);
|
||||
// fetch(event.target.action, {
|
||||
// method: form.method,
|
||||
// body: data,
|
||||
// headers: {
|
||||
// 'Accept': 'application/json'
|
||||
// }
|
||||
// }).then(response => {
|
||||
// status.innerHTML = "Thanks for your submission!";
|
||||
// form.reset()
|
||||
// }).catch(error => {
|
||||
// status.innerHTML = "Oops! There was a problem submitting your form"
|
||||
// });
|
||||
// }
|
||||
// form.addEventListener("submit", handleSubmit)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#A5E6BA";}, 400);
|
||||
});
|
||||
|
||||
document.getElementById("web-design").addEventListener("mouseover", () => {
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#5B2A86";}, 400);
|
||||
});
|
||||
|
||||
document.getElementById("frontend-dev").addEventListener("mouseover", () => {
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#7785AC";}, 400);
|
||||
});
|
||||
|
||||
document.getElementById("graphic-design").addEventListener("mouseover", () => {
|
||||
setTimeout(() => {document.getElementById("color-overlay").style.backgroundColor = "#9AC6C5";}, 400);
|
||||
});
|
||||
|
||||
|
||||
//--------------------------------------------------------------------------- Services mouseout
|
||||
document.querySelectorAll(".hero-content-link").forEach(item => {
|
||||
item.addEventListener("mouseout", () => {
|
||||
|
||||
startSteadyState = setTimeout(() => {
|
||||
|
||||
steadyState();
|
||||
faceWrapper.style.transform = "none";
|
||||
document.getElementById("color-overlay").style.backgroundColor = "transparent";
|
||||
document.getElementById("bg-circle").style.transform = "translate3d(-50%,-55%,-300px)";
|
||||
myFaceContainer.style.mixBlendMode = "normal";
|
||||
|
||||
}, 500);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
//--------------------------------------------------------------------------- UI UX
|
||||
uiUXLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
uiUXLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Web Design
|
||||
webDesignLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
webDesignLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Frontend Dev
|
||||
frontentDevLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
frontentDevLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
//--------------------------------------------------------------------------- Graphic and Animation Design
|
||||
graphicDesignLink.addEventListener("mouseover", () => {
|
||||
clearTimeout(startSteadyState);
|
||||
myFace.loop = false;
|
||||
myFace.playSegments([210, 249], true);
|
||||
faceWrapper.style.transform = "rotate3d(20,-20,0,20deg) translateZ(-50px)";
|
||||
});
|
||||
|
||||
graphicDesignLink.addEventListener("mouseout", () => {
|
||||
startSteadyState = setTimeout(() => {steadyState();}, 500);
|
||||
faceWrapper.style.transform = "none";
|
||||
});
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
{"v":"5.7.6","fr":30,"ip":0,"op":362,"w":200,"h":200,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[108,101.75,0],"ix":2,"l":2},"a":{"a":0,"k":[8,1.75,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.51,"y":1},"o":{"x":0.506,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]},{"i":{"x":0.438,"y":1},"o":{"x":0.53,"y":0},"t":121,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-16.5,-48.5],[-86.5,87.5],[87,-85]],"c":true}]},{"i":{"x":0.432,"y":1},"o":{"x":0.475,"y":0},"t":240,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[79,25.5],[-8,-32],[-85.5,85]],"c":true}]},{"t":361,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-64.5,-75],[-11,85],[24.5,-17.5]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0,0,0,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":364,"st":0,"bm":0}],"markers":[]}
|
||||
230
scripts/v2.js
230
scripts/v2.js
@ -1,230 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
const translate = document.querySelectorAll(".translate");
|
||||
var watermark = document.querySelector(".hero-watermark");
|
||||
//var skewedBg = document.querySelector(".skewed-bg");
|
||||
|
||||
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
|
||||
var scroll = window.pageYOffset;
|
||||
|
||||
translate.forEach(element => {
|
||||
let speed = element.dataset.speed;
|
||||
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%)";
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
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");
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
var targets = document.querySelectorAll(".menu-color-change");
|
||||
var windowRect = {
|
||||
rootMargin: "0px 0px -400px 0px",
|
||||
// delay: 100,
|
||||
// trackVisibility: true,
|
||||
// thresholds: [0, 0.25, 0.5, 0.75, 1],
|
||||
// threshold: [...Array(100).keys()].map(x => x / 100),
|
||||
};
|
||||
|
||||
var navColors = new IntersectionObserver(navColorFunction, windowRect);
|
||||
|
||||
function navColorFunction(entries, navColors) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
document.querySelector("header").style.color = "white";
|
||||
// document.querySelector(".hero-graphic-controller").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-controller").style.opacity = "1";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
targets.forEach(entry => {
|
||||
navColors.observe(entry);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
var scrollIntoViewItems = document.querySelectorAll(".scroll-into-view");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
var scrollIntoView = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("fade-in-bottom");
|
||||
}
|
||||
});
|
||||
}, windowRect2);
|
||||
|
||||
|
||||
scrollIntoViewItems.forEach(item => {
|
||||
scrollIntoView.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//##########################################################################################################
|
||||
|
||||
//var sectionOneText = document.querySelector("#section-2");
|
||||
|
||||
var sectionOneIo = new IntersectionObserver(sect1Function, windowRect);
|
||||
|
||||
function sect1Function(entries, sectionOneIo) {
|
||||
|
||||
// entries.forEach(entry => {
|
||||
// if(entry.isIntersecting) {
|
||||
//// windowRect.thresholds = [0, 0.25, 0.5, 0.75, 1];
|
||||
//// if (windowRect.thresholds == 0.5) {
|
||||
//// translate[4].dataset.speed = 1;
|
||||
//// }
|
||||
//
|
||||
// if(window.innerWidth > 800) {
|
||||
//
|
||||
//// translate[4].dataset.speed = .05;
|
||||
// translate[4].style.transition = "all .8s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||
//// translate[4].style.position = "sticky";
|
||||
// }
|
||||
//
|
||||
// } else {
|
||||
// if(window.innerWidth > 800) {
|
||||
// translate[4].style.transition = "all .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(entry.intersectionRatio == 0.5) {
|
||||
//// translate[4].dataset.speed = 1;
|
||||
//// }
|
||||
////
|
||||
// });
|
||||
|
||||
if(entries[0].isIntersecting) {
|
||||
|
||||
if(window.innerWidth > 800) {
|
||||
|
||||
translate[3].dataset.speed = .2;
|
||||
translate[3].style.transition = "all .7s cubic-bezier( 0.39, 0.575, 0.565, 1 )";
|
||||
|
||||
} else {
|
||||
translate[3].dataset.speed = 0;
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if(window.innerWidth > 800) {
|
||||
|
||||
translate[3].dataset.speed = 0.1;
|
||||
|
||||
} else {
|
||||
translate[3].dataset.speed = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
sectionOneIo.observe(translate[3]);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################################################## -- Hamburger
|
||||
|
||||
document.querySelector(".hamburger-wrapper").addEventListener("click", hamburgerMenuToggle);
|
||||
var logo = document.querySelector("header > a");
|
||||
|
||||
let hc = 0;
|
||||
|
||||
function hamburgerMenuToggle() {
|
||||
if (hc == 0) {
|
||||
document.querySelector("nav").className = "nav-mobile";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header-mobile";
|
||||
logo.style.color = "#222";
|
||||
document.querySelector(".aside-header-mobile > a:first-child").style.color = "#222";
|
||||
} else {
|
||||
document.querySelector("nav").className = "none";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||
logo.style.color = "inherit";
|
||||
hc = -1;
|
||||
}
|
||||
hc++;
|
||||
}
|
||||
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if(window.innerWidth > 1200) {
|
||||
document.querySelector("nav").className = "none";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||
logo.style.color = "inherit";
|
||||
hc = 0;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.querySelector(".hamburger-wrapper").onblur = () => {
|
||||
document.querySelector("nav").className = "none";
|
||||
document.querySelector("#aside-heder-block").className = "aside-header";
|
||||
logo.style.color = "inherit";
|
||||
hc = 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
368
scripts/v3.js
368
scripts/v3.js
@ -1,368 +0,0 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Intro Animations
|
||||
|
||||
const heroTextSection = document.querySelector(".hero-section > div:nth-child(2)");
|
||||
const myImageBlock = document.querySelector(".benjamin-image-block");
|
||||
const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
|
||||
const mainTextBlock = document.querySelector(".main-text-block");
|
||||
const mainCTA = document.querySelector(".main-cta-button");
|
||||
const allHeaderElements = document.querySelectorAll("header *");
|
||||
const mountains = document.querySelectorAll("#mountains");
|
||||
const clouds = document.querySelectorAll("#clouds");
|
||||
|
||||
|
||||
function intro() {
|
||||
|
||||
anime({
|
||||
targets: heroTextSection,
|
||||
width: [0, "50%"],
|
||||
translateX: [200, 0],
|
||||
easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
|
||||
duration: 1500,
|
||||
delay: 1000,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: allHeaderElements,
|
||||
translateX: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 800,
|
||||
delay: anime.stagger(100, {start: 1000}/* , {easing: 'easeOutQuad'} */),
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: myBigTextBlock,
|
||||
translateY: [100, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1200,
|
||||
delay: 2000,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: myImageBlock,
|
||||
translateY: [100, 0],
|
||||
opacity: [0, 0.8],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1500,
|
||||
delay: 2200,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainTextBlock,
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1200,
|
||||
delay: 2500,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainCTA,
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
|
||||
duration: 1200,
|
||||
delay: 2600,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mountains,
|
||||
translateY: [200, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
|
||||
duration: 1500,
|
||||
delay: 1000,
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: clouds,
|
||||
opacity: [0.2, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: 800,
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Intro Initialization
|
||||
|
||||
function introInit() {
|
||||
|
||||
anime({
|
||||
targets: heroTextSection,
|
||||
width: [0],
|
||||
translateX: 200,
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: allHeaderElements,
|
||||
translateX: [-20],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: myBigTextBlock,
|
||||
translateY: [100],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: myImageBlock,
|
||||
translateY: [100],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainTextBlock,
|
||||
translateX: [-50],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mainCTA,
|
||||
translateX: [-50],
|
||||
opacity: [0],
|
||||
duration: 0
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: mountains,
|
||||
opacity: 0,
|
||||
duration: 0
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
introInit();
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Header Scroll interactions
|
||||
|
||||
var headerController = document.querySelector("#header-controller");
|
||||
var windowRect = {
|
||||
rootMargin: "0px",
|
||||
};
|
||||
|
||||
var headerObserver = new IntersectionObserver(changeHeader, windowRect);
|
||||
|
||||
function changeHeader(entry) {
|
||||
|
||||
if(entry[0].isIntersecting) {
|
||||
document.querySelector("header").className = "none";
|
||||
anime({
|
||||
targets: "header img",
|
||||
width: 40,
|
||||
height: 100,
|
||||
top: 0,
|
||||
duration: 400,
|
||||
easing: "easeOutCubic",
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: "header > a > div",
|
||||
translateX: 0,
|
||||
opacity: 1,
|
||||
duration: 1000,
|
||||
});
|
||||
|
||||
} else {
|
||||
document.querySelector("header").classList.add("scrolled");
|
||||
anime({
|
||||
targets: "header img",
|
||||
width: 60,
|
||||
height: 130,
|
||||
top: 20,
|
||||
duration: 400,
|
||||
easing: "easeOutCubic",
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: "header > a > div",
|
||||
translateX: -50,
|
||||
opacity: 0,
|
||||
duration: 1000,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Window Load
|
||||
|
||||
setTimeout(() => {
|
||||
headerObserver.observe(headerController);
|
||||
}, 3000);
|
||||
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
setTimeout(() => {intro();}, 1000);
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Secitons intersection Observer
|
||||
|
||||
var sections = document.querySelectorAll(".scroll-into-view");
|
||||
//var sectionContainer = document.querySelector(".my-work-section > div:nth-child(2)");
|
||||
|
||||
var windowRect2 = {
|
||||
rootMargin: "0px 0px -200px 0px",
|
||||
};
|
||||
|
||||
var sectionsIO = new IntersectionObserver(sectionsObserverFn, windowRect2);
|
||||
|
||||
function sectionsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view");
|
||||
|
||||
// anime({
|
||||
// targets: contents[entry.target.firstElementChild],
|
||||
// width: [0, "50%"],
|
||||
// easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
|
||||
// opacity: [0, 1],
|
||||
// duration: 1200,
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
sections.forEach(item => {
|
||||
sectionsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
//############################################# -- Content intersection Observer
|
||||
|
||||
const contents = document.querySelectorAll(".scroll-into-view-content");
|
||||
|
||||
const contentsIO = new IntersectionObserver(contentsObserverFn, windowRect2);
|
||||
|
||||
function contentsObserverFn(entries) {
|
||||
|
||||
entries.forEach(entry => {
|
||||
if(entry.isIntersecting) {
|
||||
entry.target.classList.add("scrolled-into-view-content");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
contents.forEach(item => {
|
||||
contentsIO.observe(item);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
const myToolsIcons = document.querySelectorAll(".my-specialties-section > div > div");
|
||||
const myToolsHeader = document.querySelectorAll(".my-specialties-section h2");
|
||||
const myToolsParagraph = document.querySelector(".my-specialties-section p");
|
||||
|
||||
let myToolsIO = new IntersectionObserver(myToolsFn, windowRect2);
|
||||
|
||||
const myToolsIconsAnimated = anime({
|
||||
targets: myToolsIcons,
|
||||
translateX: [-20, 0],
|
||||
translateY: [-20, 0],
|
||||
// rotateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
easing: "easeOutQuad",
|
||||
duration: 1200,
|
||||
delay: anime.stagger(150, {start: 200}),
|
||||
loop: false,
|
||||
autoplay: false,
|
||||
complete: function() { myToolsIconsAnimated.remove(myToolsIcons); },
|
||||
});
|
||||
|
||||
function myToolsFn(entries) {
|
||||
|
||||
if(entries[0].isIntersecting) {
|
||||
myToolsIconsAnimated.play();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
myToolsIO.observe(myToolsParagraph);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//############################################# -- Contact Form
|
||||
|
||||
//var form = document.getElementById("my-form");
|
||||
//
|
||||
// async function handleSubmit(event) {
|
||||
// event.preventDefault();
|
||||
// var status = document.getElementById("my-form-status");
|
||||
// var data = new FormData(event.target);
|
||||
// fetch(event.target.action, {
|
||||
// method: form.method,
|
||||
// body: data,
|
||||
// headers: {
|
||||
// 'Accept': 'application/json'
|
||||
// }
|
||||
// }).then(response => {
|
||||
// status.innerHTML = "Thanks for your submission!";
|
||||
// form.reset()
|
||||
// }).catch(error => {
|
||||
// status.innerHTML = "Oops! There was a problem submitting your form"
|
||||
// });
|
||||
// }
|
||||
// form.addEventListener("submit", handleSubmit)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1 +0,0 @@
|
||||
{"v":"5.7.6","fr":30,"ip":0,"op":182,"w":1440,"h":300,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[732,83.933,0],"ix":2,"l":2},"a":{"a":0,"k":[12,173.933,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.406,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.497,"y":0},"t":90,"s":[{"i":[[0,0],[-220.28,-4.969],[-254.604,-13.3],[0,0]],"o":[[0,0],[266,6],[268,14],[0,0]],"v":[[-780,216],[-334,268],[348,228],[776,284]],"c":false}]},{"t":182,"s":[{"i":[[0,0],[-220.336,0],[-276.265,-22.751],[0,0]],"o":[[0,0],[278,0],[340,28],[0,0]],"v":[[-740,270],[-352,208],[320,280],[762,220]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":182,"st":0,"bm":0}],"markers":[]}
|
||||
184
v2.html
184
v2.html
@ -1,184 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
||||
<head><!-- ...................................................................................................................... Head -->
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<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|Material+Icons|Anton|Squada+One|Coda" 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">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- #################################################################################-- Preloader -->
|
||||
|
||||
<div class="preloader-init" id="preloader"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Header -->
|
||||
|
||||
<header>
|
||||
<a href="#">Tben.Design</a>
|
||||
<nav>
|
||||
<a href="#">About Me</a>
|
||||
<a href="#">My Work</a>
|
||||
<a href="#">My Certifications</a>
|
||||
<a href="#">Contact Me</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="aside-header" id="aside-heder-block">
|
||||
<a href="#"><span class="material-icons">face</span> My Resume</a>
|
||||
<a href="#" 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>
|
||||
|
||||
<a class="hamburger-wrapper" href="#hamburger">
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Hero Section -->
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-container">
|
||||
<div class="hero-graphic-wrapper-init" id="hero-graphic-container">
|
||||
<div class="hero-graphic-controller translate" data-speed=".2">
|
||||
<div id="benjamin-hero-text"></div>
|
||||
<div class="hero-graphic-block">
|
||||
<img src="images/placeholder-portrait-2.png" alt="" width="380px" height="auto">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-text-wrapper translate" data-speed=".1" 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><a href="#">UI/UX Designer</a></span>,
|
||||
<span><a href="#">Web Designer</a></span>,
|
||||
<span><a href="#">Frontend Web Developer</a></span>,
|
||||
<span><a href="#">Graphic and Motion Designer</a></span>.
|
||||
</h1>
|
||||
</div>
|
||||
<a href="#" id="linkedin-link-block">Get me on LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Hero Watermark and scroll down link -->
|
||||
|
||||
<div class="hero-watermark"><span class="translate" data-speed=".6">T-BEN</span></div>
|
||||
|
||||
<a href="#section-2" class="scroll-down-link-block">
|
||||
<div class="scroll-link-icon">›</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- My Work Section -->
|
||||
|
||||
<section class="below-fold menu-color-change" data-speed=".1" id="section-2">
|
||||
<div>
|
||||
<div class="container-darkbg translate" data-speed=".1" id="my-work-text-section">
|
||||
<h2 class="scroll-into-view">Some of my Work</h2>
|
||||
<p 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="perspective:400px;transform-style:preserve-3d;">
|
||||
<a href="#" class="portfolio-item scroll-into-view">
|
||||
<div><img src="images/portfolio-item-3.jpg" alt=""></div>
|
||||
<h4>Portfolio Item Title</h4>
|
||||
</a>
|
||||
|
||||
<a href="#" class="portfolio-item scroll-into-view">
|
||||
<div><img src="images/portfolio-item-2.jpg" alt=""></div>
|
||||
<h4>Portfolio Item Title</h4>
|
||||
</a>
|
||||
|
||||
<a href="#" class="portfolio-item scroll-into-view">
|
||||
<div><img src="images/portfolio-item-1.jpg" alt=""></div>
|
||||
<h4>Portfolio Item Title</h4>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="section-watermark scroll-into-view"><span class="translate" data-speed=".05">My Work</span></div>
|
||||
</div>
|
||||
<div id="skewed-bg-block"></div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- About Me Section -->
|
||||
|
||||
<section style="z-index:-10;padding-top:300px;">
|
||||
<div class="mobile-flip">
|
||||
<div class="container translate" data-speed="0.04" style="perspective:400px;transform-style:preserve-3d;">
|
||||
<div class="about-me-img-block scroll-into-view"></div>
|
||||
</div>
|
||||
|
||||
<div class="right-column translate" data-speed="0.05" style="perspective:400px;transform-style:preserve-3d;">
|
||||
<h2 class="scroll-into-view">A little about Me</h2>
|
||||
<p 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>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
645
v3.css
645
v3.css
@ -1,645 +0,0 @@
|
||||
html {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
font-display: swap;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
font-family: "Poppins", Helvetica;
|
||||
font-display: swap;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
color: #222;
|
||||
position: relative;
|
||||
/*
|
||||
animation-timing-function: linear;
|
||||
transition-timing-function: linear;
|
||||
*/
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-color: #747bef;
|
||||
--base-color: #222;
|
||||
--sec-color-1: #ed7d71;
|
||||
--sec-color-2: #faa096;
|
||||
--sec-color-3: #75F0E6;
|
||||
--dark-color: #1c3766;
|
||||
}
|
||||
|
||||
|
||||
/*................................................... Body */
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
padding: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 140px;
|
||||
overflow: hidden;
|
||||
perspective: 500;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
header * {
|
||||
/* transition: all .5s ease;*/
|
||||
}
|
||||
|
||||
header.scrolled {
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
/* box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.4);*/
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
#header-controller {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 15vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: lightgray;
|
||||
}
|
||||
|
||||
header img {
|
||||
width: 40px;
|
||||
margin-right: 10px;
|
||||
/* transition: all .3s ease;*/
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
header > a {
|
||||
font-family: "Poppins";
|
||||
border: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
position: relative;
|
||||
perspective: 500px;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
header > a > div {
|
||||
line-height: 16px;
|
||||
font-size: 24px;
|
||||
color: var(--dark-color);
|
||||
/* transition: all .3s ease;*/
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav > a:not(.social-media-links) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 10px 15px;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: -200px 41px;
|
||||
background-image: linear-gradient(90deg, var(--main-color), var(--sec-color-1));
|
||||
color: inherit;
|
||||
transition: background .3s ease;
|
||||
}
|
||||
|
||||
nav > a:not(.social-media-links):hover {
|
||||
color: var(--sec-color-1);
|
||||
background-position: 0px 41px;
|
||||
}
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
perspective: 500px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
section > div {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
perspective: 500px;
|
||||
transform-style: preserve-3d;
|
||||
padding: 15%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section > div p{
|
||||
width: 350px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################# -- Text */
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--dark-color);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: inherit;
|
||||
/* transition: all .3s ease-out;*/
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-family: "Poppins";
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
line-height: 1.2;
|
||||
color: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
||||
font-size: 42px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
||||
}
|
||||
|
||||
h4 {
|
||||
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 20px;
|
||||
line-height: 1.5;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
span > a {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
letter-spacing: inherit;
|
||||
line-height: inherit;
|
||||
border: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
span > a:hover {
|
||||
border: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*###################################################### -- Interactives */
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: var(--dark-color);
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
background-image: linear-gradient(var(--main-color),var(--main-color));
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0px 67px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid rgba(0,0,0,0.2);
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
border: 1px solid blue;
|
||||
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- General classes and IDs -- */
|
||||
|
||||
|
||||
|
||||
.social-media-links {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
background-color: var(--sec-color-1);
|
||||
}
|
||||
|
||||
#mail {
|
||||
background-color: var(--sec-color-2);
|
||||
}
|
||||
|
||||
#linkedin {
|
||||
background-color: var(--main-color);
|
||||
}
|
||||
|
||||
#behance {
|
||||
background-color: var(--dark-color);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.scroll-into-view {
|
||||
padding: 0;
|
||||
width: 0;
|
||||
transition: all .7s cubic-bezier(0.93, 0, 0.09, 1);
|
||||
}
|
||||
|
||||
.scrolled-into-view {
|
||||
width: 50%;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.scroll-into-view-content {
|
||||
transform: translateY(80px) rotateX(5deg);
|
||||
transition: all 1s cubic-bezier(0.1, 0.63, 0.355, 1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.scrolled-into-view-content {
|
||||
transform: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- Hero -- */
|
||||
|
||||
.hero-section {
|
||||
background-color: #1b239b;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.hero-section > div:nth-child(1) {
|
||||
}
|
||||
|
||||
.hero-section > div:nth-child(2) {
|
||||
background-color: white;
|
||||
padding: 25vh 40px 40px 6.2vw;
|
||||
font-size: 2.5vw;
|
||||
display: inline;
|
||||
z-index: 100;
|
||||
/* opacity: 0;*/
|
||||
}
|
||||
|
||||
.main-text-block {
|
||||
font-size: inherit;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.main-text-block a {
|
||||
color: var(--main-color);
|
||||
background-image: linear-gradient(var(--main-color),var(--main-color));
|
||||
background-position: 0px 3.2vw;
|
||||
background-repeat: no-repeat;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
.main-text-block a:hover {
|
||||
color: white;
|
||||
background-position: 0px 0px;
|
||||
background-image: linear-gradient(var(--dark-color),var(--dark-color));
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.main-hero-text {
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
width: auto;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.hero-section img {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#clouds {
|
||||
min-width: 100%;
|
||||
min-height: 100vh;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
#mountains {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
bottom: -20vh;
|
||||
}
|
||||
|
||||
.benjamin-image-block {
|
||||
width: 15vw;
|
||||
height: 80vh;
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
background-color: var(--sec-color-2);
|
||||
left: 15vw;
|
||||
background-image: url("images/hero-image-ben.jpg");
|
||||
background-size: cover;
|
||||
opacity: .2;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benjamin-big-text-block {
|
||||
position: absolute;
|
||||
font-size: 8.5vw;
|
||||
bottom: -40px;
|
||||
left: 5%;
|
||||
font-weight: 900;
|
||||
line-height: 1em;
|
||||
color: white;
|
||||
mix-blend-mode: overlay;
|
||||
filter: drop-shadow(0 0 20px rgba(0,0,0,0.4));
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.main-cta-button {
|
||||
font-size: 24px;
|
||||
padding: 15px 40px;
|
||||
margin-top: 20px;
|
||||
background-color: var(--sec-color-1);
|
||||
transition: all .3s ease-out;
|
||||
background-image: linear-gradient(var(--dark-color),var(--dark-color));
|
||||
}
|
||||
|
||||
.main-cta-button:hover {
|
||||
background-image: linear-gradient(var(--dark-color),var(--dark-color));
|
||||
background-position: 0px 0px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- My Work -- */
|
||||
|
||||
.my-work-section {
|
||||
|
||||
}
|
||||
|
||||
.my-work-section > div:nth-child(1) {
|
||||
color: rgba(0,0,0,0.6);
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.my-work-section > div:nth-child(2) {
|
||||
background-color: var(--sec-color-2);
|
||||
/* width: 20%;*/
|
||||
}
|
||||
|
||||
.my-work-section h2 {
|
||||
text-align: right;
|
||||
color: rgba(0,0,0,.8);
|
||||
}
|
||||
|
||||
.my-work-section p {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- About Me -- */
|
||||
|
||||
.about-me-section {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.about-me-section > div:nth-child(1) {
|
||||
background-color: var(--sec-color-3);
|
||||
/* width: 20%;*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*############################################################# -- About Me -- */
|
||||
|
||||
.my-specialties-section {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: var(--dark-color);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 100px;
|
||||
}
|
||||
|
||||
.my-specialties-section h2 {
|
||||
|
||||
}
|
||||
|
||||
.my-specialties-section p {
|
||||
color: rgba(255,255,255,0.70);
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.my-specialties-section > div {
|
||||
max-width: 1140px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.my-specialties-section > div > div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--main-color);
|
||||
margin: 10px;
|
||||
border-radius: 50%;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ################################################### Animations*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*##################################################################################################### -- Mobile Styles */
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 800px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 430px) {
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 350px) {
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
228
v3.html
228
v3.html
@ -1,228 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
|
||||
<head><!-- ...................................................................................................................... Head -->
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<title>Tben Design V3</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=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="v3.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<!-- #################################################################################-- Preloader -->
|
||||
|
||||
<div class="preloader-init" id="preloader"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Header -->
|
||||
|
||||
<header>
|
||||
<a href="#">
|
||||
<img src="images/logo-v3.svg" alt="">
|
||||
<div>Tben.<br>Design</div>
|
||||
</a>
|
||||
|
||||
<nav>
|
||||
<a href="#">About Me</a>
|
||||
<a href="#">My Work</a>
|
||||
<a href="#">Resume</a>
|
||||
<a href="#">Contact Me</a>
|
||||
<a href="#" class="social-media-links material-icons" id="mail">mail</a>
|
||||
<a href="#" class="social-media-links material-icons" id="linkedin">adb</a>
|
||||
<a href="#" class="social-media-links material-icons" id="behance">mouse</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="header-controller"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Hero -->
|
||||
|
||||
<section class="hero-section">
|
||||
<div></div>
|
||||
|
||||
<div>
|
||||
<div class="main-text-block">
|
||||
Hi. I’m a
|
||||
<h1 class="main-hero-text">
|
||||
<a href="">UI UX Designer</a>,
|
||||
<a href="">Web Designer</a>,
|
||||
<a href="">Frontend Web Developer</a>,
|
||||
<a href="">Graphic and motion Designer</a>.
|
||||
</h1>
|
||||
</div>
|
||||
<button class="main-cta-button">Let's Talk</button>
|
||||
</div>
|
||||
|
||||
<img src="images/clouds.jpg" alt="" id="clouds">
|
||||
<img src="images/mountains.png" alt="" id="mountains">
|
||||
|
||||
<div class="benjamin-image-block"></div>
|
||||
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- My Work -->
|
||||
|
||||
<section class="my-work-section">
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">Some of My Work</h2>
|
||||
<p class="scroll-into-view-content">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="scroll-into-view">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- About Me -->
|
||||
|
||||
<section class="about-me-section">
|
||||
<div class="scroll-into-view">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">About Me</h2>
|
||||
<p class="scroll-into-view-content">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>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- My Specialties -->
|
||||
|
||||
<section class="my-specialties-section">
|
||||
<h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
|
||||
<p class="scroll-into-view-content">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>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Contact Me -->
|
||||
|
||||
<section class="my-work-section">
|
||||
<div>
|
||||
<h2 class="scroll-into-view-content">So. Let's have a chat</h2>
|
||||
<p class="scroll-into-view-content">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="scroll-into-view">
|
||||
|
||||
<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Name" class="fcf-label">Your name</label>
|
||||
<div class="fcf-input-group">
|
||||
<input type="text" id="Name" name="Name" class="fcf-form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Email" class="fcf-label">Your email address</label>
|
||||
<div class="fcf-input-group">
|
||||
<input type="email" id="Email" name="Email" class="fcf-form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<label for="Message" class="fcf-label">Your message</label>
|
||||
<div class="fcf-input-group">
|
||||
<textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fcf-form-group">
|
||||
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
|
||||
</div>
|
||||
|
||||
<div class="fcf-credit" id="fcf-credit">
|
||||
Simple HTML email form provided by: <a href="https://www.freecontactform.com" target="_blank">FreeContactForm.com</a>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Scripts -->
|
||||
|
||||
<script src="scripts/anime.min.js"></script>
|
||||
<script src="scripts/v3.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user