18 |
46 |
47 |
218 |
219 |
48 |
50 | Pojok Baca Probolinggo
49 |
51 |
54 | Pinjam Buku Secara Gratis untuk 52 | Masyarakat
53 |
55 |
64 |
65 |
56 |
57 | 
58 |
59 |
58 |
60 |
61 | 
62 |
63 |
62 |
66 | 
67 |
68 |
69 |
67 |
70 |
104 |
105 |
71 |
80 |
72 | 
75 |
76 | Sedang Tuhan pun Cemburu
73 |Emha Ainun Nadjib
74 |
75 |
77 | 
78 |
79 |
78 |
81 | 
82 | 
91 |
92 |
93 |
82 |
83 | 
85 | 
87 | 
89 |
90 |
85 |
87 |
89 |
91 |
92 |
94 |
101 |
102 |
103 |
95 | 
96 |
97 |
96 |
98 | 
99 |
100 |
99 |
106 |
216 |
217 |
107 |
109 | Kenapa Kita Harus Membaca Buku?
108 |
110 |
133 |
111 |
121 | “Aku rela dipenjara asalkan bersama buku, karena dengan buku
aku
112 | bebas ”
114 | 
115 |
120 |
115 |
116 |
119 | Mohammad Hatta
117 |Wakil Presiden Indonesia Pertama
118 |
122 |
132 | “Cuma perlu satu buku untuk jatuh cinta pada membaca, Cari Buku itu! Mari 123 | jatuh cinta!
124 |
125 | .png)
126 |
131 |
126 |
127 |
130 | Najwa Shihab
128 |Duta Membaca
129 |
134 |
156 |
157 |
135 | 
136 |
141 |
136 |
137 |
140 | 500+
138 |Judul Buku
139 |
142 |
143 |
148 |
143 |
144 |
147 | $0
145 |Gratis Peminjaman
146 |
149 |
150 |
155 |
150 |
151 |
154 | 5
152 |Kegiatan Rutin
153 |
158 |
214 |
215 |
159 |
171 |
172 |
160 |
163 | Apa Kata Mereka?
161 |Mereka yang telah menjadi pengunjung tetap kami
162 |
164 |
166 |
167 |
168 |
169 |
170 | Selengkapnya
165 |
173 |
207 |
208 |
174 |
189 | Amet minim mollit non deserunt ullamco est sit aliqua dolor do
amet sint. Velit officia
175 | consequat duis enim velit mollit. Exercitation
veniam consequat sunt nostrud amet.
178 | .png)
179 |
187 |
188 |
179 |
180 |
184 |
185 |
186 | Guy Hawkins
181 |32 Tahun, Karyawan
182 |
184 |
190 |
206 | Amet minim mollit non deserunt ullamco est sit aliqua dolor do
amet sint. Velit officia
191 | consequat duis enim velit mollit. Exercitation
veniam consequat sunt nostrud amet.
193 | .png)
194 |
195 |
196 |
204 |
205 |
194 |
195 |
196 |
197 |
201 |
202 |
203 | Guy Hawkins
198 |32 Tahun, Karyawan
199 |
201 |
209 | 
210 | 
211 |
212 |
213 |
210 |
211 |
212 |
220 |
252 |
253 |
254 |
255 |
314 |
315 |
316 |
317 |
318 |
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .header {
8 | height: 120px;
9 | background: #008F76;
10 | }
11 | .header__container {
12 | width: 1240px;
13 | margin: auto;
14 | display: flex;
15 | justify-content: space-between;
16 | align-items: center;
17 | }
18 | .header__container__lists ul {
19 | display: flex;
20 | justify-content: space-between;
21 | }
22 | .header__container__lists__item {
23 | list-style-type: none;
24 | }
25 | .header__container__lists__item__link {
26 | text-decoration: none;
27 | margin: 40px 35px;
28 | display: flex;
29 | align-items: center;
30 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
31 | font-style: normal;
32 | font-weight: 400;
33 | font-size: 16px;
34 | line-height: 200%;
35 | /* identical to box height, or 32px */
36 | color: #FFFFFF;
37 | }
38 | .header__container__lists__item__link button {
39 | cursor: pointer;
40 | padding: 10px 24px;
41 | background: none;
42 | border: 1px solid #FFFFFF;
43 | margin-top: -8px;
44 | border-radius: 10px;
45 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
46 | font-style: normal;
47 | font-weight: 400;
48 | font-size: 14px;
49 | line-height: 200%;
50 | color: #FFFFFF;
51 | }
52 |
53 | .main {
54 | background: linear-gradient(180deg, #FFFFFF 0%, #F6F5FF 100%);
55 | }
56 | .main__container {
57 | width: 1240px;
58 | margin: auto;
59 | }
60 | .main__container__hero {
61 | margin-top: 98px;
62 | text-align: center;
63 | }
64 | .main__container__hero__name__paragraph {
65 | font-family: "Gentium Basic";
66 | font-style: normal;
67 | font-weight: 700;
68 | font-size: 17px;
69 | line-height: 150%;
70 | /* identical to box height, or 24px */
71 | color: #212121;
72 | }
73 | .main__container__hero__name__paragraph span {
74 | color: #008F76;
75 | }
76 | .main__container__hero__title__paragraph {
77 | font-family: "Poppins";
78 | font-style: normal;
79 | font-weight: 550;
80 | font-size: 50px;
81 | line-height: 200%;
82 | /* identical to box height, or 100px */
83 | color: #212121;
84 | }
85 | .main__container__hero__title__paragraph span {
86 | color: #008F76;
87 | }
88 | .main__container__buttons {
89 | display: flex;
90 | text-align: center;
91 | justify-content: space-around;
92 | margin-top: 58px;
93 | }
94 | .main__container__buttons__left {
95 | cursor: pointer;
96 | background: #008F76;
97 | display: flex;
98 | align-items: center;
99 | width: 209px;
100 | height: 52px;
101 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
102 | border-radius: 20px;
103 | margin-left: 230px;
104 | }
105 | .main__container__buttons__left__paragraph {
106 | margin-left: 35px;
107 | font-family: "Poppins";
108 | font-style: normal;
109 | font-weight: 500;
110 | font-size: 16px;
111 | line-height: 200%;
112 | color: #ffffff;
113 | }
114 | .main__container__buttons__left img {
115 | margin-left: 10px;
116 | }
117 | .main__container__buttons__right {
118 | cursor: pointer;
119 | display: flex;
120 | align-items: center;
121 | width: 209px;
122 | height: 52px;
123 | border: 1px solid #008F76;
124 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
125 | border-radius: 20px;
126 | margin-right: 280px;
127 | }
128 | .main__container__buttons__right__paragraph {
129 | margin-left: 20px;
130 | font-family: "Poppins";
131 | font-style: normal;
132 | font-weight: 500;
133 | font-size: 16px;
134 | line-height: 200%;
135 | color: #008F76;
136 | }
137 | .main__container__buttons__right img {
138 | margin-left: 10px;
139 | }
140 | .main__container__line {
141 | display: flex;
142 | justify-content: center;
143 | align-items: center;
144 | margin-top: 60px;
145 | }
146 | .main__container__books__old {
147 | display: flex;
148 | justify-content: space-between;
149 | }
150 | .main__container__books__old__sedang {
151 | position: relative;
152 | top: -40px;
153 | width: 100px;
154 | height: 139px;
155 | background: #FFFFFF;
156 | text-align: start;
157 | padding: 13px 14px;
158 | }
159 | .main__container__books__old__sedang__title {
160 | font-family: "Poppins";
161 | font-style: normal;
162 | font-weight: 500;
163 | font-size: 5px;
164 | line-height: 200%;
165 | /* identical to box height, or 10px */
166 | color: #212121;
167 | }
168 | .main__container__books__old__sedang__paragraph {
169 | font-family: "Poppins";
170 | font-style: normal;
171 | font-weight: 400;
172 | font-size: 5px;
173 | line-height: 200%;
174 | /* identical to box height, or 10px */
175 | color: #008F76;
176 | }
177 | .main__container__books__old__hati {
178 | position: relative;
179 | top: -40px;
180 | }
181 | .main__container__books__centr {
182 | display: flex;
183 | justify-content: space-around;
184 | }
185 | .main__container__books__centr__bercerita, .main__container__books__centr__rasa {
186 | width: 130px;
187 | height: 200px;
188 | }
189 | .main__container__books__centr__totto__center {
190 | width: 230px;
191 | height: 360px;
192 | }
193 | .main__container__books__centr__totto__right, .main__container__books__centr__totto__left {
194 | position: relative;
195 | top: -270px;
196 | }
197 | .main__container__books__centr__totto__right {
198 | left: 100px;
199 | }
200 | .main__container__books__centr__totto__left {
201 | right: 100px;
202 | }
203 | .main__container__books__end {
204 | display: flex;
205 | justify-content: space-between;
206 | }
207 | .main__container__books__end__perempuan, .main__container__books__end__berjalan {
208 | position: relative;
209 | top: -150px;
210 | }
211 | .main__container__info__title {
212 | margin-top: 100px;
213 | font-family: "Poppins";
214 | font-style: normal;
215 | font-weight: 500;
216 | font-size: 24px;
217 | line-height: 200%;
218 | /* identical to box height, or 48px */
219 | text-align: center;
220 | color: #212121;
221 | }
222 | .main__container__info__title span {
223 | color: #008F76;
224 | }
225 | .main__container__info__cards {
226 | margin-top: 48px;
227 | display: flex;
228 | justify-content: space-between;
229 | }
230 | .main__container__info__cards__card {
231 | width: 590px;
232 | height: 228px;
233 | background: #FFFFFF;
234 | border-radius: 5px;
235 | margin-top: 24px;
236 | padding: 30px;
237 | text-align: start;
238 | }
239 | .main__container__info__cards__card:hover {
240 | box-shadow: 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
241 | }
242 | .main__container__info__cards__card p {
243 | font-family: "Poppins";
244 | font-style: normal;
245 | font-weight: 400;
246 | font-size: 16px;
247 | /* or 32px */
248 | color: #212121;
249 | }
250 | .main__container__info__cards__card p span {
251 | font-weight: 800;
252 | }
253 | .main__container__info__cards__card__person {
254 | display: flex;
255 | align-items: center;
256 | text-align: start;
257 | margin: 30px 60px;
258 | }
259 | .main__container__info__cards__card__person__about {
260 | padding: 15px;
261 | }
262 | .main__container__info__cards__card__person__about h4 {
263 | font-family: "Poppins";
264 | font-style: normal;
265 | font-weight: 500;
266 | font-size: 16px;
267 | /* identical to box height, or 32px */
268 | color: #212121;
269 | }
270 | .main__container__info__cards__card__person__about p {
271 | font-family: "Poppins";
272 | font-style: normal;
273 | font-weight: 400;
274 | font-size: 16px;
275 | /* identical to box height, or 32px */
276 | color: #949494;
277 | }
278 | .main__container__info__statics {
279 | margin-top: 150px;
280 | display: flex;
281 | justify-content: space-around;
282 | }
283 | .main__container__info__statics__oval {
284 | display: flex;
285 | align-items: center;
286 | text-align: start;
287 | }
288 | .main__container__info__statics__oval__word {
289 | margin-left: 24px;
290 | }
291 | .main__container__info__statics__oval__word h3 {
292 | font-family: "Poppins";
293 | font-style: normal;
294 | font-weight: 600;
295 | font-size: 32px;
296 | /* identical to box height, or 64px */
297 | color: #212121;
298 | }
299 | .main__container__info__statics__oval__word p {
300 | font-family: "Poppins";
301 | font-style: normal;
302 | font-weight: 400;
303 | font-size: 16px;
304 | color: #949494;
305 | }
306 | .main__container__info__report {
307 | margin-top: 100px;
308 | }
309 | .main__container__info__report__title {
310 | display: flex;
311 | justify-content: space-between;
312 | text-align: start;
313 | }
314 | .main__container__info__report__title__paragraph h3 {
315 | font-family: "Poppins";
316 | font-style: normal;
317 | font-weight: 500;
318 | font-size: 24px;
319 | /* identical to box height, or 48px */
320 | color: #212121;
321 | }
322 | .main__container__info__report__title__paragraph p {
323 | margin-top: 8px;
324 | font-family: "Poppins";
325 | font-style: normal;
326 | font-weight: 400;
327 | font-size: 16px;
328 | /* identical to box height, or 32px */
329 | color: #949494;
330 | }
331 | .main__container__info__report__title__word p {
332 | font-family: "Poppins";
333 | font-style: normal;
334 | font-weight: 400;
335 | font-size: 16px;
336 | line-height: 200%;
337 | /* identical to box height, or 32px */
338 | text-align: right;
339 | color: #949494;
340 | }
341 | .main__container__info__report__cards {
342 | display: flex;
343 | justify-content: space-between;
344 | text-align: start;
345 | margin-top: 25px;
346 | }
347 | .main__container__info__report__cards__card {
348 | width: 596px;
349 | height: 280px;
350 | border-radius: 5px;
351 | border: 1px solid #D9D9D9;
352 | padding: 30px;
353 | }
354 | .main__container__info__report__cards__card p {
355 | font-family: "Poppins";
356 | font-style: normal;
357 | font-weight: 400;
358 | font-size: 16px;
359 | /* or 32px */
360 | color: #212121;
361 | }
362 | .main__container__info__report__cards__card:hover {
363 | background: #FFFFFF;
364 | border: 1px solid #D9D9D9;
365 | box-shadow: 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
366 | border-radius: 5px;
367 | }
368 | .main__container__info__report__cards__card__person {
369 | display: flex;
370 | align-items: center;
371 | margin: 60px 60px;
372 | }
373 | .main__container__info__report__cards__card__person__about {
374 | padding-left: 15px;
375 | }
376 | .main__container__info__report__cards__card__person__about__arrows {
377 | position: relative;
378 | top: -70px;
379 | left: -210px;
380 | }
381 | .main__container__info__report__cards__card__person__about__arrow {
382 | position: relative;
383 | top: -80px;
384 | left: 390px;
385 | }
386 | .main__container__info__report__cards__card__person__about h4 {
387 | margin-top: 50px;
388 | font-family: "Poppins";
389 | font-style: normal;
390 | font-weight: 500;
391 | font-size: 16px;
392 | /* identical to box height, or 32px */
393 | color: #212121;
394 | }
395 | .main__container__info__report__cards__card__person__about p {
396 | font-family: "Poppins";
397 | font-style: normal;
398 | font-weight: 400;
399 | font-size: 16px;
400 | /* identical to box height, or 32px */
401 | color: #949494;
402 | }
403 | .main__container__info__report__cards__card__dotted img {
404 | margin: 50px 24px;
405 | }
406 | .main__container__probolingo__bgtitle {
407 | display: flex;
408 | justify-content: space-between;
409 | }
410 | .main__container__probolingo__bgtitle__title h4 {
411 | font-family: "Poppins";
412 | font-style: normal;
413 | font-weight: 500;
414 | font-size: 24px;
415 | line-height: 200%;
416 | /* identical to box height, or 48px */
417 | color: #212121;
418 | }
419 | .main__container__probolingo__bgtitle__title p {
420 | font-family: "Poppins";
421 | font-style: normal;
422 | font-weight: 400;
423 | font-size: 16px;
424 | line-height: 200%;
425 | /* identical to box height, or 32px */
426 | color: #949494;
427 | }
428 | .main__container__probolingo__bgtitle__word p {
429 | font-family: "Poppins";
430 | font-style: normal;
431 | font-weight: 400;
432 | font-size: 16px;
433 | line-height: 200%;
434 | /* identical to box height, or 32px */
435 | color: #949494;
436 | }
437 | .main__container__probolingo__bgimage {
438 | display: flex;
439 | justify-content: space-between;
440 | margin-top: 50px;
441 | }
442 | .main__container__probolingo__bgimage__png {
443 | background-image: url(../images/Frame\ 128.png);
444 | background-size: contain;
445 | background-repeat: no-repeat;
446 | height: 340px;
447 | width: 381px;
448 | border-radius: 5px;
449 | }
450 | .main__container__probolingo__bgimage__svg {
451 | background-image: url(../images/Frame\ 129.png);
452 | background-size: contain;
453 | background-repeat: no-repeat;
454 | height: 340px;
455 | width: 381px;
456 | border-radius: 5px;
457 | }
458 | .main__container__probolingo__bgimage__jpg {
459 | background-image: url(../images/Frame\ 130.png);
460 | background-size: contain;
461 | background-repeat: no-repeat;
462 | height: 340px;
463 | width: 381px;
464 | border-radius: 5px;
465 | }
466 | .main__container__kami {
467 | margin-top: 190px;
468 | text-align: center;
469 | }
470 | .main__container__kami h1 {
471 | font-family: "Poppins";
472 | font-style: normal;
473 | font-weight: 500;
474 | font-size: 28px;
475 | line-height: 200%;
476 | /* identical to box height, or 56px */
477 | color: #212121;
478 | }
479 | .main__container__kami p {
480 | margin-top: 8px;
481 | font-family: "Poppins";
482 | font-style: normal;
483 | font-weight: 400;
484 | font-size: 20px;
485 | line-height: 200%;
486 | /* identical to box height, or 40px */
487 | color: #949494;
488 | }
489 | .main__container__kami__website {
490 | margin-left: 450px;
491 | margin-top: 48px;
492 | display: flex;
493 | align-items: center;
494 | padding: 10px 24px;
495 | background: #008F76;
496 | width: 344px;
497 | height: 68px;
498 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
499 | border-radius: 20px;
500 | }
501 | .main__container__kami__website p {
502 | font-family: "Poppins";
503 | font-style: normal;
504 | font-weight: 500;
505 | font-size: 24px;
506 | line-height: 200%;
507 | /* identical to box height, or 48px */
508 | color: #FFFFFF;
509 | }
510 | .main__container__kami__website img {
511 | margin-left: 15px;
512 | }
513 | .main__container__kami__whatsup {
514 | margin-left: 490px;
515 | border: 1px solid #008F76;
516 | padding: 10px 24px;
517 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
518 | border-radius: 20px;
519 | display: flex;
520 | align-items: center;
521 | width: 260px;
522 | }
523 | .main__container__kami__whatsup p {
524 | margin-left: 15px;
525 | }
526 | .main__container__kami__whatsup img {
527 | margin-left: 15px;
528 | }
529 |
530 | .footer {
531 | background: #ffffff;
532 | }
533 | .footer__container {
534 | width: 1240px;
535 | margin: 150px auto;
536 | display: flex;
537 | justify-content: space-between;
538 | }
539 | .footer__container p {
540 | margin-left: 24px;
541 | font-family: "Poppins";
542 | font-style: normal;
543 | font-weight: 500;
544 | font-size: 18px;
545 | line-height: 200%;
546 | /* identical to box height, or 36px */
547 | color: #212121;
548 | }
549 | .footer__container__social-networks__icons {
550 | display: flex;
551 | align-items: center;
552 | }
553 | .footer__container__social-networks__programm img {
554 | margin: 50px 20px;
555 | }
556 | .footer__container__lists {
557 | display: flex;
558 | justify-content: space-between;
559 | }
560 | .footer__container__lists__items {
561 | margin: 0px 100px;
562 | }
563 | .footer__container__lists__items li {
564 | list-style-type: none;
565 | margin-top: 20px;
566 | }
567 | .footer__container__lists__items li a {
568 | text-decoration: none;
569 | color: #000000;
570 | }
571 | .footer__container__lists__items__item {
572 | text-decoration: none;
573 | }
574 | .footer__container__lists__items__item__link__grey {
575 | font-family: "Poppins";
576 | font-style: normal;
577 | font-weight: 300;
578 | font-size: 16px;
579 | line-height: 200%;
580 | /* identical to box height, or 32px */
581 | color: #949494;
582 | }
583 | .footer__emblem {
584 | background: #008F76;
585 | height: 60px;
586 | }
587 | .footer__emblem__word {
588 | width: 300px;
589 | height: 60px;
590 | display: flex;
591 | align-items: center;
592 | margin: 10px auto;
593 | text-align: center;
594 | justify-content: center;
595 | }
596 | .footer__emblem__word p {
597 | margin-left: 16px;
598 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
599 | font-style: normal;
600 | font-weight: 500;
601 | font-size: 18px;
602 | line-height: 200%;
603 | /* identical to box height, or 36px */
604 | color: #FFFFFF;
605 | }/*# sourceMappingURL=style.css.map */
--------------------------------------------------------------------------------
/styles/style.scss:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | .header {
8 | height: 120px;
9 | background: #008F76;
10 |
11 | &__container {
12 |
13 | width: 1240px;
14 | margin: auto;
15 | display: flex;
16 | justify-content: space-between;
17 | align-items: center;
18 |
19 |
20 | &__lists {
21 |
22 | ul {
23 | display: flex;
24 | justify-content: space-between;
25 |
26 | }
27 |
28 |
29 |
30 | &__item {
31 | list-style-type: none;
32 |
33 |
34 | &__link {
35 |
36 | text-decoration: none;
37 | margin: 40px 35px;
38 | display: flex;
39 | align-items: center;
40 |
41 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
42 | font-style: normal;
43 | font-weight: 400;
44 | font-size: 16px;
45 | line-height: 200%;
46 | /* identical to box height, or 32px */
47 |
48 |
49 |
50 | color: #FFFFFF;
51 |
52 |
53 | button {
54 | cursor: pointer;
55 | padding: 10px 24px;
56 | background: none;
57 | border: 1px solid #FFFFFF;
58 | margin-top: -8px;
59 |
60 | border-radius: 10px;
61 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
62 | font-style: normal;
63 | font-weight: 400;
64 | font-size: 14px;
65 | line-height: 200%;
66 | color: #FFFFFF;
67 |
68 | }
69 | }
70 | }
71 | }
72 |
73 | }
74 |
75 |
76 |
77 | }
78 |
79 | .main {
80 | background: linear-gradient(180deg, #FFFFFF 0%, #F6F5FF 100%);
81 |
82 | &__container {
83 | width: 1240px;
84 | margin: auto;
85 |
86 | &__hero {
87 | margin-top: 98px;
88 | text-align: center;
89 |
90 |
91 | &__name {
92 |
93 | &__paragraph {
94 | font-family: 'Gentium Basic';
95 | font-style: normal;
96 | font-weight: 700;
97 | font-size: 17px;
98 | line-height: 150%;
99 | /* identical to box height, or 24px */
100 |
101 |
102 | color: #212121;
103 |
104 | span {
105 | color: #008F76;
106 | }
107 | }
108 |
109 | }
110 |
111 | &__title {
112 | &__paragraph {
113 | font-family: 'Poppins';
114 | font-style: normal;
115 | font-weight: 550;
116 | font-size: 50px;
117 | line-height: 200%;
118 | /* identical to box height, or 100px */
119 |
120 |
121 |
122 | color: #212121;
123 |
124 | span {
125 | color: #008F76;
126 | }
127 | }
128 | }
129 | }
130 |
131 | &__buttons {
132 |
133 | display: flex;
134 | text-align: center;
135 | justify-content: space-around;
136 | margin-top: 58px;
137 |
138 |
139 | &__left {
140 | cursor: pointer;
141 | background: #008F76;
142 | display: flex;
143 | align-items: center;
144 | width: 209px;
145 | height: 52px;
146 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
147 | border-radius: 20px;
148 | margin-left: 230px;
149 |
150 |
151 | &__paragraph {
152 | margin-left: 35px;
153 |
154 | font-family: 'Poppins';
155 | font-style: normal;
156 | font-weight: 500;
157 | font-size: 16px;
158 | line-height: 200%;
159 |
160 | color: #ffffff;
161 |
162 | }
163 |
164 | img {
165 | margin-left: 10px;
166 | }
167 |
168 | }
169 |
170 | &__right {
171 | cursor: pointer;
172 | display: flex;
173 | align-items: center;
174 | width: 209px;
175 | height: 52px;
176 | border: 1px solid #008F76;
177 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
178 | border-radius: 20px;
179 | margin-right: 280px;
180 |
181 |
182 | &__paragraph {
183 | margin-left: 20px;
184 |
185 | font-family: 'Poppins';
186 | font-style: normal;
187 | font-weight: 500;
188 | font-size: 16px;
189 | line-height: 200%;
190 |
191 |
192 | color: #008F76;
193 | }
194 |
195 | img {
196 | margin-left: 10px;
197 | }
198 |
199 |
200 | }
201 | }
202 |
203 | &__line {
204 | display: flex;
205 | justify-content: center;
206 | align-items: center;
207 | margin-top: 60px;
208 | }
209 |
210 |
211 | &__books {
212 | &__old {
213 | display: flex;
214 | justify-content: space-between;
215 |
216 | &__sedang {
217 | position: relative;
218 | top: -40px;
219 | width: 100px;
220 | height: 139px;
221 | background: #FFFFFF;
222 | text-align: start;
223 | padding: 13px 14px;
224 |
225 | &__title {
226 | font-family: 'Poppins';
227 | font-style: normal;
228 | font-weight: 500;
229 | font-size: 5px;
230 | line-height: 200%;
231 | /* identical to box height, or 10px */
232 |
233 |
234 |
235 | color: #212121;
236 |
237 | }
238 |
239 | &__paragraph {
240 | font-family: 'Poppins';
241 | font-style: normal;
242 | font-weight: 400;
243 | font-size: 5px;
244 | line-height: 200%;
245 | /* identical to box height, or 10px */
246 |
247 | color: #008F76;
248 |
249 |
250 | }
251 | }
252 |
253 | &__hati {
254 | position: relative;
255 | top: -40px;
256 | }
257 | }
258 |
259 | &__centr {
260 | display: flex;
261 | justify-content: space-around;
262 |
263 |
264 | &__bercerita,
265 | &__rasa {
266 | width: 130px;
267 | height: 200px;
268 | }
269 |
270 | &__totto {
271 |
272 |
273 | &__center {
274 | width: 230px;
275 | height: 360px;
276 | }
277 |
278 | &__right,
279 | &__left {
280 | position: relative;
281 | top: -270px;
282 |
283 | }
284 |
285 | &__right {
286 | left: 100px;
287 | }
288 |
289 | &__left {
290 | right: 100px;
291 | }
292 |
293 | }
294 |
295 |
296 |
297 |
298 | }
299 |
300 | &__end {
301 | display: flex;
302 | justify-content: space-between;
303 |
304 |
305 | &__perempuan,
306 | &__berjalan {
307 | position: relative;
308 | top: -150px;
309 | }
310 | }
311 |
312 | }
313 |
314 | &__info {
315 |
316 | &__title {
317 | margin-top: 100px;
318 | font-family: 'Poppins';
319 | font-style: normal;
320 | font-weight: 500;
321 | font-size: 24px;
322 | line-height: 200%;
323 | /* identical to box height, or 48px */
324 |
325 | text-align: center;
326 |
327 | color: #212121;
328 |
329 |
330 | span {
331 | color: #008F76;
332 | }
333 | }
334 |
335 | &__cards {
336 | margin-top: 48px;
337 | display: flex;
338 | justify-content: space-between;
339 |
340 | &__card {
341 | width: 590px;
342 | height: 228px;
343 |
344 | background: #FFFFFF;
345 |
346 | border-radius: 5px;
347 |
348 | margin-top: 24px;
349 | padding: 30px;
350 | text-align: start;
351 |
352 | &:hover {
353 | box-shadow: 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
354 | }
355 |
356 | p {
357 | font-family: 'Poppins';
358 | font-style: normal;
359 | font-weight: 400;
360 | font-size: 16px;
361 |
362 | /* or 32px */
363 |
364 |
365 | color: #212121;
366 |
367 | span {
368 | font-weight: 800;
369 | }
370 | }
371 |
372 | &__person {
373 | display: flex;
374 | align-items: center;
375 | text-align: start;
376 | margin: 30px 60px;
377 |
378 | &__about {
379 | padding: 15px;
380 |
381 | h4 {
382 | font-family: 'Poppins';
383 | font-style: normal;
384 | font-weight: 500;
385 | font-size: 16px;
386 |
387 | /* identical to box height, or 32px */
388 |
389 |
390 | color: #212121;
391 | }
392 |
393 | p {
394 | font-family: 'Poppins';
395 | font-style: normal;
396 | font-weight: 400;
397 | font-size: 16px;
398 |
399 | /* identical to box height, or 32px */
400 |
401 |
402 | color: #949494;
403 |
404 | }
405 |
406 | }
407 | }
408 | }
409 | }
410 |
411 | &__statics {
412 | margin-top: 150px;
413 | display: flex;
414 | justify-content: space-around;
415 |
416 | &__oval {
417 | display: flex;
418 | align-items: center;
419 | text-align: start;
420 |
421 |
422 | &__word {
423 | margin-left: 24px;
424 |
425 | h3 {
426 | font-family: 'Poppins';
427 | font-style: normal;
428 | font-weight: 600;
429 | font-size: 32px;
430 |
431 | /* identical to box height, or 64px */
432 |
433 |
434 |
435 | color: #212121;
436 |
437 | }
438 |
439 | p {
440 | font-family: 'Poppins';
441 | font-style: normal;
442 | font-weight: 400;
443 | font-size: 16px;
444 |
445 |
446 |
447 |
448 | color: #949494;
449 | }
450 | }
451 | }
452 | }
453 |
454 | &__report {
455 | margin-top: 100px;
456 |
457 | &__title {
458 | display: flex;
459 | justify-content: space-between;
460 | text-align: start;
461 |
462 | &__paragraph {
463 | h3 {
464 | font-family: 'Poppins';
465 | font-style: normal;
466 | font-weight: 500;
467 | font-size: 24px;
468 |
469 | /* identical to box height, or 48px */
470 |
471 |
472 | color: #212121;
473 | }
474 |
475 | p {
476 | margin-top: 8px;
477 |
478 | font-family: 'Poppins';
479 | font-style: normal;
480 | font-weight: 400;
481 | font-size: 16px;
482 |
483 | /* identical to box height, or 32px */
484 |
485 |
486 | color: #949494;
487 |
488 | }
489 | }
490 |
491 | &__word {
492 | p {
493 | font-family: 'Poppins';
494 | font-style: normal;
495 | font-weight: 400;
496 | font-size: 16px;
497 | line-height: 200%;
498 | /* identical to box height, or 32px */
499 |
500 | text-align: right;
501 |
502 | color: #949494;
503 |
504 | }
505 | }
506 | }
507 |
508 | &__cards {
509 | display: flex;
510 | justify-content: space-between;
511 | text-align: start;
512 | margin-top: 25px;
513 |
514 | &__card {
515 | width: 596px;
516 | height: 280px;
517 | border-radius: 5px;
518 | border: 1px solid #D9D9D9;
519 | padding: 30px;
520 |
521 |
522 |
523 |
524 | p {
525 | font-family: 'Poppins';
526 | font-style: normal;
527 | font-weight: 400;
528 | font-size: 16px;
529 |
530 | /* or 32px */
531 |
532 |
533 | color: #212121;
534 | }
535 |
536 | &:hover {
537 | background: #FFFFFF;
538 | border: 1px solid #D9D9D9;
539 | box-shadow: 0px 22.3363px 17.869px rgba(0, 0, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.035), 0px 6.6501px 5.32008px rgba(0, 0, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(0, 0, 0, 0.0196802);
540 | border-radius: 5px;
541 |
542 | }
543 |
544 |
545 | &__person {
546 | display: flex;
547 | align-items: center;
548 | margin: 60px 60px;
549 |
550 |
551 | &__about {
552 | padding-left: 15px;
553 |
554 |
555 | &__arrows {
556 | position: relative;
557 | top: -70px;
558 | left: -210px;
559 | }
560 |
561 | &__arrow {
562 | position: relative;
563 | top: -80px;
564 | left: 390px;
565 | }
566 |
567 | h4 {
568 |
569 | margin-top: 50px;
570 | font-family: 'Poppins';
571 | font-style: normal;
572 | font-weight: 500;
573 | font-size: 16px;
574 |
575 | /* identical to box height, or 32px */
576 |
577 |
578 | color: #212121;
579 | }
580 |
581 | p {
582 |
583 | font-family: 'Poppins';
584 | font-style: normal;
585 | font-weight: 400;
586 | font-size: 16px;
587 | /* identical to box height, or 32px */
588 |
589 | color: #949494;
590 | }
591 | }
592 | }
593 |
594 | &__dotted {
595 | img {
596 | margin: 50px 24px;
597 | }
598 | }
599 | }
600 | }
601 | }
602 |
603 |
604 |
605 | }
606 |
607 | &__probolingo {
608 | &__bgtitle {
609 | display: flex;
610 | justify-content: space-between;
611 |
612 | &__title {
613 | h4 {
614 | font-family: 'Poppins';
615 | font-style: normal;
616 | font-weight: 500;
617 | font-size: 24px;
618 | line-height: 200%;
619 | /* identical to box height, or 48px */
620 |
621 |
622 | color: #212121;
623 | }
624 |
625 | p {
626 | font-family: 'Poppins';
627 | font-style: normal;
628 | font-weight: 400;
629 | font-size: 16px;
630 | line-height: 200%;
631 | /* identical to box height, or 32px */
632 |
633 |
634 | color: #949494;
635 | }
636 | }
637 |
638 | &__word {
639 | p {
640 | font-family: 'Poppins';
641 | font-style: normal;
642 | font-weight: 400;
643 | font-size: 16px;
644 | line-height: 200%;
645 | /* identical to box height, or 32px */
646 |
647 |
648 |
649 | color: #949494;
650 | }
651 | }
652 | }
653 |
654 | &__bgimage {
655 | display: flex;
656 | justify-content: space-between;
657 | margin-top: 50px;
658 |
659 | &__png {
660 | background-image: url(../images/Frame\ 128.png);
661 | background-size: contain;
662 | background-repeat: no-repeat;
663 | height: 340px;
664 | width: 381px;
665 |
666 | border-radius: 5px;
667 | }
668 |
669 | &__svg {
670 | background-image: url(../images/Frame\ 129.png);
671 | background-size: contain;
672 | background-repeat: no-repeat;
673 | height: 340px;
674 | width: 381px;
675 |
676 | border-radius: 5px;
677 | }
678 |
679 | &__jpg {
680 | background-image: url(../images/Frame\ 130.png);
681 | background-size: contain;
682 | background-repeat: no-repeat;
683 | height: 340px;
684 | width: 381px;
685 |
686 | border-radius: 5px;
687 | }
688 |
689 | }
690 |
691 |
692 |
693 | }
694 |
695 | &__kami {
696 | margin-top: 190px;
697 | text-align: center;
698 |
699 | h1 {
700 | font-family: 'Poppins';
701 | font-style: normal;
702 | font-weight: 500;
703 | font-size: 28px;
704 | line-height: 200%;
705 | /* identical to box height, or 56px */
706 |
707 |
708 | color: #212121;
709 | }
710 |
711 | p {
712 | margin-top: 8px;
713 | font-family: 'Poppins';
714 | font-style: normal;
715 | font-weight: 400;
716 | font-size: 20px;
717 | line-height: 200%;
718 | /* identical to box height, or 40px */
719 |
720 |
721 | color: #949494;
722 |
723 | }
724 |
725 |
726 | &__website {
727 | margin-left: 450px;
728 | margin-top: 48px;
729 | display: flex;
730 | align-items: center;
731 |
732 | padding: 10px 24px;
733 | background: #008F76;
734 |
735 | width: 344px;
736 | height: 68px;
737 |
738 |
739 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
740 | border-radius: 20px;
741 |
742 | p {
743 |
744 | font-family: 'Poppins';
745 | font-style: normal;
746 | font-weight: 500;
747 | font-size: 24px;
748 | line-height: 200%;
749 | /* identical to box height, or 48px */
750 |
751 |
752 |
753 | color: #FFFFFF;
754 |
755 | }
756 |
757 | img {
758 | margin-left: 15px;
759 | }
760 | }
761 |
762 |
763 |
764 | &__whatsup {
765 | margin-left: 490px;
766 | border: 1px solid #008F76;
767 | padding: 10px 24px;
768 | box-shadow: 0px 100px 80px rgba(0, 0, 0, 0.03), 0px 12.5216px 10.0172px rgba(0, 0, 0, 0.015);
769 | border-radius: 20px;
770 | display: flex;
771 | align-items: center;
772 | width: 260px;
773 |
774 | p {
775 | margin-left: 15px;
776 | }
777 |
778 | img {
779 | margin-left: 15px;
780 | }
781 | }
782 | }
783 | }
784 | }
785 |
786 |
787 | .footer {
788 | background: #ffffff;
789 |
790 | &__container {
791 | width: 1240px;
792 | margin: 150px auto;
793 | display: flex;
794 | justify-content: space-between;
795 |
796 | p {
797 | margin-left: 24px;
798 | font-family: 'Poppins';
799 | font-style: normal;
800 | font-weight: 500;
801 | font-size: 18px;
802 | line-height: 200%;
803 | /* identical to box height, or 36px */
804 |
805 |
806 | color: #212121;
807 |
808 | }
809 |
810 | &__social-networks {
811 | &__icons {
812 | display: flex;
813 | align-items: center;
814 | }
815 |
816 | &__programm {
817 | img {
818 | margin: 50px 20px;
819 | }
820 | }
821 | }
822 |
823 | &__lists {
824 | display: flex;
825 | justify-content: space-between;
826 |
827 |
828 | &__items {
829 | margin: 0px 100px;
830 |
831 |
832 | li {
833 | list-style-type: none;
834 | margin-top: 20px;
835 |
836 | a {
837 | text-decoration: none;
838 | color: #000000;
839 |
840 |
841 | }
842 | }
843 |
844 | &__item {
845 |
846 | text-decoration: none;
847 |
848 | &__link {
849 |
850 | &__grey {
851 | font-family: 'Poppins';
852 | font-style: normal;
853 | font-weight: 300;
854 | font-size: 16px;
855 | line-height: 200%;
856 | /* identical to box height, or 32px */
857 |
858 |
859 | color: #949494;
860 | }
861 | }
862 | }
863 | }
864 | }
865 | }
866 |
867 | &__emblem {
868 | background: #008F76;
869 | height: 60px;
870 |
871 |
872 | &__word {
873 | width: 300px;
874 | height: 60px;
875 | display: flex;
876 | align-items: center;
877 | margin: 10px auto;
878 | text-align: center;
879 | justify-content: center;
880 |
881 | p {
882 | margin-left: 16px;
883 | font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
884 | font-style: normal;
885 | font-weight: 500;
886 | font-size: 18px;
887 | line-height: 200%;
888 | /* identical to box height, or 36px */
889 |
890 |
891 | color: #FFFFFF;
892 |
893 | }
894 |
895 |
896 |
897 | }
898 | }
899 | }
--------------------------------------------------------------------------------
221 |
229 |
230 |
222 |
225 | Kegiatan Pojok Baca Probolinggo
223 |Intip kegiatan yang telah kami selenggarakan
224 |
226 |
228 | Selengkapnya
227 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
250 |
251 | Ingin Membantu Meningkatkan Literasi Anak-Anak Sekitar Kita?
239 |Percayakan melalui kegiatan kita
240 |
241 | 
243 |
244 | Donasi dengan Kami
242 |
243 | Atau
245 |
246 | 
248 |
249 | Hubungi Kami
247 |
248 |