personal-site/index.html
2021-06-26 10:11:17 +01:00

311 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 Web Designer</title>
<meta name="description" content="Web/Graphic/Motion Designer, UI UX Designer, Frontend Web Developer">
<link rel="shortcut icon" href="https://benjamintoby.github.io/personal_site/images/favicon4.ico"
type="image/x-icon">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,500,600,700,800|Material+Icons"
rel="stylesheet">
<link rel="stylesheet" href="main.min.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>
<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>
<div style="display: flex;align-items: center;">
<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"><img src="images/linkedin.svg"
alt=""></a>
</div>
</nav>
</div>
<button class="hamburger-button">
<div></div>
<div></div>
<div></div>
</button>
</header>
<div id="header-controller"></div>
<!-- #################################################################################-- Hero -->
<section class="hero-section">
<div></div>
<div>
<div class="main-text-block">
Hi. Im a
<h1 class="main-hero-text">
<a href="" class="uiux-designer-link">UI UX Designer</a>,
<a href="" class="web-designer-link">Web Designer</a>,
<a href="" class="frontend-designer-link">Frontend Web Developer</a>,
<a href="" class="graphic-motion-designer-link">Graphic and motion Designer</a>.
</h1> <br>
<button class="main-cta-button"><a href="#contact-me">Let's Talk</a></button>
</div>
<!-- <div class="hero-scroll-down-block">
<a href="#my-work">
<div>&lsaquo;</div>
</a>
<img src="images/rotating-text.svg" alt="" class="rotating-text-image">
</div> -->
<div class="hero-text-section-graphic">
<a href="#my-work">
<img src="images/down-arrow.svg" alt="">
</a>
</div>
</div>
<img src="images/clouds.jpg" alt="" id="clouds">
<img src="images/mountains.png" alt="" id="mountains">
<div class="benjamin-image-block-wrapper">
<div class="benjamin-image-block">
<div class="benjamin-image-block-overlay"></div>
</div>
<div class="service-display-block">
</div>
</div>
<div class="benjamin-big-text-block">Benjamin<br>Toby</div>
</section>
<!-- #################################################################################-- My Work -->
<section class="my-work-section" id="my-work">
<div>
<h2 class="scroll-into-view-content" data-delay="200">Some of My Work</h2>
<p class="scroll-into-view-content" data-delay="400">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 class="portfolio-items-container scroll-into-view-content" data-delay="800"></div>
</div>
</section>
<!-- #################################################################################-- About Me -->
<section class="about-me-section" id="about-me">
<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" id="my-specialties">
<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 class="scroll-into-view-content" data-delay="0">
<div>Adobe Photoshop</div><img src="images/photoshop.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="100">
<div>Adobe Illustrator</div><img src="images/illustrator.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="200">
<div>Adobe After Effects</div><img src="images/aftereffects.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="300">
<div>HTML 5</div><img src="images/html5.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="400">
<div>CSS3</div><img src="images/css3.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="500">
<div>javascript</div><img src="images/javascript.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="600">
<div>Git Version Control</div><img src="images/git-version-control.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="700">
<div>Figma</div><img src="images/figma.svg" alt="">
</div>
<div class="scroll-into-view-content" data-delay="800">
<div>Wordpress</div><img src="images/wordpress.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="900">
<div>Webflow</div><img src="images/webflow.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1000">
<div>Adobe XD</div><img src="images/adobe-xd.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1100">
<div>Visual Studio Code</div><img src="images/vs-code.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1200">
<div>Dreamweaver</div><img src="images/dreamweaver.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1300">
<div>Adobe Animate</div><img src="images/adobe animate.svg" alt="">
</div>
<div class="scroll-into-view-content-2" data-delay="1400">
<div>Affinity Photo and Affinity Designer</div><img src="images/affinity.svg" alt="">
</div>
</div>
<button class="scroll-into-view-content-2" data-delay="500">Download My Resume</button>
</section>
<!-- #################################################################################-- Contact Me -->
<section class="contact-section" id="contact-me">
<div>
<h2 class="scroll-into-view-content">So. Let's talk</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. </p>
<a href="mailto:benoti.san@gmail.com" class="scroll-into-view-content-2" data-delay="500">
Email Address&nbsp;<span class="material-icons">mail</span>
</a>
<div class="scroll-into-view-content-2" data-delay="700">
<div>Copyright 2021 Tben.Design</div>
</div>
</div>
<div class="scroll-into-view" id="footer-right-section">
<div class="scroll-into-view-content" data-delay="800">
<form id="contact-form" class="main-cta-form" method="post" action="contact-form-process.php"
autocomplete="on">
<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>
</div>
<div class="contact-section-controller"></div>
<div class="footer-bar">
</div>
</section>
<!-- #################################################################################-- Scripts -->
<script src="scripts/anime.min.js"></script>
<script src="scripts/main.min.js"></script>
</body>
</html>