Differences

This shows you the differences between two versions of the page.

--- start [2026/06/07 17:06] – created admin
+++ start [2026/06/08 16:39] (current) – created admin
@@ Line 1: / Line 1: @@
-```html
+====== Wiki SainsKita ======
-<!DOCTYPE html>
-<html lang="id">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Wiki SainsKita</title>
-<style>
+Selamat datang di **Wiki SainsKita**, sumber belajar IPA SMP yang dirancang untuk membantu peserta didik memahami konsep-konsep sains secara mudah dan sistematis.
-*{
-    margin:0;
-    padding:0;
-    box-sizing:border-box;
-    font-family:'Segoe UI',sans-serif;
-}
-body{
+===== Daftar Materi =====
-    background:#f4f7fb;
-}
-/* NAVBAR */
+* [[tatasurya|Bab 1 – Sistem Tata Surya]]
-nav{
+* [[zat|Bab 2 – Zat dan Perubahannya]]
-    display:flex;
+* [[energi|Bab 3 – Energi dan Perubahannya]]
-    justify-content:space-between;
+* [[gerak|Bab 4 – Gerak dan Gaya]]
-    align-items:center;
-    padding:15px 40px;
-    background:#0d6efd;
-    position:sticky;
-    top:0;
-    z-index:100;
-}
-.logo{
+===== Tentang Wiki SainsKita =====
-    color:white;
-    font-size:28px;
-    font-weight:bold;
-}
-.menu a{
+Wiki SainsKita merupakan media pembelajaran digital yang berisi materi IPA SMP. Setiap materi disusun secara ringkas, jelas, dan mudah dipahami sehingga dapat digunakan sebagai sumber belajar mandiri.
-    color:white;
-    text-decoration:none;
-    margin-left:25px;
-    font-weight:500;
-}
-.menu a:hover{
+===== Tujuan Pembelajaran =====
-    color:#d9ecff;
-}
-/* HEADER */
+* Memahami konsep-konsep dasar IPA SMP.
-.header{
+* Menumbuhkan minat belajar sains.
-    text-align:center;
+* Membantu peserta didik belajar secara mandiri.
-    padding:60px 20px 30px;
+* Menjadi sumber referensi pembelajaran digital.
-}
-.header h1{
+===== Petunjuk Penggunaan =====
-    font-size:60px;
-    color:#222;
-}
-.header p{
+Klik salah satu materi pada daftar di atas untuk mulai mempelajari topik yang diinginkan.
-    color:#666;
-    margin-top:10px;
-    font-size:18px;
-}
-/* CARD */
+===== Penutup =====
-.container{
-    width:90%;
-    margin:auto;
-    display:grid;
-    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
-    gap:30px;
-    padding-bottom:50px;
-}
-.card{
+Semoga Wiki SainsKita dapat membantu proses pembelajaran IPA dan meningkatkan pemahaman peserta didik terhadap fenomena alam di sekitar.
-    background:white;
-    border-radius:20px;
-    padding:25px;
-    box-shadow:0 5px 15px rgba(0,0,0,0.1);
-    transition:.3s;
-}
-.card:hover{
-    transform:translateY(-5px);
-}
-.card img{
-    width:100%;
-    height:180px;
-    object-fit:cover;
-    border-radius:15px;
-}
-.card h2{
-    text-align:center;
-    margin:15px 0;
-    color:#0d6efd;
-}
-.card p{
-    color:#444;
-    line-height:1.8;
-    text-align:justify;
-}
-.btn{
-    display:block;
-    text-align:center;
-    background:#0d6efd;
-    color:white;
-    text-decoration:none;
-    padding:14px;
-    border-radius:10px;
-    margin-top:20px;
-    font-weight:bold;
-}
-.btn:hover{
-    background:#0b5ed7;
-}
-/* FOOTER */
-footer{
-    text-align:center;
-    background:#0d6efd;
-    color:white;
-    padding:20px;
-    margin-top:40px;
-}
-</style>
-</head>
-<body>
-<nav>
-    <div class="logo">SainsKita</div>
-    <div class="menu">
-        <a href="index.html">Beranda</a>
-        <a href="profil.html">Profil</a>
-        <a href="materi.html">Materi</a>
-        <a href="soal.html">Bank Soal</a>
-        <a href="wiki.html">Wiki</a>
-    </div>
-</nav>
-<div class="header">
-    <h1>Wiki SainsKita</h1>
-    <p>Pusat informasi dan pengetahuan IPA SMP</p>
-</div>
-<div class="container">
-    <!-- BAB 1 -->
-    <div class="card">
-        <img src="https://cdn1.katadata.co.id/media/images/thumb/2022/02/08/Tata_Surya-2022_02_08-09_16_41_cff27fa42dd9f2fcb04b48daeed78d88_620x413_thumb.png">
-        <h2>Sistem Tata Surya</h2>
-        <p>
-        Tata surya merupakan kumpulan benda langit yang terdiri atas Matahari sebagai pusat dan planet-planet yang mengelilinginya.
-        </p>
-        <a href="materi_tatasurya.html" class="btn">
-            Buka Wiki Tata Surya
-        </a>
-    </div>
-    <!-- BAB 2 -->
-    <div class="card">
-        <img src="https://1.bp.blogspot.com/-GmYcWYmoDfQ/XZ3pgZGjJfI/AAAAAAAABAI/HoqcE4u0l8krfW9vVqbx3yiGhOTSfyuEACLcBGAsYHQ/s1600/perubahan_wujud.jpg">
-        <h2>Zat dan Perubahannya</h2>
-        <p>
-        Zat adalah segala sesuatu yang memiliki massa dan menempati ruang. Zat dapat mengalami perubahan fisika maupun kimia.
-        </p>
-        <a href="materi_zat.html" class="btn">
-            Buka Wiki Zat
-        </a>
-    </div>
-    <!-- BAB 3 -->
-    <div class="card">
-        <img src="https://th.bing.com/th/id/OIP.LRN8KA_1eKVooBCopt9TTAHaFj?rs=1&pid=ImgDetMain">
-        <h2>Energi dan Perubahannya</h2>
-        <p>
-        Energi adalah kemampuan untuk melakukan usaha. Energi dapat berubah bentuk tetapi tidak dapat diciptakan maupun dimusnahkan.
-        </p>
-        <a href="materi_energi.html" class="btn">
-            Buka Wiki Energi
-        </a>
-    </div>
-    <!-- BAB 4 -->
-    <div class="card">
-        <img src="https://1.bp.blogspot.com/-YZjymECtGd0/XmggnLXp4CI/AAAAAAAAKPU/y5IhN55sG6EdL84V9PAdD4RkOhgKQdX4wCLcBGAsYHQ/s1600/27.png">
-        <h2>Gerak dan Gaya</h2>
-        <p>
-        Gerak adalah perubahan posisi benda terhadap titik acuan, sedangkan gaya merupakan tarikan atau dorongan yang dapat memengaruhi gerak benda.
-        </p>
-        <a href="materi_gerak.html" class="btn">
-            Buka Wiki Gerak
-        </a>
-    </div>
-</div>
-<footer>
-    © 2026 SainsKita | Wiki Pembelajaran IPA SMP
-</footer>
-</body>
-</html>
-```