From 1daaf8acb9feed04e3b24c2fc1eef93cce81bba3 Mon Sep 17 00:00:00 2001
From: dshrat <dshrat29@gmail.com>
Date: Tue, 14 Sep 2021 19:24:32 +0700
Subject: [PATCH] Modif product and bag page
---
bag.html | 144 ++++++++++--------
checkout.html | 4 +-
product.html | 129 ++++++++--------
stylebag.css | 9 +-
...eIndividualProduct.css => styleproduct.css | 33 +++-
5 files changed, 181 insertions(+), 138 deletions(-)
rename styleIndividualProduct.css => styleproduct.css (78%)
diff --git a/bag.html b/bag.html
index 50fd4d1..0bdd6d6 100644
--- a/bag.html
+++ b/bag.html
@@ -4,7 +4,7 @@
<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>Bag</title>
+ <title>bag</title>
<link rel="stylesheet" href="stylebag.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="shortcut icon" type="image/png" href="assets/favicon.png"/>
@@ -43,70 +43,86 @@
<h3>Shopping Bag</h3>
</div>
- <div class="full-body">
- <div class="body-left">
- <div class="bag-list">
- <h5 style="margin-right: 300px;"><b>Item</b></h5>
- <h5 style="margin-right: 100px;"><b>Qty</b></h5>
- <h5 style="margin-right: 150px;"><b>Item Price</b></h5>
- <h5><b>Sub Total</b></h5>
- </div>
-
- <div class="bag-list">
- <div style="margin-right: 115px; display: flex;">
- <img src="assets/sepatu.png" alt="" height="80px" width="80px">
- <div style="margin-left: 30px;">
- <p>Fashione Shoes</p>
- <p>Size : 8</p>
- <p>Qty : 1</p>
- </div>
- </div>
- <p style="margin-right: 100px;">Qty</p>
- <p style="margin-right: 130px;">Rp 1.999.999,00</p>
- <p>Rp 1.999.999,00</p>
- </div>
-
- <div class="bag-list">
- <div style="margin-right: 115px; display: flex;">
- <img src="assets/sepatu.png" alt="" height="80px" width="80px">
- <div style="margin-left: 30px;">
- <p>Fashione Shoes</p>
- <p>Size : 8</p>
- <p>Qty : 1</p>
- </div>
- </div>
- <p style="margin-right: 100px;">Qty</p>
- <p style="margin-right: 130px;">Rp 1.999.999,00</p>
- <p>Rp 1.999.999,00</p>
- </div>
- </div>
- <div class="body-right">
- <div class="border">
- <h5 style="text-align: center; border-bottom: 1px solid white; margin: 10px;"><b>Order Summary</b></h5>
- <div class="container">
- <div class="row justify-content-between" style="display: flex; margin: 10px">
- <p>Sub Total</p>
- <p>1.999.999,00</p>
- </div>
- </div>
- <div class="container">
- <div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
- <p>Shipping</p>
- <p>-</p>
- </div>
- </div>
-
- <div class="container">
- <div class="row justify-content-between" style="display: flex; margin: 10px">
- <p>Estimate</p>
- <p>1.999.999,00</p>
- </div>
- </div>
- </div>
- <a href="checkout.html"> <button class="button">Checkout</button></a>
- </div>
- </div>
+ <div class="full-body">
+ <div class="body-left" >
+ <table class="table" style="color: white; margin-right: 48px;">
+ <thead>
+ <tr>
+ <th scope="col">Item</th>
+ <th scope="col">Qty</th>
+ <th scope="col">Item Price</th>
+ <th scope="col">Sub Total</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="" height="80px" width="80px">
+ <div style="margin-left: 30px;">
+ <p>Fashione Shoes</p>
+ <p>Size : 8</p>
+ <p>Qty : 1</p>
+ </div></th>
+ <td>Qty</td>
+ <td>Rp 1.999.999,00</td>
+ <td>Rp 1.999.999,00</td>
+ </tr>
+ <tr>
+ <th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="" height="80px" width="80px">
+ <div style="margin-left: 30px;">
+ <p>Fashione Shoes</p>
+ <p>Size : 8</p>
+ <p>Qty : 1</p>
+ </div></th>
+ <td>Qty</td>
+ <td>Rp 1.999.999,00</td>
+ <td>Rp 1.999.999,00</td>
+ </tr>
+ <tr>
+ <th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="" height="80px" width="80px">
+ <div style="margin-left: 30px;">
+ <p>Fashione Shoes</p>
+ <p>Size : 8</p>
+ <p>Qty : 1</p>
+ </div></th>
+ <td>Qty</td>
+ <td>Rp 1.999.999,00</td>
+ <td>Rp 1.999.999,00</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="body-right" style="margin-left: 48px;">
+ <div class="border">
+ <h5 style="text-align: center; border-bottom: 1px solid white; margin: 10px;"><b>Order Summary</b></h5>
+ <div class="container">
+ <div class="row justify-content-between" style="display: flex; margin: 10px">
+ <p>Sub Total</p>
+ <p>1.999.999,00</p>
+ </div>
+ </div>
+ <div class="container">
+ <div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
+ <p>Shipping</p>
+ <p>-</p>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="row justify-content-between" style="display: flex; margin: 10px">
+ <p>Estimate</p>
+ <p>1.999.999,00</p>
+ </div>
+ </div>
+ </div>
+ <a href="checkout.html"> <button class="button">Checkout</button></a>
+ </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>
diff --git a/checkout.html b/checkout.html
index 80eefb6..76ead1e 100644
--- a/checkout.html
+++ b/checkout.html
@@ -4,7 +4,9 @@
<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>Checkout</title>
+ <title>checkout</title>
+ <link rel="stylesheet" href="stylecheckout.css">
+
</head>
<body>
diff --git a/product.html b/product.html
index d399b82..c4874e1 100644
--- a/product.html
+++ b/product.html
@@ -4,8 +4,8 @@
<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">
+ <title>product</title>
+ <link rel="stylesheet" href="styleproduct.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">
@@ -39,70 +39,71 @@
</div>
</nav>
- <div class="product">
- <div class="img">
- <img src="assets/sepatu.png" style="width: 350px; height: auto">
- </div>
- <div class="description">
- <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    
- <input type="radio" name="size"> 8    
- <input type="radio" name="size"> 9    
- </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">×</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 class="card" style="background-color: #212226 ; border-radius: 20px; margin-top: 20px; ">
+ <div class="product">
+ <img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" />
+ <div class="description">
+ <div style="margin-left: 20px;">
+ <h1>Fashione Shoes White</h1>
</div>
+ <div>
+ <p class="card-body" >
+ 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    
+ <input type="radio" name="size"> 8    
+ <input type="radio" name="size"> 9    
+ </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">×</span>
+ <h2><b>SUCCESSFULLY ADDED TO BAG</b></h2>
+ <div class="konten" >
+ <img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" width="200px" height="200px">
+ <div style="padding-left: 20px; padding-right: 20px;">
+ <h3>Fashione Shoes White</h3>
+ <br>
+ <h5><b>Rp 1.999.999,00</b></h5>
+ <P>Total : 1</P>
+ </div>
+
+ <div style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
+ <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: 20px; 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>
- <br>
- <br>
- </div>
+ </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>
diff --git a/stylebag.css b/stylebag.css
index 59f99ec..50b02a5 100644
--- a/stylebag.css
+++ b/stylebag.css
@@ -35,14 +35,17 @@
.body-right{
- margin-left: 20px;
+ margin-right: 48px;
color: white;
width: 30%;
height: 100%;
}
+
+
.body-left{
margin-left: 48px;
+ margin-right: 48px;
}
.button{
@@ -59,5 +62,9 @@
.full-body{
display: grid !important;
}
+
+ .body-right{
+ margin-left: 48px;
+ }
}
diff --git a/styleIndividualProduct.css b/styleproduct.css
similarity index 78%
rename from styleIndividualProduct.css
rename to styleproduct.css
index def1a96..e00b33c 100644
--- a/styleIndividualProduct.css
+++ b/styleproduct.css
@@ -16,7 +16,6 @@
background-color: 1b1c1e;
font-family: 'Poppins', sans-serif;
display: flex;
- margin-left: 48px;
justify-content: left;
text-align: left;
}
@@ -25,7 +24,7 @@
color: #ffffff;
font-family: 'Poppins', sans-serif;
margin-top: 20px;
- margin-left: 40px;
+ margin-left: 48px;
justify-content: center;
text-align: left;
}
@@ -39,6 +38,7 @@
text-decoration: none;
display: inline-block;
margin: 4px 2px;
+ margin-left: 20px;
cursor: pointer;
border-radius: 16px;
}
@@ -79,21 +79,38 @@
cursor: pointer;
}
- .img{
- margin-top: 20px;
+ .card{
+ background-color: 1b1c1e;
+ font-family: 'Poppins', sans-serif;
+ display: flex;
+ margin-left: 48px;
+ margin-right: 48px;
+ justify-content: left;
+ text-align: left;
}
+ .sizeSepatu{
+ margin-left: 20px;
+ }
+ .konten{
+ display: flex;
+ padding-top: 10px;
+ }
+
@media only screen and (max-width: 1000px){
.product{
display: grid;
}
- .img{
- width: 500px;
- height: auto;
- }
.description{
margin-left: 0px;
+ word-break: break-all;
+ }
+}
+
+@media (max-width: 900px){
+ .konten{
+ display: grid;
}
}