nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2024-12-01 20:50:50 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity
web/product.html

396 lines
12 KiB
HTML
Raw Normal View History

add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
Migrate all png/jpg image assets to WebP format
2021-09-23 06:17:36 +02:00
<link href="assets/favicon.webp" rel="shortcut icon" type="image/png"/>
product.html - Changed page name
2021-09-24 09:15:01 +02:00
<title>Product</title>
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
<style>
.bg-color {
background-color: #1b1c1e;
}
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
.comp-color {
background-color: #212226;
}
.nav-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.product {
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: left;
text-align: left;
adjust bag, checkout and product page
2021-09-24 10:48:45 +02:00
word-break: normal;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
}
.description {
color: #ffffff;
font-family: 'Poppins', sans-serif;
margin-top: 20px;
margin-left: 48px;
justify-content: center;
text-align: left;
}
.button {
background-color: #c2f706;
border: none;
color: black;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
margin-left: 20px;
cursor: pointer;
border-radius: 16px;
}
Modified color and hover button
2021-09-25 15:02:40 +02:00
.button-bag{
color: white;
background-color: darkred;
border-color: darkred;
border-radius: 100px;
}
.button-bag:hover{
background-color: red;
border-color: red;
}
.button-checkout_1{
color: white;
background-color: darkred;
border-color: darkred;
border-radius: 100px;
}
.button-checkout_2{
color: white;
background-color: green;
border-color: green;
border-radius: 100px;
}
.button-checkout_1:hover{
background-color: red;
border-color: red;
}
.button-checkout_2:hover{
background-color: #0af211;
border-color: #0af211;
}
product.html - Changed modal popup background color and text color to match the rest of the web color scheme
2021-09-25 12:12:43 +02:00
.modall {
adjust product page
2021-09-25 05:44:42 +02:00
display: flex;
}
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
Modified color and hover button
2021-09-25 15:02:40 +02:00
margin-left: 98%;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
}
.close:hover,
.close:focus {
Modified color and hover button
2021-09-25 15:02:40 +02:00
color: #ffffff;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
text-decoration: none;
cursor: pointer;
}
.card {
modif bag, checkout and product page
2021-09-20 13:02:29 +02:00
background-color: #212226;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
font-family: 'Poppins', sans-serif;
display: flex;
margin-left: 48px;
margin-right: 48px;
justify-content: left;
text-align: left;
modif bag, checkout and product page
2021-09-20 13:02:29 +02:00
border-radius: 10px;
margin-top: 20px;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
}
.sizeSepatu {
margin-left: 20px;
}
.konten {
display: flex;
padding-top: 10px;
}
@media only screen and (max-width: 1000px) {
.product {
display: grid;
}
.description {
margin-left: 0px;
adjust bag, checkout and product page
2021-09-24 10:48:45 +02:00
word-break: normal;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
}
}
@media (max-width: 900px) {
.konten {
display: grid;
}
.bodymodal {
border-top: 1px solid black;
border-left: none !important;
}
}
@media (max-width: 601px) {
.konten {
display: grid;
}
.titledes {
font-size: 25px;
}
.card-body {
font-size: 12px;
}
}
@media (max-width: 361px) {
.konten {
display: grid;
}
.titledes {
font-size: 20px;
}
.card-body {
font-size: 10px;
}
}
@media (max-width: 321px) {
.konten {
display: grid;
}
.titledes {
font-size: 17px;
}
.card-body {
font-size: 8px;
}
}
@media (max-width: 376px) {
.konten {
display: grid;
}
.titledes {
font-size: 22px;
}
.card-body {
font-size: 11px;
}
}
@media (max-width: 511px) {
.titlemodal {
font-size: 15px;
}
.modall {
font-size: 10px;
}
.titlee {
adjust bag, checkout and product page
2021-09-24 10:48:45 +02:00
font-size: 17px;
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
}
}
</style>
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
</head>
add css to product, bag, payment, checkout
2021-09-19 11:51:40 +02:00
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
<body class="bg-color">
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
product.html - Changed page name
2021-09-24 09:15:01 +02:00
<a class="navbar-brand" href="#">Product</a>
product.html - Improved looks a bit and beautify codes
2021-09-24 09:16:43 +02:00
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler"
data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item active">
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
<a aria-disabled="true" class="nav-link disabled" href="product-list.html">Products</a>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About Us</a>
</li>
product.html - Improved looks a bit and beautify codes
2021-09-24 09:16:43 +02:00
<li class="nav-item">
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
Fix navbar login button margin on product page
2021-09-18 12:33:20 +02:00
<div class="my-4">
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
Fix navbar login button margin on product page
2021-09-18 12:33:20 +02:00
</div>
Add link to bag page on Product page
2021-09-26 10:55:14 +02:00
<a href="bag.html" class="mt-auto mb-auto" style="color: inherit;"><i class="fas fa-shopping-cart"><span class="ml-2 mt-auto mb-auto">Rp 999.999</span></i></a>
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
</span>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</div>
</nav>
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
modif bag, checkout and product page
2021-09-20 13:02:29 +02:00
<div class="card">
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<div class="product">
adjust product page img
2021-09-23 07:32:22 +02:00
<img alt="placeholder image" class="img-fluid" src="assets/Product_1.webp" style="width: 400px; height: auto;"/>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<div class="description">
<div style="margin-left: 20px;">
<h1 class="titledes">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>
product.html - Improved looks a bit and beautify codes
2021-09-24 09:16:43 +02:00
<h4>Sizes</h4>
product.html - Changed modal popup background color and text color to match the rest of the web color scheme
2021-09-25 12:12:43 +02:00
<input name="size" type="radio"> 43 &emsp;
<input name="size" type="radio"> 44 &emsp;
<input name="size" type="radio"> 45 &emsp;
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</form>
</div>
product.html - Improved looks a bit and beautify codes
2021-09-24 09:16:43 +02:00
<br>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<div style="display: flex; color: black;">
Modified color and hover button
2021-09-25 15:02:40 +02:00
<button class="button button-bag" id="myBtn">Add to Bag</button>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
<div class="modal" id="myModal">
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
product.html - Changed modal popup background color and text color to match the rest of the web color scheme
2021-09-25 12:12:43 +02:00
<div class="modal-content" style="background-color: #212226; border-color: #212226; color: white">
Modified color and hover button
2021-09-25 15:02:40 +02:00
<span class="close close-posisition">&times;</span>
product.html - Changed modal popup background color and text color to match the rest of the web color scheme
2021-09-25 12:12:43 +02:00
<h2 class="title"><b>SUCCESSFULLY ADDED TO BAG</b></h2>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<div class="konten">
adjust bag, checkout and product page
2021-09-23 07:26:04 +02:00
<img alt="placeholder image" class="img-fluid" height="200px" src="assets/Product_1.webp"
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
width="200px">
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<div class="bodymodal" style="padding-left: 20px; padding-right: 20px;">
<h3 class="titlemodal">Fashione Shoes White</h3>
<br>
<h5 class="modall"><b>Rp 1.999.999,00</b></h5>
<P class="modall">Total : 1</P>
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
</div>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<div class="bodymodal"
style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
<h5 class="titlemodal"><b>Your Bag</b></h5>
<br>
adjust product page
2021-09-25 05:44:42 +02:00
<div class="modall justify-content-between" style="border-bottom: 1px solid black ;">
<p>Product Cost :</p>
<p>Rp 1.999.999,00</p>
</div>
<div class="modall justify-content-between">
<p>Total Product Cost :</p>
<p>Rp 1.999.999,00</p>
</div>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</div>
<div class="bodymodal" style="padding-left: 20px; border-left: 1px solid black;">
<a href="bag.html">
Modified color and hover button
2021-09-25 15:02:40 +02:00
<button class="button button-checkout_1">Bag</button>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</a>
<a href="checkout.html">
Modified color and hover button
2021-09-25 15:02:40 +02:00
<button class="button button-checkout_2">Checkout</button>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</a>
</div>
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
</div>
</div>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
</div>
</div>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<br>
<br>
</div>
Modif product and bag page
2021-09-14 14:24:32 +02:00
</div>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
</div>
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
<script crossorigin="anonymous"
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script crossorigin="anonymous"
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
* - Fixed some things + Reformat codes and beautify codes
2021-09-19 08:08:37 +02:00
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
<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) {
Modif product, bag and checkout
2021-09-13 11:31:07 +02:00
modal.style.display = "none";
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
}
product.html - Fixed Navbar's items and highlight
2021-09-19 07:32:54 +02:00
}
</script>
add individual product and bag page with css, add img.
2021-09-13 07:18:32 +02:00
</body>
</html>
Reference in a new issue Copy permalink