Windows 8

1

2

3

4

5

6

7

8

/* Pengaturan Layout */.content {width:400px; /* Kalau ada 2 menu didalam content, lebarnya (menu) x 2 = (width) */height:auto;margin:0 auto; /* Supaya layout keseluruhan berada di tengah */} /* Ini adalah elemen bungkus seperti yang sudah saya jelaskan disini */.menu {width:400px; /* karna mau dibuat empat kolom jadi lebarnya 100 x 4 = 400 */height:200px; /* karna mau dibuat dua baris jadi tinggi 100 x 2 = 200 */display:inline-block;float:left;color:#fff} /* Pengaturan Text pada Menu */.menu span {display: block;font-size:15px;height:20px;margin:5px 0;text-align:center;margin-top:33px;line-height: 20px;text-transform:uppercase;} /* Pengaturan Ukuran Tile */.ubin {width:88px; /* Lebar 100px dikurangi margin 6px dikurangi border 6px */height:88px; /* Tinggi supaya bentuk kotak dibikin sama */} .block {margin:3px;border:3px solid transparent; /* Normal gak ada border, tapi jaraknya tetap ada */display:inline-block; /* Supaya block berada dalam satu baris */float:left; /* Supaya block tersusun dari kiri ke kanan */cursor:pointer;} .block:hover {-webkit-filter:grayscale(0.2); /* Saat mouse hover warna background redup */border:3px solid #ccc; /* Saat mouse hover border kelihatan karna dikasih warna */} /* Pengaturan Warna Background */