Skip to content

Commit

Permalink
Final Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@shaantanu9
shaantanu9 authored Dec 19, 2021
1 parent de9ea19 commit 9f0110d
Show file tree
Hide file tree
Showing 61 changed files with 5,636 additions and 0 deletions.
Binary file added bg img.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
269 changes: 269 additions & 0 deletions cart.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,269 @@
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
font-family: 'Noto Sans Display', sans-serif;
font-family: 'Rubik', sans-serif;
}

.fixed {
right: 0;
position: fixed;
background-color: #fff;
z-index: 100;
display: none;
}
.displays {
display: block;
}

section {
/* position: absolute; */
width: 380px;
height: 100vh;
float: right;
/* background-color: red; */
/* background-color: rgb(216, 216, 216); */
/* border: 1px solid rgb(184, 184, 184); */
position: relative;
overflow-y: scroll;
}

.box1 {
width: 380px;
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
position: fixed;
z-index: 2;
border: 1px solid rgb(184, 184, 184);
}

.box2 {
width: 100%;
height: 90%;
margin-top: 13%;
background-color: #fff;
color: #000;
}

#cross {
margin-right: 30px;
color: rgb(27, 14, 14);
}

.cart {
margin-left: 20px;
color: rgb(27, 14, 14);
letter-spacing: 3px;
}

.box2, i {
font-size: 3;
font-weight: 100;
}

i {
cursor: pointer;
}

#cart-img {
font-size: 150px;
margin-top: 50px;
color: rgb(216, 216, 216);
}

.box2 {
text-align: center;
}

.belowCart {
font-size: 14px;
margin-top: 10px;
letter-spacing: 1px;
font-weight: 200;
}

#cart-img {
margin-left: 0;
margin-right: 0
}

.box3 {
width: 380px;
height: 250px;
/* background-color: red; */
position: absolute;
bottom: 0;
right: 0;
text-align: center;
background-color: #fff;
}

.h3class {
margin: 0 auto;
padding-top: 15px;
height: 18%;
background-color: rgb(243, 243, 243);
}

.payment {
width: 100%;
height: 78%;
/* background-color: aquamarine; */
display: grid;
grid-template-rows: repeat(5, 1fr) 50px;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1px;
/* text-align: left; */
justify-self: center;
margin-bottom: 10px;
}

.priceBox {
/* background-color: yellow; */
display: flex;
align-items: center;
justify-content: start;
margin-left: 15px;
}

.grid-but {
margin: 0;
}

.butbrown {
background-color: #991f53;
justify-content: center;
color: #fff;
border: .2px solid black;
}

.butwhite {
justify-content: center;
border: .2px solid black;
}

.spend {
grid-column-start: 1;
grid-column-end: 3;
}

.offer {
grid-column-start: 1;
grid-column-end: 3;
}

span {
font-size: 12px;
color: #991f53;
font-weight: 400;
}


.notshow {
visibility: hidden;
}

.show {
visibility: visible;
width: 380px;
height: 250px;
/* background-color: red; */
position: absolute;
bottom: 0;
right: 0;
text-align: center;
background-color: #fff;
}

#product {
width: 100%;
height: 170px;
display: grid;
grid-template-rows: .7fr 20% 15%;
grid-template-columns: 35% repeat(2, 1fr);
grid-gap: 10px;
overflow: hidden;
margin-top: 38px;
}

.productbox {
display: flex;
align-items: center;
justify-content: center;
}

.div6Box1, .div6Box2, .div6Box3 {
width: 30px;
height: 100%;
margin-left: 1px;
/* background-color: tomato; */
cursor: pointer;
}

.div1 {
grid-row: 1/4;
}

.div1 img {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

.div2 {
grid-column: 2/4;
text-align: left;
}

.div2 p {
padding: 15px 10px;
font-size: 14px;
letter-spacing: 2px;
line-height: 20px;
}


#imgProduct {
width: 100%;
height: 100%;
}

/* scroll bar start*/
/* width */
::-webkit-scrollbar {
width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* scroll bar end */

.totalPrice, .savings, .shipping {
justify-content: end;
padding-right: 20px;
}

.div5 {
text-decoration-line: line-through;
}


.display {
display: none;
}
49 changes: 49 additions & 0 deletions cart.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart page</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Noto+Sans+Display:wght@200;300;400&family=Rubik:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="cart.css">
</head>
<body>
<div class="fixed">
<section>
<div class="box1">
<p class="cart">CART</p>
<i class="fas fa-times" id="cross"></i>
</div>

<div class="box2">
<i class="fas fa-shopping-bag" id="cart-img"></i>
<p class="belowCart">Your bag is empty</p>
</div>
</section>

<div class="box3 notshow">

<!-- <div class="disable"> -->
<div class="h3class">
<h3>Payment Details</h3>
</div>

<div class="payment">
<div class="priceBox"><b>Bag Total</b></div>
<div class="priceBox totalPrice"><b></b></div>
<div class="priceBox">Savings</div>
<div class="priceBox savings"></div>
<div class="priceBox">Shipping Charge</div>
<div class="priceBox shipping"></div>
<div class="priceBox spend"><span>Spend $50 more and get free shipping!</span></div>
<div class="priceBox offer"><span>$180.00 Away to get free Dhaaga clutch product</span></div>
<div class="priceBox grid-but butwhite totalPrice2"></div>
<div class="priceBox grid-but butbrown">CHECKOUT></div>
</div>
</div>
</div>
<script src="cartscript.js"></script>
</body>
</html>
Loading

0 comments on commit 9f0110d

Please sign in to comment.