nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2025-04-15 18:27:08 +02:00
Code Issues Projects Releases Packages1 Wiki Activity

Modif product, bag and checkout

Browse source
This commit is contained in:
dshrat 2021-09-13 16:31:07 +07:00
parent c0dc4f5d95
commit ba2609aba8
5 changed files with 72 additions and 81 deletions

15
bag.html
View file

@ -15,7 +15,7 @@
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;" width="80" height="80"></a>
<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>
@ -45,14 +45,11 @@
<div class="full-body">
<div class="body-left">
<div class="bag-body">
<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">
<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">

12
checkout.html
View file

@ -0,0 +1,12 @@
<!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>Checkout</title>
</head>
<body>
</body>
</html>

90
product.html
View file

@ -1,24 +1,21 @@
<!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</title>
<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://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 href="/"><img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;" width="80" height="80"></a>
<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>
@ -29,41 +26,33 @@
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product-list.html" aria-disabled="true">Products</a>
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
<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="/login.html"><button type="button"
class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<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 class="img">
<img src="assets/sepatu.png" style="width: 350px; height: auto">
</div>
<div class="description" style="flex: 1;">
<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
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>
@ -71,9 +60,9 @@
<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;
<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>
@ -93,7 +82,7 @@
<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>
@ -102,48 +91,41 @@
</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>
</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 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";
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function () {
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
</script>
</body>
</html>

16
styleIndividualProduct.css
View file

@ -24,7 +24,8 @@
.description {
color: #ffffff;
font-family: 'Poppins', sans-serif;
margin: 0 0%;
margin-top: 20px;
margin-left: 40px;
justify-content: center;
text-align: left;
}
@ -78,15 +79,22 @@
cursor: pointer;
}
@media only screen and (min-width: 1100px){
.img{
margin-top: 20px;
}
@media only screen and (max-width: 1000px){
.product{
display: grid;
}
.img{
width: 500px;
height: 500px;
height: auto;
}
.description{
margin-left: 0px;
}
}

20
stylebag.css
View file

@ -22,15 +22,6 @@
background-color: 1b1c1e;
}
.bag-body{
background-color: 1b1c1e;
color: white;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: left;
text-align: left;
}
.bag-list{
display: flex;
color: white;
@ -60,12 +51,13 @@
margin-top: 15px;
}
@media only screen and (max-width: 1040px){
.full-body{
display: flex;
}
@media only screen and (max-width: 1000px){
.full-body{
display: inline;
display: grid !important;
}
}
.full-body{
display: flex;
}