<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
background-image:url('alamat gambar');
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header" style="background-color: #FF9900">
<h1>Catatan Sederhana</h1>
<p>Blog Tentang Berbagi Ebook, Pengetahuan Dan Tutorial.</p>
</div>
<div class="topnav" style="background-image: url('Alamat gambar')">
<a href="#"><font color="#FF9900" size="4">Link</font></a>
<a href="#"><font color="#FF9900" size="4">Link</font></a>
<a href="#"><font color="#FF9900" size="4">Link</font></a>
</div>
<div class="row">
</div>
<div class="column" style="width: 387px; height: 189px">
<h2>Colum 1</h2>
<p>Contoh isi Column 1</p>
</div>
<div class="column" style="width: 386px; height: 189px">
<h2>Column 2</h2>
<p>Contoh isi Column 2</p>
</div>
<div class="column" style="width: 386px; height: 189px">
<h2>Column 3</h2>
<p>Contoh isi Column 3</p>
</div>
</body>
</html>
refrensi
http://www.w3schools.com
Alhamdulillah Catatan sederhana Membuat Column Telah selesai Mohon maaf Jika ada Kesalahan Wasalamu'laikum warohmatulloh wabarokaatuh
Hasil nya
No comments:
Post a Comment