personal-site/index.html

234 lines
6.7 KiB
HTML
Raw Normal View History

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" />
2021-06-19 10:56:35 +00:00
<title>Tben Web Designer</title>
2021-05-24 13:38:13 +00:00
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
2021-06-19 10:57:44 +00:00
<link rel="shortcut icon" href="https://benjamintoby.github.io/personal_site/images/favicon4.ico"
2021-06-19 10:03:18 +00:00
type="image/x-icon">
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-06-20 07:02:27 +00:00
<div>
<nav>
<a href="#my-work" id="my-work-link" class="nav-link">My Work</a>
<a href="#about-me" id="about-me-link" class="nav-link">About Me</a>
<a href="#my-specialties" id="resume-link" class="nav-link">Resume</a>
<a href="#contact-me" id="contact-me-link" class="nav-link">Contact Me</a>
<a href="mailto:benoti.san@gmail.com" 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>
</div>
2021-05-24 13:38:13 +00:00
</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. Im 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>
</div>
2021-06-19 06:59:15 +00:00
<button class="main-cta-button">Let's Talk</button>
2021-06-20 07:02:27 +00:00
<div class="hero-scroll-down-block">
<a href="#my-work">
<div>&lsaquo;</div>
</a>
</div>
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
<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-20 07:02:27 +00:00
<section class="my-work-section" id="my-work">
2021-06-19 06:59:15 +00:00
<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-20 07:02:27 +00:00
<section class="about-me-section" id="about-me">
2021-06-19 06:59:15 +00:00
<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-20 07:02:27 +00:00
<section class="my-specialties-section" id="my-specialties">
2021-06-19 06:59:15 +00:00
<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-20 07:02:27 +00:00
<section class="contact-section" id="contact-me">
2021-06-19 06:59:15 +00:00
<div>
2021-06-20 07:02:27 +00:00
<h2 class="scroll-into-view-content">So. Let's talk</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
2021-06-20 07:02:27 +00:00
tempor incididunt ut labore et dolore magna aliqua. </p>
<a href="mailto:benoti.san@gmail.com">Email Address&nbsp;<span class="material-icons">mail</span></a>
<div>
<div>Copyright 2021 Tben.Design</div>
</div>
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-20 07:02:27 +00:00
<div class="scroll-into-view-content">
<form id="contact-form" class="main-cta-form" method="post" action="contact-form-process.php">
<input type="text" required placeholder="Enter Full Name">
<input type="email" required placeholder="Enter Email Address">
<textarea name="Message" rows="3" maxlength="3000" required placeholder="Enter Message"></textarea>
<button type="submit">Send Message</button>
</form>
</div>
2021-06-19 08:12:11 +00:00
2021-05-26 06:34:47 +00:00
</div>
2021-06-19 10:03:18 +00:00
<div class="contact-section-controller"></div>
2021-06-20 07:02:27 +00:00
<div class="footer-bar">
</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>