-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (137 loc) · 7.47 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Game">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Owen's Game Website</title>
<link rel="icon" href="Icon.png" type="image/png">
<link rel="stylesheet" href="darkMode.css" id="darkM">
<link rel="stylesheet" href="styles.css" id="lightM">
</head>
<body>
<div class="header" id="myHead">
<div class="rowH">
<div class="columnMH">
<h1>Owen's Game Website</h1>
</div>
<div class="columnRH">
<button class="hDrop" id="theme-toggle"><img src="Logo.png" alt="LogoR" width="100px" height="100px"></button>
</div>
<div class="columnLH">
<div class="dropdown">
<button class="hDrop"><img src="Menu.png" alt="Menu" width="100px" height="100px"></button>
<div class="sellectM">
<a href="page2.html"><b>Spiral</b></a>
<a href="game2.html"><b>Flappy Bird</b></a>
<a href="tank.html"><b>Tank</i></b></a>
<a href="ticktac.html"><b>Tic Tac Toe</i></b></a>
</div>
</div>
</div>
</div>
</div>
<main>
<section>
<h3>Website Description</h3>
<div class="row">
<div class="column1">
<p>This is a website I designed to help me learn how to code better. This will be a fun and interesting process.
Basically, the goal is to create a website that serves as a place to collect and display all of the games that
I will make. Most of the games I make will likely be in java and python. I am hoping that the end product will
not only help me practice, but could also be used to show recruiters that I am able to code in a bunch of different
languages. This is the home page where users can access all of the different games from. I have designed this website
in Figma and then taught myself how to code in HTML, CSS, JavaScript, and Python.</p>
<p>You can contact me at <a href="https://[email protected]" target="_blank">my email</a>
and view my <br><a href="https://www.linkedin.com/in/owen-nieuwenhuizen" target="_blank">LinkedIn</a> profile.</p>
</div>
<div class="column2">
<img src="Spirals.png" alt="Img1" width="100%" height="72%">
<h6>Created by Owen Nieuwenhuizen in Python</h6>
</div>
</div>
<!--this is a conment-->
<hr/>
</section>
<section>
<h2>GAMES</h2>
</section>
<section>
<h3>Python Spiral</h3>
<div class="row">
<div class="column1">
<p>This first game was written in Python using turtle. This draws an image with the pen tool in turtle.
Essentially what it does is it draws so that it is almost a square, but not quite. Instead of it being 90 degrees.
It turns 89 degrees which gives it that spiral like pattern. The length of the lines also increase by one each time
which is why it gets larger as it goes. Unfortunately, this is less of a game and more of a cool thing to look at
since it is not interactive. Click on the picure to go to the game page!</p>
</div>
<div class="column2">
<button><a href="page2.html"><img src="Game1.png" alt="Game Picture" width="100%" height="503px"></a></button>
</div>
</div>
<hr/>
</section>
<section>
<h3>Flappy Bird Game</h3>
<div class="row">
<div class="column1">
<p>This second game was written in JavaScript. I followed a tutorial to make this and then made modifications
so that I could have the game exactly how I want it, including the ability to reset and restart capabilities
I did this so that I could better learn how to code in
JavaScript so that I could code my own games in JavaScript. Click the image to enter the Flappy Bird Game page.
</p>
</div>
<div class="column2">
<button><a href="game2.html"><img src="LMFlap.png" alt="Game2 Picture" width="100%" height="400px"></a></button>
</div>
</div>
<hr/>
</section>
<section>
<h3>Tank Game</h3>
<div class="row">
<div class="column1">
<p>This third game was written in JavaScript. I took the information I learned from the past games and coded this
tank game from scratch. The objective of the game is to make sure that the tank does not hit any of the objects
in its way. You can avoid this happening by using the tank gun to fire shots and menuver the shots to hit the
objects so that they break before the tank hits them. Click the image to enter the Tank Game page.
</p>
</div>
<div class="column2">
<button><a href="tank.html"><img src="LMTank.png" alt="Game3 Picture" width="100%" height="400px"></a></button>
</div>
</div>
<hr/>
</section>
<section>
<h3>Tik Tac Toe</h3>
<div class="row">
<div class="column1">
<p>This fourth game was written in JavaScript. I took the information I learned from the past games and coded a tic tack toe game completely from scratch
The objective of the game is just to win tic tac toe.<br><br>Click the image to enter the Tic Tac Toe Game page.
</p>
</div>
<div class="column2">
<button><a href="ticktac.html"><img src="LMTank.png" alt="Game3 Picture" width="100%" height="400px"></a></button>
</div>
</div>
<hr/>
</section>
</main>
<footer>
<div class="rowF">
<div class="columnLF">
<h5>Contact me at <a href="https://[email protected]" target="_blank">[email protected]</a></h5>
</div>
<div class="columnMF">
<h4>Owen's Game Website</h4>
</div>
<div class="columnRF">
<img src="WashU_Logo.png" alt="WashU_Logo" width="55%" height="45%">
</div>
</div>
</footer>
<script src="colorMode.js"></script>
</body>
</html>