-
Notifications
You must be signed in to change notification settings - Fork 1
/
editor2.html
118 lines (108 loc) · 4.69 KB
/
editor2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Editor - Student 2</title>
<link rel="stylesheet" href="editor2.css">
</head>
<body>
<!--Creating the main <div> where all the content will be placed-->
<div class = "main-info" id="top">
<!--Creating a <div> for the introduction text-->
<div class = "main-text">
<h1>PAGE EDITOR</h1>
<br>
<p>
<br><br>
NAME : FATHIMA MAARIYA MARZOOK (w2083148)
<br><br>
ROLE : Student 2
<br><br>
The following pages were edited by me!
</p>
</div>
<br>
<!--Creating another section for the tasks and page links-->
<div class="sub-text">
<h2>Template CSS (style.css) and Navigation Bar</h2>
<p>
<br>
Created the website template using an external style sheet,
which includes a common background image and CSS elements
such as the font style and padding for the website.
<br><br>
Additonally, created the header of the website, which consists of a navigation
list which has a link to every page made by each team member, as well as a
footer where each member can link their page editor and add their names.
<br><br>
Created a website logo for the navigation bar
<br><br>
<div class="file-links">
<a href="style.html"><strong>Link to Sample Template with Navigation bar</strong></a>
</div>
<br><br>
</p>
<hr><br>
<h2>Home Page</h2>
<p>
<br>
Created a simple home page using HTML and CSS consisting primarily of the website logo, mission
and links to each content page.
<br><br>
Used image maps and JavaScript to ensure the images tied to each content page
is clickable at all times.
<br><br>
Used the CSS flex-wrap property to display the images in a grid-like style.
<br><br>
<div class="file-links">
<a href="home.html"><strong>Link to Home Page</strong></a>
</div>
<br><br>
</p>
<hr><br>
<h2>Feedback Form</h2>
<p>
<br>
Created a form using HTML, CSS and JavaScript to allow visiors to enter their
feedback and basic information, select various options (such as rating and updates requirement)
and send the form details to a valid email address.
<br><br>
JavaScript was used for form and input validation as well as to display the preview,
feedback confirmation messages, error messages in the form and alerts.
<br><br>
Used radio buttons, textarea, and select to add variety to the input types.
<br><br>
Checked for errors in each respective field using JavaScript before displaying the
preview and submitting the form.
<br><br>
<div class="file-links">
<a href="feedback.html"><strong>Link to Feedback Form</strong></a>
</div>
<br><br>
</p>
<hr><br>
<h2>Content Page</h2>
<p>
<br>
Created a content page with 3 sections describing ways/strategies to reduce Marine Pollution
and Ocean Acidification.
<br><br>
Used internal linking with anchors to jump from a basic navigation list to any of the 3 sections,
as well as another anchor at the bottom of the page that jumps to the top.
<br><br>
Used additional CSS to add background images for each section in the page.
<br><br>
<div class="file-links">
<a href="content2.html"><strong>Link to Content Page</strong></a>
</div>
<br><br>
</p>
</div>
<br><br>
<!--Displaying a link for the user to be redirected to the top of the page-->
<div class="jump-to-top">
<a href="#top"><strong>Jump to Top</strong></a>
</div>
</div>
</body>
</html>