-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
132 lines (128 loc) · 3.67 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
<!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" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./assets/styles.css" />
<link rel="icon" type="image/jpg" href="./logo.jpg">
<title class="">Awesome Books By Caleb</title>
</head>
<body>
<nav
class="
w-100
bg-dark
navigation
text-white
font-weight-bold
position-fixed
fixed-top
d-flex
"
>
<i class="fa fa-bars fa-2x d-none m-3 mr-4 ml-auto humburger"></i>
<i class="fa cancel-btn fa-times m-3 mt-0 ml-auto fa-2x d-none"></i>
<ul class="d-flex w-100 p-3 pr-5">
<li class="mr-auto pl-4">Awesome Books</li>
<li class="mr-3 pr-3 border-right border-white openList">List</li>
<li class="mr-3 pr-3 border-right border-white openNew">Add new</li>
<li class="mr-3 openContact">Contact</li>
</ul>
</nav>
<div class="mt-5 w-100 d-flex">
<p class="timeNow ml-auto mr-4 p-4 pb-0"></p>
</div>
<div
class="s-container container w-100 d-flex flex-column align-items-center"
>
<div class="listBook container w-100">
<h1 class="text-center font-weight-bold pb-3">Awesome books</h1>
<table
class="
table
css-table
table-striped
w-75
ml-auto
mr-auto
table-hover
border
"
>
<tbody id="list"></tbody>
</table>
<ul
class="css-pagination w-100 d-flex justify-content-center flex-row"
></ul>
</div>
<div
class="
inputs
ml-auto
mr-auto
flex-column
align-items-center
w-50
form-group
d-none
"
>
<h2 class="text-center mt-5 font-weight-bold">ADD A NEW BOOK</h2>
<input
type="text"
class="form-control mt-3 p-3"
id="title"
placeholder="Title"
/>
<input
type="text"
class="form-control mt-3 p-3"
id="author"
placeholder="Author"
/>
<button
type="button"
class="h-100 align-self-end p-3 mt-3 btn btn-dark buttonClass"
>
Add item
</button>
</div>
</div>
<div class="contact d-none m-auto flex-column align-items-center w-100">
<h2 class="text-center font-weight-bold pb-3">Contact Information</h2>
<p class="">
Doyou have anny question or you just want to say "Hello" <br />
You can reachout to us!
</p>
<ul class="ml-5">
<li>
- Our e-mail: <i class="font-weight-bold"><u> buyananderson@gmail.com</u></i>
</li>
<li>
- Our phone number: <i class="font-weight-bold"><u> +250785213173</u></i>
</li>
<li>
- Our Adresses : <i class="font-weight-bold"><u> Kigali/RWANDA</u></i>
</li>
</ul>
</div>
<footer
class="bg-dark text-light mt-5 p-3 position-fixed w-100 fixed-bottom"
>
©2021
</footer>
<script src="./luxon.js"></script>
<script src="./index.js"></script>
</body>
</html>