mobile pages added, other issues fixed
This commit is contained in:
BenjaminToby
+114
-37
@@ -12,10 +12,11 @@
|
||||
<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=Poppins:400,500,600,700,800|Material+Icons" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,500,600,700,800|Material+Icons"
|
||||
rel="stylesheet">
|
||||
|
||||
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<link rel="stylesheet" href="main.min.css">
|
||||
|
||||
</head>
|
||||
|
||||
@@ -45,12 +46,21 @@
|
||||
<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:[email protected]" 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>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<a href="mailto:[email protected]" 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>
|
||||
@@ -72,25 +82,41 @@
|
||||
<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>
|
||||
<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>
|
||||
<button class="main-cta-button">Let's Talk</button>
|
||||
|
||||
<div class="hero-scroll-down-block">
|
||||
|
||||
<!-- <div class="hero-scroll-down-block">
|
||||
<a href="#my-work">
|
||||
<div>‹</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"></div>
|
||||
<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>
|
||||
|
||||
@@ -104,13 +130,14 @@
|
||||
|
||||
<section class="my-work-section" id="my-work">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
@@ -153,21 +180,68 @@
|
||||
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 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>
|
||||
|
||||
|
||||
@@ -186,18 +260,21 @@
|
||||
|
||||
<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:[email protected]">Email Address <span class="material-icons">mail</span></a>
|
||||
<a href="mailto:[email protected]" class="scroll-into-view-content-2" data-delay="500">
|
||||
Email Address <span class="material-icons">mail</span>
|
||||
</a>
|
||||
|
||||
<div>
|
||||
<div class="scroll-into-view-content-2" data-delay="700">
|
||||
<div>Copyright 2021 Tben.Design</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="scroll-into-view">
|
||||
<div class="scroll-into-view" id="footer-right-section">
|
||||
|
||||
<div class="scroll-into-view-content">
|
||||
<form id="contact-form" class="main-cta-form" method="post" action="contact-form-process.php">
|
||||
<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>
|
||||
@@ -226,7 +303,7 @@
|
||||
<!-- #################################################################################-- Scripts -->
|
||||
|
||||
<script src="scripts/anime.min.js"></script>
|
||||
<script src="scripts/main.js"></script>
|
||||
<script src="scripts/main.min.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user