-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
112 lines (93 loc) · 4.84 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ian Guinn: Story Behind the Mind</title>
</head>
<body>
<!-- Header of the website -->
<header>
<h1>Welcome to the Diary of Me</h1>
</header>
<div class="navbar">
<a href="aboutme.html">About Me</a>
<a href="learnmore.html">My D&D</a>
<a href="materialize.html">One Piece</a>
<a href="jquery.html">Arcane</a>
<a href="bootstrap.html">?</a>
</div>
<!-- Main container with Flexbox layout -->
<div class="container">
<!-- Main content area with Flexbox layout -->
<div class="main-content">
<!-- Section for bakery introduction -->
<section>
<h2>About Me</h2>
<p><strong>August 25, 2002:</strong> I was born, the earth shook and I alone stood still. No but for real, I was born in Texas and lived 14 years of my life there. I learned to walk, talk and grew into a young man in those hot summers. Though, it wasn't until I moved to Hamiltion, Ohio that I learned what it was to be <emp>loved by another, trusted by friends and even the stong of betrayal.</emp></p>
<p>When I came to Ohio I was mad and confused. My mom took me from my friends and what I knew. I was alone and sad. I eventually found friends and learned how to live in the new enviornment. </p>
<h2>My Dreams and Accolades</h2>
<p>As long as I can remember I have wanted to write worlds and create stories, <strong>Dungeons & Dragons</strong>, <strong>The Hobbit</strong> and <strong>Cyberpunk</strong> have played a big role in upsizing my story/world building mindset. My designs include:</p>
<ul>
<li>The Regicides: D&D Campaign Setting</li>
<li>Aurora City of Dreams: Cyberpunk RED Setting</li>
<li>Igrimel: Descent into Chaos (D&D World)</li>
<li>Equivilant Exchange: Alchemic Card Game</li>
</ul>
<img src="images/Cyberpunk-2077-Key-Art-1-06262020.jpg" alt="cyberpunk" width="640" height="480">
<p>Not all of these projects have seen total completion but they are being worked on or have been delayed due to scheduling issues.</p>
<h2>Description of Projects</h2>
<table>
<tr>
<th>Game</th>
<th>Breif Summary</th>
<th>Project Time Period</th>
</tr>
<tr>
<td><u>The Regicides</u></td>
<td>A group of 8 adventures travel around the world to defeat a demon trying to destroy the fabric of time.</td>
<td>August 2022-August 2024</td>
</tr>
<tr>
<td><u>Aurora</u></td>
<td>Cyberpunk world that surrounds around a city called a "Haven" but secretly has a dark underbelly that the main character has to uncover.</td>
<td>May 2022-Now</td>
</tr>
<tr>
<td><u>Igrimel</u></td>
<td>A group of people who come together to find out the lost magic lost within a unforseen world.</td>
<td>September 2024-Now</td>
</tr>
<tr>
<td><u>Equivilant Exchange</u></td>
<td>A card game based on the elements found in alchemy to play spells that effect different elements differently.</td>
<td>September 2024-October 2024</td>
</tr>
</table>
<h3>What is your favorite project?</h3>
<br>
<input id="userInput"> <br><br>
<button onclick="myFunction()">Submit</button>
<p id="message"></p>
<script>function myFunction() {
let userInput = document.querySelector ("#userInput");
let message = document.querySelector ("#message");
message.innerHTML = "Thank your for your feedback ";
}
</script>
</section>
<!-- Aside for additional information -->
<aside>
<h2>Fun Facts</h2>
<p>I love anime and my favortie food is a home made dish called <em>Frankemagusha</em>, which is a german baked noodle dish.</p>
<h2>Inqueries</h2>
<p>Email: iankguinn2002@gmail.com</p>
</aside>
</div>
<!-- Footer of the website -->
<footer>
<p>© 2024 Ian Guinn. All rights reserved.</p>
</footer>
</div>
</body>
</html>