Cart Styles

Developer
Lucas Cawkell
Size
7,158 Kb
Views
26,312
  1. Cart Styles Previews
  2. Cart Styles HTML Codes
  3. Cart Styles CSS Codes
  4. Cart Styles JS Codes

How do I make an cart styles?

What is a cart styles? How do you make a cart styles? This script and codes were developed by Lucas Cawkell on 09 September 2022, Friday.

Cart Styles Previews
IQ Test

Cart Styles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cart Styles</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="cart-container" class="cd-cart-container cart-open"> <a href="#0" class="cd-cart-trigger"> Cart <ul class="count"> <!-- cart items count --> <li>0</li> <li>0</li> </ul> <!-- .count --> </a> <div class="cd-cart"> <div class="wrapper"> <header> <h2>Cart</h2> <span class="undo">Item removed. <a href="#0">Undo</a></span> </header> <div class="body"> <ul> <!-- products added to the cart will be inserted here using JavaScript --> </ul> </div> <div id="formFooter"> <a href="#0" type="submit" onclick="$(this).closest('form').submit()" class="checkout btn"><h5>Checkout - $<span id="cartTotal">0</span></h5><i class="fa fa-arrow-right"></i></a> </div> </div> </div> <!-- .cd-cart -->
</div> <!-- cd-cart-container --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Cart Styles - Script Codes CSS Codes

/* --------------------------------
Styles Reset
-------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
.table-container
{ overflow:hidden;
}
#sideNavBox
{ display:none !important;
}
#contentBox
{ margin-left: 30px !important;
}
.toplink
{ z-index:5;
}
.breadcrumb-pub
{ display:none;
}
/* --------------------------------
Form Styles
-------------------------------- */
form input[type="text"], form input[type="email"]
{ /*width:350px;*/ width:100%; max-width: 300px;
}
form textarea
{ /*width:350px;*/ width:100%; max-width: 800px;
}
#btngrpOrderForMe, #btngrpReplacingExisting
{ left: 0;
}
.sp-peoplepicker-autoFillContainer
{ /* This makes it so that the people picker autopopulate menu will go over top of other elements */ z-index:2;
}
.success
{ color: green; font-size: 10pt;
}
.in-progress
{ display:none;
}
.complete
{ display:block;
}
.form-group .form-control[disabled]
{ background-color:#eee; border-color: #ababab;
}
input[type=email][disabled]
{ color: #b1b1b1;
}
.unseen
{ visibility: hidden; opacity: 0;
}
/* --------------------------------
Product Display Styles
-------------------------------- */
.btn-group
{ left: 10px;
}
.productCard
{ text-align: left; position:relative; float:left; overflow:hidden; margin:10px 10px; min-width: 230px; max-width: 600px; min-height: 400px; width: 100%; background: #fff; color: #000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.20); font-size: 16px; perspective: 20em; transform: translateZ(0);
}
.productCard *
{ box-sizing:border-box; transition: all 0.3s ease-out;
} .productCard img { height:75px; width:75px; position:absolute; vertical-align:top; left: 240px; top: 30px; }
@media only screen and (min-width : 450px) { .productCard img { height:75%; position:absolute; vertical-align:top; left: 250px; max-width: 375px; min-width: 280px; }
}
.productCard .add-to-cart
{ position: absolute; bottom: 0; left: 0; background-color: #409ad5; padding-right: 10px; font-weight:700; font-size: .9em; transform-origin: bottom center; transform: rotateX(0deg); opacity:1; color: #FFF; cursor: pointer; z-index:4;
}
.productCard i
{ display:inline-block; margin-right:10px; width: 40px; line-height:40px; text-align: center; background-color: #164666; font-size: 1.4em;
}
.productCard:hover .add-to-cart
{ transform: rotateX(0deg); opacity:1;
}
.productCard figcaption
{ padding: 20px; max-width: 250px;
}
#customProductModal
{ box-shadow: 5px 5px 5px rgba(0,0,0,0.8);
}
#customProductModal .modal-body
{ padding:0;
}
#customProductModal .productCard
{ text-align: left; position:relative; float:none; overflow:hidden; margin:0; min-width: 230px; max-width: 600px; min-height: 400px; width: 100%; background: #fff; color: #000; box-shadow: none; font-size: 16px; perspective: 20em; transform: translateZ(0);
}
#customProductModal .productCard figcaption
{ width: 92%; max-width:100%;
}
#customProductModal .productCard .price { font-weight: 500; font-size: 1.5em; line-height: 48px; letter-spacing: 1px; margin-bottom: 20px; position: absolute; bottom: 30px; width: 35%;
}
#customProductModal .customOrderValidationMessage
{ position:absolute; bottom: 8px; left: 28%; color:red; visibility: hidden; opacity: 0;
}
#customProductModal .customOrderValidationMessage.show
{ visibility: visible; opacity: 1;
}
#customProductModal .productCard figcaption input
{ width: 70%;
}
#customProductModal .productCard figcaption textarea
{ width: 100%;
}
.fa-square-o
{ background-color:white;
}
.fa-laptop
{ color:white;
}
.productCard .price { font-weight: 500; font-size: 1.5em; line-height: 48px; letter-spacing: 1px; margin-bottom: 20px; position: absolute; bottom: 25px;
}
.productCard h3, .productCard p
{ margin: 0;
}
.productCard .price { font-weight: 500; font-size: 1.5em; line-height: 48px; letter-spacing: 1px; margin-bottom: 20px; position: absolute; bottom: 25px;
}
.productCard p { font-size: 0.9em; letter-spacing: 1px; font-weight: 400; max-height:150px; overflow:hidden;
}
.productCard h3 { font-size: 1.5em; font-weight: 700; margin-bottom: 10px; max-height: 130px;
}
a.details-link
{ position: absolute; left:75%; bottom: 3%;
}
a.details-link i
{ background-color: #FFF; color: #000; transform:inherit; margin-right:5px;
}
a.details-link p
{ font-size: 16pt; margin-bottom:-9px; margin-left:-10px; display: inline-block;
}
.back-to-front
{ color: #000 !important;
}
.category-buttons
{ height:500px; width:100%;
}
div .back
{ background-color:white; overflow:scroll; z-index:0;
}
.front
{ background-color:white; z-index:2;
}
.btn-group>.btn.active
{ z-index:1;
}
/* --------------------------------
Cart Components
-------------------------------- */
.cd-cart-container::before { /* dark bg layer visible when the cart is open */ content: ''; position: fixed; z-index: 1; height: 100vh; width: 100vw; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; -webkit-transition: opacity .4s, visibility .4s; transition: opacity .4s, visibility .4s;
}
.cd-cart-container.cart-open::before { opacity: 1; visibility: visible;
}
.cd-cart-container .fa-stack
{ font-size:30pt;
}
.cd-cart-trigger,
.cd-cart { position: fixed; bottom: 20px; right: 5%; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; will-change: transform; backface-visibility: hidden;
}
.empty .cd-cart-trigger, .empty
.cd-cart { /* hide cart */ -webkit-transform: translateY(150px); -ms-transform: translateY(150px); transform: translateY(150px);
}
@media only screen and (min-width: 1170px) { .cd-cart-trigger, .cd-cart { bottom: 40px; }
}
.cd-cart-trigger { /* button that triggers the cart content */ z-index: 3; height: 72px; width: 72px; /* replace text with image */ text-indent: 100%; color: transparent; white-space: nowrap; background-color:white;
}
.cd-cart-trigger::after, .cd-cart-trigger::before { /* used to create the cart/'X' icon */ content: ''; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); height: 100%; width: 100%; background: url(img/cd-icons-cart-close.svg) no-repeat 0 0; -webkit-transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, -webkit-transform .2s; transition: opacity .2s, transform .2s; transition: opacity .2s, transform .2s, -webkit-transform .2s;
}
.cd-cart-trigger::after { /* 'X' icon */ background-position: -72px 0; opacity: 0; -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg); transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.cart-open .cd-cart-trigger::before { opacity: 0;
}
.cart-open .cd-cart-trigger::after { opacity: 1; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.cd-cart-trigger .count { /* number of items indicator */ position: absolute; top: -10px; right: -10px; height: 28px; width: 28px; background: #e94b35; color: #ffffff; font-size: 1.5rem; font-weight: bold; border-radius: 50%; text-indent: 0; -webkit-transition: -webkit-transform .2s .5s; transition: -webkit-transform .2s .5s; transition: transform .2s .5s; transition: transform .2s .5s, -webkit-transform .2s .5s;
}
.cd-cart-trigger .count li { /* this is the number of items in the cart */ position: absolute; -webkit-transform: translateZ(0); transform: translateZ(0); left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
}
.cd-cart-trigger .count li:last-of-type { visibility: hidden;
}
.cd-cart-trigger .count.update-count li:last-of-type { -webkit-animation: cd-qty-enter .15s; animation: cd-qty-enter .15s; -webkit-animation-direction: forwards; animation-direction: forwards;
}
.cd-cart-trigger .count.update-count li:first-of-type { -webkit-animation: cd-qty-leave .15s; animation: cd-qty-leave .15s; -webkit-animation-direction: forwards; animation-direction: forwards;
}
.cart-open .cd-cart-trigger .count { -webkit-transition: -webkit-transform .2s 0s; transition: -webkit-transform .2s 0s; transition: transform .2s 0s; transition: transform .2s 0s, -webkit-transform .2s 0s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);
}
.empty .cd-cart-trigger .count { /* fix bug - when cart is empty, do not animate count */ -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);
}
.cd-cart-trigger:hover + div .wrapper { box-shadow: 0 6px 40px rgba(0, 0, 0, 0.3);
}
.cart-open .cd-cart-trigger:hover + div .wrapper { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17);
}
.cd-cart { /* cart content */ z-index: 2; width: 90%; max-width: 440px; height: 400px; max-height: 90%; pointer-events: none;
}
.cd-cart .wrapper { position: absolute; bottom: 0; right: 0; z-index: 2; overflow: hidden; height: 72px; width: 72px; border-radius: 6px; -webkit-transition: height .4s .1s, width .4s .1s, box-shadow .3s; transition: height .4s .1s, width .4s .1s, box-shadow .3s; -webkit-transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95); transition-timing-function: cubic-bezier(0.67, 0.17, 0.32, 0.95); background: #ffffff; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.17); pointer-events: auto;
}
.cd-cart header, .cd-cart #formFooter { position: absolute; z-index: 2; left: 0; width: 100%;
}
.cd-cart header, .cd-cart .body { opacity: 0;
}
.cd-cart header { top: 0; border-radius: 6px 6px 0 0; padding: 0 1.4em; height: 40px; line-height: 40px; background-color: #ffffff; -webkit-transition: opacity .2s 0s; transition: opacity .2s 0s; border-bottom: 1px solid #e6e6e6;
}
.cd-cart header::after { clear: both; content: ""; display: block;
}
.cd-cart #formFooter { bottom: 0; border-radius: 0 0 6px 6px; box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15); background: #ffffff;
}
.cd-cart h2 { text-transform: uppercase; display: inline-block; font-size: 1.4rem; font-weight: 700; letter-spacing: .1em;
}
.cd-cart .undo { float: right; font-size: 1.2rem; opacity: 0; visibility: hidden; -webkit-transition: opacity .2s, visibility .2s; transition: opacity .2s, visibility .2s; color: #808b97;
}
.cd-cart .undo a { text-decoration: underline; color: #2b3e51;
}
.cd-cart .undo a:hover { color: #2c97de;
}
.cd-cart .undo.visible { opacity: 1; visibility: visible;
}
.cd-cart .checkout { display: block; height: 72px; line-height: 72px; margin-right: 72px; background: #2c97de; color: rgba(255, 255, 255, 0); text-align: center; font-size: 1.8rem; font-weight: 600; -webkit-transition: all .2s 0s; transition: all .2s 0s;
}
.cd-cart .checkout:hover { background: #399ee0;
}
.cd-cart .checkout em { position: relative; display: inline-block; -webkit-transform: translateX(40px); -ms-transform: translateX(40px); transform: translateX(40px); -webkit-transition: -webkit-transform 0s .2s; transition: -webkit-transform 0s .2s; transition: transform 0s .2s; transition: transform 0s .2s, -webkit-transform 0s .2s;
}
.cd-cart .checkout em::after { position: absolute; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; content: ''; height: 24px; width: 24px; background: url(img/cd-icon-arrow-next.svg) no-repeat center center; opacity: 0; -webkit-transition: opacity .2s; transition: opacity .2s;
}
.cd-cart .body { position: relative; z-index: 1; height: calc(100% - 40px); padding: 20px 0 10px; margin: 40px 0 10px; overflow: auto; -webkit-overflow-scrolling: touch; -webkit-transition: opacity .2s; transition: opacity .2s;
}
.cd-cart .body ul { overflow: hidden; padding: 0 1.4em; position: relative; padding-bottom: 90px;
}
.cd-cart .body li { position: relative; opacity: 0; -webkit-transform: translateX(80px); -ms-transform: translateX(80px); transform: translateX(80px); -webkit-transition: opacity 0s .2s, -webkit-transform 0s .2s; transition: opacity 0s .2s, -webkit-transform 0s .2s; transition: opacity 0s .2s, transform 0s .2s; transition: opacity 0s .2s, transform 0s .2s, -webkit-transform 0s .2s; list-style: none;
}
.cd-cart .body li::after { clear: both; content: ""; display: block;
}
.cd-cart .body li:not(:last-of-type) { margin-bottom: 20px;
}
.cd-cart .body li.deleted { /* this class is added to an item when it is removed form the cart */ position: absolute; left: 1.4em; width: calc(100% - 2.8em); opacity: 0; -webkit-animation: cd-item-slide-out .3s forwards; animation: cd-item-slide-out .3s forwards;
}
.cd-cart .body li.deleted.undo-deleted { /* used to reinsert an item deleted from the cart when user clicks 'Undo' */ -webkit-animation: cd-item-slide-in .3s forwards; animation: cd-item-slide-in .3s forwards;
}
.cd-cart .body li.deleted + li { -webkit-animation: cd-item-move-up-mobile .3s; animation: cd-item-move-up-mobile .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.cd-cart .body li.undo-deleted + li { -webkit-animation: cd-item-move-down-mobile .3s; animation: cd-item-move-down-mobile .3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;
}
.cd-cart .product-image { display: inline-block; float: left; /* the image height determines the height of the list item - in this case height = width */ width: 50px;
}
.cd-cart .product-image img { display: block;
}
.cd-cart .product-details { position: relative; display: inline-block; float: right; width: calc( 100% - 50px); padding: 0.3em 0 0 0.5em;
}
.cd-cart .product-details::after { clear: both; content: ""; display: block;
}
.cd-cart h3, .cd-cart .price { font-weight: bold;
}
.cd-cart h3 { width: 70%; float: left; /* truncate title with dots if too long */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}
.cd-cart h3 a { color: #2b3e51;
}
.cd-cart h3 a:hover { color: #2c97de;
}
.cd-cart .price { float: right; width: 30%; text-align: right; font-size: 17pt; padding-bottom: 10px; position: relative; bottom: 5px; right: 20px;
}
#formFooter i
{ position:relative; left: 47%; bottom: 45px;
}
#cartTotal
{ font-size: 24pt;
}
.cd-cart .actions { height: 1.6em; line-height: 1.6em;
}
.cd-cart .actions::after { clear: both; content: ""; display: block;
}
.cd-cart .delete-item, .cd-cart .quantity, .cd-cart .locks { float: left; color: #808b97; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.cd-cart .delete-item { margin-right: 1em;
}
.cd-cart .delete-item:hover { color: #e94b35;
}
.cd-cart .quantity
{ position: absolute; left: 100px; bottom: 10px; font-size: 10pt;
}
.cd-cart .quantity label { margin-right: .3em;
}
.cd-cart .quantity select {
}
.cd-cart .locks { position: absolute; bottom: -40px;
}
.cd-cart .locks label { margin-right: 5px; font-size: 10pt;
}
.cd-cart .locks select {
border:0px;
}
/*.cd-cart .select { position: relative;
}
.cd-cart .select::after { /* switcher arrow for select element */ content: ''; position: absolute; z-index: 1; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 12px; height: 12px; background: url(img/cd-icon-select.svg) no-repeat center center; pointer-events: none;
}
.cd-cart select { position: relative; padding: 0 1em 0 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; margin: 0; color: #808b97; height: 45px; padding-right:17px;
}
.cd-cart select:focus { outline: none; color: #2b3e51; box-shadow: 0 1px 0 currentColor;
}*/
.cd-cart select::-ms-expand { /* hide default select arrow on IE */ display: none;
}
.cart-open .cd-cart .wrapper { height: 100%; width: 100%; -webkit-transition-delay: 0s; transition-delay: 0s;
}
.cart-open .cd-cart header, .cart-open .cd-cart .body { opacity: 1;
}
.cart-open .cd-cart header { -webkit-transition: opacity .2s .2s; transition: opacity .2s .2s;
}
.cart-open .cd-cart .body { -webkit-transition: opacity 0s; transition: opacity 0s;
}
.cart-open .cd-cart .body li { -webkit-transition: opacity .3s .2s, -webkit-transform .3s .2s; transition: opacity .3s .2s, -webkit-transform .3s .2s; transition: transform .3s .2s, opacity .3s .2s; transition: transform .3s .2s, opacity .3s .2s, -webkit-transform .3s .2s; opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);
}
.cart-open .cd-cart .body li:nth-of-type(2) { -webkit-transition-duration: .4s; transition-duration: .4s;
}
.cart-open .cd-cart .body li:nth-of-type(3) { -webkit-transition-duration: .5s; transition-duration: .5s;
}
.cart-open .cd-cart .body li:nth-of-type(4), .cart-open .cd-cart .body li:nth-of-type(5) { -webkit-transition-duration: .55s; transition-duration: .55s;
}
.cart-open .cd-cart .checkout { color: #ffffff; -webkit-transition: color .2s .3s; transition: color .2s .3s;
}
.cart-open .cd-cart .checkout em { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); -webkit-transition: padding .2s 0s, -webkit-transform .2s .3s; transition: padding .2s 0s, -webkit-transform .2s .3s; transition: transform .2s .3s, padding .2s 0s; transition: transform .2s .3s, padding .2s 0s, -webkit-transform .2s .3s;
}
.cart-open .cd-cart .checkout:hover em { padding-right: 30px;
}
.cart-open .cd-cart .checkout:hover em::after { opacity: 1;
}
@media only screen and (min-width: 768px) { .cd-cart .body li:not(:last-of-type) { margin-bottom: 14px; } .cd-cart .body li.deleted + li { -webkit-animation: cd-item-move-up .3s; animation: cd-item-move-up .3s; } .cd-cart .body li.undo-deleted + li { -webkit-animation: cd-item-move-down .3s; animation: cd-item-move-down .3s; } .cd-cart .checkout { font-size: 2.4rem; } .cd-cart .product-image { width: 90px; } .cd-cart .product-details { width: calc( 100% - 90px); }
}
.cd-cart h5
{ font-size: 24pt; position: relative; left: -20px; bottom: -8px;
}
@-webkit-keyframes cd-qty-enter { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
}
@keyframes cd-qty-enter { 0% { opacity: 0; visibility: hidden; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } 100% { opacity: 1; visibility: visible; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
}
@-webkit-keyframes cd-qty-leave { 0% { opacity: 1; visibility: visible; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } 100% { opacity: 0; visibility: hidden; -webkit-transform: translateX(-50%) translateY(-100%); transform: translateX(-50%) translateY(-100%); }
}
@keyframes cd-qty-leave { 0% { opacity: 1; visibility: visible; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } 100% { opacity: 0; visibility: hidden; -webkit-transform: translateX(-50%) translateY(-100%); transform: translateX(-50%) translateY(-100%); }
}
@-webkit-keyframes cd-item-move-up-mobile { 0% { padding-top: 70px; } 100% { padding-top: 0px; }
}
@keyframes cd-item-move-up-mobile { 0% { padding-top: 70px; } 100% { padding-top: 0px; }
}
@-webkit-keyframes cd-item-move-up { 0% { padding-top: 104px; } 100% { padding-top: 0px; }
}
@keyframes cd-item-move-up { 0% { padding-top: 104px; } 100% { padding-top: 0px; }
}
@-webkit-keyframes cd-item-move-down-mobile { 0% { padding-top: 0px; } 100% { padding-top: 70px; }
}
@keyframes cd-item-move-down-mobile { 0% { padding-top: 0px; } 100% { padding-top: 70px; }
}
@-webkit-keyframes cd-item-move-down { 0% { padding-top: 0px; } 100% { padding-top: 104px; }
}
@keyframes cd-item-move-down { 0% { padding-top: 0px; } 100% { padding-top: 104px; }
}
@-webkit-keyframes cd-item-slide-out { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(80px); transform: translateX(80px); opacity: 0; }
}
@keyframes cd-item-slide-out { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 100% { -webkit-transform: translateX(80px); transform: translateX(80px); opacity: 0; }
}
@-webkit-keyframes cd-item-slide-in { 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 0% { -webkit-transform: translateX(80px); transform: translateX(80px); opacity: 0; }
}
@keyframes cd-item-slide-in { 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 0% { -webkit-transform: translateX(80px); transform: translateX(80px); opacity: 0; }
}

Cart Styles - Script Codes JS Codes

var prodId = 1;
var productId = 1;
var prodCustom = " ";
var prodDescription = "testing description";
var prodPrice = 600;
var prodTitle = "A title";
var prodImg = '<span class="fa-stack fa-lg fa-3x">'+ '<i class="fa fa-square fa-stack-2x" aria-hidden="true"></i>'+ '<i class="fa fa-laptop fa-stack-1x" aria-hidden="true"></i>'+ '</span>';
var productHtml = '<li id="incart-'+prodId+'" class="product '+prodCustom+'">'+ '<div class="product-image">'+ '<a href="#0">'+prodImg+'</a>'+ '</div>'+ '<div class="product-details">'+ '<h4><a href="#0">'+prodTitle+'</a></h4>'+ '<span class="product-description" style="display:none">'+prodDescription+'</span>'+ '<span class="price">$'+prodPrice+'</span>'+ '<div class="actions">'+ '<a href="#0" class="delete-item">Delete</a>'+ '<div class="quantity">'+ '<label for="cd-product-'+ productId +'">Qty</label>'+ '<span class="select">'+ '<select id="cd-product-'+ productId +'" name="quantity" class="btn">'+ '<option value="1">1</option>'+ '<option value="2">2</option>'+ '<option value="3">3</option>'+ '<option value="4">4</option>'+ '<option value="5">5</option>'+ '<option value="6">6</option>'+ '<option value="7">7</option>'+ '<option value="8">8</option>'+ '<option value="9">9</option>'+ '</select>'+ '</span>'+ '</div>'+ '<div class="locks">'+ '<label for="cd-locks-'+ productId +'">Cable Locks: </label>'+ '<span class="select">'+ '<select id="cd-locks-'+ productId +'" name="locks" class="btn">'+ '<option value="1">1</option>'+ '<option value="2">2</option>'+ '<option value="3">3</option>'+ '<option value="4">4</option>'+ '<option value="5">5</option>'+ '<option value="6">6</option>'+ '<option value="7">7</option>'+ '<option value="8">8</option>'+ '<option value="9">9</option>'+ '</select>'+ '</span>'+ '</div>'+ '</div>'+ '</div>'+ '</li>';
$('.cd-cart .body ul').append(productHtml);
Cart Styles - Script Codes
Cart Styles - Script Codes
Home Page Home
Developer Lucas Cawkell
Username cawsp
Uploaded September 09, 2022
Rating 3
Size 7,158 Kb
Views 26,312
Do you need developer help for Cart Styles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lucas Cawkell (cawsp) Script Codes
Name
React Play
CB Site
Fancy Test
Final Exam Travel Website
Cart
A Pen by Lucas Cawkell
SurreyLibs
Isotope Video
Order Form
Scroll Menu
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!