228 lines
7.2 KiB
HTML
228 lines
7.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 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> |