Poster Motivasi

English · Dansk · Bahasa Malaysia

Laman web poster motivasi yang dibina dengan HTML dan CSS sahaja.

Keperluan

h1 menggunakan fon Libre Baskerville daripada Google Fonts.
Teks putih pada latar belakang hitam.
Imej dengan sempadan putih 5px.
Teks di tengah.
Satu div mengandungi h1, p dan img, dan diletakkan di tengah halaman.
h1 ditukar kepada huruf besar melalui CSS, bukan dengan menaip semula.

Cara ia berfungsi

HTML

<div class="poster">
  <img class="motivation-img" src="./assets/images/daenerys.jpeg" alt="A woman holding a dragon egg">
  <h1>That Special Moment</h1>
  <p>When you find the perfect avocado at the supermarket</p>
</div>

Apabila imej dan teks berada dalam satu div, satu peraturan sahaja boleh menetapkan saiz, kedudukan dan warna untuk kesemuanya.

CSS

Peraturan	Fungsi
`body { background-color: black; }`	Latar belakang halaman hitam.
`.poster { width: 50%; margin-left: 25%; }`	Lebar separuh halaman dengan 25% ruang kosong di kiri dan kanan, jadi poster berada di tengah secara mendatar.
`.poster { margin-top: 100px; }`	Ruang di atas poster.
`.poster { color: white; text-align: center; }`	Teks putih dan di tengah.
`.poster { font-family: "Libre Baskerville", serif; }`	Fon Google dengan fon sandaran.
`.motivation-img { width: 100%; border: 5px solid white; }`	Imej memenuhi `div` dan mendapat bingkai putih.
`h1 { text-transform: uppercase; }`	Huruf besar tanpa menaip semula tajuk.

Fon Google dimuatkan dengan <link> dalam <head> fail src/index.html.

Buat poster anda sendiri

Letakkan imej anda dalam src/assets/images/.
Kemas kini src dan alt pada img.
Tukar teks h1 dan p.
Cuba-cuba: fon, warna, lebar sempadan, jarak.

Jalankan

Buka src/index.html dalam pelayar. Sambungan internet diperlukan untuk memuatkan fon.

Motivational Poster