-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.php
155 lines (148 loc) · 8.26 KB
/
index.php
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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>E-Perpus | Home</title>
<link rel="stylesheet" href="assets/css/main2.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="72">
<style>
body {
overflow-x: hidden;
}
#readmore {
width: 20%;
margin: auto;
margin-top: 20px;
}
@media only screen and (max-width: 768px) {
html, body {
overflow-x: hidden;
}
body {
position: relative
}
#navbar-responsive {
font-size: 40px;
}
.portfolio a i {
visibility: hidden;
width: 100%;
position: absolute;
}
#readmore {
height: 45px;
width: 100px;
}
#about p{
padding: 20px 20px;
}
}
</style>
<nav class="navbar navbar-light navbar-expand-lg bg-secondary text-uppercase" id="mainNav">
<div class="container"><a class="navbar-brand" href="index.php">E-PERPUS</a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler text-white bg-primary navbar-toggler-right text-uppercase rounded" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto">
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="index.php">HOME</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="books.php">BOOKS</a></li>
<li class="nav-item mx-0 mx-lg-1"><a class="nav-link py-3 px-0 px-lg-3 rounded" href="index.php#about">ABOUT</a></li>
</ul>
</div>
</div>
</nav>
<header class="text-center text-white bg-primary masthead" style="padding-top: 100px;"><img class="img-fluid d-block mx-auto mb-5" src="assets/img/—Pngtree—tutorial%20and%20e-book%20illustration%20concept_4188248.png" style="width: 300px;height: 300px;margin-top: 0px;">
<div class="container">
<h1 id="navbar-responsive">E-Perpustakaan</h1>
<hr class="star-light">
<h2 class="font-weight-light mb-0">Baca Buku Gratis Dimana & Kapan Saja</h2>
</div>
</header>
<section id="books" class="portfolio">
<?php
require 'functions.php';
$datas = query("SELECT * FROM books ORDER BY tgl_input DESC LIMIT 3");
?>
<div class="container">
<h2 class="text-uppercase text-center text-secondary">RECENTLY ADDED</h2>
<hr class="star-dark mb-5">
<div class="row">
<?php foreach ($datas as $data) : ?>
<div class="col-md-6 col-lg-4"><a class="d-block mx-auto portfolio-item" href="#books-modal-<?= $data['id_buku'] ?>" data-bs-toggle="modal"><img class="img-fluid" src="assets/img/<?= $data['cover'] ?>" style="height: 500px;width: 400px;"></a></div>
<?php endforeach; ?>
<a href="books.php" id="readmore" class="btn btn-secondary"><i class="fa fa-eye"></i> See more</a>
</div>
</div>
</section>
<section class="text-white bg-primary mb-0" id="about">
<div class="container">
<h2 class="text-uppercase text-center text-white">About</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col-lg-4 ms-auto">
<p class="lead text-start flex-row justify-content-center align-items-center align-content-center"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br></p>
</div>
<div class="col-lg-4 me-auto">
<p class="lead"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br><br></p>
</div>
</div>
<div class="text-center mt-4"></div>
</div>
</section>
<footer class="text-center footer">
<div class="container">
<div class="row">
<div class="col-md-4 mb-5 mb-lg-0">
<h4 class="text-uppercase mb-4">Location</h4>
<p>Lorem Ipsum is simply dummy text of the printing and type setting</p>
</div>
<div class="col-md-4 mb-5 mb-lg-0">
<h4 class="text-uppercase">OUR SOCIAL MEDIA</h4>
<ul class="list-inline">
<li class="list-inline-item"><a class="btn btn-outline-light text-center btn-social rounded-circle" role="button" href="#"><i class="fa fa-facebook fa-fw"></i></a></li>
<li class="list-inline-item"><a class="btn btn-outline-light text-center btn-social rounded-circle" role="button" href="#"><i class="fa fa-google-plus fa-fw"></i></a></li>
<li class="list-inline-item"><a class="btn btn-outline-light text-center btn-social rounded-circle" role="button" href="#"><i class="fa fa-twitter fa-fw"></i></a></li>
<li class="list-inline-item"><a class="btn btn-outline-light text-center btn-social rounded-circle" role="button" href="#"><i class="fa fa-dribbble fa-fw"></i></a></li>
</ul>
</div>
<div class="col-md-4">
<h4 class="text-uppercase mb-4">About</h4>
<p><span>E-Perpus is a online platform to read books at anywhere & anytime</span></p>
</div>
</div>
</div>
</footer>
<div class="text-center text-white copyright py-4">
<div class="container"><small>Copyright © Jagad Raya 2022</small></div>
</div>
<div class="d-lg-none scroll-to-top position-fixed rounded"><a class="text-center d-block rounded text-white" href="#page-top"><i class="fa fa-chevron-up"></i></a></div>
<?php foreach ($datas as $data) : ?>
<div class="modal text-center" role="dialog" tabindex="-1" id="books-modal-<?= $data['id_buku'] ?>">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
<div class="modal-body">
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-uppercase text-secondary mb-0"><?= $data['judul_buku'] ?></h2>
<hr class="star-dark mb-5"><img class="img-fluid mb-5" src="assets/img/<?= $data['cover'] ?>" width="50%">
<p class="mb-5"><?= $data['deskripsi_buku'] ?></p>
</div>
</div>
</div>
</div>
<div class="modal-footer pb-5"><a href="view.php?id=<?= $data['id_buku'] ?>" class="btn btn-primary btn-lg mx-auto rounded-pill portfolio-modal-dismiss" role="button"><i class="fa fa-eye"></i> View More</a></div>
</div>
</div>
</div>
<?php endforeach; ?>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/freelancer.js"></script>
</body>
</html>