-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (134 loc) · 4.65 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
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital@1&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link
rel="shotcut icon"
type="image/x-icon"
href="../assets/android-chrome-192x192.png"
/>
<link rel="stylesheet" href="./style.css" />
<script
src="https://kit.fontawesome.com/ba4825c01c.js"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- navbar -->
<header class="header fixed-top">
<a class="navbar-brand" href="/">SimpleJquery</a>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="nav-item nav-link" href="#home"
>Home<span class="sr-only">(current)</span></a
>
<a class="nav-item nav-link" href="#booklist">Book List</a>
<a class="nav-item nav-link" href="#animation">Animation</a>
</div>
</div>
</div>
</nav>
</header>
<!-- akhir navbar -->
<!-- home -->
<section id="home" class="container-fluid home">
<div class="row align-items-center min-vh-100 min-vw-100">
<div class="col pl-md-5 ml-md-5 px-4 p-0 text-center text-md-left">
<h2>Simple Jquery Implementation</h2>
<h1>Let's <span class="typing-text"></span></h1>
</div>
</div>
</section>
<!-- akhir home -->
<!-- booklist -->
<section id="booklist" class="booklist d-flex">
<form
name="form"
id="formAddBook"
action="#"
method="post"
autocomplete="off"
class="m-auto shadow-sm"
>
<div class="form-group mb-3">
<label class="font-weight-bold" for="newBook">Add New Book</label>
<input
type="text"
class="form-control mt-1"
id="newBook"
placeholder="New Book Name"
name="nama"
minlength="3"
maxlength="50"
/>
</div>
<div class="form-group mb-3">
<label class="font-weight-bold" for="bookList">List of Book :</label>
<select name="bookOptions" id="bookOptions" class="form-select">
<option value="">Select</option>
</select>
</div>
<div class="btn-group d-flex w-100 mt-3">
<button type="submit" class="btn btn-primary me-5">Submit</button>
<button class="btn btn-secondary">
<a href="#" style="color: white; text-decoration: none">Back</a>
</button>
</div>
</form>
</section>
<!-- akhir booklist -->
<!-- animation -->
<section id="animation" class="booklist d-flex">
<div
autocomplete="off"
class="m-auto shadow-sm card d-flex flex-column justify-content-between"
>
<div class="mb-3">
<h2 class="mb-3">Animation Card</h2>
Animate the properties of elements between colors. jQuery UI bundles
the jQuery Color plugins which provides color animations as well as
many utility functions for working with colors.
</div>
<div class="btn-group w-100 mt-3">
<button class="btn btn-primary" id="btnToggle">Toggle</button>
</div>
</div>
</section>
<!-- akhir animation -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<script src="./main.js"></script>
</body>
</html>