From e71f6203faf13574ef45bf80e23a546ac7866d5d Mon Sep 17 00:00:00 2001 From: altaf-creator Date: Tue, 25 Jul 2023 09:45:30 +0700 Subject: Initial commit --- 404.html | 50 +++++ about/author.html | 63 ++++++ about/school.html | 168 +++++++++++++++ assets/images/guru/fitriah.png | Bin 0 -> 175343 bytes assets/images/guru/nasikhun.png | Bin 0 -> 80538 bytes assets/images/guru/wiwit.jpg | Bin 0 -> 30473 bytes assets/images/master.png | Bin 0 -> 394398 bytes assets/images/me.png | Bin 0 -> 104203 bytes assets/images/schoolsupplies.jpg | Bin 0 -> 268603 bytes index.html | 175 +++++++++++++++ lessons/1/1/materi1.html | 129 +++++++++++ lessons/1/index.html | 53 +++++ lessons/index.html | 166 ++++++++++++++ scripts/sidebar.js | 33 +++ scripts/toc.js | 46 ++++ style.css | 456 +++++++++++++++++++++++++++++++++++++++ 16 files changed, 1339 insertions(+) create mode 100644 404.html create mode 100644 about/author.html create mode 100644 about/school.html create mode 100644 assets/images/guru/fitriah.png create mode 100644 assets/images/guru/nasikhun.png create mode 100644 assets/images/guru/wiwit.jpg create mode 100644 assets/images/master.png create mode 100644 assets/images/me.png create mode 100644 assets/images/schoolsupplies.jpg create mode 100644 index.html create mode 100644 lessons/1/1/materi1.html create mode 100644 lessons/1/index.html create mode 100644 lessons/index.html create mode 100644 scripts/sidebar.js create mode 100644 scripts/toc.js create mode 100644 style.css diff --git a/404.html b/404.html new file mode 100644 index 0000000..6803d58 --- /dev/null +++ b/404.html @@ -0,0 +1,50 @@ + + + + + + + + + Al Azhar 9th Grade Lesson Notes + + + + +
+ + +
+
+

404

+

Whoops! It seeems like you're lost, or we couldn't find your page.

+ +
+ Home + Lessons +
+ +
+
+ + + + + \ No newline at end of file diff --git a/about/author.html b/about/author.html new file mode 100644 index 0000000..9dc270b --- /dev/null +++ b/about/author.html @@ -0,0 +1,63 @@ + + + + + + + + + About Author • Al Azhar 9th Grade Lesson Notes + + + + +
+ + +
+
+ +
+

Website Developer and Author

+

Athaalaa Altaf Hafidz

+

Description

+

A student from SMP Islam Al Azhar 25 Tangerang Selatan, currently sitting in 8th grade. He is the website developer and author of this website. He created this website for easier learning for exams, final exams, etc.

+

School Information

+

+ School: SMP Islam Al Azhar 25 Tangerang Selatan
+ Grade: 8B +

+

Contact and Socials

+ +
+
+
+ + + + + \ No newline at end of file diff --git a/about/school.html b/about/school.html new file mode 100644 index 0000000..eb572f1 --- /dev/null +++ b/about/school.html @@ -0,0 +1,168 @@ + + + + + + + + + About School • Al Azhar 9th Grade Lesson Notes + + + + +
+ + + + +
+
+
+ WARNING: THIS WEBSITE IS NOT AFFILIATED BY YPI AL AZHAR OR SMP ISLAM AL AZHAR 25 TANGERANG SELATAN. PLEASE CHECK "About the Author" PAGE FOR CONTACTING THE AUTHOR AND TAKEDOWN REQUESTS. +
+
+
+ https://smpia25.al-azhar.sch.id +

Tentang Kami

+

SMP Islam Al Azhar 25 Tangerang Selatan merupakan sekolah Islam unggulan yang menjadi bagian dari keluarga besar Yayasan Pesantren Islam Al Azhar Jakarta Yang sudah berusia 69 tahun.

+

+ SMP Islam Al Azhar 25 Tangerang Selatan berdiri tanggal 13 Juni 2011. +

+

+ Sekolah yang memadukan pendidikan yang berbasis Iman dan Taqwa (IMTAK) dan Ilmu Pengetahuan Teknologi (IPTEK) sehingga murid-murid bukan hanya cerdas secara intelektual tetapi juga cerdas secara emosional dan spiritual. +

+ Didukung guru dan tenaga kependidikan yang berakhlak islami dan berpengalaman dengan lulusan S1 dan S2 serta tersertifikasi oleh Kementerian Pendidikan dan Kebudayaan RI.

+

Visi dan Misi

+

Visi

+

Mewujudkan calon cendekiawan muslim yang bertaqwa, berprestasi, berdaya saing global, dan peduli lingkungan

+

Misi

+
    +
  1. Mengembangkan terciptanya suasana dan program sekolah yang religius +
  2. +
  3. Mengembangkan terciptanya suasana dan program sekolah yang religius
  4. +
  5. Menumbuhkan penghayatan dan pengamalan terhadap ajaran Islam dan budaya bangsa sehingga menjadi sumber kearifan dalam bertindak
  6. +
  7. Melaksanakan pembelajaran berbasis TIK
  8. +
  9. Melaksanakan bimbingan secara efektif dan menyenangkan sehingga setiap murid dapat berkembang secara optimal sesuai potensi yang dimiliki
  10. +
  11. Mendorong dan menumbuhkan semangat belajar dan berupaya keras dalam mewujudkan prestasi
  12. +
  13. Melaksanakan pengembangan kegiatan ekstrakurikuler
  14. +
  15. Mengembangkan kerjasama dengan lembaga lain dalam meningkatkan mutu pendidikan
  16. +
  17. Menumbuhkan kecintaan dan kepedulian terhadap lingkungan
  18. +
+ +

Guru

+
+
+ +

Drs. Nasikhun, M.A. (Kepala Sekolah)

+
+
+ +

Fitriah, S.Pd. (Wakil Kepala Sekolah)

+
+
+ +

Ir. Hj. Wiwit Parminta

+
+
+ +

H.M. Ihsan, M.M.

+
+
+ +

Dra. Kusnun Indrawati

+
+
+ +

M. Iskandar Zulkarnain, S.Pd.

+
+
+ +

Suwartini, S.Pd.

+
+
+ +

Mohammad Amar, Lc.

+
+
+ +

Unaeni Jahroh, S.Pd.

+
+
+ +

Fuji Syukrani Sakura, S.Pd.

+
+
+ +

Reza Firdaus, S.Pd. +

+
+
+ +

Andini Nurlaily Hikmah, S.Pd.

+
+
+ +

Achmad Al Farisi, S.Pd.I.

+
+
+ +

Supatri, S.Pd.

+
+
+ +

Sofia Nurbaiti, S.Pd.

+
+
+ +

Hidayatullah, S.Pd.

+
+
+ +

Akrom, S.Ag.

+
+
+ +

Miftah Izharul Haq, S.Pd.

+
+
+ +

Nurbaeti, SE. M. Ak. +

+
+
+ +

Maman Sulaiman, S.Pd.

+
+
+ +

Ayu Rezky Yulita, M.Pd.

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/assets/images/guru/fitriah.png b/assets/images/guru/fitriah.png new file mode 100644 index 0000000..f1dd359 Binary files /dev/null and b/assets/images/guru/fitriah.png differ diff --git a/assets/images/guru/nasikhun.png b/assets/images/guru/nasikhun.png new file mode 100644 index 0000000..4558eff Binary files /dev/null and b/assets/images/guru/nasikhun.png differ diff --git a/assets/images/guru/wiwit.jpg b/assets/images/guru/wiwit.jpg new file mode 100644 index 0000000..17e8e52 Binary files /dev/null and b/assets/images/guru/wiwit.jpg differ diff --git a/assets/images/master.png b/assets/images/master.png new file mode 100644 index 0000000..b233b61 Binary files /dev/null and b/assets/images/master.png differ diff --git a/assets/images/me.png b/assets/images/me.png new file mode 100644 index 0000000..71201fd Binary files /dev/null and b/assets/images/me.png differ diff --git a/assets/images/schoolsupplies.jpg b/assets/images/schoolsupplies.jpg new file mode 100644 index 0000000..2882350 Binary files /dev/null and b/assets/images/schoolsupplies.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..2ff63aa --- /dev/null +++ b/index.html @@ -0,0 +1,175 @@ + + + + + + + + + + Al Azhar 9th Grade Lesson Notes + + + + + +
+ + + + +
+
+

A Warm Welcome

+

Welcome to the "(Unofficial) Al Azhar Lesson Summary for 9th Grade" website! This website is used for + notes taken by Altaf about the subjects. Choose a subuject below to start reading.

+

Lessons

+
+
+ + + +

Matematika

+
+

Pak Hidayatullah, S.Pd.

+
+
+ + + +

Fisika

+
+

Bu Ayu Rezky Yulita, M.Pd.

+
+
+ + + +

Biologi

+
+

Bu Ir. Hj. Wiwit Parminta

+
+
+ + + +

IPS

+
+

Bu Uaeni Jahroh S.Pd.

+
+
+ + + +

Agama

+
+

Pak Akrom Hasani, S.Ag.

+
+
+ + + +

Al-Qur'an

+
+

Pak Muhammad Fathan S.Ag

+
+
+ + + +

PPKn

+
+

Bu Andini Nurlaily Hikmah, S.Pd.

+
+
+ + + +

Informatika

+
+

Bu Nurbaeti, SE., M.Ak

+
+
+ + + +

English

+
+

Bu Sofia Nurbaiti, S.Pd.

+
+
+ + + +

Bahasa Indonesia

+
+

Pak Maman Sulaeman, S.Pd.

+
+
+ + + +

Seni Musik

+
+

Bu Dra. Kusnun Indrawati

+
+
+ + + +

Seni Rupa

+
+

Pak Miftah Izharul Haq, S.Pd

+
+
+ + + +

Penjasorkes

+
+

Pak Supatri, S.Pd

+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/lessons/1/1/materi1.html b/lessons/1/1/materi1.html new file mode 100644 index 0000000..641daa6 --- /dev/null +++ b/lessons/1/1/materi1.html @@ -0,0 +1,129 @@ + + + + + + + + + Al Azhar 9th Grade Lesson Notes + + + + + +
+ + + + +
+
+

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 2

+

Sub Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Sub Heading 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 2

+

Sub Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Sub Heading 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 2

+

Sub Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Sub Heading 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 2

+

Sub Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Sub Heading 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 2

+

Sub Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Sub Heading 2

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+

Heading 1

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend ligula ut mi hendrerit scelerisque. Vivamus ut orci mi. Quisque in mollis lectus, in varius ante. Nunc id aliquet nisl. Donec velit lorem, dignissim vitae aliquet quis, dapibus tincidunt mauris. Nullam quis volutpat est. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sed vehicula mauris. Maecenas vitae elementum lacus. +

+
+
+ + + + + \ No newline at end of file diff --git a/lessons/1/index.html b/lessons/1/index.html new file mode 100644 index 0000000..a7265d1 --- /dev/null +++ b/lessons/1/index.html @@ -0,0 +1,53 @@ + + + + + + + + + Al Azhar 9th Grade Lesson Notes + + + + + +
+ + + + +
+
+

Bab 1

+

Materi 1

+
+

Bab 2

+

Materi 1

+
+
+ + + + + \ No newline at end of file diff --git a/lessons/index.html b/lessons/index.html new file mode 100644 index 0000000..884758f --- /dev/null +++ b/lessons/index.html @@ -0,0 +1,166 @@ + + + + + + + + + Al Azhar 9th Grade Lesson Notes + + + + +
+ + + + +
+
+
+
+ + + +

Matematika

+
+

Pak Hidayatullah, S.Pd.

+
+
+ + + +

Fisika

+
+

Bu Ayu Rezky Yulita, M.Pd.

+
+
+ + + +

Biologi

+
+

Bu Ir. Hj. Wiwit Parminta

+
+
+ + + +

IPS

+
+

Bu Uaeni Jahroh S.Pd.

+
+
+ + + +

Agama

+
+

Pak Akrom Hasani, S.Ag.

+
+
+ + + +

Al-Qur'an

+
+

Pak Muhammad Fathan S.Ag

+
+
+ + + +

PPKn

+
+

Bu Andini Nurlaily Hikmah, S.Pd.

+
+
+ + + +

Informatika

+
+

Bu Nurbaeti, SE., M.Ak

+
+
+ + + +

English

+
+

Bu Sofia Nurbaiti, S.Pd.

+
+
+ + + +

Bahasa Indonesia

+
+

Pak Maman Sulaeman, S.Pd.

+
+
+ + + +

Seni Musik

+
+

Bu Dra. Kusnun Indrawati

+
+
+ + + +

Seni Rupa

+
+

Pak Miftah Izharul Haq, S.Pd

+
+
+ + + +

Penjasorkes

+
+

Pak Supatri, S.Pd

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/scripts/sidebar.js b/scripts/sidebar.js new file mode 100644 index 0000000..3aaaef8 --- /dev/null +++ b/scripts/sidebar.js @@ -0,0 +1,33 @@ +function toggleNav() { + const sidebar = document.getElementById("sidebar"); + const sStyle = window.getComputedStyle(sidebar); + + if (sStyle.visibility == "hidden") { + if (document.body.clientWidth >= 700) { + document.getElementById("main").style.marginLeft = "360px"; + + try { + document.getElementById("banner").style.marginLeft = "300px"; + document.getElementById("backbtn").style.marginLeft = "360px"; + } + catch { + + } + } + + document.getElementById("sidebar").style.visibility = "visible"; + document.getElementById("sidebar").style.opacity = "1"; + } else { + document.getElementById("main").style.marginLeft = "0"; + document.getElementById("sidebar").style.visibility = "hidden"; + document.getElementById("sidebar").style.opacity = "0"; + + try { + document.getElementById("banner").style.marginLeft = "0"; + document.getElementById("backbtn").style.marginLeft = "70px"; + } + catch { + + } + } +} \ No newline at end of file diff --git a/scripts/toc.js b/scripts/toc.js new file mode 100644 index 0000000..bfdfe42 --- /dev/null +++ b/scripts/toc.js @@ -0,0 +1,46 @@ +// i am a C# developer +// trying javascript + +window.onload = function() { + const tocDiv = document.getElementById("toc"); + const content = document.getElementById("main"); + const headers = content.querySelectorAll('h1, h2, h3, h4, h5, h6'); + + console.log(headers) + + const ul = document.createElement("ul"); + tocDiv.appendChild(ul) + + for (var i = 0; i < headers.length; i++) { + if (headers[i].hasAttribute('id')) { + const li = document.createElement("li"); + var level = headers[i].tagName[1]; + console.log(level + headers[i].tagName + headers[i].id) + if (level == 1) { + const a = document.createElement("a"); + ul.appendChild(li); + li.appendChild(a); + a.href = "#" + headers[i].id + a.textContent = headers[i].textContent + } + else + { + var nowUl = document.createElement("ul"); + ul.appendChild(nowUl); + + for (var j = 0; j < level - 2; j++) { + const currentUl = document.createElement("ul"); + nowUl.appendChild(currentUl); + nowUl = currentUl; + } + + const currentLi = document.createElement("li"); + const a = document.createElement("a"); + nowUl.appendChild(currentLi); + currentLi.appendChild(a); + a.href = "#" + headers[i].id + a.textContent = headers[i].textContent + } + } + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0418df6 --- /dev/null +++ b/style.css @@ -0,0 +1,456 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&display=swap'); + +:root { + --white-bg: rgba(255, 255, 255); + --white-accent-bg: rgb(250, 250, 250); + --black-color-1: rgb(0, 0, 0); + --black-color-2: rgb(116, 116, 116); + --black-color-3: rgb(37, 37, 37); + --black-bg: rgb(0, 0, 0); + --black-accent-bg: rgb(20, 20, 20); + --white-color-1: rgb(255, 255, 255); + --white-color-2: rgb(209, 209, 209); + --white-color-3: rgb(148, 148, 148); +} + +html, +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-family: 'Roboto Slab', serif; + font-size: 1.1rem; + background-color: var(--white-bg); + color: var(--black-color-1); + overflow: auto; +} + +/* width */ +::-webkit-scrollbar { + width: 10px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #00000000; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + border-radius: 5px; + background: #b1b1b18f; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #b1b1b1b6; +} + +::-webkit-scrollbar-thumb:active { + background: #b1b1b152; +} + +h1 { + font-size: 1.7em; +} + +h2 { + font-size: 1.5em; +} + +a { + color: var(--black-color-1); + transition: all .2s; +} + +a:hover { + color: var(--black-color-2); +} + +a:focus { + color: var(--black-color-3); +} + +.link { + text-decoration: none; + background-color: rgba(0, 0, 0, 0.05); + display: inline-block; +} + +.link:hover { + background-color: rgba(0, 0, 0, 0.1); + text-decoration: underline; +} + +.link:focus { + background-color: rgba(0, 0, 0, 0.15); + text-decoration: underline; +} + +img { + border-radius: 10px; +} + +#main { + margin-left: 360px; + padding: 20px; + padding-left: clamp(20px, 200px, 200px); + padding-right: clamp(20px, 200px, 200px); + transition: all .5s; + z-index: 2; +} + +#sidebar { + box-sizing: border-box; + height: 100%; + width: 340px; + position: fixed; + z-index: 9999; + box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.116); + padding: 20px; + background-color: var(--white-accent-bg); + transition: all .3s; + overflow: auto; + visibility: visible; + opacity: 1; +} + +#toc { + margin-bottom: 10px; +} + +.sidebar-link { + display: block; + margin-bottom: 10px; + background-color: #00000000 !important; +} + +.sidebar-link:hover { + background-color: #00000000 !important; +} + +.sidebar-link:focus { + background-color: #00000000 !important; +} + +.sidebar-logo { + width: 150px; + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 30px; + margin-top: 30px; +} + +.sidebar-sublink { + text-indent: 30px; +} + +.toc-li { + margin-left: -20px; +} + +.divider { + margin-top: 25px; + margin-bottom: 25px; + border: 1px solid var(--black-bg); +} + +.align-center { + text-align: center; +} + +.menu-btn { + margin: 20px; + outline: solid 0px var(--black-color-1); +} + +.back-btn { + margin-top: 20px; + margin-left: 360px; +} + +.fixed-top-btn { + position: fixed; + text-decoration: none; + color: var(--black-color-1); + transition: all .2s; + z-index: 10000; + background-color: #00000000; + padding: 10px; + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + border-radius: 10px; + width: 18px; + height: 22px; + display: flex; + place-content: center; +} + +.fa-bars { + display: block !important; +} + +.menu-btn:hover { + color: var(--black-color-2); +} + +.menu-btn:focus { + color: var(--black-color-3); + outline: solid 2px var(--black-color-2); +} + +.menu-btn:active { + outline: solid 1px var(--black-color-3); +} + +.circle { + border-radius: 50%; +} + +.flex { + display: flex; + align-items: center; +} + +.flex-element { + margin: 30px; +} + +.banner-container { + position: relative; + overflow: hidden; + height: 500px; + margin-left: 300px; + transition: all .5s; +} + +.banner-bg { + position: absolute; + height: 100%; + width: 100%; + background-size: cover !important; + background-repeat: no-repeat !important; + border-radius: 0; + background-attachment: fixed; + box-shadow: inset 0 -20px 10px -10px #00000075; + object-fit: cover; +} + +.banner-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: var(--white-color-1); +} + +.card-container { + display: flex; + flex-wrap: wrap; +} + +.card { + position: relative; + flex: 1 0 290px; + background-color: var(--white-accent-bg); + border-radius: 10px; + box-sizing: border-box; + padding: 20px; + margin: 20px; + text-align: center; + box-shadow: 0px 0px 17px #00000033; + bottom: 0; + transition: all .3s; +} + +.card:hover { + bottom: 4px; +} + +.card-person { + width: 250px; + height: 250px; + object-fit: cover; + margin-left: auto; + margin-right: auto; +} + +.card-img { + width: calc(100% + 40px); + height: 300px; + object-fit: cover; + margin: -20px; + border-radius: 0; + border-top-right-radius: 10px; + border-top-left-radius: 10px; +} + +.link-card { + width: 100%; + height: 100%; + margin: -20px; + position: absolute; + text-decoration: none; + border-radius: 10px; +} + +.link-card:focus { + background-color: rgba(0, 0, 0, 0.1); +} + +.card > a { + text-decoration: none; +} + +.highlight { + background-color: rgba(255, 255, 0, 0.3); + display: block; + border-radius: 10px; + padding: 10px; + display: flex; + flex-direction: row; + place-content: center; + place-items: center; +} + +.highlight > * { + margin: 15px; +} + +#img-main { + background-image: url(https://img-cdn.inc.com/image/upload/w_1920,h_1080,c_fill/images/panoramic/GettyImages-577674005_492115_zfpgiw.jpg); + background-position: center; + background-repeat: no-repeat; + filter: brightness(80%); +} + +#img-school { + background-image: url(https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/09/slide-SMPIA_25-1.jpg); + background-position: center; + background-repeat: no-repeat; + filter: brightness(80%); +} + +#img-supplies { + background-image: url(/assets/images/schoolsupplies.jpg); + background-position: center; + background-repeat: no-repeat; +} + +li>a { + text-decoration: none; +} + +li>a:hover { + text-decoration: underline; +} + +@media (prefers-color-scheme: dark) { + body { + background-color: var(--black-bg); + color: var(--white-color-1); + } + + #sidebar { + background-color: var(--black-accent-bg); + } + + .sidebar-link link { + color: var(--white-color-1); + } + + .sidebar-link link:hover { + color: var(--white-color-2); + } + + .sidebar-link link:focus { + color: var(--white-color-3); + } + + .fixed-top-btn { + color: var(--white-color-1); + } + + .fixed-top-btn:hover { + color: var(--white-color-2); + } + + .fixed-top-btn:focus { + color: var(--white-color-3); + } + + .divider { + border: 1px solid var(--white-bg); + } + + a { + color: var(--white-color-1); + } + + a:hover { + color: var(--white-color-2); + } + + a:focus { + color: var(--white-color-3); + } + + .card { + background-color: var(--black-accent-bg); + } + + .menu-btn { + outline: solid 0px var(--white-color-1); + } + + .menu-btn:focus { + outline: solid 3px var(--white-color-3); + } + + .menu-btn:active { + outline: solid 2px var(--white-color-2); + } + + .link { + background-color: rgba(255, 255, 255, 0.1); + } + + .link:hover { + background-color: rgba(255, 255, 255, 0.2); + } + + .link:focus { + background-color: rgba(255, 255, 255, 0.15); + } +} + +@media(max-width: 700px) { + .flex { + flex-direction: column; + } + + #main { + padding: 20px; + margin-left: 0; + } + + #banner { + margin-left: 0; + } + + #sidebar { + visibility: hidden; + opacity: 0; + } + + .back-btn { + margin-left: 70px; + } + + .highlight { + flex-direction: column; + } +} \ No newline at end of file -- cgit v1.2.3