first commit in new environment
This commit is contained in:
BenjaminToby
+183
-67
@@ -7,91 +7,117 @@
|
||||
<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>
|
||||
<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,700,800|Satisfy" rel="stylesheet">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<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><!-- ...................................................................................................................... Body -->
|
||||
<body>
|
||||
|
||||
<div id="wavy-line"></div>
|
||||
<!-- #################################################################################-- Preloader -->
|
||||
|
||||
<div class="body-bg"></div>
|
||||
<div class="preloader-init" id="preloader"></div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- #################################################################################-- Header -->
|
||||
|
||||
<header>
|
||||
<a class="nav-link-block" style="border:none;"><span style="font-family:'Satisfy';">Tben</span>design</a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="navlink-li"><a href="#" class="navlink">About Me</a></li>
|
||||
<li class="navlink-li"><a href="#" class="navlink">My Work</a></li>
|
||||
<li class="navlink-li"><a href="#" class="navlink">Experience & Certifications</a></li>
|
||||
<li class="navlink-li"><button class="nav-cta-button">Let's Talk</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="#">
|
||||
<img src="images/logo-v3.svg" alt="">
|
||||
<div>Tben.<br>Design</div>
|
||||
</a>
|
||||
|
||||
<div class="hamburger">
|
||||
<div class="hamburger-line"></div>
|
||||
<div class="hamburger-line"></div>
|
||||
</div>
|
||||
<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 class="container-1200px hero-content-container">
|
||||
<div class="column-50">
|
||||
<h1 class="my-name">Benjamin Toby.</h1>
|
||||
<h2 class="hero-subtext">Hi! I'm a
|
||||
<a class="hero-content-link" id="ui-ux-design">UI UX Designer</a>,
|
||||
<a class="hero-content-link" id="web-design">Web Designer</a>,
|
||||
<a class="hero-content-link" id="frontend-dev">Frontend Web Developer</a>,
|
||||
<a class="hero-content-link" id="graphic-design">Graphic and Motion Designer</a>.
|
||||
</h2>
|
||||
|
||||
<div class="hero-ctas-block">
|
||||
<a href="https://www.linkedin.com/in/benjamin-toby/" class="linkedin-link">
|
||||
<div class="linkedin-block">
|
||||
<div class="linkedin-profile-pic-block">
|
||||
<img src="images/Profile-Pic.jpg" alt="" width="40" height="40">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="linkedin-cta-text">Find me on Linkedin</h3>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button class="main-cta-button">Hire Me</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column-50 centered-content" id="animation-half-column">
|
||||
<div class="face-wrapper" id="my-face-wrapper">
|
||||
<div id="my-face"></div>
|
||||
<div id="color-overlay"></div>
|
||||
<div class="hero-image-blur"></div>
|
||||
<!--
|
||||
<div class="paint-spatter"></div>
|
||||
<div class="morphing-shapes-container">
|
||||
</div>
|
||||
-->
|
||||
<div id="morph-shape-1"></div>
|
||||
<div id="morph-shape-2"></div>
|
||||
<div id="morph-shape-3"></div>
|
||||
</div>
|
||||
|
||||
<div id="bg-circle"></div>
|
||||
|
||||
<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>
|
||||
<div class="container-1200px" style="justify-content:center;align-items:center;padding:0;margin-top:-20px;">
|
||||
<a class="scroll-down-link-block"><div class="scroll-down-icon">›</div></a>
|
||||
|
||||
<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>
|
||||
|
||||
@@ -102,9 +128,99 @@
|
||||
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.8/lottie.min.js" integrity="sha512-w58XJ/0dVbEfZVJoJyBUOTMGBWmIW4jEYJSA0898d2L0Ghpum0FvwK7qTuHhkTctApzrchv3Neli+28ajI4+fg==" crossorigin="anonymous"></script>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<!-- #################################################################################-- 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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user