-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (123 loc) · 5.43 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exam 2</title>
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="q1 bg-info py-5">
<div class="section-title text-center bg-white py-2">
<h1>Q1</h1>
</div>
<div class="container py-5">
<div class="row">
<div class="col-md-12">
<div class="item-container bg-white text-center p-5 rounded">
<h2 class="text-uppercase">Work To - Dos</h2>
<p class="text-muted lead">Enter text into the input field to add items to your list. <br>
Click the item to mark it as complete. <br>
Click the "X" to remove the item from your list.</p>
<div class="form-group d-flex w-75 m-auto">
<input type="text" class="form-control" id="itemInput">
<div class="btn btn-info" id="addItemBtn">Add</div>
</div>
<div class="item-list w-50 m-auto py-4">
<div class="item-row" id="itemRow">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="q2 py-5">
<div class="section-title text-center bg-dark py-2">
<h1>Q2</h1>
</div>
<div class="container py-5">
<h3 class="py-5 my-5 text-center" id="hustlin">HUSTLIN'</h3>
<audio id='mySound' src='audio/baby.mp3'></audio>
</div>
</section>
<section class="q3 py-5">
<div class="section-title text-center bg-white py-2">
<h1>Q3</h1>
</div>
<div class="container py-5">
<p class="text-white text-center font-italic">We are coming soon.</p>
<div class="timer d-flex justify-content-center align-items-center">
<div class="timer-item text-white border border-white rounded-circle">
<h3 id="day">00</h3>
<h6>DAYS</h6>
</div>
<div class="timer-item text-white border border-white rounded-circle">
<h3 id="hour">00</h3>
<h6>HOURS</h6>
</div>
<div class="timer-item text-white border border-white rounded-circle">
<h3 id="minute">00</h3>
<h6>MINUTES</h6>
</div>
<div class="timer-item text-white border border-white rounded-circle">
<h3 id="second">00</h3>
<h6>SECONDS</h6>
</div>
</div>
</div>
</section>
<section class="q4 py-5 vh-100">
<div class="section-title text-center bg-dark py-2">
<h1>Q4</h1>
</div>
<div class="container py-5">
<div class="color-palette d-flex justify-content-around">
<div class="color-item red"></div>
<div class="color-item green"></div>
<div class="color-item blue"></div>
</div>
</div>
</section>
<section class="q5 py-5 vh-100">
<div class="section-title text-center bg-dark py-2">
<h1>Q5</h1>
</div>
<div class="container py-5">
<h3 class="text-center">Form Validation</h3>
<div class="form w-75 m-auto">
<div class="form-group">
<label for="username">User Name</label>
<input type="text" class="form-control" placeholder="Enter user name" id="username">
<p class="error-message" id="usernameError">Enter valid user name, Must start with upper case and be
5 char at least and 40 char at most</p>
</div>
<div class="form-group">
<label for="username">Email</label>
<input type="email" class="form-control" placeholder="Enter email" id="email">
<p class="error-message" id="emailError">Enter valid email</p>
</div>
<div class="form-group">
<label for="username">Phone</label>
<input type="number" class="form-control" placeholder="Enter phone" id="phone">
<p class="error-message" id="phoneError">Enter valid phone, must be 11 digit or 14 digit if start
with 002</p>
</div>
<div class="form-group">
<textarea name="message" id="message" rows="5" class="form-control"
placeholder="Enter your message here" id="message"></textarea>
<p class="error-message" id="messageError">message must be more than 40 character</p>
</div>
<button class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</section>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/all.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>