Nút thêm vào giỏ hàng bootstrap
|
Show CHECKOUT Add to cart interaction prototype by Virgil Pana Follow me on Dribbble . Twitter
CARTNo items in cart CATEGORIES
COLORS
SIZES
PRICE RANGEView FLUTED HEM DRESSPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To Cart Add to cart View gallery $39 FLUTED HEM DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS PLEAT PRINTED DRESSPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd to cart View gallery $39 PLEAT PRINTED DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS FLOWY SHIRT DRESSPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd to cart View gallery $39 FLOWY SHIRT DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS DOUBLE LAYER DRESSPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd to cart View gallery $39 DOUBLE LAYER DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS BEAD DETAIL DRESSPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd to cart View gallery $39 BEAD DETAIL DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS PLEATED DETAIL DRESSPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd to cart View gallery $39 PLEATED DETAIL DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS ÁO INPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd to cart View gallery $39 PRINTED DRESS Summer dress SIZES XS, S, M, L, XL, XXL COLORS ÁO INPRODUCT SKU. 89356 $43 $39 COLORSSIZEXS S M L XL XXL Add To CartAdd 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(' |
