Catalog

Pada kali ini saya diberikan tugas untuk membuat web katalog produk menggunakan HTML dan CSS. Berikut adalah tampilan dari web yang saya buat.


dan untk source code seperti berikut
shop.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">
<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>
view raw index.html hosted with ❤ by GitHub
<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>
<br>
<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>
<br>
<div class="col-8">
<br>
<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="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 class="card">
<img src="img/spanish.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Kamus bahasa Spanyol</h5>
<p class="card-text">buku kamus bahasa Spanyol Inggris 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>
view raw shop.html hosted with ❤ by GitHub


 









Comments

Post a Comment

Popular posts from this blog

Login Boootstrap

Image
  TUGAS 6 : MEMBUAT FORM LOGIN DAN CONTACT US Nama : Taqarra Rayhan Irfandianto NRP : 05111940000121 Kelas : PWEB - B untuk source code dapat diliat pada link  Github  dan untuk halaman website dapat diliat pada  Web Login dan contact Berikut adalah tampilan dari halaman login dan contact
Read more

Tugas 3 RK D

Maneuvering Characteristics Augmentation System (MCAS) adalah sistem otomatis yang diproduksi oleh Boeing untuk menstabilkan pesawat. Sistem ini akan mencoba untuk mencounter pergerakan hidung pesawat yang cenderung keatas ketika beberapa manuver yang diakibatkan oleh besarnya ukuran mesin pesawat. Pergerakan ini dapat membahaakan pesawat karena berisiko membuat pesawat kehilangan daya angkat Cara Kerja Sistem MCAS akan menurunkan hidung pesawat dengan cara mengatur roda penyesuaian (trim) agar horizontal stabilizer (sayap kecil di ekor pesawat) berputar, membuat hidung pesawat turun. Sistem ini akan aktif saat: Angle of attack besar Autopilot off Flap (sirip tambahan di sayap) tidak menjulur keluar Berbelok terlalu tajam (miring).      MCAS akan menggerakkan horizontal stabilizer ke atas sebesar 0,27 derajat oer detik. Sudut terbesar yang bisa dibuat adalah 2,5 derajat yang membutuhkan waktu 9,26 detik. Sistem ini baru akan non-aktif saat angle of attack mengecil, a...
Read more
Image
Membuat Validasi Form Nama : Taqarra Rayhan Irfandianto NRP : 05111940000121 Kelas : PWEB - B Link Source Code : eeb12/PWEB-tugasJS Website : Website Form pendaftaran Pada kesempatan kali ini saya mendapatkan tugas untuk mengimplementasikan Javascript dan HTML dalam pembuatan validasi form. Berikut adalah tampilan websitenya :
Read more