mirror of
https://gitlab.com/nekoya/web.git
synced 2024-11-26 00:06:23 +01:00
Merge remote-tracking branch 'origin/main'
This commit is contained in:
commit
5435c3fc22
4 changed files with 230 additions and 18 deletions
24
product.html
24
product.html
|
@ -44,7 +44,7 @@
|
|||
<img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" />
|
||||
<div class="description">
|
||||
<div style="margin-left: 20px;">
|
||||
<h1>Fashione Shoes White</h1>
|
||||
<h1 class="titledes">Fashione Shoes White</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p class="card-body" >
|
||||
|
@ -72,24 +72,24 @@
|
|||
|
||||
<div class="modal-content">
|
||||
<span class="close">×</span>
|
||||
<h2><b>SUCCESSFULLY ADDED TO BAG</b></h2>
|
||||
<div class="konten" >
|
||||
<h2 class="titlee"><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>
|
||||
<div class="bodymodal" style="padding-left: 20px; padding-right: 20px;">
|
||||
<h3 class="titlemodal">Fashione Shoes White</h3>
|
||||
<br>
|
||||
<h5><b>Rp 1.999.999,00</b></h5>
|
||||
<P>Total : 1</P>
|
||||
<h5 class="modall"><b>Rp 1.999.999,00</b></h5>
|
||||
<P class="modall">Total : 1</P>
|
||||
</div>
|
||||
|
||||
<div style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
|
||||
<h5><b>Your Bag</b></h5>
|
||||
<div class="bodymodal" style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
|
||||
<h5 class="titlemodal"><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>
|
||||
<p class="modall" style="border-bottom: 1px solid black ;">Product Cost : Rp 1.999.999,00</p>
|
||||
<p class="modall" >Total Product Cost : Rp 1.999.999,00</p>
|
||||
</div>
|
||||
|
||||
<div style="padding-left: 20px; border-left: 1px solid black;">
|
||||
<div class="bodymodal" 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>
|
||||
|
|
76
stylebag.css
76
stylebag.css
|
@ -81,7 +81,7 @@
|
|||
@media (max-width: 600px){
|
||||
|
||||
.full-body{
|
||||
font-size: 6px ;
|
||||
font-size: 7px ;
|
||||
}
|
||||
.img{
|
||||
width: 30px;
|
||||
|
@ -97,12 +97,84 @@
|
|||
word-break: break-all;
|
||||
}
|
||||
.titlesummary{
|
||||
font-size: 10px;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
.body-right{
|
||||
width: 300px;
|
||||
}
|
||||
.body-left{
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 541px){
|
||||
.body-right{
|
||||
width: 444px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 444px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 412px){
|
||||
.body-right{
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 315px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 415px){
|
||||
.body-right{
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 318px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 376px){
|
||||
.body-right{
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 361px){
|
||||
.body-right{
|
||||
width: 264px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 321px){
|
||||
.body-right{
|
||||
width: 224px;
|
||||
}
|
||||
.body-left{
|
||||
width: 224px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 281px){
|
||||
.body-right{
|
||||
width: 184px;
|
||||
}
|
||||
.body-left{
|
||||
width: 184px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -82,29 +82,105 @@
|
|||
@media (max-width: 600px){
|
||||
|
||||
.full-body{
|
||||
font-size: 6px ;
|
||||
font-size: 7px ;
|
||||
}
|
||||
|
||||
.img{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.info{
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.titletr{
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.titletrdes{
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.titlesummary{
|
||||
font-size: 10px;
|
||||
|
||||
}
|
||||
|
||||
.body-right{
|
||||
width: 300px;
|
||||
width: 504px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 504px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 541px){
|
||||
.body-right{
|
||||
width: 444px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 444px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 412px){
|
||||
.body-right{
|
||||
width: 315px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 315px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 415px){
|
||||
.body-right{
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 318px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 376px){
|
||||
.body-right{
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 361px){
|
||||
.body-right{
|
||||
width: 264px;
|
||||
}
|
||||
|
||||
.body-left{
|
||||
width: 264px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 321px){
|
||||
.body-right{
|
||||
width: 224px;
|
||||
}
|
||||
.body-left{
|
||||
width: 224px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width : 281px){
|
||||
.body-right{
|
||||
width: 184px;
|
||||
}
|
||||
.body-left{
|
||||
width: 184px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -112,9 +112,73 @@
|
|||
.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{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in a new issue