<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Book Shop</title>
</head>
<body>
<ul class="nav justify-content-end " style="background-color: #445b68;" >
<li class="nav-item">
<a class="nav-link" href="#">Track Order</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<nav class="navbar navbar-dark " style="background-color: #445b68;">
<a class="navbar-brand">
<img src="img/logo buku 1.png" width="200px" alt="" >
</a>
<form class="form-inline justify-content-end">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fa fa-search"></i></button>
</form>
</nav>
<div class="container-fluid">
<ul class="nav justify-content-center mt-3 navbar-dark bg-dark">
<li class="nav-item">
<a class="nav-link active" href="index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="shop.html">SHOP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BLOG</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT US</a>
</li>
</ul>
<div class="row">
<div class="col">
<ul class="list-group list-group-flush">
<li class="list-group-item">Novel</li>
<li class="list-group-item">Komik</li>
<li class="list-group-item">Ensiklopedia</li>
<li class="list-group-item">Antologi</li>
<li class="list-group-item">Dongeng</li>
<li class="list-group-item">Biografi</li>
<li class="list-group-item">Novelet</li>
<li class="list-group-item">Panduan</li>
<li class="list-group-item">Majalah</li>
<li class="list-group-item">Tafsir</li>
<li class="list-group-item">Karya Ilmiah</li>
<li class="list-group-item">Fotografi</li>
<li class="list-group-item">Nomik</li>
<li class="list-group-item">Panduan</li>
<li class="list-group-item">Cergam</li>
</ul>
</div>
<div class="col-8">
<div class="jumbotron">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/boko.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h1>Welcome to Book Shop !</h1>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/download.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/buku1.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="card-deck">
<div class="card">
<img src="img/world.PNG" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Buku Encylopedia</h5>
<p class="card-text">Buku tentang Encylopedia dunia. Buku telah tersimpan lama sehingga agak berdebu</p>
<p class="card-text"><small class="text-muted">harga Rp 129.000</small></p>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Beli</button>
</div>
</div>
<div class="card">
<img src="https://github.com/EEB12/catalog/blob/master/img/buku.PNG" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Buku Encylopedia Luar Angkasa</h5>
<p class="card-text">Buku Encylopedia mengenai luar angkasa.</p>
<p class="card-text"><small class="text-muted">harga Rp 89.000</small></p>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Beli</i></button>
</div>
</div>
<div class="card">
<img src="img/kamus.PNG" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Kamus bahasa Inggris</h5>
<p class="card-text">buku kamus bahasa inggris indonesia lengkap.</p>
<p class="card-text"><small class="text-muted">harga Rp 132.000</small></p>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Beli</button>
</div>
</div>
</div>
</div>
<div class="col">
<ul class="list-group list-group-flush pb-5">
<li class="list-group-item">Feature 1</li>
<li class="list-group-item">Feature 2</li>
<li class="list-group-item">Feature 3</li>
<li class="list-group-item">Feature 4</li>
<li class="list-group-item">Feature 5</li>
<li class="list-group-item">Feature 6</li>
</ul>
<form class="pt-5">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your information with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</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">Submit</button>
</form>
<!-- <div class="col-16 "style="background-color: #e9ecef; height: 350px; border-radius: 5px;">
<ul class="list-group mt-5">
<li class="list-group-item">Login</li>
</ul>
<label> Username</label>
<input type="text" name = "first"><br> <br>
<label> Password</label>
<input type="text" name = "last"><br> <br>
</div> -->
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS-->
</body>
</html>