mirror of
https://gitlab.com/nekoya/web.git
synced 2025-03-16 12:25:47 +01:00
modif product page and set @media in css
This commit is contained in:
parent
158f0fe220
commit
3319321652
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" />
|
<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">×</span>
|
<span class="close">×</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
76
stylebag.css
|
@ -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,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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue