Belajar membuat program sederhana toko Kue mengunakan HTML dan CSS Xaampp by NEar
Contoh gambar web toko kue mengunakan Xampp
Berikut contoh coding program sederhana HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MALAS COODING</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="banner">
<div class="logo"><img src="logo-kue.jpg" alt="logo" width="100%" height="70px"></div>
<div class="title">CAKE SHOP DREAMS<br>
<div class="text-title">" DREAMS Halal, Enak, Lezat, Bergizi, Dan Berkualitas Tentunya "</div></div>
<div class="alamat">
Cengkareng Raya Jakarta Barat<br>
Jl.Cengkareng Raya Blok JJ no.6 Rt08/009<br>
Jakarta Barat Sonoan Dikit<br>
Kontak = +6288167890562
</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=".">Harga</a>
<ul>
<li><a href=".">Harga Kue Kering Rp. 8000 </a></li>
<li><a href=".">Harga Kue Basah Rp. 6000 </a></li>
<li><a href=".">Harga Kue Ulang Tahun Rp. 110.000 </a></li>
<li><a href=".">Harga Kue Bolu = klik untuk melihat harga </a>
<ul class="sub">
<li><a href=".">Harga Bolu Kukus Rp. 12.000 </a></li>
<li><a href=".">Harga Bolu Panggang Rp. 11.000 </a></li>
<li><a href=".">Harga Bolu Coklat Rp. 10.000 </a></li>
<li><a href=".">Harga Bolu Pandan Rp. 15.000 </a></li>
</ul>
</li>
</ul>
</li>
<li><a href=".">Tentang Kami</a></li>
<li><a href=".">Kontak = +6288167890562 </a></li>
<li><a href=".">Kelompok Web Programing</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="kue3.jpg" alt="" width="100%" height="140px"></div>
</div>
<div class="iklan"><marquee behavior="alternate"> Greetings Come To Our Cake Shop Web </marquee></div>
<div class="content-tengah">
<div class="isi-content">
<img src="kue1.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Cubit</div>
<td>Rp. 25.000</td>
</div>
<div class="isi-content">
<img src="kue2.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Bapau</div>
<td>Rp. 20.000</td>
</div>
<div class="isi-content">
<img src="kue4.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Pelangi</div>
<td>Rp. 15.000</td>
</div>
<div class="isi-content">
<img src="kue3.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Donat</div>
<td>Rp. 20.000</td>
</div>
<div class="isi-content">
<img src="kue5.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Dadar Gulung</div>
<td>Rp. 15.000</td>
</div>
<div class="isi-content">
<img src="kue6.jpg" alt="" width="100%" height="170px">
<div class="text-content">Kue Moci</div>
<td>Rp. 25.000</td>
</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">OWNER BY KELOMPOK KITA</div>
</div>
</body>
</html>
Sourcode .Css
body{
padding: 0;
margin: 0;
}
.container{
width: 1000px;
height:780px;
margin: 0 auto;
}
.banner{
width: 100%;
height: 120px;
background: #1E90FF;
}
.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;
}
Komentar
Posting Komentar