Nút thêm vào giỏ hàng bootstrap

CHECKOUT

Add to cart interaction prototype by Virgil Pana

Follow me on Dribbble . Twitter

• Home
• BRANDS
• DESIGNERS
• CONTACT

CART

No items in cart

CATEGORIES

• New Arivals
• Accesories
• Bags
• Dressed
• Jackets
• jewelry
• Shoes
• Shirts
• Sweaters
• T-shirts

COLORS

• Beige
• Đen
• Blue
• Brown
• Green

• Grey
• Orange
• Purple
• Red
• White

SIZES

• XS
• S
• M

• L
• XL
• XXL

PRICE RANGE

View

FLUTED HEM DRESS

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 FLUTED HEM DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

PLEAT PRINTED DRESS

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 PLEAT PRINTED DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

FLOWY SHIRT DRESS

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 FLOWY SHIRT DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

DOUBLE LAYER DRESS

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 DOUBLE LAYER DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

BEAD DETAIL DRESS

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 BEAD DETAIL DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

PLEATED DETAIL DRESS

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 PLEATED DETAIL DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

ÁO IN

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 PRINTED DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

ÁO IN

PRODUCT SKU. 89356

$43 $39

COLORS

SIZE

XS S M L XL XXL

Add to cart

View gallery

$39 PRINTED DRESS

Summer dress

SIZES XS, S, M, L, XL, XXL COLORS

/* Reset & General ---------------------------------------------------------------------- */ * { margin. 0px; padding. 0px; } body { font-family. "Open Sans", sans-serif; overflow. hidden; } #wrapper{ overflow. hidden; height. 1153px; width. 1643px; background. #fff; } #header{ height. 92px; background. #fff url["https. //s3-us-tây-2. amazonaws. com/s. cdpn. io/245657/header-icons. png"] 1448px -2px không lặp lại; viền dưới. 1px rắn #eee; . 33px 0 0 45px;} #header li{ kiểu danh sách. không ai; . trái; . 30px; . 700; . #333; . 14px; . không ai; . chữ hoa; . 1px; . di chuột { màu. #000; . con trỏ; . 10px; . 1291px; . 40px 0 40px 30px; . trái; . #5d5f68; . 14px; . đúng; . 105px; . 65px; . đúng; . liên quan đến; . -1px;} #grid-menu li{ float. đúng; . 25px; . 25px; . không ai; . chặn; . 25px; . 25px; . url["https. //s3-us-tây-2. amazonaws. com/s. cdpn. io/245657/menu lưới. png"] 0 0 không lặp lại; } #grid-menu li. smallGrid{lề-phải. 7px;} #grid-menu li. smallGrid a{background-position. 0 -33px;} #grid-menu li. largeGrid a{background-position. -37px 0;} #grid-menu li. lưới nhỏ một. hoạt động {vị trí nền. 0 0;} #grid-menu li. lưới lớn a. hoạt động {vị trí nền. -37px -33px;} #lưới{ chiều rộng. 1335px; . tuyệt đối; . 340px; . 1200px; . 180px; . trái; . #ffff; . 275px; . 13px 0 0 45px; . 1400px; . 1px rắn #eee; . #262626; . chữ hoa; . 14px; . 700; . 35px 0 10px 0; . 1px; . cả hai; . 0px;} #giỏ hàng. trống { kiểu phông chữ. chữ nghiêng; . #a0a3ab; . 14px; . 1px; . danh sách kiểm tra { phần đệm. 0; . danh sách kiểm tra ul li{ cỡ chữ. 14px; . 400; . không ai; . 7px 0 7px 23px; . danh sách kiểm tra li span{ float. trái; . 11px; . 11px; . -23px; . 4px; . 1px cố định #d1d3d7; . liên quan đến; . kích thước li span,. Thể loại. kích thước li{ -webkit-transition. tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . danh sách kiểm tra li a{ màu. #676a74; . không ai; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . danh sách kiểm tra li a. di chuột { màu. #222; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . danh sách kiểm tra một. khoảng di chuột { màu viền. #a6aab3; . kích thước một. khoảng di chuột,. danh mục a. khoảng di chuột { màu viền. #a6aab3; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . danh sách kiểm tra một khoảng nhịp {đường viền. không có; lề. 0; thả nổi. không ai; . tuyệt đối; hàng đầu. 0;trái. 0;}. danh sách kiểm tra một. x{ hiển thị. chặn; . 0; . 2px; . #5ff7d2; . 6px; . 2px; . xoay [45 độ]; . xoay [45 độ]; . xoay [45 độ]; . tất cả 50ms dễ dàng thoát ra; . danh sách kiểm tra một. x. hoạt hình{ chiều rộng. 4px; . tất cả 100ms dễ dàng vào; . tất cả 100ms dễ dàng vào; . tất cả 100ms dễ dàng vào; . tất cả 100ms dễ dàng vào; . tất cả 100ms dễ dàng vào; . danh sách kiểm tra một. y{ hiển thị. chặn; . 0px; . 2px; . #5ff7d2; . 4px; . 3px; . xoay [13deg]; . xoay [135 độ]; . xoay [135 độ]; . tất cả 50ms dễ dàng thoát ra; . danh sách kiểm tra một. y. hoạt hình{ chiều rộng. 8px; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . danh mục. khoảng đã kiểm tra{ màu viền. #8d939f; . màu sắc,. kích thước ul{ float. trái; . 130px; . màu ul li{padding-left. 21px;}. tô màu một khoảng { đường viền. không ai; . liên quan đến; . 100%; . #eae3d3; . 13px; . 13px; . -20px; . màu sắc một. khoảng di chuột { chiều rộng. 15px; . 15px; . 3px; . -21px; . 6px;}. sản phẩm{ vị trí. liên quan đến; . 800px; . 306px; . 471px; . bảo quản-3d; . biến hình 5s; . trái; . 23px; . chiều rộng 500ms dễ dàng ra vào; . chiều rộng 500ms dễ dàng ra vào; . chiều rộng 500ms dễ dàng ra vào; . chiều rộng 500ms dễ dàng ra vào; . chiều rộng 500ms dễ dàng ra vào; . mặt trước sản phẩm img{chiều rộng. 100%;}. mặt trước sản phẩm,. sản phẩm trở lại { chiều rộng. 315px; . 480px; . #ffff; . tuyệt đối; . -5px; . -5px; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . sản phẩm trở lại{ hiển thị. không ai; . xoayY[180 độ]; . make3D. sinh động. sản phẩm trở lại,. make3D. sinh động. mặt trước sản phẩm, div. lớn. sản phẩm trở lại{ hàng đầu. 0px; . 0px; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . make3D{ chiều rộng. 305px; . 470px; . tuyệt đối; . 10px; . 10px; . ẩn giấu; . bảo quản-3d; . thoát ra 100ms; . thoát ra 100ms; . thoát ra 100ms; . thoát ra 100ms; . make3D. flip-10{ -webkit-transform. xoayY[ -10deg ]; . xoayY[ -10deg ]; . xoayY[ -10deg ]; . xoayY[ -10deg ]; . thoát ra 50ms; . make3D. flip90{ -webkit-transform. xoayY[ 90 độ ]; . xoayY[ 90 độ ]; . xoayY[ 90 độ ]; . xoayY[ 90 độ ]; . dễ dàng 100ms; . make3D. flip190{ -webkit-transform. xoayY[ 190 độ ]; . xoayY[ 190 độ ]; . xoayY[ 190 độ ]; . xoayY[ 190 độ ]; . thoát ra 100ms; . make3D. flip180{ -webkit-transform. xoayY[180 độ]; . xoayY[180 độ]; . xoayY[180 độ]; . xoayY[180 độ]; . thoát ra 150ms; . make3D. sinh động{ hàng đầu. 5px; . 5px; . 315px; . 480px; . 0px 5px 31px -1px rgba[0, 0, 0, 0. 15]; . thoát ra 100ms; . thoát ra 100ms; . thoát ra 100ms; . thoát ra 100ms; . lớn. make3D{ trên cùng. 0; . 0; . 315px; . 480px; . thoát ra 300ms; . thoát ra 300ms; . thoát ra 300ms; . thoát ra 300ms; . div lớn. make3D{box-shadow. 0px 5px 31px -1px rgba[0, 0, 0, 0];}. div lớn. lật lại {hiển thị. không ai;}. thống kê-container{ nền. #ffff; . tuyệt đối; . 382px; . 0; . 252px; . 300px; . 24px 40px 35px 32px; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . make3D. sinh động. stats-container{ hàng đầu. 265px; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . thùng chứa số liệu thống kê. tên_sản phẩm{ cỡ chữ. 15px; . #393c45; . 700; . stats-container p{ font-size. 15px; . #b1b1b3; . 2px 0 20px 0; . thùng chứa số liệu thống kê. product_price{ thả nổi. đúng; . #5ff7d2; . 22px; . 600; . image_overlay{ vị trí. tuyệt đối; . 0; . 0; . 100%; . 100%; . #5ff7d2; . 0; . make3D. sinh động. image_overlay{ độ mờ. 0. 7; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tùy chọn sản phẩm{ đệm. 0; . tùy chọn sản phẩm mạnh { font-weight. 700; . #393c45; . 14px; . khoảng tùy chọn sản phẩm { màu. #969699; . 14px; . chặn; . 8px; . add_to_cart{ vị trí. tuyệt đối; . 80px; . 50%; . 152px; . 15px; . -78px; . 2px rắn #fff; . #ffff; . trung tâm; . chữ hoa; . 700; . 10px 0; . 0; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . thêm vào giỏ hàng. di chuột { nền. #ffff; . #5ff7d2; . con trỏ; . make3D. sinh động. add_to_cart{ độ mờ. 1; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . view_gallery{ vị trí. tuyệt đối; . 144px; . 50%; . 152px; . 15px; . -78px; . 2px rắn #fff; . #ffff; . trung tâm; . chữ hoa; . 700; . 10px 0; . 0; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . Xem bộ sưu tập. di chuột { nền. #ffff; . #5ff7d2; . con trỏ; . make3D. sinh động. view_gallery{ độ mờ. 1; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . màu div{ lề-top. 3px; . 15px; . 15px; . 5px; . trái; . màu div span{ chiều rộng. 15px; . 15px; . chặn; . 50%; . khoảng màu div. di chuột { chiều rộng. 17px; . 17px; . -1px 0 0 -1px; . c-blue khoảng {nền. #6e8cd5;} div. nhịp c-đỏ {nền. #f56060;} div. khoảng cách c-màu xanh lá cây {nền. #44c28d;} div. c-khoảng trắng{ nền. #ffff; . 14px; . 14px; . 1px cố định #e8e9eb; . bóng { chiều rộng. 335px;chiều cao. 520px; . 0; . tuyệt đối; . 0; . 0; . 3; . không ai; . -webkit-tuyến tính-gradient[trái,rgba[0,0,0,0. 1],rgba[0,0,0,0. 2]]; . -o-linear-gradient[right,rgba[0,0,0,0. 1],rgba[0,0,0,0. 2]]; . -moz-linear-gradient[right,rgba[0,0,0,0. 1],rgba[0,0,0,0. 2]]; . linear-gradient[sang phải, rgba[0,0,0,0. 1], rgba[0,0,0,0. 2]]; . sản phẩm trở lại div. bóng {z-index. 10; . 1; . -webkit-tuyến tính-gradient[trái,rgba[0,0,0,0. 2],rgba[0,0,0,0. 1]]; . -o-linear-gradient[right,rgba[0,0,0,0. 2],rgba[0,0,0,0. 1]]; . -moz-linear-gradient[right,rgba[0,0,0,0. 2],rgba[0,0,0,0. 1]]; . linear-gradient[sang phải, rgba[0,0,0,0. 2], rgba[0,0,0,0. 1]]; . lật lại { vị trí. tuyệt đối; . 20px; . 20px; . 30px; . 30px; . con trỏ; . cx,. cy{ nền. #d2d5dc; . tuyệt đối; . 0px; . 15px; . 15px; . 3px; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . lật lại. bay lượn. cx,. lật lại. bay lượn. cy{ nền. #979ca7; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . tất cả 250 mili giây vào ra dễ dàng; . cx. s1,. C y. s1{ đúng. 0; . 30px; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . C y. s2{ -ms-biến đổi. xoay [50 độ]; . xoay [50 độ]; . xoay [50 độ]; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . C y. s3{ -ms-biến đổi. xoay [45 độ]; . xoay [45 độ]; . xoay [45 độ]; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . cx. s1{ đúng. 0; . 30px; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . cx. s2{ -ms-biến đổi. xoay [140 độ]; . xoay [140 độ]; . xoay [140 độ]; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100 dễ dàng ra ngoài; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . cx. s3{ -ms-biến đổi. xoay [135 độ]; . xoay [135 độ]; . xoay [135 độ]; . tất cả 100 dễ dàng ra ngoài; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . tất cả 100ms dễ dàng thoát ra; . băng chuyền{ chiều rộng. 315px; . 500px; . ẩn giấu; . liên quan đến; . băng chuyền ul{ vị trí. tuyệt đối; . 0; . 0; . băng chuyền li{ chiều rộng. 315px; . 500px; . trái; . ẩn giấu; . băng chuyền img{ lề trên. -22px; . 110%; . mũi tên-phối cảnh{ chiều rộng. 315px; . 55px; . tuyệt đối; . 218px; . bảo quản-3d; . biến hình 5s; . 335px; . băng chuyềnTrước,. carouselNext{ chiều rộng. 50px; . 55px; . #ccc; . tuyệt đối; . 0; . tất cả 200ms dễ dàng thoát ra; . 0. 9; . con trỏ; . băng chuyềnTiếp theo{ trên cùng. 0; . -26px; . xoayY[ -117deg ]; . xoayY[ -117deg ]; . xoayY[ -117deg ]; . xoayY[ -117deg ]; . tất cả 200ms dễ dàng thoát ra; . băng chuyềnTiếp theo. có thể nhìn thấy{ phải. 0; . 0. số 8; . #ffff; . xoayY[ 0deg ]; . xoayY[ 0deg ]; . xoayY[ 0deg ]; . xoayY[ 0deg ]; . tất cả 200ms dễ dàng thoát ra; . băng chuyềnTrước đó{ trái. -26px; . 0; . xoayY[117deg]; . xoayY[117deg]; . xoayY[117deg]; . xoayY[117deg]; . tất cả 200ms dễ dàng thoát ra; . băng chuyềnTrước đó. có thể nhìn thấy{ trái. 0; . 0. số 8; . #ffff; . xoayY[ 0deg ]; . xoayY[ 0deg ]; . xoayY[ 0deg ]; . xoayY[ 0deg ]; . tất cả 200ms dễ dàng thoát ra; . băng chuyền. x,. băng chuyền. y{ chiều cao. 2px; . 15px; . #5ff7d2; . tuyệt đối; . 31px; . 17px; . xoay [45 độ]; . xoay [45 độ]; . xoay [45 độ]; . băng chuyền. x{ -ms-biến đổi. xoay [135 độ]; . xoay [135 độ]; . xoay [135 độ]; . 21px; . băng chuyền. băng chuyềnTiếp theo. x{ -ms-biến đổi. xoay [45 độ]; . xoay [45 độ]; . xoay [45 độ]; . băng chuyền. băng chuyềnTiếp theo. y{ -ms-biến đổi. xoay [135 độ]; . xoay [135 độ]; . xoay [135 độ]; . xe đẩy nổi{ vị trí. tuyệt đối; . 0; . 0; . 315px; . 480px; . #ffff; . 200; . ẩn giấu; . 0px 5px 31px -1px rgba[0, 0, 0, 0. 15]; . không ai; . xe đẩy nổi. stats-container{display. không;} div. xe đẩy nổi. mặt trước sản phẩm{chiều rộng. 100%; . 0; . 0;} div. xe đẩy nổi. moveToCart{ trái. 75px. quan trọng; . 55px. quan trọng; . 47px; . 47px; . tất cả 800 mili giây vào ra dễ dàng; . tất cả 800 mili giây vào ra dễ dàng; . tất cả 800 mili giây vào ra dễ dàng; . tất cả 800 mili giây vào ra dễ dàng; . tất cả 800 mili giây vào ra dễ dàng; . MakeFloatingCart div. xe đẩy nổi. moveToCart{ trái. 90px. quan trọng; . 140px. quan trọng; . 21px; . 22px; . 0px 5px 31px -1px rgba[0, 0, 0, 0]; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . giỏ hàng-biểu tượng-top{ vị trí. tuyệt đối; . #fff url["https. //s3-us-tây-2. amazonaws. com/s. cdpn. io/245657/giỏ hàng. png"] 0 -3px không lặp lại; lề. 0; . 21px; . 3px; . 1; . 140px; . 90px; . giỏ hàng-biểu tượng-đáy{ vị trí. tuyệt đối; . #fff url["https. //s3-us-tây-2. amazonaws. com/s. cdpn. io/245657/cart. png"] 0 -3px không lặp lại; lề. 0; . 21px; . 19px; z-index. 1; . 143px; . 90px; . MakeFloatingCart div. giỏ hàng-biểu tượng-top{z-index. 30;} body. MakeFloatingCart div. cart-icon-bottom{z-index. 300;} . cart-item{ padding. 11px 0 5px 110px; height. 62px; width. 210px; margin-left. -45px; position. relative; background. #fff; -webkit-transition. all 1000ms ease-out; -moz-transition. all 1000ms ease-out; -ms-transition. all 1000ms ease-out; -o-transition. all 1000ms ease-out; transition. tất cả 1000ms dễ dàng thoát ra; . giỏ hàng. nhấp nháy {nền. #ffffeb0;}. giỏ hàng-mục-đường viền{ vị trí. tuyệt đối; . 0; . 45px; . #edeff0; . 1px; . 230px; . giỏ hàng. img-quấn { chiều rộng. 50px; . 50px; . ẩn giấu; . 1px rắn #edeff0; . trái; . -65px; . giỏ hàng-mục img{chiều rộng. 100%; . tương đối; hàng đầu. -10px;}. giỏ hàng mạnh {màu. #5ff7d2; . 16px;}. khoảng thời gian giỏ hàng{ màu. #393c45; . chặn; . 14px; . giỏ hàng. xóa mục { nền. url["https. //s3-us-tây-2. amazonaws. com/s. cdpn. io/245657/xóa-mục. png"] 0 0 không lặp lại; chiều rộng. 15px; . 15px; . đúng; . 18px; . không ai; . giỏ hàng. bay lượn. xóa-mục{hiển thị. khối; con trỏ. con trỏ} #info{ vị trí. tuyệt đối; . 20px; . 676px; . trung tâm; . 413px; . 15px; . 3px;màu. #b1b1b3} #thông tin về{trang trí văn bản. none;} #checkout{ đường viền. 2px rắn #5ff7d2; . 13px; . 700; . 3px 9px; . tuyệt đối; . 137px; . 181px; . #5ff7d2; . không ai; . sản phẩm. lớn { chiều rộng. 639px; . 25px; . ẩn giấu; . tất cả 500 mili giây vào ra dễ dàng; . tất cả 500 mili giây vào ra dễ dàng; . tất cả 500 mili giây vào ra dễ dàng; . tất cả 500 mili giây vào ra dễ dàng; . tất cả 500 mili giây vào ra dễ dàng; . ảnh nổi-lớn{ vị trí. tuyệt đối; . 0; . 0; . 100%; . thông tin-lớn{ hiển thị. không ai; . tuyệt đối; . 0; . 0px; . 42px; . 245px; . 395px; . tất cả 500ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . lớn. thông tin lớn{ trái. 310px; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . tất cả 300ms dễ dàng thoát ra; . thông tin lớn h4{ chuyển đổi văn bản. chữ hoa; . 28px; . #000; . 400; . 0; . sku{ trọng lượng phông chữ. 700; . #d0d0d0; font-size. 12px; . 11px; . sku mạnh { màu. #000; . giá-lớn{ cỡ chữ. 34px; font-weight. 600; color. #5ff7d2; margin-top. 21px; } . price-big span{ color. #d0d0d0; font-weight. 400; text-decoration. line-through; } . add-cart-large{ border. 3px solid #000; font-size. 17px; background. #fff; text-transform. uppercase; font-weight. 700; padding. 10px; font-family. "Open Sans", sans-serif; width. 246px; . 38px; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . tất cả 200ms dễ dàng thoát ra; . all 200ms ease-out; } . add-cart-large. hover{ color. #5ff7d2; border-color. #5ff7d2; -webkit-transition. all 200ms ease-out; -moz-transition. all 200ms ease-out; -ms-transition. all 200ms ease-out; -o-transition. all 200ms ease-out; transition. all 200ms ease-out; cursor. pointer; } . info-large h3{ letter-spacing. 1px; color. #262626; text-transform. uppercase; font-size. 14px; clear. left; margin-top. 20px; font-weight. 700; margin-bottom. 3px; } . colors-large{ margin-bottom. 38px; } . colors-large li{ float. left; list-style. none; margin-right. 7px; width. 16px; height. 16px; } . colors-large li a{ float. left; width. 16px; height. 16px; border-radius. 50%; } . colors-large li a. hover{ width. 19px; height. 19px; position. relative; top. -1px; left. -1px; } . sizes-large{ } . sizes-large span{ font-weight. 600; color. #b0b0b0; } . sizes-large span. hover{color. #000;cursor. pointer;} . product. large. hover{ box-shadow. 0px 5px 31px -1px rgba[0, 0, 0, 0. 15]; }

$[document]. ready[function[]{ $[". largeGrid"]. click[function[]{ $[this]. find['a']. addClass['active']; $['. smallGrid a']. removeClass['active']; $['. product']. addClass['large']. each[function[]{ }]; setTimeout[function[]{ $['. info-large']. show[]; }, 200]; setTimeout[function[]{ $['. view_gallery']. trigger["click"]; }, 400]; return false; }]; $[". smallGrid"]. click[function[]{ $[this]. find['a']. addClass['active']; $['. largeGrid a']. removeClass['active']; $['div. product']. removeClass['large']; $[". make3D"]. removeClass['animate']; $['. info-large']. fadeOut["fast"]; setTimeout[function[]{ $['div. flip-back']. trigger["click"]; }, 400]; return false; }]; $[". smallGrid"]. click[function[]{ $['. product']. removeClass['large']; return false; }]; $['. colors-large a']. click[function[]{return false;}]; $['. product']. each[function[i, el]{ // Lift card and show stats on Mouseover $[el]. find['. make3D']. hover[function[]{ $[this]. parent[]. css['z-index', "20"]; $[this]. addClass['animate']; $[this]. find['div. carouselNext, div. carouselPrev']. addClass['visible']; }, function[]{ $[this]. removeClass['animate']; $[this]. parent[]. css['z-index', "1"]; $[this]. find['div. carouselNext, div. carouselPrev']. removeClass['visible']; }]; // Flip card to the back side $[el]. find['. view_gallery']. click[function[]{ $[el]. find['div. carouselNext, div. carouselPrev']. removeClass['visible']; $[el]. find['. make3D']. addClass['flip-10']; setTimeout[function[]{ $[el]. find['. make3D']. removeClass['flip-10']. addClass['flip90']. find['div. shadow']. show[]. fadeTo[ 80 , 1, function[]{ $[el]. find['. product-front, . product-front div. shadow']. hide[]; }]; }, 50]; setTimeout[function[]{ $[el]. find['. make3D']. removeClass['flip90']. addClass['flip190']; $[el]. find['. product-back']. show[]. find['div. shadow']. show[]. fadeTo[ 90 , 0]; setTimeout[function[]{ $[el]. find['. make3D']. removeClass['flip190']. addClass['flip180']. find['div. shadow']. hide[]; setTimeout[function[]{ $[el]. find['. make3D']. css['transition', '100ms ease-out']; $[el]. find['. cx, . cy']. addClass['s1']; setTimeout[function[]{$[el]. find['. cx, . cy']. addClass['s2'];}, 100]; setTimeout[function[]{$[el]. find['. cx, . cy']. addClass['s3'];}, 200]; $[el]. find['div. carouselNext, div. carouselPrev']. addClass['visible']; }, 100]; }, 100]; }, 150]; }]; // Flip card back to the front side $[el]. find['. flip-back']. click[function[]{ $[el]. find['. make3D']. removeClass['flip180']. addClass['flip190']; setTimeout[function[]{ $[el]. find['. make3D']. removeClass['flip190']. addClass['flip90']; $[el]. find['. product-back div. shadow']. css['opacity', 0]. fadeTo[ 100 , 1, function[]{ $[el]. find['. product-back, . product-back div. shadow']. hide[]; $[el]. find['. product-front, . product-front div. shadow']. show[]; }]; }, 50]; setTimeout[function[]{ $[el]. find['. make3D']. removeClass['flip90']. addClass['flip-10']; $[el]. find['. product-front div. shadow']. show[]. fadeTo[ 100 , 0]; setTimeout[function[]{ $[el]. find['. product-front div. shadow']. hide[]; $[el]. find['. make3D']. removeClass['flip-10']. css['transition', '100ms ease-out']; $[el]. find['. cx, . cy']. removeClass['s1 s2 s3']; }, 100]; }, 150]; }]; makeCarousel[el]; }]; $['. add-cart-large']. each[function[i, el]{ $[el]. click[function[]{ var carousel = $[this]. parent[]. parent[]. find[". carousel-container"]; var img = carousel. find['img']. eq[carousel. attr["rel"]][0]; var position = $[img]. offset[]; var productName = $[this]. parent[]. find['h4']. get[0]. innerHTML; $["body"]. append['