Hallo gaiss,,,,, terimkasih udah mau datang ke blog ini. Kali ini saya mau memberikan tutorial yang ke dua membuat Web dengan HTML dan CSS .
kemarin kita sudah buat tampilan header dan navigasinya yah gais, sekarang kita mau buat tampilan di bawah navigasi dan headernya.
tuliskan script berikut
<div class="banner">
<img src="image7.jpg">
</div>
disini saya menambahkan class banner, dan saya menambahkan stylenya
.banner{
margin-bottom: 10px;
}
.banner img{
display: block;
width: 100%;
height: 330px;
}
Output yang di keluarkan oleh coddin di atas.
nahh setelah ini saya akan menambahkan grids supaya lebih rapihh gaisss, kita perlu menambahkan class lagi yah gais
pertama saya tambahkan class menu kiri dan class kotak, menu ini akan menempatkan pada sebelah kiri
<div class="menu-kiri">
<div class="kotak">
<h3>Contact Me</h3>
<br>
<address>
<strong>Alamat Kami.</strong>
<br>
Cengkareng Bar., Kecamatan Cengkareng,
<br>
Kota Jakarta Barat,
<br>
Daerah Khusus Ibukota Jakarta
<br>
<abbr title="phone">P :</abbr>
+6281288530882
</address>
<address>
<strong>Email</strong>
<br>
<a href="#">service.online@gmail.com</a>
</address>
</div>
</div>
.menu-kiri
{
width: 300px;
margin-right: 10px;
float: left;
}
.kotak{
border: 1px solid gainsboro;
padding: 8px;
margin-bottom: 15px;
}
.kotak h3{
background-color: black;
color: white;
text-align: center;
padding: 10px;
margin-bottom: 13px;
}
dan yang script dibawah ini untuk membuat colom di sebelah kanan kita memberikan class menu kanan dan designnya.
Baca juga : Excel Mengenal Hlookup dan Vlookup
<div class="menu-kanan">
<div class="kotak">
<h3>Artikel</h3>
<img src="profile-02.jpg" alt="profile">
</div>
</div>
.menu-kanan
{
width: 760px;
margin-right: 0px;
float: right;
}
.menu-kanan img
{
display: block;
width: 100%;
}
maka hasil output dari script di atas seperti ini gais
nahh itu dia gais pembahasannya lanjut kita ke part #3 disana saya akan membagikan cara untuk menampilkan alamat kita di google map.
Terimakasih
Posting Komentar