PERTEMUAN 6
- Seperti biasa, langkah awal adalah buka XAMPP,
kemudian start Apache dan MySQL
- Buat folder
dengan nama wesite_2f di folder htdocs (C:\xampp\htdocs)
- Buat folder di
dalam folder website_2f dengan nama css
- Buka notepad/++ kemudian ketikan script berikut :
<html>
<head>
<title>Membuat layout WEB responsive sederhana HTML
dan CSS</title>
<link rel="stylesheet"
type="text/css" href="css/style.css">
</head>
<body>
<div class="header">
<h2>header</h2>
</div>
<div class="nav">
<a
href="#">menu 1</a>
<a
href="#">menu 2</a>
<a
href="#">menu 3</a>
</div>
<div class="row">
<div
class="content">
<div
class="card">
<h2>Judul
artikel</h2>
<h5>Rabu,
22 Februari 2018</h5>
<div
class="img" style="height:200px;">Image</div>
<p>Deskripsi deskripsi</p>
</div>
</div>
<div
class="sidebar">
<div
class="widget">
<h2>Widget
1</h2>
</div>
<div
class="widget">
<h2>Widget
2</h2>
</div>
<div
class="widget">
<h2>Widget
3</h2>
</div>
<div
class="widget">
<h2>Widget
4</h2>
</div>
</div>
</div>
<div class="row">
<div class="footer">
<h2>Footer
1</h2>
</div>
<div class="footer">
<h2>Footer
2</h2>
</div>
<div class="footer">
<h2>Footer
3</h2>
</div>
<div class="footer">
<h2>Footer
4</h2>
</div>
</div>
</body>
</html>
- Kemudian simpan di folder website_2f dengan nama index
(format.html)
- Jika berhasil maka tampilannya seperti gambar di bawah
:
- Langkah selanjutnya buat lembar kerja baru di
notepad/++, kemudian isikan script berikut :
* {
box-sizing:
border-box;
}
body {
font-family:
Arial;
padding: 10px;
background:
#f1f1f1;
}
.header {
padding: 10px;
font-size: 40px;
text-align:
center;
background: white;
}
.nav {
overflow: hidden;
background-color:
#333;
}
.nav a {
float: left;
display: block;
color: #f2f2f2;
text-align:
center;
padding: 14px
16px;
text-decoration:
none;
}
.nav a:hover {
background-color:
#ddd;
color: black;
}
.content {
float: left;
width: 75%;
}
.sidebar {
float: left;
width: 25%;
background-color:
#f1f1f1;
padding-left:
10px;
}
.img {
background-color:
#aaa;
width: 100%;
padding: 10px;
}
.card {
background-color:
white;
padding: 10px;
margin-top: 10px;
}
.widget{
background-color:
white;
padding: 10px;
margin-top:
10px;
}
.row:after {
content:
"";
display: table;
clear: both;
}
.footer {
padding: 10px;
width: 25%;
text-align:
center;
background: white;
margin-top: 20px;
display:
inline-block;
float: left;
}
@media (max-width: 800px) {
.content,
.sidebar,.footer{
width: 100%;
padding: 0;
}
}
@media (max-width: 400px) {
.nav a {
float: none;
width:100%;
}
}
- Simpan file dalam folder css dengan nama style (format
.css)
- Jika berhasil maka tampilan yang awalnya seperti ini :
- Akan berubah menjadi seperti ini :
- Selesai J
Tidak ada komentar:
Posting Komentar