TUGAS UAS WEB PROGRAMMING
Oke sahabat internet
Selamat datang di
blog saya
Kali ini saya akan
men-share website yang telah saya kerjakan dengan teman sekelompok.
Ini adalah hasil dari codingan nya :
Oke teman teman,
website kami dari gambar di atas
tentang penjualan alat alat gaming
Seperti yang teman teman lihat gambar di atas tersedia
-
Keyboard gaming
-
Mouse gaming
-
Monitor gaming
-
Kursi gaming
-
Dll
Oiya, website tersebut dibuat menggunakan sublime text ya
teman teman. Karna lebih enak menggunakan sublime text dibandingkan notepad.
oke, untuk codingan nya ada di bawah:
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link
rel="stylesheet" type="text/css"
href="fontawesome/css/all.min.css">
<link
rel="stylesheet" type="text/css"
href="style.css">
<link
rel="icon" type="image/png"
href="img/logoweb.png">
<title>Gaming Shop</title>
</head>
<body>
<!-- Navbar -->
<nav
class="navbar navbar-expand-lg navbar-light navbag fixed-top">
<div
class="container">
<h3><a
href="index.html"><img src="img/logoweb.png"
class="logo"></a></h3>
<a
class="navbar-brand font-weight-bold" href="index.html">GAMING
SHOP</a>
<button
class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul
class="navbar-nav menu">
<li
class="nav-item active">
<a
class="nav-link" href="index.html">Beranda <span
class="sr-only">(current)</span></a>
</li>
<li>
<a
class="nav-link" href="pages/tentangkami.html">Tentang
Kami <span class="sr-only">(current)</span></a>
</li>
<li>
<a
class="nav-link" href="pages/hubungikami.html">Hubungi
Kami <span class="sr-only">(current)</span></a>
</li>
</ul>
<a
href="" class="btn btn-primary my-2 my-sm-0 login"
data-target="#login" data-toggle="modal"
type="submit">Login</a>
</div>
</div>
</nav>
<!-- Akhir Navbar -->
<!-- Awal Modal Login -->
<div class="modal fade" id="login"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Login
Disini</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<form>
<div
class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control"
id="exampleInputEmail1" aria-describedby="emailHelp"
placeholder="Masukkan Email">
<small id="emailHelp" class="form-text
text-muted">Kita tidak akan menyebarkan email anda ke
siapapun.</small>
</div>
<div
class="form-group">
<label
for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Masukkan
Password">
</div>
<div
class="form-group form-check">
<input
type="checkbox" class="form-check-input"
id="exampleCheck1">
<label class="form-check-label"
for="exampleCheck1">Check me out</label>
</div>
<button
type="submit" class="btn
btn-primary">SIMPAN</button>
<button type="reset"
class="btn btn-danger">BATAL</button>
</form>
</div>
</div>
</div>
</div>
<!-- Akhir Modal Login -->
<!-- List Group -->
<div
class="row mt-5 no-gutters">
<div
class="col-md-2 bg-light">
<ul class="list-group
list-group-flush mt-2 p-2 pt-4">
<li
class="list-group-item kategori"> <i class="fas
fa-list"></i> KATEGORI PRODUK</li>
<li
class="list-group-item"><a class="list-group-link"
href="katepro/pg.html"> <i class="fas fa-angle-right"></i>
Peralatan Gaming</a></li>
<li
class="list-group-item"><a class="list-group-link"
href="katepro/plh.html"> <i class="fas
fa-angle-right"></i> PC / Laptop Hardware</a></li>
<li
class="list-group-item"><a class="list-group-link"
href="katepro/mg.html"> <i class="fas
fa-angle-right"></i> Monitor Gaming</a></li>
<li
class="list-group-item"><a class="list-group-link"
href="katepro/mkg.html"> <i class="fas
fa-angle-right"></i> Meja & Kursi Gaming</a></li>
<li
class="list-group-item"><a class="list-group-link"
href="katepro/tg.html"> <i class="fas
fa-angle-right"></i> Tas Gaming</a></li>
</ul>
</div>
<!-- Akhir List Group -->
<!-- Carousel -->
<div
class="col-md-10 mt-4">
<div
class="bd-example">
<div
id="carouselExampleCaptions" class="carousel slide"
data-ride="carousel">
<ol
class="carousel-indicators">
<li
data-target="#carouselExampleCaptions" data-slide-to="0"
class="active"></li>
<li
data-target="#carouselExampleCaptions"
data-slide-to="1"></li>
<li
data-target="#carouselExampleCaptions"
data-slide-to="2"></li>
</ol>
<div
class="carousel-inner">
<div
class="carousel-item active col-md-12 col-sm-12">
<img src="img/slide/slide1.jpg" class="d-block
w-100" alt="..." width="722"
height="498">
<div class="carousel-caption d-none d-md-block">
<h5 class="font-weight-bold">FULL SET KOMPUTER
GAMING</h5>
<p>Rasakan sensasi bermain game dengan dipenuhi warna dari RGB
gaming</p>
</div>
</div>
<div
class="carousel-item col-md-12 col-sm-12">
<img src="img/slide/slide2.jpg" class="d-block
w-100" alt="..." width="722"
height="498">
<div class="carousel-caption d-none d-md-block">
<h5 class="font-weight-bold">LAPTOP GAMING
MSI</h5>
<p>Salah satu laptop gaming tergahar di abad ini</p>
</div>
</div>
<div
class="carousel-item col-md-12 col-sm-12">
<img src="img/slide/slide3.jpg" class="d-block
w-100" alt="..." width="722"
height="498">
<div
class="carousel-caption d-none d-md-block">
<h5 class="font-weight-bold">FULL SET GEAR AKSESORIS
GAMING RGB</h5>
<p>Kerennya bermain game dengan full set gear gaming dengan warna
RGB</p>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleCaptions" role="button"
data-slide="prev">
<span
class="carousel-control-prev-icon"
aria-hidden="true"></span>
<span
class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleCaptions" role="button"
data-slide="next">
<span
class="carousel-control-next-icon"
aria-hidden="true"></span>
<span
class="sr-only">Next</span>
</a>
</div>
</div>
<!-- Akhir Carousel -->
<h4
class="text-center font-weight-bold m-4">
<i
class="fab fa-product-hunt icon4 mr-2"
data-toggle="tooltip" title="Produk Terbaru"></i>
PRODUK TERBARU
</h4>
<div
class="row mx-auto">
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk1"
data-toggle="modal"><img
src="img/kategoriproduk/peralatangaming/pg2.jpg" class="card-img-top"
alt="..."></a>
<div
class="card-body bg-light">
<h5
class="card-title">Mouse Corsair Wireless MM1000 Qi</h5>
<p
class="card-text">Mouse keluaran terbaru dari corsair yang nyaman
digunakan</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star-half-alt"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk1"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger"
data-target="#beli1" data-toggle="modal">Rp.
1.129.000</a>
</div>
</div>
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk2"
data-toggle="modal"><img
src="img/kategoriproduk/peralatangaming/pg3.jpg"
class="card-img-top" alt="..."></a>
<div
class="card-body bg-light">
<h5
class="card-title">Headset MSI DS502 Logo Nyala</h5>
<p
class="card-text">Headset yang sangat jernih yang sudah
menggunakan virtual 7.1 surround sound</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk2"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger" data-target="#beli2"
data-toggle="modal">Rp. 749.000</a>
</div>
</div>
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk3"
data-toggle="modal"><img
src="img/kategoriproduk/pclaptophardware/plh3.jpg"
class="card-img-top" alt="..."
height="250"></a>
<div
class="card-body bg-light">
<h5
class="card-title">Laptop Acer Predator 15</h5>
<p
class="card-text">Laptop gaming acer predator yang memiliki
performa tinggi dengan RAM 8GB</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk3"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger"
data-target="#beli3" data-toggle="modal" >Rp.
15.250.000</a>
</div>
</div>
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk4"
data-toggle="modal"><img
src="img/kategoriproduk/pclaptophardware/plh4.jpg"
class="card-img-top" alt="..."
height="250"></a>
<div
class="card-body bg-light">
<h5
class="card-title">Sades Power Supply 400W</h5>
<p
class="card-text">Power supply sades 400W dengan harga terjangkau
dan hebat daya</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i class="fas
fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk4"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger"
data-target="#beli4" data-toggle="modal">Rp.
400.000</a>
</div>
</div>
</div>
<div
class="row mx-auto mt-3">
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk5"
data-toggle="modal"><img
src="img/kategoriproduk/tasgaming/tg2.jpg"
class="card-img-top" alt="..."></a>
<div
class="card-body bg-light">
<h5
class="card-title">Backpack Expert Dota 2</h5>
<p
class="card-text">Tas gaming yang cocok untuk para gamers untuk
tempat peralatan gaming</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star-half-alt"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk5"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger"
data-target="#beli5" data-toggle="modal">Rp.
280.000</a>
</div>
</div>
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk6"
data-toggle="modal"><img
src="img/kategoriproduk/mejakursigaming/mkg2.jpg"
class="card-img-top" alt="..."></a>
<div
class="card-body bg-light">
<h5
class="card-title">Meja Gaming Razer (Hijau &
Hitam)</h5>
<p
class="card-text">Meja yang sangat cocok untuk para gemers dengan
warna hijau hitam</p>
<i class="fas
fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star-half-alt"></i><br>
<a
href="#" class="btn btn-primary" data-target="#produk6"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger"
data-target="#beli6" data-toggle="modal">Rp.
5.500.000</a>
</div>
</div>
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk7"
data-toggle="modal"><img
src="img/kategoriproduk/mejakursigaming/mkg3.jpg"
class="card-img-top" alt="..."></a>
<div
class="card-body bg-light">
<h5
class="card-title">Kursi Gaming DXRACER</h5>
<p
class="card-text">Kursi gaming yang sering dipakai youtuber dan
para gamers lainnya</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i>
<i
class="far fa-star"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk7"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger" data-target="#beli7"
data-toggle="modal">Rp. 4.480.000</a>
</div>
</div>
<div
class="card mr-2 ml-2" style="width: 16rem;">
<a
href="" data-target="#produk8"
data-toggle="modal"><img
src="img/kategoriproduk/monitorgaming/mg2.jpg"
class="card-img-top" alt="..."></a>
<div
class="card-body bg-light">
<h5
class="card-title">Monitor Asus ROG Swift pg27vq</h5>
<p
class="card-text">Monitor gaming dengan resolusi besar dan layar
IPS yang sangat jernih</p>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star"></i>
<i
class="fas fa-star-half-alt"></i><br>
<a
href="#" class="btn btn-primary"
data-target="#produk8"
data-toggle="modal">Detail</a>
<a
href="#" class="btn btn-danger"
data-target="#beli8" data-toggle="modal">Rp.
12.675.000</a>
</div>
</div>
</div>
<div class="modal
fade" id="produk1" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="img/kategoriproduk/peralatangaming/pg2.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<th>Nama Produk</th>
<td>Mouse Corsair Wireless MM1000 Qi</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>Corsair</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Gratis</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>50 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 1.129.000</td>
</tr>
</table>
</div>
</div>
</div>
<div
class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button type="button"
class="btn btn-danger" data-target="#beli1"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="modal fade" id="beli1" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="close"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA
INGIN MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div
class="modal fade" id="produk2" tabindex="-1"
role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="img/kategoriproduk/peralatangaming/pg3.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<th>Nama Produk</th>
<td>Headset MSI DS502 Logo Nyala</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>MSI</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Gratis</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far
fa-star"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>100 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 749.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button
type="button" class="btn btn-danger"
data-target="#beli2"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli2"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN
MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div class="modal fade" id="produk3"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img
src="img/kategoriproduk/pclaptophardware/plh3.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<th>Nama Produk</th>
<td>Laptop Acer Predator 15</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>Acer</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Gratis</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>50 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 15.250.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button
type="button" class="btn btn-danger"
data-target="#beli3"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli3"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN
MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div class="modal fade" id="produk4"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="img/kategoriproduk/pclaptophardware/plh4.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<th>Nama Produk</th>
<td>Sades Power Supply 400W</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>Mousepad (SteelSeries)</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Rp. 10.000</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>200 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 400.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button
type="button" class="btn btn-danger"
data-target="#beli4"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli4"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN
MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div class="modal fade" id="produk5"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="img/kategoriproduk/tasgaming/tg2.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<th>Nama Produk</th>
<td>Backpack Expert Dota 2</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>Steel Series</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Rp. 9.000</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas
fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</td>
</tr>
<tr>
<th>Stock
Produk</th>
<td>100 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 280.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button type="button"
class="btn btn-danger" data-target="#beli5"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli5"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN
MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div class="modal fade" id="produk6"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="img/kategoriproduk/mejakursigaming/mkg2.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table
table-borderless">
<tr>
<th>Nama Produk</th>
<td>Meja Gaming Razer (Hijau & Hitam)</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>Razer</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Gratis</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>30 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 5.500.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button
type="button" class="btn btn-danger"
data-target="#beli6"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli6"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN
MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div class="modal fade" id="produk7"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img src="img/kategoriproduk/mejakursigaming/mkg3.jpg"
width="380" height="380">
</div>
<div class="col-md-6">
<table class="table
table-borderless">
<tr>
<th>Nama Produk</th>
<td>Kursi Gaming DXRACER</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>DXRACER</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Gratis</td>
</tr>
<tr>
<th>Rating
Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far
fa-star"></i>
<i class="far fa-star"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>15 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 4.480.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button
type="button" class="btn btn-danger"
data-target="#beli7" data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli7"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN
MEMBELI MOHON UNTUK LOGIN TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<div class="modal fade" id="produk8"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog modal-lg" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5
class="modal-title" id="exampleModalLabel">Detail
Produk</h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
<div
class="modal-body">
<div class="row">
<div class="col-md-6">
<img
src="img/kategoriproduk/monitorgaming/mg2.jpg" width="380"
height="380">
</div>
<div class="col-md-6">
<table class="table table-borderless">
<tr>
<th>Nama
Produk</th>
<td>Monitor Asus ROG Swift pg27vq</td>
</tr>
<tr>
<th>Merk Produk</th>
<td>Asus</td>
</tr>
<tr>
<th>Biaya Ongkir</th>
<td>Gratis</td>
</tr>
<tr>
<th>Rating Produk</th>
<td>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas
fa-star-half-alt"></i>
</td>
</tr>
<tr>
<th>Stock Produk</th>
<td>30 psc</td>
</tr>
<tr>
<th>Harga</th>
<td>Rp. 12.675.000</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div
class="modal-footer">
<button
type="button" class="btn btn-secondary"
data-dismiss="modal">Kembali</button>
<button
type="button" class="btn btn-danger"
data-target="#beli8"
data-toggle="modal">Beli</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="beli8"
tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div
class="modal-dialog" role="document">
<div
class="modal-content">
<div
class="modal-header">
<h5 class="modal-title"
id="exampleModalLabel"></h5>
<button
type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span
aria-hidden="true">×</span>
</button>
</div>
<div
class="modal-body">
JIKA INGIN MEMBELI MOHON UNTUK LOGIN
TERLEBIH DAHULU!
</div>
</div>
</div>
</div>
<!-- Awal Footer -->
<footer
class="bg-dark text-white p-5">
<div
class="row">
<div
class="col-md-4">
<h5>TENTANG KAMI</h5>
<p>
Ini
adalah website yang kami buat untuk pelanggan/costumer yang sedang mencari
barang-barang kebutuhan gaming dimulai dari laptop gaming, komputer gaming, cpu
gaming dan lain sebagainya dan semuanya itu dikhususkan untuk ngegame, tapi
bisa juga untuk kebutuhan lainnya tentunya, selain itu banyak aksesoris gaming
seperti, bangku gaming, meja gaming dan lain-lain, demikian sedikit info
tentang kami, Selamat Berbelanja :) Happy Gaming :D
</p>
</div>
<div class="col-md-4">
<h5>MITRA KERJASAMA</h5>
<ul>
<li>GOJEK</li>
<li>GRAB</li>
<li>JNE</li>
<li>PT. POS INDONESIA</li>
<li>TIKI</li>
</ul>
</div>
<div class="col-md-4">
<h5>HUBUNGI KAMI</h5>
<ul>
<li>021-4433-2223</li>
<li>gamingshop@gmail.com</li>
</ul>
</div>
</div>
</footer>
<!-- Akhir Footer -->
<!-- Awal Copyright -->
<div
class="col-md-12 copyright text-center text-white font-weight-bold
copyright">
<p>Developed by <a href="index.html">Gaming Shop
Indonesia</a> Copyright <i class="far
fa-copyright"></i> 2019</p>
</div>
<!-- Akhir Copyright -->
<!-- Optional
JavaScript -->
<!-- jQuery
first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script
type="text/javascript" src="script.js"></script>
</body>
</html>
Oke teman teman, semoga codingan nya bermanfaat
ya...........
See you......
Komentar
Posting Komentar