Membuat Layout Sederhana Toko Kue Menggunakan CSS
script layout.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout Sederhana</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="logo"><img src="logo-kue.png" alt="logo" width="100%" height="70px"></div>
<div class="title">QueQu.com<br>
<div class="text-title">" QueQu Halal, Enak, Lezat, dan Bergizi "</div></div>
<div class="alamat">
Pondok Ungu Permai<br>
Jl. Merseyside No.18 Rt.008/011<br>
Kaliabang Tengah - Bekasi Utara<br>
021-88730665
</div>
</div>
<div class="content">
<div class="content-kiri">
<div class="navigation">
<ul>
<li><a href=".">Beranda</a></li>
<li><a href=".">Produk</a></li>
<li><a href=".">Resep</a>
<ul>
<li><a href=".">Resep Kue Kering</a></li>
<li><a href=".">Resep Kue Basah</a></li>
<li><a href=".">Resep Kue Ulang Tahin</a></li>
<li><a href=".">Resep Kue Bolu</a>
<ul class="sub">
<li><a href=".">Resep Bolu Kukus</a></li>
<li><a href=".">Resep Bolu Panggang</a></li>
<li><a href=".">Resep Bolu Coklat</a></li>
<li><a href=".">Resep Bolu Pandan</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=".">Tentang Kami</a></li>
<li><a href=".">Kontak</a></li>
</ul>
</div>
<div class="promo"><img src="kue1.jpg" alt="" width="100%" height="140px"></div>
<div class="promo"><img src="kue2.jpg" alt="" width="100%" height="140px"></div>
<div class="promo"><img src="kue1.jpg" alt="" width="100%" height="140px"></div>
</div>
<div class="iklan"><marquee behavior="alternate"> Selamat Datang Di Toko Kami </marquee></div>
<div class="content-tengah">
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Kecubit</div>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Bulet</div>
</div>
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Cubit</div>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Bosok</div>
</div>
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Markarane</div>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Limpoo</div>
</div>
<div class="pagging">
<div class="number">
<div class="number1"> << </div>
<div class="number1">1</div>
<div class="number1">2</div>
<div class="number1">3</div>
<div class="number1"> >> </div>
</div>
</div>
</div>
</div>
<div class="footer">Design by heeyriku © 2015</div>
</div>
</body>
</html>
body{
padding: 0;
margin: 0;
}
.container{
width: 1000px;
height:780px;
margin: 0 auto;
}
.banner{
width: 100%;
height: 120px;
background: #019875;
}
.logo{
width: 70px;
height: 70px;
margin:40px 10px 0 20px;
float: left;
}
.title{
margin:44px 20px 0 0;
float: left;
font-size: 36px;
text-shadow: 1px 3px 5px red;
color: #fff;
}
.text-title{
font-size: 13px;
color: #fff;
text-shadow: none;
}
.alamat{
float: right;
margin:20px;
color: #fff;
}
.content{
width: 100%;
height: 450px;
}
.iklan{
width: 800px;
border-bottom:3px solid #019875;
float: left;
padding: 3px 0;
}
.content-kiri{
width: 200px;
height: 615px;
float: left;
background: #eee;
}
.content-kanan{
width: 200px;
height: 450px;
float: left;
background: #eee;
}
.content-tengah{
width: 800px;
height: 615px;
float: left;
background: #eee;
}
.isi-content{
width: 200px;
height: 220px;
margin:10px 30px;
float: left;
}
.text-content{
text-align: center;
margin: 2px 0;
color: #019875;
font-weight: bold;
}
.pagging{
width: 760px;
padding: 20px;
float: left;
}
.number{
width: 300px;
height: 20px;
margin:0 auto;
color:#019875;
}
.number1{
float: left;
border: 1px solid #019875;
padding: 10px 20px;
}
.footer{
width: 1000px;
padding: 20px 0;
background: #019875;
float: left;
text-align: center;
color: #fff;
}
.promo{
width: 175px;
padding: 10px;
height: 143px;
border:1px solid #019875;
}
.navigation ul {
list-style-type: none;
margin: 0;
margin-left: -40px;
}
.navigation ul a {
text-decoration: none;
color: #fff;
}
.navigation ul li {
padding:5px;
background: #019875;
border: 1px solid #fff;
}
.navigation ul li:hover {
background: #26A65B;
}
.navigation li ul {
display:none;
position:absolute;
}
.navigation li:hover ul{
display:block;
width: 200px;
margin-top:-25px;
margin-left:155px;
}
.sub{
display: none !important;
}
.navigation ul li ul li:hover .sub{
display: block !important;
}source codenya bisa di download disini
Selamat mencoba, learning by doing :)
If you're trying hard to lose weight then you certainly have to jump on this brand new custom keto meal plan diet.
BalasHapusTo create this keto diet, licensed nutritionists, fitness couches, and cooks joined together to develop keto meal plans that are efficient, decent, price-efficient, and satisfying.
Since their first launch in early 2019, 1000's of individuals have already completely transformed their body and health with the benefits a professional keto meal plan diet can provide.
Speaking of benefits: clicking this link, you'll discover 8 scientifically-proven ones provided by the keto meal plan diet.