itm325-projects/Assignment2/Assignment2/pages/index.html
2023-09-20 02:35:39 -06:00

104 lines
10 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Assignment 2 - Kaj Forney</title>
<link rel="stylesheet" href="../styles/main.css" />
</head>
<body>
<div id="webpage">
<header id="banner">
<img src="../images/avatar.png" alt="My logo." />
<h1>My ITM 325 Web Site</h1>
<img src="../images/avatar.png" alt="My logo." />
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Classes</a>
</li>
<li>
<a href="#">Resume</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</nav>
</header>
<div id="wrapper">
<aside id="links">
<h2>Side Links</h2>
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
<li>
<a href="#">Link 4</a>
</li>
<li>
<a href="#">Link 5</a>
</li>
</ul>
</aside>
<section id="posts">
<article>
<h2>
<a href="#" class="article-title">Post One</a>
</h2>
<p>
This is text that is definitely meaningful, and is totally not just a placeholder. This text is very important. Words! Text! Huzzah! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi. Massa tincidunt dui ut ornare lectus sit amet est. Sem fringilla ut morbi tincidunt augue. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Ut diam quam nulla porttitor massa id neque aliquam. Tristique senectus et netus et malesuada fames. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Malesuada pellentesque elit eget gravida cum. Faucibus purus in massa tempor nec feugiat nisl pretium. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Volutpat ac tincidunt vitae semper quis lectus nulla. Lectus quam id leo in vitae turpis massa sed. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Proin sagittis nisl rhoncus mattis. Egestas fringilla phasellus faucibus scelerisque. Congue quisque egestas diam in arcu cursus euismod quis viverra. Morbi tristique senectus et netus et malesuada fames ac turpis. Rhoncus aenean vel elit scelerisque mauris. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis risus sed vulputate odio ut. Nisi est sit amet facilisis magna etiam tempor orci. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Vitae nunc sed velit dignissim. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Morbi tincidunt ornare massa eget egestas. Purus sit amet luctus venenatis lectus magna fringilla urna. Risus feugiat in ante metus dictum. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Risus pretium quam vulputate dignissim suspendisse. Sit amet est placerat in egestas erat imperdiet sed euismod. Nisl purus in mollis nunc sed id semper risus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Montes nascetur ridiculus mus mauris.
</p>
<footer>2023-09-10 | Author: Kaj Forney</footer>
</article>
<hr />
<article>
<h2>
<a href="#" class="article-title">Post Two</a>
</h2>
<p>
This is text that is definitely meaningful, and is totally not just a placeholder. This text is very important. Words! Text! Huzzah! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi. Massa tincidunt dui ut ornare lectus sit amet est. Sem fringilla ut morbi tincidunt augue. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Ut diam quam nulla porttitor massa id neque aliquam. Tristique senectus et netus et malesuada fames. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Malesuada pellentesque elit eget gravida cum. Faucibus purus in massa tempor nec feugiat nisl pretium. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Volutpat ac tincidunt vitae semper quis lectus nulla. Lectus quam id leo in vitae turpis massa sed. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Proin sagittis nisl rhoncus mattis. Egestas fringilla phasellus faucibus scelerisque. Congue quisque egestas diam in arcu cursus euismod quis viverra. Morbi tristique senectus et netus et malesuada fames ac turpis. Rhoncus aenean vel elit scelerisque mauris. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis risus sed vulputate odio ut. Nisi est sit amet facilisis magna etiam tempor orci. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Vitae nunc sed velit dignissim. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Morbi tincidunt ornare massa eget egestas. Purus sit amet luctus venenatis lectus magna fringilla urna. Risus feugiat in ante metus dictum. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Risus pretium quam vulputate dignissim suspendisse. Sit amet est placerat in egestas erat imperdiet sed euismod. Nisl purus in mollis nunc sed id semper risus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Montes nascetur ridiculus mus mauris.
</p>
<footer>2023-09-13 | Author: Kaj Forney</footer>
</article>
<hr />
<article>
<h2>
<a href="#" class="article-title">Post Three</a>
</h2>
<p>
This is text that is definitely meaningful, and is totally not just a placeholder. This text is very important. Words! Text! Huzzah! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi. Massa tincidunt dui ut ornare lectus sit amet est. Sem fringilla ut morbi tincidunt augue. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Ut diam quam nulla porttitor massa id neque aliquam. Tristique senectus et netus et malesuada fames. Porta lorem mollis aliquam ut porttitor leo a diam sollicitudin. Malesuada pellentesque elit eget gravida cum. Faucibus purus in massa tempor nec feugiat nisl pretium. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Volutpat ac tincidunt vitae semper quis lectus nulla. Lectus quam id leo in vitae turpis massa sed. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Proin sagittis nisl rhoncus mattis. Egestas fringilla phasellus faucibus scelerisque. Congue quisque egestas diam in arcu cursus euismod quis viverra. Morbi tristique senectus et netus et malesuada fames ac turpis. Rhoncus aenean vel elit scelerisque mauris. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Quis risus sed vulputate odio ut. Nisi est sit amet facilisis magna etiam tempor orci. Pellentesque dignissim enim sit amet venenatis urna cursus eget. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Vitae nunc sed velit dignissim. Ac tortor vitae purus faucibus ornare suspendisse sed nisi. Morbi tincidunt ornare massa eget egestas. Purus sit amet luctus venenatis lectus magna fringilla urna. Risus feugiat in ante metus dictum. Placerat duis ultricies lacus sed turpis tincidunt id aliquet. Risus pretium quam vulputate dignissim suspendisse. Sit amet est placerat in egestas erat imperdiet sed euismod. Nisl purus in mollis nunc sed id semper risus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Montes nascetur ridiculus mus mauris.
</p>
<footer>2023-09-14 | Author: Kaj Forney</footer>
</article>
</section>
</div>
<footer id="footer">
<img class="footer-image-left" src="../images/mcScreenshot.png" alt="A screenshot of Minecraft." />
<img class="footer-image-right" src="../images/hlaScreenshot.jpg" alt="A screenshot of the VR game Half-Life: Alyx." />
<p class="copyright">Copyright &copy; <a href="https://lunarpenguin.net">Kaj Forney</a> 2023-<span id="copyright-year"></span></p>
</footer>
</div>
<script>
document.getElementById("copyright-year").innerText += new Date(Date.now()).getFullYear();
</script>
</body>
</html>