Changed homepage, improved css and added roots, new notes (some not finished yet)

1 files changed, 38 insertions, 50 deletions

diff --git a/index.html b/index.html
index 54d3019..1eae5c9 100644
--- a/index.html
+++ b/index.html
@@ -46,144 +46,132 @@
             <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 id="github">Contributing and Source Code</h1>
+            <p>
+                If you want to contribute to the project or want to view the source code, it's all available at GitHub! <br>
+                If you want to suggest a new page, you can create it yourself using HTML, or create a new issue at GitHub. <a href="https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue" class="link">Here's how to do it.</a>
+            </p>
+            <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i
+                        class="fa-brands fa-github"></i>
+                    https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a>
+            </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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/1/">
-            <h2>Matematika</h2>
+                        <h2>Matematika</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/2/">
-            <h2>Fisika</h2>
+                        <h2>Fisika</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Biologi</h2>
+                        <h2>Biologi</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>IPS</h2>
+                        <h2>IPS</h2>
                     </a>
-                    <p>Uaeni Jahroh S.Pd.</p>
+                    <p>Unaeni 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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Agama</h2>
+                        <h2>Agama</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Al-Qur'an</h2>
+                        <h2>Al-Qur'an</h2>
                     </a>
                     <p>Muhammad Fathan S.Ag</p>
                 </div>
                 <div class="card">
                     <a href="/lessons/arab/" class="link-card"></a>
-                    <img src="https://www.incimages.com/uploaded_files/image/1920x1080/getty_655998316_2000149920009280219_363765.jpg"
-            alt="" class="card-img">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Bahasa Arab</h2>
+                        <h2>Bahasa Arab</h2>
                     </a>
                     <p>Mohammad Amar, Lc.</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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>PPKn</h2>
+                        <h2>PPKn</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Informatika</h2>
+                        <h2>Informatika</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>English</h2>
+                        <h2>English</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Bahasa Indonesia</h2>
+                        <h2>Bahasa Indonesia</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Seni Musik</h2>
+                        <h2>Seni Musik</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Seni Rupa</h2>
+                        <h2>Seni Rupa</h2>
                     </a>
                     <p>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">
+                    <img src="/assets/images/hero/books.jpg" alt="" class="card-img">
                     <a href="/lessons/3/">
-            <h2>Penjasorkes</h2>
+                        <h2>Penjasorkes</h2>
                     </a>
                     <p>Supatri, S.Pd</p>
                 </div>
             </div>
 
-            <h1 id="github">Contributing and Source Code</h1>
-            <p>
-                If you want to contribute to the project or want to view the source code, it's all available at GitHub!
-            </p>
-            <p>Link: <a href="https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io" class="link"><i
-            class="fa-brands fa-github"></i> https://github.com/Al-Azhar-Notes/al-azhar-notes.github.io</a>
-            </p>
         </section>
     </div>