2021-05-24 13:38:13 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<head>
|
|
|
|
|
<!-- ...................................................................................................................... Head -->
|
2021-05-24 13:38:13 +00:00
|
|
|
|
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<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>
|
2021-05-24 13:38:13 +00:00
|
|
|
|
<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-19 06:59:15 +00:00
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<link rel="stylesheet" href="main.css">
|
2021-05-24 13:38:13 +00:00
|
|
|
|
|
|
|
|
|
</head>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
2021-05-24 13:38:13 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<body>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- Preloader -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div class="preloader-init" id="preloader"></div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- Header -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-05-24 13:38:13 +00:00
|
|
|
|
<header>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<a href="#">
|
|
|
|
|
<img src="images/logo-v3.svg" alt="">
|
|
|
|
|
<div>Tben.<br>Design</div>
|
|
|
|
|
</a>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-05-25 10:23:13 +00:00
|
|
|
|
<nav>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<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>
|
2021-05-24 13:38:13 +00:00
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div id="header-controller"></div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- Hero -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-05-25 20:30:40 +00:00
|
|
|
|
<section class="hero-section">
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div></div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div>
|
|
|
|
|
<div class="main-text-block">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
Hi. I’m a
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<h1 class="main-hero-text">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<a href="">UI UX Designer</a>,
|
|
|
|
|
<a href="">Web Designer</a>,
|
|
|
|
|
<a href="">Frontend Web Developer</a>,
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<a href="">Graphic and motion Designer</a>.
|
|
|
|
|
</h1>
|
2021-05-24 22:29:55 +00:00
|
|
|
|
</div>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<button class="main-cta-button">Let's Talk</button>
|
|
|
|
|
</div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<img src="images/clouds.jpg" alt="" id="clouds">
|
|
|
|
|
<img src="images/mountains.png" alt="" id="mountains">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
<div class="benjamin-image-block"></div>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
|
|
|
|
|
</section>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- My Work -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<section class="my-work-section">
|
|
|
|
|
<div>
|
|
|
|
|
<h2 class="scroll-into-view-content">Some of My Work</h2>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<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>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
</div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div class="scroll-into-view">
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- About Me -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<section class="about-me-section">
|
|
|
|
|
<div class="scroll-into-view">
|
|
|
|
|
</div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div>
|
|
|
|
|
<h2 class="scroll-into-view-content">About Me</h2>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<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>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- My Specialties -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<section class="my-specialties-section">
|
|
|
|
|
<h2 class="scroll-into-view-content">My Tools For Creating Awesomeness</h2>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<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>
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<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>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- Contact Me -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<section class="my-work-section">
|
|
|
|
|
<div>
|
|
|
|
|
<h2 class="scroll-into-view-content">So. Let's have a chat</h2>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<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>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
</div>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<div class="scroll-into-view">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<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>
|
2021-05-26 13:16:53 +00:00
|
|
|
|
</div>
|
2021-05-25 20:49:37 +00:00
|
|
|
|
</div>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
|
|
|
|
|
<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">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000"
|
|
|
|
|
required></textarea>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="fcf-form-group">
|
2021-06-19 08:12:11 +00:00
|
|
|
|
<button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send
|
|
|
|
|
Message</button>
|
2021-06-19 06:59:15 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</form>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
2021-05-26 06:34:47 +00:00
|
|
|
|
</div>
|
2021-05-24 13:38:13 +00:00
|
|
|
|
</section>
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2021-06-19 06:59:15 +00:00
|
|
|
|
<!-- #################################################################################-- Scripts -->
|
2021-06-19 08:12:11 +00:00
|
|
|
|
|
|
|
|
|
<script src="scripts/anime.min.js"></script>
|
|
|
|
|
<script src="scripts/main.js"></script>
|
|
|
|
|
|
2021-05-24 13:38:13 +00:00
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|