-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
93 lines (88 loc) · 4.06 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>BUTTONS | YOSHITHA</title>
<!-- Favicon -->
<link rel="icon" type="image/png" href="images/Buttons.png" />
<!-- CSS -->
<link rel="stylesheet" type="text/CSS" href="assets/styles.css">
</head>
<body id="body">
<!-- Buttons -->
<center>
<h1 id="if"><b><i>Buttons...</i></b></h1>
</center>
<div>
<center style="padding: 30px; margin: 50px;">
<button type="button" onclick="clickMe()" ondblclick="doubleClick()" class="class">First, Click Me!</button>
</center>
<center style="font-size: 20px; display: none; margin: 30px;" id="If">
<p><b><i>If you want to change the background color of this web page, click the below color names.<br>Double Click to hide this sentence.</i></b></p>
</center>
<center style="padding: 10px;">
<button type="button" onclick="backgroundColorWhite()" class="clas">White</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="backgroundColorRed()" class="claz">Red</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="backgroundColorGreen()" class="cl">Green</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="backgroundColorBlue()" class="cla">Blue</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="backgroundColorBlack()" class="class">Black</button>
</center>
</div>
<div>
<center style="padding: 30px; margin: 50px;">
<button type="button" onclick="clickMe2()" ondblclick="doubleClick2()" class="class">Next, Click Me!</button>
</center>
<center style="font-size: 20px; display: none; margin: 30px;" id="My">
<p><b><i>If you want to change the font color of this letters, click the below color names.<br>Double Click to hide this sentence.</i></b></p>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontColorWhite()" class="clas">White</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontColorRed()" class="claz">Red</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontColorGreen()" class="cl">Green</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontColorBlue()" class="cla">Blue</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontColorBlack()" class="class">Black</button>
</center>
</div>
<div>
<center style="padding: 30px; margin: 50px;">
<button type="button" onclick="clickMe3()" ondblclick="doubleClick3()" class="class">After that, Click Me!</button>
</center>
<center style="font-size: 20px; display: none; margin: 30px;" id="Me">
<p><b><i>If you want to change the font size of the above heading, click the below sizes.<br>Double Click to hide this sentence.</i></b></p>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontSize10px()" class="class">10px</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontSize30px()" class="class">30px</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontSize50px()" class="class">50px</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontSize80px()" class="class">80px</button>
</center>
<center style="padding: 10px;">
<button type="button" onclick="fontSize100px()" class="class">100px</button>
</center>
</div>
<script src="assets/app.js"></script>
</body>
</html>