-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhow_to_homepage.html
137 lines (130 loc) · 4.48 KB
/
how_to_homepage.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>How To: HTML, CSS, and JS</title>
<style>
*{
font-size:16px;
font-family:verdana;
}
#main{
background-color:#e6e6e6;
width:96%;
margin-top:2%;
padding:20px;
border-radius:5px;
text-align:center;
margin-bottom:50px;
}
#how-to-head{
color:#006666;
font-size:20px;
padding-bottom:15px;
border-bottom:2px solid #006666;
}
#links_div{
background-color:rgb(128, 128, 138);
padding:10px;
border-radius:5px;
width:90%;
margin:0 auto;
}
#links_div table{
width:100%;
}
#links_div table td{
width:33%;
color:rgb(179, 199, 199);
text-align:left;
text-decoration:underline;
margin-bottom:10px;
height:25px;
}
#links_div table th{
text-align:left;
}
.how-to-subheader{
color:#ff6666;
font-size:25px;
margin-top:20px;
}
.info_div{
background-color:#cccccc;
padding:10px;
border-radius:5px;
margin:0 auto;
width:90%;
margin-top:40px;
}
.explan{
color:#333333;
text-align:justify;
}
.top_of_page{
text-align:right;
color:#006666;
text-decoration:underline;
}
</style>
</head>
<body>
<div id="main">
<p id="how-to-head"><b>HOW TO: <span style="color:#737373;font-size:20px;">HTML, CSS, and JS</span></b></p>
<div id="links_div">
<table>
<tr>
<th>
<p class="links_header">Elements</p>
</th>
<th>
<p class="links_header">Functions</p>
</th>
<th>
<p class="links_header">Tips and Tricks</p>
</th>
</tr>
<tr>
<td onclick="document.getElementById('accordion').scrollIntoView(true);">Accordion</td>
<td>hasClass()</td>
<td>Building a "Modern" Page</td>
</tr>
<tr>
<td onclick="document.getElementById('checkbox').scrollIntoView(true);">Checkbox</td>
<td>filterOnInput()</td>
<td>Guide to using "display"</td>
</tr>
<tr>
<td>Hidable Option Menu</td>
<td></td>
<td>Responsive Pages</td>
</tr>
</table>
</div> <!-- End links_div -->
<div class="info_div" id="accordion">
<p class="how-to-subheader">Accordion</p>
<p class="explan">An accordion is an element that is made of two parts: a header and some content. When the user clicks on the header, the content is displayed. The most common use of this is in an option menu, like the one you see below.</p>
<div style="text-align:center;">
<a href="https://jsbin.com/wizesivedu/1/edit?html,output">Accordion Example 1</a><br><br>
</div>
An accordion could also be called a dropdown--they both have very similar functions, though I believe the connotation behind a "dropdown" is that the content and header are independent divs. On the other hand, an accordion tends to contain both a header and a hidden content div. Below is another example of how an accordion can act.</p>
<a href="https://jsbin.com/ceramekuho/1/edit?html,output">Accordion Example 2</a>
<div class="top_of_page"><p onclick="document.getElementById('main').scrollIntoView(true);">Top of the Page</p></div>
</div> <!-- End accordion div -->
<div class="info_div" id="checkbox">
<p class="how-to-subheader">Checkbox</p>
<p class="explan">You could use the default checkbox input and just leave it at that, but there is a way to customize checkbox inputs a bit more. W3 CSS does something very similar, but this is an example of how you can manually change the size of the box and the color of the text when clicked. The idea is pretty simple:<br><br>
<ul style="text-align:left">
<li>Create a checkbox input</li>
<li>Create a label, and add the attribute for="checkbox_id"</li>
<li>Pass the labelID in a function called toggleCheckbox(ID)</li>
<li>Manipulate the CSS for both the input and text in that function</li>
</ul>
<p>Here's an example: </p>
<a href="">Checkbox Example</a>
<div class="top_of_page"><p onclick="document.getElementById('main').scrollIntoView(true);">Top of the Page</p></div>
</p></div> <!-- End accordion -->
</div> <!-- End main -->
</body>
</html>