<!-- Objectives:
Create Buttons Using CSS styling
Create bookmarks and on-page links
Create links that open a new page
Assignment Requirements:
Create your folder structure including a CSS folder
Add your index and style pages
Create a page that has 5 headings of hobbies or things that you are interested in
Add ids to the headings so you will be able to link to them
Add a nav section at the top of the page with links to the headings
Style the links in the nav section as buttons using CSS
Add 3 external links under each heading, and have those links open into a new window
Add additional CSS styles to make the page attractive
Add a "top" id at the top of the page
Add links back to the top under each category
Test your page, upload it, and hand in the link to the page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>Introducing Myself</title>
</head>
<body>
<div id="body-div">
<!-- .container = div with class shortcut -->
<header>
<h1 id="page-title">Things I'm Interested In</h1>
</header>
<nav id="top-nav">
<!-- a*5 + tab = quick fill -->
<!-- # links to ID in same page -->
<a href="#hsr">Honkai Star Rail</a>
<a href="#python">Python</a>
<a href="#iphone-16">iPhone 16</a>
<a href="#3d-printing">3D Printing</a>
<a href="#philosophy">Philosophy</a>
</nav>
<!-- h2*5 + tab = quick fill -->
<div class="heading-container">
<h2 id="hsr">Honkai Star Rail</h2>
<div class="ul-img-container">
<div id="ul-container">
<ul>
<!-- (li>a)*5 + tab = quick fill -->
<li><a href="https://hsr.hoyoverse.com/en-us/" target="_blank">Honkai Star Rail Official website</a></li>
<li><a href="https://www.prydwen.gg/star-rail/" target="_blank">Best Honkai Star Rail Community Information and Guides</a></li>
<li><a href="https://fribbels.github.io/hsr-optimizer#scorer" target="_blank">Fribbels HSR Character Optimizer</a></li>
</ul>
</div>
<div id="img-container">
<img src="images/hsr-early-shrunk.jpg" alt="Early cast from the launch of HSR, from MiHoYo">
</div>
<!-- Image obtained from: https://www.reddit.com/r/HonkaiStarRail/comments/udyyfx/official_with_logo_wallpaper_image_in_4k/ -->
</div>
<a id="top_link" href="#top">top</a>
</div>
<div class="heading-container">
<h2 id="python">Python</h2>
<div class="ul-img-container">
<div id="ul-container">
<ul>
<!-- (li>a)*5 + tab = quick fill -->
<li><a href="https://www.python.org/psf-landing/" target="_blank">Python Software Foundation</a></li>
<li><a href="https://www.tiobe.com/tiobe-index/" target="_blank">TIOBE Programming Community Index</a></li>
<li><a href="https://pll.harvard.edu/subject/python" target="_blank">Harvard University Free Python Courses</a></li>
</ul>
</div>
<div id="img-container">
<img src="images/python.jpg" alt="iStock photo of Python Code, credit to matejmo">
</div>
<!-- Image obtained from: https://www.istockphoto.com/photo/glowing-python-programming-language-code-on-a-blue-digital-surface-with-a-sphere-gm1413990965-462867622 -->
</div>
<a id="top_link" href="#top">top</a>
</div>
<div class="heading-container">
<h2 id="iphone-16">iPhone 16 Pro Max</h2>
<div class="ul-img-container">
<div id="ul-container">
<ul>
<!-- (li>a)*5 + tab = quick fill -->
<li><a href="https://www.apple.com/iphone-16-pro/" target="_blank">Apple Official iPhone 16 Pro Site</a></li>
<li><a href="https://www.amazon.com/Dashboard%E3%80%90-Windshield-%E3%80%91HandsFree-Magnetic-Car%E3%80%90Strong/dp/B0BXDJLS35/ref=sr_1_7?crid=1QK46MLARDUVV&dib=eyJ2IjoiMSJ9.KTAC7ySaWUydcgkDXXOwp6wUjUR2QnVyNPO8c8dD01hQSOp8A3ubYjtn21kGkYrMUhWM7b0-LzTLzwAXX644z8l_xf4aC2YhHTCUK8ps6C-o88AuoC1v3P1ZxHAcm5tWtg63fcJ3HRcobMcr1v--o-PU_6SPzPFU2ZzV68812eN0_dO4prCK9K7XM4eyGaQiEeCWExvVW5RamImBljEhcuQEjOT0QlXCrX8RTLfR7PSEHNdZD-tmMrVM3-bYj5YewQzPYUUUv_KSSQzQ9udyba-ymOUIWDzmUhcsh8gGVEI.FlfMC1Wer1MxhXDln5RokmE7JANyvubgdVdA_P4XZNI&dib_tag=se&keywords=magsafe%2Bcar%2Bmount%2Bcharger&qid=1727896657&refinements=p_72%3A2491149011&rnid=2491147011&s=wireless&sprefix=magsafe%2B%2Caps%2C124&sr=1-7&th=1" target="_blank">The Car Mount I Will Probably Buy</a></li>
<li><a href="https://www.androidauthority.com/switching-android-iphone-3395762/" target="_blank">Android Authority's Switching from Android to iPhone Guide</a></li>
</ul>
</div>
<div id="img-container">
<img src="images/iphone-16.jpg" alt="Official Apple Image of iPhone 16 Pro line, credit to Apple">
</div>
<!-- Image obtained from: https://www.apple.com/iphone-16-pro/ -->
</div>
<a id="top_link" href="#top">top</a>
</div>
<div class="heading-container">
<h2 id="3d-printing">3D Printing</h2>
<div class="ul-img-container">
<div id="ul-container">
<ul>
<!-- (li>a)*5 + tab = quick fill -->
<li><a href="https://ultimaker.com/software/ultimaker-cura/" target="_blank">The Slicer I've Been Using for Years - Ultimaker Cura</a></li>
<li><a href="https://www.klipper3d.org/" target="_blank">The Firmware Upgrade I'm Afraid to Attempt</a></li>
<li><a href="https://www.longer3d.com/products/lk5-pro-fdm-3d-printer?srsltid=AfmBOorAEAZ8x2Bicnt7hJmOSUVGupiH_R4l4RaHwBcWUHPUjucF0VAh" target="_blank">My Current Functioning 3D Printer - Longer LK5 Pro</a></li>
</ul>
</div>
<div id="img-container">
<img src="images/lk5-pro.png" alt="Longer LK5 Pro 3D Printer, credit All3DP.com">
</div>
<!-- Image obtained from: https://all3dp.com/1/longer-lk5-pro-review-3d-printer-specs/ -->
</div>
<a id="top_link" href="#top">top</a>
</div>
<div class="heading-container">
<h2 id="philosophy">Philosophy and Ethics</h2>
<div class="ul-img-container">
<div id="ul-container">
<ul>
<!-- (li>a)*5 + tab = quick fill -->
<li><a href="https://en.wikipedia.org/wiki/Aleksandr_Solzhenitsyn" target="_blank">One of My Favorite Thinkers That Serves As A Critical Thought Trigger</a></li>
<li><a href="https://www.youtube.com/@unsolicitedadvice9198" target="_blank">A YouTube Channel I've Been Watching Recently</a></li>
<li><a href="https://en.wikipedia.org/wiki/Panopticon#:~:text=The%20panopticon%20is%20a%20design,Bentham%20in%20the%2018th%20century." target="_blank">My Favorite Concept I've Recently Discovered: Bentham's Panopticon</a></li>
</ul>
</div>
<div id="img-container">
<img src="images/solz.webp" alt="Alexander Solzhenitsyn working at his desk, credit to New York Times">
</div>
<!-- Image obtained from: https://www.nytimes.com/2008/08/04/books/04solzhenitsyn.html -->
</div>
<a id="top_link" href="#top">top</a>
</div>
<footer>
</footer>
</div>
</body>
</html>