start
This is an old revision of the document!
```html <!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> *{
margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif;
}
body{
background:#f4f7fb;
}
/* NAVBAR */ nav{
display:flex; justify-content:space-between; align-items:center; padding:15px 40px; background:#0d6efd; position:sticky; top:0; z-index:100;
}
.logo{
color:white; font-size:28px; font-weight:bold;
}
.menu a{
color:white; text-decoration:none; margin-left:25px; font-weight:500;
}
.menu a:hover{
color:#d9ecff;
}
/* HEADER */ .header{
text-align:center; padding:60px 20px 30px;
}
.header h1{
font-size:60px; color:#222;
}
.header p{
color:#666; margin-top:10px; font-size:18px;
}
/* CARD */ .container{
width:90%; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; padding-bottom:50px;
}
.card{
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> ```
start.1780852016.txt.gz · Last modified: by admin