114 lines
3.2 KiB
HTML
114 lines
3.2 KiB
HTML
<!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|Impact" rel="stylesheet">
|
|
<link href="http://fonts.cdnfonts.com/css/hennigar" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="v2.css">
|
|
|
|
</head>
|
|
|
|
|
|
|
|
<body><!-- ...................................................................................................................... Body -->
|
|
|
|
<div class="preloader-init" id="preloader"></div>
|
|
|
|
<header>
|
|
<a>Tben.Design</a>
|
|
<nav>
|
|
<a>About Me</a>
|
|
<a>My Work</a>
|
|
<a>My Certifications</a>
|
|
<a>Contact Me</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="aside-header">
|
|
<a href="#">My Resume</a>
|
|
<a class="social-media-link-block"></a>
|
|
</div>
|
|
|
|
<section style="z-index:1;">
|
|
<div>
|
|
<div class="hero-graphic-wrapper translate" data-speed=".25">
|
|
<div id="benjamin-hero-text">Benjamin</div>
|
|
<div id="toby-hero-text">Toby</div>
|
|
<div class="hero-graphic-block">
|
|
<img src="images/placeholder-portrait.png" alt="" width="380px" height="auto">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-text-wrapper translate" data-speed=".15">
|
|
<div class="hero-text-block">
|
|
Hi. I'm a
|
|
<h1>
|
|
<span>UI/UX Designer</span>,
|
|
<span>Web Designer</span>,
|
|
<span>Frontend Web Developer</span>,
|
|
<span>Graphic and Motion Designer</span>
|
|
</h1>.
|
|
</div>
|
|
<a href="#">Get me on LinkedIn</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="hero-watermark" data-speed=".6">T-BEN</div>
|
|
|
|
<div class="scroll-down-link-block">
|
|
<div class="scroll-link-icon">›</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section class="below-fold translate" data-speed=".1">
|
|
<div>
|
|
<div class="container-darkbg translate" data-speed="0">
|
|
<h2>Some of my Work</h2>
|
|
<p style="width: 350px;">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 id="skewed-bg"></div>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<section style="height: 2000px"></section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="scripts/v2.js"></script>
|
|
|
|
</body>
|
|
|
|
|
|
</html> |