-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorials.html
254 lines (181 loc) · 10.6 KB
/
tutorials.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<!-- This is a declaration to tell the browser which version of HTML the page is using -->
<html>
<!-- This is the start of my code-->
<!-- This is the head of the code. In here I can change the title and link other files to my page-->
<head>
<!--This is the text that will appear on the tab in the browser-->
<title>Process. IT.</title>
<!--CONNECTING MY HTML FILE WITH OTHER CSS FILES-->
<!--I'm resetting the browser styles-->
<link href="css/reset.css" rel="stylesheet">
<!--I'm importing nicer type-->
<link href="css/text.css" rel="stylesheet">
<!--linking 960 stylesheet-->
<link href="css/960.css" rel="stylesheet">
<!-- linking the stylesheet -->
<link href="css/tutorials.css" rel="stylesheet">
<!--CONNECTING GOOGLE FONTS-->
<!--Im connecting Google fonts here with the weight of the font as 400 light and 900 for bold-->
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Yeseva+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,900,300,300italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300,900' rel='stylesheet' type='text/css'>
</head>
<!--This is the end of the head-->
<!--This is the body where all of the content is-->
<body>
<!-- The div is like a container which I will style using CSS -->
<!--The class is a name assigned to this container in which I will be able to style-->
<div class="wrapper">
<!--The container using the 12 collumn grid which is connected to the 960 stylesheet-->
<div class="container_12 main">
<div class="triangle">
<p id="about">Tutorials</p>
<div class="navigation">
<!--This is the navigation class where all the links go-->
<img class="hand" src="images/hand.png" alt="hand" />
<!--Unordered List element which is used to create the navigational links-->
<ul>
<!-- a href will link to other html documents creating a navigation system-->
<li id="home"><a id="nav" href="index.html">Home</a></li>
<li id="tutorials"><a id="nav" href="about.html">About</a></li>
<li id="users"><a id="nav" href="users.html">Users</a></li>
<!--This is the end of the lists-->
</ul>
<!--This is the end of the navigation div-->
</div>
</div>
<!--Im creating another div in order to be able to move around the attributes together-->
<div class="logo grid_3">
<!--This is a JavaScript document which Im stating here and which connects to the document outlined in "src"-->
<script src="js/date.js "></script>
<!--This will be my h1 text-->
<h1> Process. </h1>
<!--This will be my h2 text-->
<h2>IT.</h2>
<!--This is the end of the logo div-->
</div>
<!--This is a div which is used for decoration to create a triangle for the logo-->
<div class="small_rectangle"></div>
<p id="title">Most Recent</p>
<div class="circles_deco grid_3">
<div class="circle1">
<p> Game </p>
</div>
<div class="circle2">
<p> Animate </p>
</div>
<div class="circle3">
<p> Java </p>
</div>
<!--Main pattern lines-->
<div class="horizontal_line"></div>
<div class="horizontal_line2"></div>
<div class="vertical_line"></div>
<div class="vertical_line2"></div>
<div class="vertical_line3"></div>
<div class="small_rectangle2"></div>
<div class="horizontal_line3"></div>
<div class="horizontal_line4"></div>
<div class="horizontal_line5"></div>
<div class="main_text grid_6">
<p id="game"><font id="game_deco">Combinations game</font>
<br />Learn to create a simple game using the Processing Java language. You will be able to create a simple game layout and learn to use your new knowledge for your own future projects.<font><a id="game_click" href="tut_main.html"> Continue?</a></font></p>
<p id="animate"><font id="animate_deco">Animate your code</font>
<br />Learn to create a simple animation by using the Processing Java language. You will be able to create an animation sequence and make it come to life.<font><a id="game_click" href="tut_main.html"> Continue?</a></font> </p>
<p id="java"><font id="java_deco">Processing Java</font>
<br />Learn the basics of the Processing Java language and algorithms to create a constructive code that works.<font><a id="game_click" href="tut_main.html"> Continue?</a></font> </p>
</div>
</div>
<div class="more"> More? </div>
<div class="blue_end">
<ul>
<li id="li_game">Game</li>
<li id="ul_blue"><a id="ul_blue" href="tut_main.html">Basics of a Game</a></li>
<li id="ul_blue"><a id="ul_blue" href="tut_main.html">How a game is made</a></li>
<li id="ul_blue"><a id="ul_blue" href="tut_main.html">Alogrithms in games</a></li>
<li id="ul_blue"><a id="ul_blue" href="tut_main.html">Make a mini game</a></li>
<li id="ul_blue"><a id="ul_blue" href="tut_main.html">Make a simple game</a></li>
<li id="ul_more1"><a id="ul_more1" href="tut_main.html">Give me more.</a></li>
</ul>
</div>
<div class="grey_end">
<ul>
<li id="li_animate">Animate</li>
<li id="ul_grey"><a id="ul_grey" href="tut_main.html">Create movement</a></li>
<li id="ul_grey"><a id="ul_grey" href="tut_main.html">Arrays to Animate</a></li>
<li id="ul_grey"><a id="ul_grey" href="tut_main.html">Sequence</a></li>
<li id="ul_grey"><a id="ul_grey" href="tut_main.html">Making an animation</a></li>
<li id="ul_grey"><a id="ul_grey" href="tut_main.html">Animation interactivity</a></li>
<li id="ul_more2"><a id="ul_more2" href="tut_main.html">Give me more.</a></li>
</ul>
</div>
<div class="orange_end">
<ul>
<li id="li_java">Java</li>
<li id="ul_orange"><a id="ul_orange" href="tut_main.html">Processing Java</a></li>
<li id="ul_orange"><a id="ul_orange" href="tut_main.html">Processing Basics</a></li>
<li id="ul_orange"><a id="ul_orange" href="tut_main.html">Operators</a></li>
<li id="ul_orange"><a id="ul_orange" href="tut_main.html">Variables</a> </li>
<li id="ul_orange"><a id="ul_orange" href="tut_main.html">Using maths</a></li>
<li id="ul_more3"><a id="ul_more3" href="tut_main.html">Give me more.</a></li>
</ul>
</div>
</div>
<!--This is the end of the wrapper container and the main content-->
</div>
<div class="clear"></div>
<!--Clear property specifies on which sides the elements can't float-->
<!--Im creating a new div with 2 class names using the grid_12 from 960 stylesheet-->
<!--All footer elements will be here-->
<div class="footer grid_12">
<h1 id="footer_logo"> Process.</h1>
<!--Another h1 element with a unique id to style it in css-->
<h2 id="footer_logo2">IT.</h2>
<!--Another h1 element with a unique id to style it in css-->
<!--Im creating another small triangle for the footer logo design-->
<div class="small_rectangle3"></div>
<!--This is another javascript for the digital time in the footer-->
<script src="js/time.js "></script>
<div id="clock"></div>
<!--Im creating a new div to have the links together in the footer-->
<div class="footer_text">
<!--This is another unsorted list-->
<ul>
<!--A list of li for links in the footer-->
<li><a id="footer_nav" href="index.html">Terms and Conditions.</a></li>
<li><a id="footer_nav" href="index.html">Frequently Asked Questions.</a></li>
<li><a id="footer_nav" href="index.html">Who are we?</a></li>
<!--the end of the unsorted list element-->
</ul>
<!--This is the end of the footer text div-->
</div>
<!--This is my h5 with a unique id-->
<h5 id="follow"> Follow Us!</h5>
<!--Im creating a new div for all the social media pictures to be in one place-->
<div class="media">
<!--In here Im making the file search for images by names in the src element and make them clickable-->
<!--The img element is self closing-->
<a href="index.html"><img src="images/facebook.png" alt="facebook" /></a>
<a href="index.html"><img src="images/twitter.png" alt="twitter" /></a>
<a href="index.html"><img src="images/myspace.png" alt="myspace" /></a>
<a href="index.html"><img src="images/vimeo.png" alt="vimeo" /></a>
<a href="index.html"><img src="images/youtube.png" alt="youtube" /></a>
<!--This is the end of the media div-->
</div>
<!--This is the end of the footer div-->
</div>
<div class="clear"></div>
<!--Clear property specifies on which sides the elements can't float-->
<!--This is my copyright text using the p element for easier and simple styling-->
<p id="copyright"> Copyright 2016. All Rights Reserved.</p>
<!--This is the end of the body-->
</body>
<!-- This is the end of my code-->
</html>
<!--Student: Erika Volodko
Number: N00152627 -->