Web Ecommerce
Latihan web ecommerce dibuat untuk memenuhi tugas uts Pemrograman web Mobile tahun 2019
uts dilaksanakan pada tanggal 29 April 2019
contoh coding home
<!DOCTYPE html>
<html lang="en">
<head>
<title>Phone Shop</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Add a gray background color and some padding to the footer */
footer {
background-color: #555;
color: white;
padding: 15px;
}
p.two {
border-style: solid;
border-width: medium;
margin: 10px;
}
.carousel-inner img {
width: 100%; /* Set width to 100% */
margin: auto;
min-height:200px;
}
/* Hide the carousel text when the screen is less than 600 pixels wide */
@media (max-width: 100px) {
.carousel-caption {
display: none;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><font color="white">Phone Shop</font></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="home.html">Home</a></li>
<li>
<a data-toggle="dropdown" data-target="#" href="">
Profil <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="sejarah.html">Sejarah</a></li>
<li><a href="visi.html">Visi Misi</a></li>
</ul>
</li>
<li>
<a data-toggle="dropdown" data-target="#" href="#">
Samsung <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="ssamsung.html">Smartphone</a></li>
<li><a href="hsamsung.html">Handphone</a></li>
<li><a href="spertsamsung.html">Spertpart</a></li>
</ul>
</li>
<li>
<a data-toggle="dropdown" data-target="#" href="#">
Nokia <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="snokia.html">Smartphone</a></li>
<li><a href="hnokia.html">Handphone</a></li>
<li><a href="spertnokia.html">Spertpart</a></li>
</ul>
</li>
<li>
<a data-toggle="dropdown" data-target="#" href="#">
Xiaomi <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="sxiaomi.html">Smartphone</a></li>
</ul>
</li>
<li>
<a data-toggle="dropdown" data-target="#" href="#">
Layanan <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="keluhan.html">Keluhan Pelanggan</a></li>
<li><a href="chat.html">Live Chat</a></li>
<li><a href="kontak.html">Kontak</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="A.jpg" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="s10.jpg" alt="Image">
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="a70.jpg" alt="Image">
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<p class="two">
<div class="container text-center">
<h3>Best Seller Samsung</h3><br>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="s10e.html"><div class="panel-body"><img class="gambar1" src="s10e.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Samsung Galaxy S10E 128 GB</b><br><strike>Rp 15.300.000</strike><br><font color="red">Rp 12.500.000</font>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa70.html"><div class="panel-body"><img class="gambar1" src="sa70.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Samsung Galaxy A70</b><br><strike>Rp 6.500.000</strike><br><font color="red">Rp 5.450.000</font>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa50.html"><div class="panel-body"><img class="gambar1" src="sa50.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Samsung Galaxy A50</b><br><strike>Rp 5.100.000</strike><br><font color="red">Rp 4.500.000</font>
</div>
</div>
</div>
<br><hr>
<h3><font color="white">B</font></h3><br>
<p class="two">
<h3>Best Seller Nokia</h3><br>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa70.html"><div class="panel-body"><img class="gambar1" src="n61.png" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Nokia 6.1 Plus 4GB</b><br><strike>Rp 3.000.000</strike><br><font color="red">Rp 2.835.000</font>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa70.html"><div class="panel-body"><img class="gambar1" src="n81.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Nokia 8.1 Plus</b><br><strike>Rp 4.350.000</strike><br><font color="red">Rp 4.299.000</font>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa50.html"><div class="panel-body"><img class="gambar1" src="n9.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Nokia 9 PureView</b><br><strike>Rp 10.100.000</strike><br><font color="red">Rp 9.999.000</font>
</div>
</div>
</div>
<br><hr>
<h3><font color="white">B</font></h3><br>
<p class="two">
<h3>Best Seller Xiaomi</h3><br>
<div class="row">
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa70.html"><div class="panel-body"><img class="gambar1" src="x6a.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Xiaomi 6a</b><br><strike>Rp 1.300.000</strike><br><font color="red">Rp 1.250.000</font>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa70.html"><div class="panel-body"><img class="gambar1" src="xnote7.jpg" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Xiaomi Note 7</b><br><strike>Rp 2.100.000</strike><br><font color="red">Rp 1.999.000</font>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-success card">
<a href="sa50.html"><div class="panel-body"><img class="gambar1" src="xmi8.png" class="img-responsive"
style="width:50%" align="center" alt="image"></a>
</div>
<div class="panel-footer"><b> Xiaomi Mi 8 Lite</b><br><strike>Rp 4.000.000</strike><br><font color="red">Rp 3.525.000</font>
</div>
</div>
</div>
</div>
</div><br>
</div>
</br>
</div>
</div><br>
<footer class="w3-container w3-black w3-padding-32 w3-margin-top text-center">
<p>Online Store Copyright</p>
<form class="form-inline">Get deals:
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Sign Up</button>
<br>
<br>
</form>
</footer>
</body>
</html>
Labels:
PemrogramanWebMobile
0 Comment for "Web Ecommerce"