Fix naming

This commit is contained in:
Moe Poi ~ 2021-09-13 16:00:29 +07:00
parent 6a521648b4
commit 1a248471cb
2 changed files with 47 additions and 163 deletions

View file

@ -1,131 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>individualProductPage</title>
<link rel="stylesheet" href="styleIndividualProduct.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Details Products</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<a href="/loginPage.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
<div class="product">
<div class="img"style="flex: 1;">
<img src="assets/sepatu.png" max-width="100%" height="auto">
</div>
<div class="description" style="flex: 1;">
<div>
<h1>Fashione Shoes White</h1>
</div>
<div>
<p>
Bahan MeshReady Size 39-43 Silahkan order Sesuai dengan variasi yang diinginkan! Tidak menerima perubahan Warna dan size
lewat Chat!!! Toko Pandu Store menjual Berbagai Macam Perlengkapan dan Keperluan Anda sehari-hari! Silahkan Kunjungi Toko
kami Pandu Store untuk mengetahui apa saja barang yang kami Jual. Kebanyakan Barang yang Kami jual adalah Barang hasil Produksi
sendiri dengan mengutamakan Kualitas dan kenyamanan saat digunakan Pembeli! Kesesuaian Foto 90% Membeli = Sudah Membaca informasi
ini Happy Shoping!!!
</p>
</div>
<div class="sizeSepatu">
<form>
SIZE
<br>
<input type="radio" name="size"> 7 &emsp; &emsp;
<input type="radio" name="size"> 8 &emsp; &emsp;
<input type="radio" name="size"> 9 &emsp; &emsp;
</form>
</div>
<div style="display: flex; color: black;">
<button id="myBtn" class="button">Add to Cart</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2><b>SUCCESSFULLY ADDED TO BAG</b></h2>
<div style="display: flex; padding-top: 10px;">
<img src="assets/sepatu.png" alt="" width="200px" height="200px">
<div style="padding-left: 50px; padding-right: 50px;">
<h3>Fashione Shoes White</h3>
<br>
<h5><b>Rp 1.999.999,00</b></h5>
<P>Total : 1</P>
</div>
<div style="padding-left: 50px; border-left: 1px solid black; padding-right: 50px;">
<h5><b>Your Bag</b></h5>
<br>
<p style="border-bottom: 1px solid black ;">Product Cost : Rp 1.999.999,00</p>
<p>Total Product Cost : Rp 1.999.999,00</p>
</div>
<div style="padding-left: 50px; border-left: 1px solid black;">
<a href="bag.html"> <button class="button" style="background-color: aqua;">Bag</button></a>
<a href="checkout.html"> <button class="button" style="background-color: green; color: white" >Checkout</button></a>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
</div>
</div>
<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.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>

View file

@ -1,21 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Page</title>
<title>Product</title>
<link rel="stylesheet" href="styleIndividualProduct.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Details Products</a>
<a class="navbar-brand" href="#">Product</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
@ -36,14 +39,15 @@
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<a href="/login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="/login.html"><button type="button"
class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
<div class="product">
<div style="flex: 1;">
<div class="img" style="flex: 1;">
<img src="assets/sepatu.png" max-width="100%" height="auto">
</div>
<div class="description" style="flex: 1;">
@ -52,10 +56,14 @@
</div>
<div>
<p>
Bahan MeshReady Size 39-43 Silahkan order Sesuai dengan variasi yang diinginkan! Tidak menerima perubahan Warna dan size
lewat Chat!!! Toko Pandu Store menjual Berbagai Macam Perlengkapan dan Keperluan Anda sehari-hari! Silahkan Kunjungi Toko
kami Pandu Store untuk mengetahui apa saja barang yang kami Jual. Kebanyakan Barang yang Kami jual adalah Barang hasil Produksi
sendiri dengan mengutamakan Kualitas dan kenyamanan saat digunakan Pembeli! Kesesuaian Foto 90% Membeli = Sudah Membaca informasi
Bahan MeshReady Size 39-43 Silahkan order Sesuai dengan variasi yang diinginkan! Tidak menerima
perubahan Warna dan size
lewat Chat!!! Toko Pandu Store menjual Berbagai Macam Perlengkapan dan Keperluan Anda sehari-hari!
Silahkan Kunjungi Toko
kami Pandu Store untuk mengetahui apa saja barang yang kami Jual. Kebanyakan Barang yang Kami jual
adalah Barang hasil Produksi
sendiri dengan mengutamakan Kualitas dan kenyamanan saat digunakan Pembeli! Kesesuaian Foto 90%
Membeli = Sudah Membaca informasi
ini Happy Shoping!!!
</p>
</div>
@ -94,8 +102,10 @@
</div>
<div style="padding-left: 50px; border-left: 1px solid black;">
<a href="bag.html"> <button class="button" style="background-color: aqua;">Bag</button></a>
<a href="checkout.html"> <button class="button" style="background-color: green; color: white" >Checkout</button></a>
<a href="bag.html"> <button class="button"
style="background-color: aqua;">Bag</button></a>
<a href="checkout.html"> <button class="button"
style="background-color: green; color: white">Checkout</button></a>
</div>
</div>
@ -107,8 +117,12 @@
<br>
</div>
</div>
<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.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" 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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
<script>
var modal = document.getElementById("myModal");
@ -116,19 +130,20 @@
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function() {
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function(event) {
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>