├── README.md ├── cart.js ├── hw8.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # hw8 2 | 3 | ![This is an image]![Screenshot_1](https://user-images.githubusercontent.com/107684179/185780543-64a511d6-96f9-4105-b9d0-3e9ba02a5823.png) 4 | -------------------------------------------------------------------------------- /cart.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function(){ 2 | var cartCountValue = 0; 3 | var cartCount = $('.count'); 4 | $(cartCount).text(cartCountValue); 5 | 6 | $('.cart-btn').on('click', function(){ 7 | var cartBtn = this; 8 | var cartCountPosition = $(cartCount).offset(); 9 | var btnPosition = $(this).offset(); 10 | var leftPos = 11 | cartCountPosition.left < btnPosition.left 12 | ? btnPosition.left - (btnPosition.left - cartCountPosition.left) 13 | : cartCountPosition.left; 14 | 15 | var topPos = 16 | cartCountPosition.top < btnPosition.top 17 | ? cartCountPosition.top 18 | : cartCountPosition.top; 19 | $(cartBtn) 20 | .append("1"); 21 | 22 | $(cartBtn).find('.count').each(function(i, count){ 23 | $(count).offset({ 24 | left: leftPos, 25 | top: topPos 26 | }) 27 | .animate( 28 | { 29 | opcity: 0 30 | }, 31 | 800, 32 | function(){ 33 | $(this).remove(); 34 | cartCountValue++; 35 | $(cartCount).text(cartCountValue); 36 | $(cartCount).text(cartCountValue); 37 | } 38 | ); 39 | }); 40 | }); 41 | }); -------------------------------------------------------------------------------- /hw8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | hw8 6 | 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 | Cart 16 |
17 |
0
18 |
19 |
20 | 21 |
22 |
23 |
24 | Headphone 25 |

Premium headphone

26 |
27 |
$30
28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 | 37 |
38 |
39 |
40 | Apple Airpod 41 |

Premium black airpod

42 |
43 |
$50
44 |
45 |
46 | 47 | 48 |
49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 | Apple Watch 57 |

Premium digital watch

58 |
59 |
$80
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-family: 'Poppins', sans-serif; 7 | } 8 | 9 | body{ 10 | display: flex; 11 | padding: 0 20px; 12 | align-items: center; 13 | justify-content: center; 14 | min-height: 100vh; 15 | background: #ff7979; 16 | } 17 | 18 | .wrapper{ 19 | position: relative; 20 | max-width: 1130px; 21 | display: flex; 22 | align-items: center; 23 | justify-content: space-between; 24 | } 25 | 26 | .wrapper .cart-nav{ 27 | position: absolute; 28 | top: -30%; 29 | right: 0; 30 | width: 130px; 31 | padding: 13px 15px; 32 | background: #fff; 33 | display: flex; 34 | justify-content: space-evenly; 35 | cursor: pointer; 36 | border-radius: 3px; 37 | } 38 | 39 | .cart-nav .icon{ 40 | color: #ff7979; 41 | } 42 | 43 | .cart-nav .icon i{ 44 | font-size: 20px; 45 | } 46 | 47 | .cart-nav .item-numb{ 48 | font-weight: 500; 49 | } 50 | 51 | .cart-nav .count{ 52 | font-size: 15px; 53 | height: 23px; 54 | width: 23px; 55 | color: #ff7979; 56 | border-radius: 50%; 57 | text-align: center; 58 | line-height: 22px; 59 | background: #ffcccc; 60 | border: 1px solid #ffb3b3; 61 | } 62 | 63 | .wrapper .card{ 64 | position: relative; 65 | width: calc(33% - 13px); 66 | border-radius: 3px; 67 | background: #fff; 68 | overflow: hidden; 69 | } 70 | 71 | .wrapper .card img{ 72 | width: 100%; 73 | border-radius: 3px; 74 | transition: all 0.3s ease; 75 | } 76 | 77 | .wrapper .card:hover img{ 78 | transform: scale(1.1); 79 | } 80 | 81 | .wrapper .card .content{ 82 | position: absolute; 83 | width: 100%; 84 | background: #fff; 85 | bottom: -50%; 86 | padding: 10px 20px 22px 20px; 87 | box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.15); 88 | transition: all 0.3s ease; 89 | } 90 | 91 | .wrapper .card:hover .content{ 92 | bottom: 0; 93 | } 94 | 95 | .card .content .row, 96 | .card .content .buttons{ 97 | display: flex; 98 | justify-content: space-between; 99 | } 100 | 101 | .content .row .details span{ 102 | font-size: 22px; 103 | font-weight: 500; 104 | } 105 | 106 | .content .row .details p{ 107 | color: #333; 108 | font-size: 17px; 109 | font-weight: 400; 110 | } 111 | 112 | .content .row .price{ 113 | color: #ff7979; 114 | font-size: 25px; 115 | font-weight: 600; 116 | } 117 | 118 | .content .buttons{ 119 | margin-top: 20px; 120 | } 121 | 122 | .content .buttons button{ 123 | width: 100%; 124 | outline: none; 125 | padding: 10px 0; 126 | font-size: 17px; 127 | font-weight: 500; 128 | border-radius: 3px; 129 | border: 2px solid #ff7979; 130 | cursor: pointer; 131 | text-transform: uppercase; 132 | transition: all 0.3s ease; 133 | } 134 | 135 | .buttons button:first-child{ 136 | color: #ff7979; 137 | background: #fff; 138 | margin-right: 10px; 139 | } 140 | 141 | button:first-child:hover{ 142 | color: #fff; 143 | background: #ff7979; 144 | } 145 | 146 | .buttons button:last-child{ 147 | color: #fff; 148 | background: #ff7979; 149 | margin-left: 10px; 150 | } 151 | 152 | button:last-child:hover{ 153 | color: #ff7979; 154 | border-color: #fff; 155 | } --------------------------------------------------------------------------------