<!DOCTYPE html>
<html>
<head>
<!--Resposive meta tag to make this webpage looking good on mobile browser-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Add a favicon-->
<link rel="shortcut icon" type="image/png" href="assets/favicon.png" />
<!--Add a page title-->
<title>Jacky's Homepage</title>
<!--Include styles.css file to this webpage-->
<link rel="stylesheet" href="styles.css">
<!--Include script.js file to this webpage-->
<script type="module" src="script.js"></script>
<!--Use custom font from Google font https://fonts.google.com/ -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<body>
<nav>
<a href="#">Home</a>
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</nav>
<header>
<div>
<h2>Hello, I'm</h2>
<h1>Jacky Su</h1>
<h3>Student Programmer. Always Learning. Always Sus.</h3>
</div>
<img src="assets/redamongus.png">
</header>
<div id='about'>
<section id="about">
<div>
<h2>About Me</h2>
<h3>Hi, I'm Jacky and I do coding to make have fun and make money</h3>
<p>Some more facts about me :)</p>
<div>The planet that I live on:
<img src="assets/qrearth150.png">
</div>
<div>My favourite animal:
<img src="assets/qrgoat150.png">
</div>
</div>
</section>
</div>
<div id='portfolio'>
<h1>PORTFOLIO</h1>
<div>
<div id="divA">
<img src="assets/mypainting450.png" title="Jacky's painting from MLH Boss Ross drawing event">
</div>
<div id="divB">
<img src="assets/Happyface450.png" title="Jacky's Award Winning Masterpiece">
</div>
</div>
</div>
<div id='contact'>
<h2>Contact Me</h2>
<form action='/survey/checkout' method='post' enctype="multipart/form-data">
<input type="name" placeholder='Your name' required name="Name">
<input type="email" placeholder='Your email' required name="Email">
<textarea placeholder='Write a message here' required></textarea>
<button>Send Message</button>
<input type='hidden' name='redirecturl' value='thankyou.html'>
<input type='hidden' name='survey' value='Contact'>
</form>
</div>
<upbutton>
<div>
<a href="#" title="Take me to the top" data-scroll-speed="400" data-start-scroll="300" class="upbutton">
<img src="assets/uparrow50.png">
</a>
</div>
</upbutton>
<footer>
<div class='links'>
<a href="https://www.linkedin.com/in/jacky-s-465490132/" title="Jacky's Linkedin">
<img src="assets/linkedinicon.jpg">
</a>
<a href="https://www.github.com" title="Jacky's GitHub">
<img src="assets/githubicon.png">
</a>
<a href="https://www.youtube.com" title="Jacky's Youtube">
<img src="assets/youtubeicon1.png">
</a>
</div>
<div> Copyright © Me 2021</div>
</footer>
</body>
</html>