ANIMATION

CSS dapat membuat animasi tanpa JavaScript.

---

Contoh

@keyframes bergerak{

    from{
        left:0;
    }

    to{
        left:300px;
    }

}

.box{
    animation:bergerak 3s infinite;
}

---

Praktik

Membuat tombol berkedip.

@keyframes kedip{

    0%{
        opacity:1;
    }

    50%{
        opacity:0.5;
    }

    100%{
        opacity:1;
    }

}

button{
    animation:kedip 2s infinite;
}

---

PROYEK AKHIR

WEBSITE PROFIL SEKOLAH

Halaman yang Dibuat

1. Beranda

Berisi:

• Logo sekolah
• Banner
• Sambutan

---

2. Profil

Berisi:

• Sejarah sekolah
• Visi dan misi

---

3. Jurusan

Menampilkan:

• RPL
• TKJ
• DKV
• AKL

Menggunakan CSS Grid.

---

4. Galeri

Menampilkan foto kegiatan sekolah.

Menggunakan Grid.

---

5. Kontak

Berisi:

• Alamat
• Telepon
• Email

---

PROYEK AKHIR LANJUTAN

LANDING PAGE BISNIS UMKM

Fitur:

1. Navbar Flexbox
2. Hero Section
3. Produk Grid
4. Tombol WhatsApp
5. Responsive Mobile
6. Hover Effect
7. Animasi Tombol

---

UJI KOMPETENSI SISWA

Pilihan Praktik

Paket A

Buat Website Profil Pribadi

Kriteria:

✓ Responsive
✓ Flexbox
✓ Grid
✓ Hover Effect

---

Paket B

Buat Website Toko Online Sederhana

Kriteria:

✓ Navbar
✓ Katalog Produk
✓ Responsive
✓ Animasi

---

Paket C

Buat Website Sekolah

Kriteria:

✓ Menu Navigasi
✓ Profil
✓ Galeri
✓ Kontak
✓ Responsive