diff options
| author | altaf-creator <athaalaa@gmail.com> | 2023-07-25 09:45:30 +0700 |
|---|---|---|
| committer | altaf-creator <athaalaa@gmail.com> | 2023-07-25 09:45:30 +0700 |
| commit | e71f6203faf13574ef45bf80e23a546ac7866d5d (patch) | |
| tree | 2ef9f32f6c7feeb50096e0141eb1002a4e3e807a | |
Initial commit
| -rw-r--r-- | 404.html | 50 | ||||
| -rw-r--r-- | about/author.html | 63 | ||||
| -rw-r--r-- | about/school.html | 168 | ||||
| -rw-r--r-- | assets/images/guru/fitriah.png | bin | 0 -> 175343 bytes | |||
| -rw-r--r-- | assets/images/guru/nasikhun.png | bin | 0 -> 80538 bytes | |||
| -rw-r--r-- | assets/images/guru/wiwit.jpg | bin | 0 -> 30473 bytes | |||
| -rw-r--r-- | assets/images/master.png | bin | 0 -> 394398 bytes | |||
| -rw-r--r-- | assets/images/me.png | bin | 0 -> 104203 bytes | |||
| -rw-r--r-- | assets/images/schoolsupplies.jpg | bin | 0 -> 268603 bytes | |||
| -rw-r--r-- | index.html | 175 | ||||
| -rw-r--r-- | lessons/1/1/materi1.html | 129 | ||||
| -rw-r--r-- | lessons/1/index.html | 53 | ||||
| -rw-r--r-- | lessons/index.html | 166 | ||||
| -rw-r--r-- | scripts/sidebar.js | 33 | ||||
| -rw-r--r-- | scripts/toc.js | 46 | ||||
| -rw-r--r-- | style.css | 456 |
16 files changed, 1339 insertions, 0 deletions
diff --git a/404.html b/404.html new file mode 100644 index 0000000..6803d58 --- /dev/null +++ b/404.html @@ -0,0 +1,50 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a> + <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a> + <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div id="main"> + <section> + <h1 style="text-align: center; font-size: 5rem; margin-bottom: 0;">404</h1> + <h2 style="text-align: center;">Whoops! It seeems like you're lost, or we couldn't find your page.</h2> + + <div style="text-align: center;"> + <a href="/" style="margin: 20px" class="link">Home</a> + <a href="/lessons/" style="margin: 20px" class="link">Lessons</a> + </div> + <img src="/assets/images/master.png" alt="" class="sidebar-logo" style="margin-top: 100px"> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> +</html>
\ 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 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>About Author • Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a> + <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a> + <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div id="main"> + <section class="flex"> + <img src="/assets/images/me.png" alt="" class="circle flex-element"> + <div class="flex-element"> + <h1 id="author">Website Developer and Author</h1> + <p>Athaalaa Altaf Hafidz</p> + <h1 id="description">Description</h1> + <p>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.</p> + <h1 id="school">School Information</h1> + <p> + <b>School:</b> SMP Islam Al Azhar 25 Tangerang Selatan<br> + <b>Grade:</b> 8B + </p> + <h1 id="contact">Contact and Socials</h1> + <ul> + <li><i class="fa-solid fa-globe"></i> <a href="https://altaf-creator.github.io" class="link"></i>altaf-creator.github.io</a></li> + <li><i class="fa-brands fa-instagram"></i> <a href="https://instagram.com/athaalaa.altaf9" class="link"></i>@athaalaa.altaf9</a></li> + <li><i class="fa-brands fa-youtube"></i> <a href="https://youtube.com/@altafcreator" class="link"></i>altaf-creator</a></li> + <li><i class="fa-brands fa-github"></i> <a href="https://github.com/@altafcreator" class="link"></i>altaf-creator</a></li> + <li><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaaaltafhafidz@gmail.com" class="link"></i>For School: athaalaaaltafhafidz@gmail.com</a></li> + <li><i class="fa-solid fa-envelope"></i> <a href="mailto:athaalaa@gmail.com" class="link"></i>General: athaalaaa@gmail.com</a></li> + </ul> + </div> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> +</html>
\ 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 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>About School • Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a> + <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a> + <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-school"></div> + <h1 class="banner-text" id="banner-txt">About the School</h1> + </div> + + <div id="main"> + <section> + <div class="highlight"> + <i class="fa-solid fa-triangle-exclamation" style="font-size: 2rem;"></i> <span>WARNING: THIS WEBSITE IS <strong>NOT AFFILIATED</strong> BY YPI AL AZHAR OR SMP ISLAM AL AZHAR 25 TANGERANG SELATAN. PLEASE CHECK <a href="/about/author.html" class="link">"About the Author"</a> PAGE FOR CONTACTING THE AUTHOR AND TAKEDOWN REQUESTS.</span> + </div> + <br> + <br> + <i class="fa-solid fa-globe"></i> <a href="https://smpia25.al-azhar.sch.id" class="link"></i>https://smpia25.al-azhar.sch.id</a> + <h1 id="tentang">Tentang Kami</h1> + <p>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.</p> + <p> + SMP Islam Al Azhar 25 Tangerang Selatan berdiri tanggal 13 Juni 2011. + </p> + <p> + 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. + </p> + Didukung guru dan tenaga kependidikan yang berakhlak islami dan berpengalaman dengan lulusan S1 dan S2 serta tersertifikasi oleh Kementerian Pendidikan dan Kebudayaan RI.</p> + <h1 id="visimisi">Visi dan Misi</h1> + <h2 id="visi">Visi</h2> + <p>Mewujudkan calon cendekiawan muslim yang bertaqwa, berprestasi, berdaya saing global, dan peduli lingkungan</p> + <h2 id="misi">Misi</h2> + <ol> + <li>Mengembangkan terciptanya suasana dan program sekolah yang religius + </li> + <li>Mengembangkan terciptanya suasana dan program sekolah yang religius</li> + <li>Menumbuhkan penghayatan dan pengamalan terhadap ajaran Islam dan budaya bangsa sehingga menjadi sumber kearifan dalam bertindak</li> + <li>Melaksanakan pembelajaran berbasis TIK</li> + <li>Melaksanakan bimbingan secara efektif dan menyenangkan sehingga setiap murid dapat berkembang secara optimal sesuai potensi yang dimiliki</li> + <li>Mendorong dan menumbuhkan semangat belajar dan berupaya keras dalam mewujudkan prestasi</li> + <li>Melaksanakan pengembangan kegiatan ekstrakurikuler</li> + <li>Mengembangkan kerjasama dengan lembaga lain dalam meningkatkan mutu pendidikan</li> + <li>Menumbuhkan kecintaan dan kepedulian terhadap lingkungan</li> + </ol> + + <h1 id="guru">Guru</h1> + <div class="card-container"> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/B6-300x343.png" alt="" class="card-person"> + <h3>Drs. Nasikhun, M.A. (Kepala Sekolah)</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/Bu-Fitri-Website-300x343.png" alt="" class="card-person"> + <h3>Fitriah, S.Pd. (Wakil Kepala Sekolah)</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/Ir.Hj_.-Wiwit-Parminta-IPA-1-300x343.jpg" alt="" class="card-person"> + <h3>Ir. Hj. Wiwit Parminta</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/Pak-Ihsan-Website-300x343.png" alt="" class="card-person"> + <h3>H.M. Ihsan, M.M.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Bu-Iin-Website-300x343.png" alt="" class="card-person"> + <h3>Dra. Kusnun Indrawati</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Iskandar-Website-300x343.png" alt="" class="card-person"> + <h3>M. Iskandar Zulkarnain, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Bu-Atin-300x343.png" alt="" class="card-person"> + <h3>Suwartini, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Amar-Website-300x343.png" alt="" class="card-person"> + <h3>Mohammad Amar, Lc.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Bu-Eni-Website-300x343.png" alt="" class="card-person"> + <h3>Unaeni Jahroh, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/WhatsApp-Image-2022-10-03-at-8.42.51-AM-1-300x343.png" alt="" class="card-person"> + <h3>Fuji Syukrani Sakura, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Reza-Website-300x343.png" alt="" class="card-person"> + <h3>Reza Firdaus, S.Pd. + </h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Bu-Andin-Website-300x343.png" alt="" class="card-person"> + <h3>Andini Nurlaily Hikmah, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Faris-Wesite-300x343.png" alt="" class="card-person"> + <h3>Achmad Al Farisi, S.Pd.I.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Supatri-Website-300x343.png" alt="" class="card-person"> + <h3>Supatri, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Bu-Sofi-Website-300x343.png" alt="" class="card-person"> + <h3>Sofia Nurbaiti, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Hidayat-Website-300x343.png" alt="" class="card-person"> + <h3>Hidayatullah, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2022/10/Pak-Akrom-Website-300x343.png" alt="" class="card-person"> + <h3>Akrom, S.Ag.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/Pak-Miftah-Website-300x343.png" alt="" class="card-person"> + <h3>Miftah Izharul Haq, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/Bu-Beti-Website-300x343.png" alt="" class="card-person"> + <h3>Nurbaeti, SE. M. Ak. + </h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/None-300x343.png" alt="" class="card-person"> + <h3>Maman Sulaiman, S.Pd.</h3> + </div> + <div class="card"> + <img src="https://smpia25.al-azhar.sch.id/wp-content/uploads/2020/10/Bu-Ayu-1-300x343.png" alt="" class="card-person"> + <h3>Ayu Rezky Yulita, M.Pd.</h3> + </div> + </div> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> +</html>
\ No newline at end of file diff --git a/assets/images/guru/fitriah.png b/assets/images/guru/fitriah.png Binary files differnew file mode 100644 index 0000000..f1dd359 --- /dev/null +++ b/assets/images/guru/fitriah.png diff --git a/assets/images/guru/nasikhun.png b/assets/images/guru/nasikhun.png Binary files differnew file mode 100644 index 0000000..4558eff --- /dev/null +++ b/assets/images/guru/nasikhun.png diff --git a/assets/images/guru/wiwit.jpg b/assets/images/guru/wiwit.jpg Binary files differnew file mode 100644 index 0000000..17e8e52 --- /dev/null +++ b/assets/images/guru/wiwit.jpg diff --git a/assets/images/master.png b/assets/images/master.png Binary files differnew file mode 100644 index 0000000..b233b61 --- /dev/null +++ b/assets/images/master.png diff --git a/assets/images/me.png b/assets/images/me.png Binary files differnew file mode 100644 index 0000000..71201fd --- /dev/null +++ b/assets/images/me.png diff --git a/assets/images/schoolsupplies.jpg b/assets/images/schoolsupplies.jpg Binary files differnew file mode 100644 index 0000000..2882350 --- /dev/null +++ b/assets/images/schoolsupplies.jpg diff --git a/index.html b/index.html new file mode 100644 index 0000000..2ff63aa --- /dev/null +++ b/index.html @@ -0,0 +1,175 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> + +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i + class="fa-solid fa-bars"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a> + <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a> + <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-main"></div> + <h1 class="banner-text" id="banner-txt">Al Azhar 9th Grade Lesson Notes</h1> + </div> + + <div id="main"> + <section> + <h1 id="welcome">A Warm Welcome</h1> + <p>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.</p> + <h1 style="display: inline;" id="lessons">Lessons</h1> <a href="/lessons/"><span + style="margin-left: 10px;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span></a> + <div class="card-container"> + <div class="card"> + <a href="/lessons/matematika/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/1/"> + <h2>Matematika</h2> + </a> + <p>Pak Hidayatullah, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/fisika/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/2/"> + <h2>Fisika</h2> + </a> + <p>Bu Ayu Rezky Yulita, M.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/biologi/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Biologi</h2> + </a> + <p>Bu Ir. Hj. Wiwit Parminta</p> + </div> + <div class="card"> + <a href="/lessons/ips/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>IPS</h2> + </a> + <p>Bu Uaeni Jahroh S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/agama/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Agama</h2> + </a> + <p>Pak Akrom Hasani, S.Ag.</p> + </div> + <div class="card"> + <a href="/lessons/quran/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Al-Qur'an</h2> + </a> + <p>Pak Muhammad Fathan S.Ag</p> + </div> + <div class="card"> + <a href="/lessons/ppkn/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>PPKn</h2> + </a> + <p>Bu Andini Nurlaily Hikmah, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/informatika/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Informatika</h2> + </a> + <p>Bu Nurbaeti, SE., M.Ak</p> + </div> + <div class="card"> + <a href="/lessons/english/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>English</h2> + </a> + <p>Bu Sofia Nurbaiti, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/indonesia/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Bahasa Indonesia</h2> + </a> + <p>Pak Maman Sulaeman, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/musik/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Seni Musik</h2> + </a> + <p>Bu Dra. Kusnun Indrawati</p> + </div> + <div class="card"> + <a href="/lessons/lukis/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Seni Rupa</h2> + </a> + <p>Pak Miftah Izharul Haq, S.Pd</p> + </div> + <div class="card"> + <a href="/lessons/pjok/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Penjasorkes</h2> + </a> + <p>Pak Supatri, S.Pd</p> + </div> + </div> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> + +</html>
\ 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 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <a href="../" class="fixed-top-btn back-btn" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a> + <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a> + <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-supplies"></div> + <h1 class="banner-text" id="banner-txt">Lesson 1: Bab 1 - Materi 1</h1> + </div> + + <div id="main"> + <section> + <h1 id="heading1">Heading 1</h1> + <p> + 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. + </p> + <h1 id="heading2">Heading 2</h1> + <h2 id="subheading1">Sub Heading 1</h2> + <p> + 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. + </p> + <h2 id="subheading2">Sub Heading 2</h2> + <p> + 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. + </p> + <h1 id="heading1">Heading 1</h1> + <p> + 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. + </p><h1 id="heading1">Heading 1</h1> + <p> + 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. + </p> + <h1 id="heading2">Heading 2</h1> + <h2 id="subheading1">Sub Heading 1</h2> + <p> + 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. + </p> + <h2 id="subheading2">Sub Heading 2</h2> + <p> + 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. + </p> + <h1 id="heading1">Heading 1</h1> + <p> + 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. + </p><h1 id="heading1">Heading 1</h1> + <p> + 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. + </p> + <h1 id="heading2">Heading 2</h1> + <h2 id="subheading1">Sub Heading 1</h2> + <p> + 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. + </p> + <h2 id="subheading2">Sub Heading 2</h2> + <p> + 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. + </p> + <h1 id="heading1">Heading 1</h1> + <p> + 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. + </p><h1 id="heading1">Heading 1</h1> + <p> + 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. + </p> + <h1 id="heading2">Heading 2</h1> + <h2 id="subheading1">Sub Heading 1</h2> + <p> + 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. + </p> + <h2 id="subheading2">Sub Heading 2</h2> + <p> + 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. + </p> + <h1 id="heading1">Heading 1</h1> + <p> + 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. + </p><h1 id="heading1">Heading 1</h1> + <p> + 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. + </p> + <h1 id="heading2">Heading 2</h1> + <h2 id="subheading1">Sub Heading 1</h2> + <p> + 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. + </p> + <h2 id="subheading2">Sub Heading 2</h2> + <p> + 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. + </p> + <h1 id="heading1">Heading 1</h1> + <p> + 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. + </p> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> +</html>
\ 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 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <a href="../" class="fixed-top-btn back-btn" id="backbtn"><i class="fa-solid fa-chevron-left"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/1/" class="sidebar-link link sidebar-sublink">Lesson 1</a> + <a href="/lessons/2/" class="sidebar-link link sidebar-sublink">Lesson 2</a> + <a href="/lessons/3/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-supplies"></div> + <h1 class="banner-text" id="banner-txt">Lesson 1</h1> + </div> + + <div id="main"> + <section> + <h1 id="bab1">Bab 1</h1> + <p><a href="1/materi1.html" class="link">Materi 1</a></p> + <hr class="divider"> + <h1 id="bab1">Bab 2</h1> + <p><a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="link">Materi 1</a></p> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> +</html>
\ 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 @@ +<!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="/style.css"> + <link rel="icon" href="/assets/images/master.png"> + <title>Al Azhar 9th Grade Lesson Notes</title> + <script src="https://kit.fontawesome.com/d279a1f519.js" crossorigin="anonymous"></script> +</head> +<body> + <a class="fixed-top-btn menu-btn" onclick="toggleNav()" href="javascript:void(0)"><i class="fa-solid fa-bars"></i></a> + <div id="console"></div> + <div id="sidebar"> + <a href="/index.html"> + <img src="/assets/images/master.png" alt="" class="sidebar-logo"> + </a> + <h3 id="title" class="align-center">Al Azhar 9th Grade Lesson Notes</h3> + <hr class="divider"> + <a href="/about/author.html" class="sidebar-link link">About the Author</a> + <a href="/about/school.html" class="sidebar-link link">About School</a> + <a href="/lessons" class="sidebar-link link">Lessons</a> + <a href="/lessons/matematika/" class="sidebar-link link sidebar-sublink">Matematika</a> + <a href="/lessons/fisika/" class="sidebar-link link sidebar-sublink">Fisika</a> + <a href="/lessons/biologi/" class="sidebar-link link sidebar-sublink">Lesson 3</a> + + <hr class="divider"> + <div id="toc"> + <h4>Table of Contents</h4> + </div> + </div> + + <div class="banner-container" id="banner"> + <div class="banner-bg" id="img-main"></div> + <h1 class="banner-text" id="banner-txt">Lessons</h1> + </div> + + <div id="main"> + <section> + <div class="card-container"> + <div class="card"> + <a href="/lessons/matematika/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/1/"> + <h2>Matematika</h2> + </a> + <p>Pak Hidayatullah, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/fisika/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/2/"> + <h2>Fisika</h2> + </a> + <p>Bu Ayu Rezky Yulita, M.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/biologi/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Biologi</h2> + </a> + <p>Bu Ir. Hj. Wiwit Parminta</p> + </div> + <div class="card"> + <a href="/lessons/ips/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>IPS</h2> + </a> + <p>Bu Uaeni Jahroh S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/agama/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Agama</h2> + </a> + <p>Pak Akrom Hasani, S.Ag.</p> + </div> + <div class="card"> + <a href="/lessons/quran/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Al-Qur'an</h2> + </a> + <p>Pak Muhammad Fathan S.Ag</p> + </div> + <div class="card"> + <a href="/lessons/ppkn/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>PPKn</h2> + </a> + <p>Bu Andini Nurlaily Hikmah, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/informatika/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Informatika</h2> + </a> + <p>Bu Nurbaeti, SE., M.Ak</p> + </div> + <div class="card"> + <a href="/lessons/english/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>English</h2> + </a> + <p>Bu Sofia Nurbaiti, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/indonesia/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Bahasa Indonesia</h2> + </a> + <p>Pak Maman Sulaeman, S.Pd.</p> + </div> + <div class="card"> + <a href="/lessons/musik/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Seni Musik</h2> + </a> + <p>Bu Dra. Kusnun Indrawati</p> + </div> + <div class="card"> + <a href="/lessons/lukis/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Seni Rupa</h2> + </a> + <p>Pak Miftah Izharul Haq, S.Pd</p> + </div> + <div class="card"> + <a href="/lessons/pjok/" class="link-card"></a> + <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg" + alt="" class="card-img"> + <a href="/lessons/3/"> + <h2>Penjasorkes</h2> + </a> + <p>Pak Supatri, S.Pd</p> + </div> + </div> + </section> + </div> + + <script src="/scripts/toc.js"></script> + <script src="/scripts/sidebar.js"></script> +</body> +</html>
\ 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 |
