2021-06-03 21:35:02 +00:00
<!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" >
2021-06-07 04:57:50 +00:00
< link href = "https://fonts.googleapis.com/css?family=Lato:400,500,700,800|Material+Icons|Anton|Squada+One|Coda" rel = "stylesheet" >
2021-06-05 15:11:16 +00:00
< link href = "http://fonts.cdnfonts.com/css/hennigar" rel = "stylesheet" >
2021-06-06 16:10:42 +00:00
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
2021-06-04 20:11:31 +00:00
2021-06-03 21:35:02 +00:00
< link rel = "stylesheet" href = "v2.css" >
< / head >
2021-06-06 16:10:42 +00:00
< body >
<!-- ################################################################################# - - Preloader -->
2021-06-03 21:35:02 +00:00
2021-06-05 15:11:16 +00:00
< div class = "preloader-init" id = "preloader" > < / div >
2021-06-06 16:10:42 +00:00
<!-- ################################################################################# - - Header -->
2021-06-03 21:35:02 +00:00
< header >
2021-06-07 04:57:50 +00:00
< a href = "#" > Tben.Design< / a >
2021-06-03 21:35:02 +00:00
< nav >
2021-06-07 04:57:50 +00:00
< a href = "#" > About Me< / a >
< a href = "#" > My Work< / a >
< a href = "#" > My Certifications< / a >
< a href = "#" > Contact Me< / a >
2021-06-03 21:35:02 +00:00
< / nav >
< / header >
2021-06-06 16:10:42 +00:00
< div class = "aside-header" id = "aside-heder-block" >
< a href = "#" > < span class = "material-icons" > face< / span > My Resume< / a >
2021-06-07 04:57:50 +00:00
< a href = "#" class = "email-link-block" >
2021-06-06 16:10:42 +00:00
< div >
< span class = "material-icons" style = "margin-left: 3px;" > mail< / span >
Get in touch with me
< / div >
< div class = "aside-mail-anim" > < / div >
< / a >
2021-06-03 21:35:02 +00:00
< / div >
2021-06-07 06:08:45 +00:00
< a class = "hamburger-wrapper" href = "#hamburger" >
2021-06-06 16:10:42 +00:00
< div class = "hamburger-line" > < / div >
< div class = "hamburger-line" > < / div >
< div class = "hamburger-line" > < / div >
2021-06-07 04:57:50 +00:00
< / a >
2021-06-06 16:10:42 +00:00
<!-- ################################################################################# - - Hero Section -->
2021-06-07 08:12:19 +00:00
< section class = "hero-section" >
< div class = "hero-container" >
2021-06-06 09:29:14 +00:00
< div class = "hero-graphic-wrapper-init" id = "hero-graphic-container" >
2021-06-07 08:12:19 +00:00
< div class = "hero-graphic-controller translate" data-speed = ".2" >
2021-06-06 16:10:42 +00:00
< div id = "benjamin-hero-text" > < / div >
2021-06-06 09:29:14 +00:00
< div class = "hero-graphic-block" >
2021-06-07 04:57:50 +00:00
< img src = "images/placeholder-portrait-2.png" alt = "" width = "380px" height = "auto" >
2021-06-06 09:29:14 +00:00
< / div >
< / div >
2021-06-03 21:35:02 +00:00
< / div >
2021-06-07 08:12:19 +00:00
< div class = "hero-text-wrapper translate" data-speed = ".1" style = "perspective:500px;transform-style:preserve-3d;" >
2021-06-06 16:10:42 +00:00
< div class = "hero-text-block-init" style = "transform-style:preserve-3d;" id = "hero-text-controller" >
2021-06-03 21:35:02 +00:00
Hi. I'm a
2021-06-06 09:29:14 +00:00
< h1 style = "font-family:inherit;" >
2021-06-07 04:57:50 +00:00
< 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 > .
2021-06-06 16:10:42 +00:00
< / h1 >
2021-06-03 21:35:02 +00:00
< / div >
2021-06-06 16:10:42 +00:00
< a href = "#" id = "linkedin-link-block" > Get me on LinkedIn< / a >
2021-06-03 21:35:02 +00:00
< / div >
< / div >
< / section >
2021-06-04 06:56:31 +00:00
2021-06-06 16:10:42 +00:00
<!-- ################################################################################# - - Hero Watermark and scroll down link -->
2021-06-04 06:56:31 +00:00
2021-06-06 09:29:14 +00:00
< div class = "hero-watermark" > < span class = "translate" data-speed = ".6" > T-BEN< / span > < / div >
2021-06-04 20:11:31 +00:00
2021-06-06 09:29:14 +00:00
< a href = "#section-2" class = "scroll-down-link-block" >
2021-06-04 20:11:31 +00:00
< div class = "scroll-link-icon" > › < / div >
2021-06-06 09:29:14 +00:00
< / a >
2021-06-04 06:56:31 +00:00
2021-06-06 16:10:42 +00:00
<!-- ################################################################################# - - My Work Section -->
2021-06-04 06:56:31 +00:00
2021-06-07 08:12:19 +00:00
< 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" >
2021-06-06 09:29:14 +00:00
< h2 class = "scroll-into-view" > Some of my Work< / h2 >
2021-06-07 05:33:19 +00:00
< 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 >
2021-06-03 21:35:02 +00:00
< / div >
2021-06-06 09:29:14 +00:00
2021-06-06 16:27:30 +00:00
< div class = "right-column" style = "perspective:400px;transform-style:preserve-3d;" >
2021-06-07 04:57:50 +00:00
< a href = "#" class = "portfolio-item scroll-into-view" >
2021-06-06 09:29:14 +00:00
< div > < img src = "images/portfolio-item-3.jpg" alt = "" > < / div >
< h4 > Portfolio Item Title< / h4 >
< / a >
2021-06-07 04:57:50 +00:00
< a href = "#" class = "portfolio-item scroll-into-view" >
2021-06-06 09:29:14 +00:00
< div > < img src = "images/portfolio-item-2.jpg" alt = "" > < / div >
< h4 > Portfolio Item Title< / h4 >
< / a >
2021-06-07 04:57:50 +00:00
< a href = "#" class = "portfolio-item scroll-into-view" >
2021-06-06 09:29:14 +00:00
< 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 >
2021-06-03 21:35:02 +00:00
< / div >
2021-06-06 16:10:42 +00:00
< div id = "skewed-bg-block" > < / div >
2021-06-03 21:35:02 +00:00
< / section >
2021-06-04 06:56:31 +00:00
2021-06-06 16:10:42 +00:00
<!-- ################################################################################# - - About Me Section -->
2021-06-07 08:12:19 +00:00
< section style = "z-index:-10;padding-top:300px;" >
< div class = "mobile-flip" >
2021-06-06 16:27:30 +00:00
< 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 >
2021-06-06 16:10:42 +00:00
< / div >
2021-06-06 16:27:30 +00:00
< div class = "right-column translate" data-speed = "0.05" style = "perspective:400px;transform-style:preserve-3d;" >
2021-06-06 16:10:42 +00:00
< h2 class = "scroll-into-view" > A little about Me< / h2 >
2021-06-07 05:33:19 +00:00
< 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 >
2021-06-06 16:10:42 +00:00
< / div >
< div class = "section-watermark scroll-into-view" > < span class = "translate" data-speed = ".05" > About Me< / span > < / div >
< / div >
< / section >
2021-06-04 06:56:31 +00:00
2021-06-06 16:10:42 +00:00
< section style = "height:2000px;" > < / section >
2021-06-03 21:35:02 +00:00
2021-06-04 06:56:31 +00:00
2021-06-06 16:10:42 +00:00
<!-- ################################################################################# - - Scripts -->
2021-06-04 06:56:31 +00:00
< script src = "scripts/v2.js" > < / script >
2021-06-03 21:35:02 +00:00
< / body >
< / html >
