nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2025-03-16 12:25:47 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

modif product page and set @media in css

Browse source
This commit is contained in:
dshrat 2021-09-15 21:04:59 +07:00
parent 158f0fe220
commit 3319321652
4 changed files with 230 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
product.html
View file

@ -44,7 +44,7 @@
<img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" /> <img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" />
<div class="description"> <div class="description">
<div style="margin-left: 20px;"> <div style="margin-left: 20px;">
<h1>Fashione Shoes White</h1> <h1 class="titledes">Fashione Shoes White</h1>
</div> </div>
<div> <div>
<p class="card-body" > <p class="card-body" >
@ -72,24 +72,24 @@
<div class="modal-content"> <div class="modal-content">
<span class="close">&times;</span> <span class="close">&times;</span>
<h2><b>SUCCESSFULLY ADDED TO BAG</b></h2> <h2 class="titlee"><b>SUCCESSFULLY ADDED TO BAG</b></h2>
<div class="konten" > <div class="konten">
<img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" width="200px" height="200px"> <img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" width="200px" height="200px">
<div style="padding-left: 20px; padding-right: 20px;"> <div class="bodymodal" style="padding-left: 20px; padding-right: 20px;">
<h3>Fashione Shoes White</h3> <h3 class="titlemodal">Fashione Shoes White</h3>
<br> <br>
<h5><b>Rp 1.999.999,00</b></h5> <h5 class="modall"><b>Rp 1.999.999,00</b></h5>
<P>Total : 1</P> <P class="modall">Total : 1</P>
</div> </div>
<div style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;"> <div class="bodymodal" style="padding-left: 20px; border-left: 1px solid black; padding-right: 20px;">
<h5><b>Your Bag</b></h5> <h5 class="titlemodal"><b>Your Bag</b></h5>
<br> <br>
<p style="border-bottom: 1px solid black ;">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>Total Product Cost : Rp 1.999.999,00</p> <p class="modall" >Total Product Cost : Rp 1.999.999,00</p>
</div> </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="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> <a href="checkout.html"> <button class="button" style="background-color: green; color: white" >Checkout</button></a>
</div> </div>

76
stylebag.css
View file

@ -81,7 +81,7 @@
@media (max-width: 600px){ @media (max-width: 600px){
.full-body{ .full-body{
font-size: 6px ; font-size: 7px ;
} }
.img{ .img{
width: 30px; width: 30px;
@ -97,12 +97,84 @@
word-break: break-all; word-break: break-all;
} }
.titlesummary{ .titlesummary{
font-size: 10px; font-size: 20px;
} }
.body-right{ .body-right{
width: 300px; 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
stylecheckout.css
View file

@ -82,29 +82,105 @@
@media (max-width: 600px){ @media (max-width: 600px){
.full-body{ .full-body{
font-size: 6px ; font-size: 7px ;
} }
.img{ .img{
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
.info{ .info{
margin-left: 5px; margin-left: 5px;
} }
.titletr{ .titletr{
word-break: keep-all; word-break: keep-all;
} }
.titletrdes{ .titletrdes{
word-break: break-all; word-break: break-all;
} }
.titlesummary{ .titlesummary{
font-size: 10px; font-size: 10px;
} }
.body-right{ .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;
}
} }

66
styleproduct.css
View file

@ -112,9 +112,73 @@
.konten{ .konten{
display: grid; 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;
}
}