class 'bottom'

Pelajaran 18 dari 31 dalam kursus Kartu 3D | Proyek Front-end di Coddy.

Tantangan

Mudah

Class target ‘bottom’:

Atur display menjadi Flex
Atur align-items menjadi center.
Atur justify-content menjadi space-between
Atur position menjadi absolute
Atur bottom, left, dan right menjadi 20 piksel.
Atur padding menjadi 10px dari atas ke bawah dan 12px dari kanan ke kiri

Tambahkan properti ini di bagian akhir agar hasilnya lebih presisi:

transform-style: preserve-3d;
transform: translate3d(0, 0, 26px);

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Tulis kode HTML di sini -->
        <script src="script.js"></script>
    </body>
</html>

Semua pelajaran di Kartu 3D | Proyek Front-end

Latihan sendiri: Playground Web