-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathusers.html
258 lines (201 loc) · 11.9 KB
/
users.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
255
256
257
258
<!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/users.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=Fauna+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">
<div class="triangle">
<p id="about">Users</p>
<div class="navigation">
<!--This is the navigation class where all the links go-->
<!--Loading the hand image-->
<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="about.html">About</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>
<!--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>
</div>
<!--This is a div which is used for decoration to create a triangle for the logo-->
<div class="small_rectangle"></div>
<div class="main_content grid_12">
<!--Creating the Log in using form-->
<form class="form-4">
<h6>Login or Register</h6>
<p>
<label for="login">Username or email</label> <!--The label for login will be the text in the middle-->
<input type="text" name="login" placeholder="Username or email" required>
</p>
<p>
<label for="password">Password</label>
<input type="password" name='password' placeholder="Password" required>
</p>
<p>
<input type="submit" name="submit" value="Let me in.">
</p>
</form>
</div>
<hr />
<p id="register_text">Register</p>
<hr />
<div class="small_rectangle2"></div>
<!--The registration form-->
<div id="register" class="register2 grid_10">
<form action=" "> <!--When the user will complete the form no action will be taken-->
<p>
<label for="usernamesignup" class="uname">Your username:</label>
<input id="usernamesignup" name="usernamesignup" type="text" placeholder="username" required>
</p>
<p>
<label for="emailsignup" class="youmail"> Your email:</label>
<input id="emailsignup" name="emailsignup" type="email" placeholder="[email protected]" required>
</p>
<p>
<label for="passwordsignup" class="youpasswd">Your password: </label>
<input id="passwordsignup" name="passwordsignup" type="password" placeholder="password" required>
</p>
<p>
<label for="passwordsignup_confirm" class="youpasswd">Confirm password: </label>
<input id="passwordsignup_confirm" name="passwordsignup_confirm" type="password" placeholder="password" required>
</p>
<p class="signin button">
<input type="submit" value="Sign me up." />
</p>
</form>
</div>
<div class="space grid_12"></div>
<hr />
<div class="small_rectangle3"></div>
<div class="space2 grid_12"></div>
<div class="circle2"></div>
<p class="speech">Then go and Explore!</p>
<p class="speech2">Want to learn?</p>
<div class="circle">
<div class="runner"> </div>
</div>
<div class="space3 grid_12"></div>
<!--Jump link which will redirect to the top of the page-->
<a href="#home" id="jump_link">Go Up.</a>
<div class="big_rectangle"></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_rectangle4"></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 -->