Responsive Web Design

(Template)
Rizki Wahyudi
Pada modul ini akan mempraktekkan membuat template website
responsif menggunakan HTML dan CSS
 Header
Top
Navigasi

Right
Column
Left
column

Struktur halaman
1. Header
2. Top Navigasi
3. Left column
4. Right Column
5. Footer

r
Foote
File “index.html”
File “index.html” lanjutan
File “style.css”

Menambahkan gambar pada css

background-image: url('img_tree.gif'), url('paper.gif');

Float berfungsi untuk mengatur letak element secara horizontal.

ada empat value property float, yaitu left, right, inherit dan none.

salah satu contoh penggunaan float yang paling sering di temukan

adalah ketika kita ingin mebuat gambar postigan website yang
terletak di bagian samping tulisan konten.

overflow:hidden yang akan menyembunyikan konten seolah - olah

konten seperti terpotong

Berlaku untuk semua tag <a> pada class=”topnav”

File “style.css” lanjutan
:hover adalah efek perubahan ketika mouse berada diatas sebuah elemen.

Berlaku untuk semua class=“card”

File “style.css” lanjutan

Insert some text after/before the content

Clear membersihkan element yang sebelumnya telah mengalami float.

Sehingga element yang diclear akan pindah ke baris baru

Selesai
overflow Hasil
Perhitungan box-sizing Hasil: