nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2024-11-29 03:32:40 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

Beautify code on Product Page

Browse source
This commit is contained in:
Moe Poi ~ 2021-09-26 23:21:23 +07:00
parent fddbbb710f
commit 2e43d95cda
1 changed files with 142 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
product.html
View file

@ -1,11 +1,12 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible"> <meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta name="theme-color" content="#2f0001"> <meta name="theme-color" content="#2f0001">
<link href="assets/favicon.webp" rel="shortcut icon" type="image/png"/> <link href="assets/favicon.webp" rel="shortcut icon" type="image/png" />
<title>Product</title> <title>Product</title>
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" <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"> integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" rel="stylesheet">
@ -58,38 +59,38 @@
border-radius: 16px; border-radius: 16px;
} }
.button-bag{ .button-bag {
color: white; color: white;
background-color: darkred; background-color: darkred;
border-color: darkred; border-color: darkred;
border-radius: 100px; border-radius: 100px;
} }
.button-bag:hover{ .button-bag:hover {
background-color: red; background-color: red;
border-color: red; border-color: red;
} }
.button-checkout_1{ .button-checkout_1 {
color: white; color: white;
background-color: darkred; background-color: darkred;
border-color: darkred; border-color: darkred;
border-radius: 100px; border-radius: 100px;
} }
.button-checkout_2{ .button-checkout_2 {
color: white; color: white;
background-color: green; background-color: green;
border-color: green; border-color: green;
border-radius: 100px; border-radius: 100px;
} }
.button-checkout_1:hover{ .button-checkout_1:hover {
background-color: red; background-color: red;
border-color: red; border-color: red;
} }
.button-checkout_2:hover{ .button-checkout_2:hover {
background-color: #0af211; background-color: #0af211;
border-color: #0af211; border-color: #0af211;
} }
@ -258,11 +259,10 @@
</head> </head>
<body class="bg-color"> <body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius"> <nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Product</a> <a class="navbar-brand" href="#">Product</a>
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler" class="navbar-toggler" data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01"> <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
@ -282,16 +282,19 @@
</ul> </ul>
<span class="navbar-nav my-2 my-lg-0 text-white"> <span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4"> <div class="my-4">
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a> <a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3"
type="button">Login</button></a>
</div> </div>
<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> <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>
</span> </span>
</div> </div>
</nav> </nav>
<div class="card"> <div class="card">
<div class="product"> <div class="product">
<img alt="placeholder image" class="img-fluid lazyload" src="assets/Product_1.webp" style="width: 400px; height: auto;"/> <img alt="placeholder image" class="img-fluid lazyload" src="assets/Product_1.webp"
style="width: 400px; height: auto;" />
<div class="description"> <div class="description">
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<h1 class="titledes">Fashione Shoes White</h1> <h1 class="titledes">Fashione Shoes White</h1>
@ -300,9 +303,11 @@
<p class="card-body"> <p class="card-body">
Bahan MeshReady Size 39-43 Silahkan order Sesuai dengan variasi yang diinginkan! Tidak menerima Bahan MeshReady Size 39-43 Silahkan order Sesuai dengan variasi yang diinginkan! Tidak menerima
perubahan Warna dan size perubahan Warna dan size
lewat Chat!!! Toko Pandu Store menjual Berbagai Macam Perlengkapan dan Keperluan Anda sehari-hari! lewat Chat!!! Toko Pandu Store menjual Berbagai Macam Perlengkapan dan Keperluan Anda
sehari-hari!
Silahkan Kunjungi Toko Silahkan Kunjungi Toko
kami Pandu Store untuk mengetahui apa saja barang yang kami Jual. Kebanyakan Barang yang Kami jual kami Pandu Store untuk mengetahui apa saja barang yang kami Jual. Kebanyakan Barang yang Kami
jual
adalah Barang hasil Produksi adalah Barang hasil Produksi
sendiri dengan mengutamakan Kualitas dan kenyamanan saat digunakan Pembeli! Kesesuaian Foto 90% sendiri dengan mengutamakan Kualitas dan kenyamanan saat digunakan Pembeli! Kesesuaian Foto 90%
Membeli = Sudah Membaca informasi Membeli = Sudah Membaca informasi
@ -325,12 +330,13 @@
<div class="modal" id="myModal"> <div class="modal" id="myModal">
<div class="modal-content" style="background-color: #212226; border-color: #212226; color: white"> <div class="modal-content"
style="background-color: #212226; border-color: #212226; color: white">
<span class="close close-posisition">&times;</span> <span class="close close-posisition">&times;</span>
<h2 class="title"><b>SUCCESSFULLY ADDED TO BAG</b></h2> <h2 class="title"><b>SUCCESSFULLY ADDED TO BAG</b></h2>
<div class="konten"> <div class="konten">
<img alt="placeholder image" class="img-fluid lazyload" height="200px" src="assets/Product_1.webp" <img alt="placeholder image" class="img-fluid lazyload" height="200px"
width="200px"> src="assets/Product_1.webp" width="200px">
<div class="bodymodal" style="padding-left: 20px; padding-right: 20px;"> <div class="bodymodal" style="padding-left: 20px; padding-right: 20px;">
<h3 class="titlemodal">Fashione Shoes White</h3> <h3 class="titlemodal">Fashione Shoes White</h3>
<br> <br>
@ -342,7 +348,8 @@
style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;"> style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
<h5 class="titlemodal"><b>Your Bag</b></h5> <h5 class="titlemodal"><b>Your Bag</b></h5>
<br> <br>
<div class="modall justify-content-between" style="border-bottom: 1px solid black ;"> <div class="modall justify-content-between"
style="border-bottom: 1px solid black ;">
<p>Product Cost :</p> <p>Product Cost :</p>
<p>Rp 1.999.999,00</p> <p>Rp 1.999.999,00</p>
</div> </div>
@ -371,14 +378,12 @@
</div> </div>
</div> </div>
</div> </div>
<script crossorigin="anonymous" <script crossorigin="anonymous" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script crossorigin="anonymous" <script crossorigin="anonymous" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
var modal = document.getElementById("myModal"); var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn"); var btn = document.getElementById("myBtn");
@ -398,6 +403,7 @@
modal.style.display = "none"; modal.style.display = "none";
} }
} }
</script> </script>
</body> </body>
</html> </html>