ndaru21
2019-09-20 06:49:18Langkah Yang Harus Diperhatikan Sebelum Membuat Layout/Content
1. Bikin folder dengan nama "Latihan Membuat Layout", bebas simpen dimana aja
2. Buat folder "images" didalam folder "Latihan Membuat Layout"
3. Cari gambar bebas, terus gambarnya dipindahin ke dlm folder "images" sesuai langkah ke 2
4. Buat file latihan.html didalam folder "Latihan Membuat Layout"
5. Copy paste kode berikut
<html>
<head>
<title>Apa Kabar SMK</title>
<style>
.teks-berjalan {
font-size: 20px;
font-family: comic sans ms;
color: rgb(204, 86, 80);
margin-bottom: 30px;
}
.kotak {
width: 25%;
float: left;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.kotak2 {
border-radius: 15px;
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1);
}
.gambar {
width: 100%;
border-radius: 15px 15px 0 0;
}
.judul {
font-size: 20px;
font-family: calibri;
padding-left: 10px;
padding-right: 10px;
}
.deskripsi {
font-size: 17px;
font-family: calibri;
padding-left: 10px;
padding-right: 10px;
}
.opsi {
font-size: 17px;
font-family: calibri;
padding-left: 10px;
padding-right: 10px;
}
</style>
</head>
<body>
<marquee behavior="alternate" class="teks-berjalan">Selamat datang di Website Kami</marquee>
<div class="kotak">
<div class="kotak2">
<img src="images/tarik-tambang.jpg" alt="" class="gambar">
<h3 class="judul">Bara Meraih Juara Lomba Bahasa Jepang Tingkat DKI aaaa</h3>
<p class="deskripsi">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type
and
scrambled it to make a type specimen book.</p>
<p class="opsi">Like | Comment | Share</p>
</div>
</div>
<div class="kotak">
<div class="kotak2">
<img src="images/tarik-tambang.jpg" alt="" class="gambar">
<h3 class="judul">Bara Meraih Juara Lomba Bahasa Jepang Tingkat DKI aaaa</h3>
<p class="deskripsi">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type
and
scrambled it to make a type specimen book.</p>
<p class="opsi">Like | Comment | Share</p>
</div>
</div>
<div class="kotak">
<div class="kotak2">
<img src="images/tarik-tambang.jpg" alt="" class="gambar">
<h3 class="judul">Bara Meraih Juara Lomba Bahasa Jepang Tingkat DKI aaaa</h3>
<p class="deskripsi">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type
and
scrambled it to make a type specimen book.</p>
<p class="opsi">Like | Comment | Share</p>
</div>
</div>
<div class="kotak">
<div class="kotak2">
<img src="images/tarik-tambang.jpg" alt="" class="gambar">
<h3 class="judul">Bara Meraih Juara Lomba Bahasa Jepang Tingkat DKI aaaa</h3>
<p class="deskripsi">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has
been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type
and
scrambled it to make a type specimen book.</p>
<p class="opsi">Like | Comment | Share</p>
</div>
</div>
</body>
</html>
No reply found.