-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
231 lines (175 loc) · 11.3 KB
/
about.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
<!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/about.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'>
</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">
<!--A div for decoration which is at the start-->
<div class="triangle">
<!--Selecting the about text-->
<p id="about">About</p>
<div class="navigation">
<!--This is the navigation class where all the links go-->
<!--Loading an image of a hand-->
<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="tutorials.html">Tutorials</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>
<!--This is the main content div where text is and its in a grid_7 size-->
<div class="main_content grid_7">
<!--Used for long quotes-->
<blockquote cite="https://processing.org/overview/">
<!--The quote with text-->
<p id="quote">For the past fourteen years, <b>Processing</b> has promoted software literacy, particularly within the visual arts, and visual literacy within technology. Initially created to serve as a software sketchbook and to teach programming fundamentals within a visual context, Processing has also evolved into a development tool for professionals.</p>
</blockquote><!--End of blockquote-->
<!--Another decoration of a triangle-->
<div class="small_rectangle3"></div>
</div><!--End of main_content div-->
<!--Start of main text div in a grid_6 size-->
<div class="main_text grid_6">
<p id="main_text2">
The <b>aim of this site</b> is to help and support those that want to learn about Processing and it's fundamentals. We provide various tutorials and information on a <b>daily basis</b> as well as the code for each tutorial that we publish.</p>
<br /><!--This will create a space break-->
<!--Another triangle decoration-->
<div class="small_rectangle4"></div>
</div><!--End of the main text div-->
<!--Main text2 div in a grid 12 size which will cover the 960px-->
<div class="main_text2">
<!--SVG is used for vector files which in this case is the logo, Im linking the code to w3.org and stating the version as well as setting the size-->
<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svg" x="0px" y="0px" width="150px" height="150px" viewBox="0 0 213.235 241.176" enable-background="new 0 0 213.235 241.176" xml:space="preserve" fill="#0057B8">
<!--PATH will tell the vector where to go in x and y axis and fill opacity will define the opacity of the vector elemnt shape-->
<path d="M108.581,64.968V14.124l44.007,25.422L108.581,64.968" />
<path fill-opacity="0.9" d="M153.591,92.101V41.258L109.582,66.68L153.591,92.101" />
<path d="M155.586,92.062V41.221l44.009,25.42L155.586,92.062" />
<path fill-opacity="0.7" d="M200.299,119.14V68.297l-44.004,25.421L200.299,119.14" />
<path fill-opacity="0.85" d="M155.586,146.255V95.412l44.009,25.422L155.586,146.255" />
<path fill-opacity="0.7" d="M200.299,173.35v-50.844l-44.004,25.422L200.299,173.35" />
<path fill-opacity="0.6" d="M155.586,200.482v-50.84l44.009,25.417L155.586,200.482" />
<path fill-opacity="0.5" d="M153.591,200.521v-50.84l-44.009,25.418L153.591,200.521" />
<path fill-opacity="0.6" d="M108.581,227.696v-50.844l44.007,25.421L108.581,227.696" />
<path fill-opacity="0.5" d="M106.62,227.696v-50.844l-44.005,25.421L106.62,227.696" />
<path fill-opacity="0.7" d="M61.562,200.553V149.71l44.007,25.423L61.562,200.553" />
<path fill-opacity="0.7" d="M59.709,200.56v-50.843l-44.008,25.422L59.709,200.56" />
<path fill-opacity="0.7" d="M14.699,173.467v-50.843l44.01,25.42L14.699,173.467" />
<path fill-opacity="0.5" d="M59.709,146.235V95.392l-44.008,25.42L59.709,146.235" />
<path fill-opacity="0.7" d="M14.699,119.141V68.297l44.01,25.421L14.699,119.141" />
<path fill-opacity="0.6" d="M59.709,92.101V41.258L15.701,66.68L59.709,92.101" />
<path fill-opacity="0.85" d="M61.562,92.092V41.249l44.007,25.419L61.562,92.092" />
<path fill-opacity="0.9" d="M106.62,64.968V14.124L62.614,39.546L106.62,64.968" />
</svg>
<!--End of the vector-->
</div>
<!--End of the SVG div-->
<!--This is another decoration where the animated logo will be-->
<div class="circle"></div>
<!--Ending text-->
<p id="last_text"><font id="site">This site was created by an</font>
<br/> <acronym title="Institute of Art Design and Technology">IADT</acronym> student from a Creative
<br/>Cumputing course
<br/> <font id="year">Year 1.</font> </p>
<!--Another decoration triangle-->
<div class="small_rectangle5"></div>
</div>
<!--This is the end of the container 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_rectangle2"></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>
</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 -->