-
Notifications
You must be signed in to change notification settings - Fork 0
/
design.html
76 lines (73 loc) · 3.03 KB
/
design.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
<html>
<head>
<link rel="stylesheet" type="text/css" href="cwstyle.css">
<title>Design</title>
<meta charset="utf-8">
</head>
<body>
<div class="header">
<h1> Coursework: Design </h1>
</div>
<div class="navbar">
<a href="index.html">Index</a>
<a href="design.html">Design</a>
<div class="dropdown">
<button class="dropbtn">Ciphers
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="rot13/rot13.html">ROT13 Encoder</a>
<a href="Base64/base64.html">Base64 Encoder</a>
<a href="morse/morse.html">Morse Encoder</a>
</div>
</div>
</div>
<div class="column side">
</div>
<div class="column middle">
<h2>Top bar</h2>
<p>There is a top bar on every webpage. This is to allow the user to see very clearly what page they are currently viewing. </p>
<h2>Navigation Bar with Dropdown</h2>
<p>The <b>navigation bar</b> covers <b>100%</b> of the width of the container that it is in.
This is is the whole width of the web page, but for this example it does not.
When the mouse is hovering over the navigation bar, the buttons change color.
This allows the user to see clearly what they are about to click</p>
<div class="navbar">
<a href="#">Item</a>
<a href="#">Item</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Item</a>
<a href="#">Item</a>
<a href="#">Item</a>
</div>
</div>
</div>
<h2>Responsive side padding</h2>
<p>On either side of this web page there is padding of 15%. This is responsive to how wide the user window is.
This means that users with smaller displays do not have such a big border.
There is also padding on the bottom of the webpage under the main content. This is fixed to 152px because the footer bar is 152px and does not move.
This prevents content from getting hidden underneath the footer.</p>
<h2>Text Areas (Input Area)</h2>
<p>The text area contains placeholder text that lets the user know what they can do with the it.
The text area is 50% the width (but limited to maximum 500px) of the container that it is in, and it will adjust to the size of the window.</p>
<textarea placeholder="Example of textarea" autofocus id="message"></textarea><br />
<h2>Buttons</h2>
<p>The buttons contain text that tell the user the functionality.
When the user hovers their cursor over the button, the cursor will change to show the user they can click. </p>
<div class="btn">
<button class="button">Button</button>
</div>
<h2>Footer</h2>
<p>There is a footer that is on the bottom of every webpage. It is static and always visible.
The footer contains the Author name, student matriculation number, coursework due date, and finally the E-Mail address.</p>
</div>
<div class="footer">
<p>Author: Oliver Thornewill von Essen </p>
<p>Date: 26 Feb 2018 </p>
</div>
</body>
</html>