index.html

<!DOCTYPE HTML>
<!--
	Solid State by Pixelarity
	pixelarity.com | hello@pixelarity.com
	License: pixelarity.com/license
-->
<html>
	<head>
		<title>Charles Sievers</title>
                <link href="/images/favicon.png" rel="icon" type="image/png" />
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
	</head>
	<body class="is-preload">

		<!-- Page Wrapper -->
			<div id="page-wrapper">

				<!-- Header -->
					<header id="header" class="alt">
						<h1><a href="index.html">Charles Sievers</a></h1>
						<nav>
							<a href="#menu">Menu</a>
						</nav>
					</header>

				<!-- Menu -->
					<nav id="menu">
						<div class="inner">
							<h2>Menu</h2>
							<ul class="links">
								<li><a href="index.html">Home</a></li>
								<li><a href="me.html">Resume</a></li>
								<li><a href="travel.html">Travel Blog</a></li>
								<li><a href="https://nanotheory.github.io/">Nanotheory</a></li>
							</ul>
							<a href="#" class="close">Close</a>
						</div>
					</nav>

				<!-- Banner -->
					<section id="banner">
						<div class="inner">
							<div class="logo"><span class="icon"></span></div>
							<h2>Charles Sievers</h2>
							<p>Chemist, Software Developer, and Bread Baker</p>
						</div>
					</section>

				<!-- Wrapper -->
					<section id="wrapper">

						<!-- One -->
							<section id="one" class="wrapper spotlight style1">
								<div class="inner">
									<a href="https://iopscience.iop.org/article/10.1088/2053-1583/aae7ea/meta" class="image"><img src="images/chemistry.jpg" alt="" /></a>
									<div class="content">
										<h2 class="major">Chemistry</h2>
										<p>I have a general interest in all matters: solids, liquids, and gases.</p>
									</div>
								</div>
							</section>

						<!-- Two -->
							<section id="two" class="wrapper alt spotlight style2">
								<div class="inner">
									<a href="https://github.com/charlessievers" class="image"><img src="images/python.jpg" alt="" /></a>
									<div class="content">
										<h2 class="major">Software Development</h2>
										<p>Software has become an integral part of everyday life. This makes influencing and directing how people interact with hardware an exciting privelage.</p>
									</div>
								</div>
							</section>

						<!-- Three -->
							<section id="three" class="wrapper spotlight style3">
								<div class="inner">
									<a href="#" class="image"><img src="images/pretzel.jpg" alt="" /></a>
									<div class="content">
										<h2 class="major">Bread Baking</h2>
										<p>Studying matter and designing software may be my two major focal points, but I enjoy baking bread in my free time.</p>
									</div>
								</div>
							</section>

						<!-- Four -->
							<section id="four" class="wrapper alt style1">
								<div class="inner">
									<h2 class="major">Outlets</h2>
									<p>Below are a few choice outlets to check out my recent endeavors.</p>
									<section class="features">
										<article>
											<a href="https://nanotheory.github.io" class="image"><img src="images/pic06.png" alt="" /></a>
											<h3 class="major">Nanotheory</h3>
											<p>Check out my lab group's website!</p>
											<a href="https://nanotheory.github.io" class="special">Learn more</a>
										</article>
										<article>
											<a href="me.html" class="image"><img src="images/yosemite.jpg" alt="" /></a>
											<h3 class="major">About Me</h3>
											<p>About me.</p>
											<a href="me.html" class="special">Learn more</a>
										</article>
									</section>
									<ul class="actions">
										<li><a href="travel.html" class="button">Travel Blog</a></li>
									</ul>
								</div>
							</section>

					</section>

				<!-- Footer -->
					<section id="footer">
						<div class="inner">
							<h2 class="major">Get in touch</h2>
						        <p>Interested in contacting me? Send me a message!</p>
							<form method="post" action="#">
								<div class="fields">
									<div class="field">
										<label for="name">Name</label>
										<input type="text" name="name" id="name" />
									</div>
									<div class="field">
										<label for="email">Email</label>
										<input type="email" name="email" id="email" />
									</div>
									<div class="field">
										<label for="message">Message</label>
										<textarea name="message" id="message" rows="4"></textarea>
									</div>
								</div>
								<ul class="actions">
									<li><input type="submit" value="Send Message" /></li>
								</ul>
							</form>
							<ul class="contact">
								<li class="fa-envelope"><a href="#">charliesievers@cox.net</a></li>
							</ul>
							<ul class="copyright">
								<li>2019 &copy; Charles Sievers</li>
							</ul>
						</div>
					</section>

			</div>

		<!-- Scripts -->
			<script src="assets/js/jquery.min.js"></script>
			<script src="assets/js/jquery.scrollex.min.js"></script>
			<script src="assets/js/browser.min.js"></script>
			<script src="assets/js/breakpoints.min.js"></script>
			<script src="assets/js/util.js"></script>
			<script src="assets/js/main.js"></script>

	</body>
</html>