Assalamualaikum....
hai teman coding,kali ini kita akan membuat template sederhana dengan mengunakan HTML dan CSS.Contoh yang akan kita buat adalah seperti di bawah ini:
Ok langsung saja kita buat file pertama yaitu index.html,nah setelah itu kita buat beberapa div seperti kode di bawah ini dengan class namenya masing-masing.
- index.html
<!DOCTYPE html>
<html>
<head>
<title>soal 0</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="Induk">
<div class="Logo">LOGO</div>
<div class="Banner">BANNER</div>
</div>
<div class="Menu" align="left">
<a href=""><li class="nav_menu">Home</li></a>
<a href=""><li class="nav_menu">Privasi</li></a>
<a href=""><li class="nav_menu">About Us</li></a>
</div>
<div class="Induk">
<div class="Content">CONTENT</div>
<div class="Sidebar">SIDEBAR</div>
</div>
<div class="Footer">FOOTER</div>
</center>
</body>
</html>
-------------------------------------------------------------------------------------------------------------------------
- style.css
.Induk{
width: 900px;
margin-top: 12px;
overflow: auto;
}
.Logo{
width: 280px;
min-height: 200px;
background: white;
border: 1px solid #333;
float:left;
}
.Banner{
width: 600px;
min-height: 200px;
background: white;
border: 1px solid #333;
float:right;
}
.Menu{
width: 900px;
height: 50px;
background: red;
border: 1px solid #333;
margin-top: 12px;
}
.induk{
width: 900PX;
overflow: auto;
margin-top: 12PX;
}
.Content{
width: 620px;
min-height: 300px;
background: white;
border: 1px solid #333;
float:left;
}
.Sidebar{
width: 260px;
min-height: 300px;
background: #8bef96;
border: 1px solid #333;
float:right;
}
.Footer{
width: 900px;
min-height: 100px;
background: #aaa;
border: 1px solid #333;
margin-top: 12px;
}
.nav_menu{
font-family:Roboto;
list-style-type:none;
padding: 8px 12px;
color:white;
float:left;
font-weight: 600;
}
.nav_menu:hover{
background: #333;
}
No comments:
Post a Comment