Merge remote-tracking branch 'origin/main'

This commit is contained in:
Matthew Patrick 2021-09-15 21:53:09 +07:00
commit 5435c3fc22
4 changed files with 230 additions and 18 deletions

View file

@ -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">&times;</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>

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}