nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2025-04-25 21:48:01 +02:00
Code Issues Projects Releases Packages1 Wiki Activity

Modif individualproduct and bag

Browse source
This commit is contained in:
dshrat 2021-09-13 15:27:24 +07:00
parent a0cb76f841
commit 6a521648b4
6 changed files with 163 additions and 16 deletions

17
bag.html
View file

@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bag</title>
<link rel="stylesheet" href="styleBag.css">
<script src="https://unpkg.com/feather-icons"></script>
<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"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
@ -26,14 +25,11 @@
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="product-list.html">Products</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about-us.html">About Us</a>
<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="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">
@ -47,9 +43,8 @@
<h3>Shopping Bag</h3>
</div>
<div style="display: flex; margin-left: 3%;">
<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>
@ -98,7 +93,6 @@
<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>
@ -113,11 +107,8 @@
</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>

0
checkout.html Normal file
View file

131
individualProduct.html Normal file
View file

@ -0,0 +1,131 @@
<!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>

13
styleIndividualProduct.css
View file

@ -16,7 +16,7 @@
background-color: 1b1c1e;
font-family: 'Poppins', sans-serif;
display: flex;
margin: 2% 3%;
margin-left: 48px;
justify-content: left;
text-align: left;
}
@ -78,6 +78,17 @@
cursor: pointer;
}
@media only screen and (min-width: 1100px){
.product{
display: grid;
}
.img{
width: 500px;
height: 500px;
}
}

18
stylebag.css
View file

@ -15,7 +15,8 @@
color: white;
font-family: 'Poppins', sans-serif;
display: flex;
margin: 2% 3%;
margin-top: 15px;
margin-left: 48px;
justify-content: left;
text-align: left;
background-color: 1b1c1e;
@ -43,15 +44,28 @@
.body-right{
margin-left: 30px;
margin-left: 20px;
color: white;
width: 30%;
height: 100%;
}
.body-left{
margin-left: 48px;
}
.button{
color: white;
background-color: green;
margin-top: 15px;
}
@media only screen and (max-width: 1040px){
.full-body{
display: inline;
}
}
.full-body{
display: flex;
}

0
stylecheckout.css Normal file
View file