-
Notifications
You must be signed in to change notification settings - Fork 1
/
services.html
220 lines (219 loc) · 8.18 KB
/
services.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/logo_no.png">
<title>Services</title>
<!--TailWind CSS-->
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>
</head>
<style>
.services {
display: flex;
align-items: center;
margin: 50px;
}
.services-footer {
margin: 20px 60px;
}
.services-footer button {
font-size: 14px;
background-color: #fddc58;
border: none;
padding: 15px 32px;
cursor: pointer;
border-radius: 8px;
display: inline;
justify-content: center;
align-items: center;
}
/*::-webkit-scrollbar {
height: 10px;
}
/*::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 25px;
}
::-webkit-scrollbar-thumb {
border-radius: 25px;
}
::-webkit-scrollbar-thumb:hover {
background: #fddc58;
}*/
.container {
display: flex;
gap: 24px;
border-radius: 12px;
padding: 30px;
scroll-snap-type: x mandatory;
overflow-x: auto;
scroll-padding: 30px;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
margin: 50px 50px 0px;
max-height: auto;
justify-self: center;
}
.container .card {
width: auto;
align-items: center;
padding: 20px;
border-radius: 12px;
background: #fddc58; /* or #fff */
scroll-snap-align: start;
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.card .image {
height: 150px;
width: 150px;
padding: 4px;
background: #fddc58;
border-radius: 10%;
}
.image img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 10%;
}
.card h2 {
margin-top: 25px;
color: #333;
font-size: 20px;
font-weight: 600;
text-align: center
}
.card p {
margin-top: 4px;
font-size: 16px;
font-weight: 400;
color: #333;
text-align: center;
}
</style>
<body>
<header class="services">
<a href="/home"><img class="h-20 w-auto mr-2" src="images/logo_no.png" alt="Logo"></a>
<div>
<a href="/" class="text-xl font-bold text-amber-800">UP SLIS LIBRARY<br></a>
<nav class="flex space-x-8 mt-2 text-sm font-bold">
<a href="/" class="hover:text-amber-600">Home</a>
<a href="/about_us" class="hover:text-amber-600">About Us</a>
<a href="/contact_us" class="hover:text-amber-600">Contact Us</a>
<button id="dropdownAvatarNameButton" data-dropdown-toggle="dropdownAvatarName" class="flex items-center text-sm pe-1 font-bold text-gray-900 rounded-full hover:text-blue-600 dark:hover:text-amber-600 md:me-0 dark:text-black" type="button">
<a class="hover:text-amber-600">Services</a>
</button>
<div id="dropdownAvatarName" class="hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-white dark:divide-gray">
<ul class="py-2 text-sm text-black dark:text-black" aria-labelledby="dropdownUserAvatarNameButton">
<li>
<a href="/services" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-amber-200 dark:hover:text-black">Services</a>
</li>
<li>
<a href="/collection" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-amber-200 dark:hover:text-black">Collection</a>
</li>
<li>
<a href="/resources" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-amber-200 dark:hover:text-black">Resources</a>
</li>
</ul>
</div>
</nav>
<h1 class="text-5xl font-bold absolute right-12">SERVICES</h1>
</div>
</header>
<div class="container">
<div class="card">
<div class="image">
<img src="images/closed_shelves.png" alt=""/>
</div>
<h2>CLOSED SHELVES POLICY</h2>
<p class="text-balance">Lorem ipsum dolor sit amet consectetur adipisicing elite.</p>
</div>
<div class="card">
<div class="image">
<img src="images/reading_spaces.png" alt="">
</div>
<h2>READING SPACES</h2>
<p class="text-balance">12 Carrels reserved at the College of Science Library Bldg. Hallway for UP SLIS Library users</p>
<p style="font-size: 12px">First come, first served</p>
</div>
<div class="card">
<div class="image">
<img src="images/opac.png" alt="" />
</div>
<h2>LIBRARY OPAC</h2>
<p class="text-balance">Can access the online public access catalog on a designated desktop</p>
</div>
<div class="card">
<div class="image">
<img src="images/orientation.png" alt="" />
</div>
<h2>LIBRARY ORIENTATION</h2>
<p class="text-balance">Introduces and guides the users on the library resources, programs, and services offered by the library</p>
</div>
<div class="card">
<div class="image">
<img src="images/counsel.png" alt="" />
</div>
<h2>TERM PAPER AND RESEARCH COUNSELING</h2>
<p class="text-balance">An attempt to guide and provide student's immediate research needs</p>
</div>
<div class="card">
<div class="image">
<img src="images/news.png" alt="" />
</div>
<h2>NEWSPAPERS</h2>
<p class="text-balance">Available newspapers include The Philippine Star, The Manila Bulletin, and Philippine Daily Inquirer</p>
</div>
<div class="card">
<div class="image">
<img src="images/advisory.png" alt="" />
</div>
<h2>READER ADVISORY</h2>
<p class="text-balance">Providing guidance to users about what materials they might enjoy</p>
</div>
<div class="card">
<div class="image">
<img src="images/laminate.png" alt="" />
</div>
<h2>LAMINATION</h2>
<p class="text-balance">*Depends on the size</p>
</div>
<div class="card">
<div class="image">
<img src="images/charging.png" alt="" />
</div>
<h2>LAPTOP CHARGING</h2>
<p class="text-balance">First come, first served at no cost</p>
</div>
<div class="card">
<div class="image">
<img src="images/scanning.png" alt="" />
</div>
<h2>SCANNING</h2>
<p class="text-balance">Php 5 per page or image</p>
</div>
<div class="card">
<div class="image">
<img src="images/printing.png" alt="" />
</div>
<h2>PRINTING</h2>
<p class="text-balance">Black and white (Php 5 per page)</p>
<p class="text-balance">Colored</p>
<p>(Php 5-20 per page)</p>
</div>
<div class="card">
<div class="image">
<img src="images/desktop.png" alt="" />
</div>
<h2>AVAILABLE DESKTOP</h2>
<p class="text-balance">For encoding and internet use</p>
</div>
</div>
</body>
<img src="images/gabi_no.png" alt="Mascot" class="absolute left-1/2 transform -translate-x-1/2 w-auto h-80">
<footer class="mt-20 text-center py-4 relative absolute -bottom-24" style='background-color: #fddc58'>
<p class="mt-16 text-sm font-bold">UP School of Library and Information Science Studies Library</p>
<p class="mb-8 text-sm">Temporary Location: 2nd Floor, College of Science Library Bldg., Velazquez St., UP Campus Diliman, Quezon City</p>
</footer>
</html>