Sie sind auf Seite 1von 13

KUIS UAS

<!doctype html>

<html lang="en">

<head>

<!-- Required meta tags -->

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

<link rel="stylesheet" href="bootstrap/fontawesome/css/all.min.css">

<link rel="stylesheet" href="phoneshope.css">

<link rel="icon" href="bootstrap/images/favicon.png">

<title>Home | PhoneShope</title>

</head>

<body>

<div class="container-fluid">

<div class="row">

<div class="col-md-12 fixed-top" style="background-color: #FF7F50;padding-bottom:


.3em;">

<a href="#" class="text-dark float-right">Daftar</a>

<span class="text-dark float-right mr-2 ml-2">&#124;</span>

<a href="#" class="text-dark float-right">Login</a>

</div>

</div>

<div class="row" id="isi">

<nav class="navbar navbar-expand-lg fixed-top navbar-light mt-4"


style="background-color:#FF4500">

<a class="navbar-brand" href="#">

<h3 class="mr-5 mt-2"><img src="bootstrap/images/favicon.png"


width="50" height="50"> PhoneShope</h3>

</a>

<button class="navbar-toggler" type="button" data-toggle="collapse"


data-target="#navbarNavAltMarkup" aria-controls=" navbarNavAltMarkup" aria-expanded="false" aria-
label="Toggle navigation">

<span class="navbar-toggler-icon"></span>

</button>
<form class="form-group form-inline col-sm-3 col-md-8 mt-4">

<div class="input-group" style="width: 100%;">

<input type="text" class="form-control border-secondary"


placeholder="cari produk di sini . . .">

<div class="input-group-btn">

<button class="btn btn-default text-light border-secondary"


type="button" style="background-color: #D2691E"><i class="fas fa-search text-light mr-
2"></i>Search</button>

</div>

</div>

</form>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">

<ul class="navbar-nav mr-auto">

<li><i class="fas fa-cart-plus fa-2x ml-3 mt-2"></i></li>

</ul>

</div>

</nav>

</div><!-- Tutup Header -->

<div class="row">

<div class="col-md-12" style="margin-top: 7.5em;">

<div id="demo" class="carousel slide" data-ride="carousel">

<!-- Indicators -->

<ul class="carousel-indicators">

<li data-target="#demo" data-slide-to="0"


class="active"></li>

<li data-target="#demo" data-slide-to="1"></li>

</ul>

<!-- The slideshow -->

<div class="carousel-inner">

<div class="carousel-item active">

<img src="bootstrap/images/gambar1.png"
alt="Gambar - 1" width="1335" height="400" class="img-fluid">

<div class="carousel-caption">

</div>

</div>
<div class="carousel-item">

<img src="bootstrap/images/gambar2.png"
alt="Gambar - 2" width="1335" height="400" class="img-fluid">

<div class="carousel-caption">

</div>

</div>

</div>

</div>

<!-- Left and right controls -->

<a class="carousel-control-prev" href="#demo" data-slide="prev">

<span class="carousel-control-prev-icon"></span>

</a>

<a class="carousel-control-next" href="#demo" data-slide="next">

<span class="carousel-control-next-icon"></span>

</a>

<hr>

</div>

</div><!-- Tutup row carousel -->

<div class="row">

<div class="col-md-10 offset-md-1">

<div class="row">

<!--1. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top"


src="bootstrap/images/product/1.png" alt="" height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Smartphone</a>

</h6>

<p class="card-text">XIAOMI SKYWALKER 8GB 256GB BLACK SHARK 2</p>

<h5 class="text-danger"><s>Rp 11.000.000</s></h5>

<h6>Rp 9.650.000</h6>

</div>
<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-


2">145 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-


color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">

Kota Medan

</span>

</div>

</div>

</div>

<!--1. tutup satu item-->

<!--2. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top"


src="bootstrap/images/product/2.png" alt="" height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Smartphone</a>

</h6>

<p class="card-text">Vivo Y17 - RAM 4GB - 128GB (GARANSI RESMI VIVO)</p>


<h5 class="text-danger"><s>Rp 2.999.000</s></h5>

<h6>Rp 2.699.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="far fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-


2">456 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-


color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">

Kota Jakarta

</span>

</div>

</div>

</div>

<!--2. tutup satu item-->

<!--3. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top"


src="bootstrap/images/product/3.png" alt="" height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">


<a href="#" class="text-success">Notebook</a>

</h6>

<p class="card-text"> Notebook Baru Acer Aspire 3 A315-41-R97J</p>

<h5 class="text-danger"><s>Rp 8.499.000</s></h5>

<h6>Rp 8.159.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-


2">114 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-


color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">

Kota Surabaya

</span>

</div>

</div>

</div>

<!--3. tutup satu item-->

<!--4. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">
<a href="#"><img class="card-img-top"
src="bootstrap/images/product/4.png" alt="" height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Notebook</a>

</h6>

<p class="card-text">Notebook Baru Asus A407UA-BV320T</p>

<h5 class="text-danger"><s>Rp 5.999.000</s></h5>

<h6>Rp 5.625.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-


2">656 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-


color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">

Kota Medan

</span>

</div>

</div>

</div>

<!--4. tutup satu item-->


</div><!--tutup row1-->

<div class="row">

<!--5. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top" src="bootstrap/images/product/5.png" alt=""


height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Laptop</a>

</h6>

<p class="card-text">Asus ROG GL503GE-EN023T-RAM 8G-1TB SSHD</p>

<h5 class="text-danger"><s>Rp 16.499.000</s></h5>

<h6>Rp 14.838.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-2">723 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">

Kota Jakarta
</span>

</div>

</div>

</div>

<!--5. tutup satu item-->

<!--6. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top" src="bootstrap/images/product/6.png" alt=""


height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Smartphone</a>

</h6>

<p class="card-text">Xiaomi Redmi Note-7 48MP Ram 4 ROM 64/128GB</p>

<h5 class="text-danger"><s>Rp 2.799.000</s></h5>

<h6>Rp 2.457.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-2">224 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">
Kota Bandung

</span>

</div>

</div>

</div>

<!--6. tutup satu item-->

<!--7. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top" src="bootstrap/images/product/7.png" alt=""


height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Smartphone</a>

</h6>

<p class="card-text">OPPO F11 SMARTPHONE 4 GB / 128 GB </p>

<h5 class="text-danger"><s>Rp 3.999.000</s></h5>

<h6>Rp 3.619.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="far fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-2">999 Terjual</span>

</div>

<div class="card-footer">

<small>

<button class="btn btn-sm text-dark" style="background-color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>


</small>

<span class="float-right">

Kota Medan

</span>

</div>

</div>

</div>

<!--7. tutup satu item-->

<!--8. buka satu item card product-->

<div class="col-md-3 mb-4">

<div class="card">

<a href="#"><img class="card-img-top" src="bootstrap/images/product/8.png" alt=""


height="200"></a>

<div class="card-body">

<h6 class="card-title text-danger">

<a href="#" class="text-success">Smartphone</a>

</h6>

<p class="card-text">Samsung GalaxyS9 Plus Smartphone [256GB/ 6GB]</p>

<h5 class="text-danger"><s>Rp 9.999.000</s></h5>

<h6>Rp 9.115.000</h6>

</div>

<div class="card-footer ">

<i class="far fa-heart text-danger mr-2"></i>

<small class="text-muted ml-3">

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

<i class="fas fa-star text-warning"></i>

</small>

<span class="badge badge-secondary mt-2">148 Terjual</span>

</div>

<div class="card-footer">

<small>
<button class="btn btn-sm text-dark" style="background-color:#FF4500">

<i class="fas fa-shopping-cart"></i>&nbsp;beli&nbsp;</button>

</small>

<span class="float-right">

Kota Jakarta

</span>

</div>

</div>

</div>

<!--8. tutup satu item-->

</div><!--tutup row2-->

</div><!--tutup col-md-10-->

</div><!--tutup row product-->

<div class="row mt-3" style="background-color:#FF7F50">

<div class="col-md-2 ml-2 mb-2">

<small>

<b>LAYANAN PELANGGAN</b><br>

Bantuan<br>

Contact<br>

Kebijakan Privasi<br>

Tentang Kami<br>

Cara Pembayaran<br>

</small>

</div>

<div class="col-md-2 ml-2">

<small>

<b>PEMBAYARAN</b><br>

<img src="bootstrap/images/bank/bca.png" width="40" height="20">

<img src="bootstrap/images/bank/mandiri.png" width="40" height="30"><br>

<img src="bootstrap/images/bank/bni.png" width="40" height="15">

<img src="bootstrap/images/bank/bri.png" width="40" height="30"><br>

<img src="bootstrap/images/bank/maybank.png" width="40" height="20">

</small>

</div>
<div class="col-md-2 ml-2">

<small>

<b>IKUTI KAMI</b><br>

<i class="fab fa-facebook fa-2x"></i>

<i class="fab fa-instagram fa-2x"></i>

<i class="fab fa-twitter fa-2x"></i>

<i class="fab fa-whatsapp-square fa-2x"></i>

<i class="fab fa-telegram fa-2x"></i>

</small>

</div>

<div class="col-md-2 ml-2">

<small>

<b>PENGIRIMAN</b><br>

<img src="bootstrap/images/pengiriman/jne.png" width="40" height="20">

<img src="bootstrap/images/pengiriman/jnt.png" width="40" height="30"><br>

<img src="bootstrap/images/pengiriman/tiki.png" width="40" height="15">

<img src="bootstrap/images/pengiriman/pos.png" width="40" height="30"><br>

</small>

</div>

<div class="col-md-3 ml-2 mt-5">

<div class="mt-3">

<b>&copy;2019 Copyright PhoneShope by ADR</b>

</div>

</div>

</div><!-- tutup row logobank -->

</div><!-- Tutup Container -->

<!-- Optional JavaScript -->

<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="bootstrap/js/jquery.min.js"></script>

<script src="bootstrap/js/popper.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>