├── images ├── blue.png ├── logo.jpg ├── pink.png └── yellow.png ├── README.md ├── index.html └── style.css /images/blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/The-day/HEAD/images/blue.png -------------------------------------------------------------------------------- /images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/The-day/HEAD/images/logo.jpg -------------------------------------------------------------------------------- /images/pink.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/The-day/HEAD/images/pink.png -------------------------------------------------------------------------------- /images/yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codeaashu/The-day/HEAD/images/yellow.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive-Animated-Product-Card 2 | create an (ADDIDAS GAZE ZX) Animated Product Card using HTML CSS, and JavaScript. 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CODE AASHU | Responsive Animated Product Card 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | logo 15 | 16 |
17 |
18 | blue 19 | blue 20 | blue 21 |
22 |
23 | ADDIDAS GAZE ZX 24 |

Lorem ipsum dolor sit lorenm i amet, consectetur adipisicing elit. Eum, ea, ducimus!

25 |
26 | 27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 |
35 | Colour: 36 |
37 | 38 | 39 | 40 |
41 |
42 |
43 | ₹2000 44 | Two Thousand only 45 |
46 |
47 |
48 |
49 | 50 |
51 |
52 | 65 | 66 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Google Fonts Poppins */ 2 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); 3 | /* ===( CODE AASHU )=== */ 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'Poppins', sans-serif; 9 | } 10 | 11 | body{ 12 | height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | background-image: linear-gradient(135deg, #43CBFF 10%, #9708CC 100%); 17 | } 18 | .product-card { 19 | position: relative; 20 | max-width: 355px; 21 | width: 100%; 22 | border-radius: 25px; 23 | padding: 20px 30px 30px 30px; 24 | background: #fff; 25 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 26 | z-index: 3; 27 | overflow: hidden; 28 | } 29 | .product-card .logo-cart{ 30 | display: flex; 31 | align-items: center; 32 | justify-content: space-between; 33 | } 34 | .product-card .logo-cart img{ 35 | height: 60px; 36 | width: 60px; 37 | object-fit: cover; 38 | } 39 | .product-card .logo-cart i{ 40 | font-size: 27px; 41 | color: #707070; 42 | cursor: pointer; 43 | transition: color 0.3s ease; 44 | } 45 | .product-card .logo-cart i:hover{ 46 | color: #333; 47 | } 48 | .product-card .main-images{ 49 | position: relative; 50 | height: 210px; 51 | } 52 | .product-card .main-images img{ 53 | position: absolute; 54 | height: 300px; 55 | width: 300px; 56 | object-fit: cover; 57 | transform: rotate(18deg); 58 | left: 12px; 59 | top: -40px; 60 | z-index: -1; 61 | opacity: 0; 62 | transition: opacity 0.5s ease; 63 | } 64 | .product-card .main-images img.active{ 65 | opacity: 1; 66 | } 67 | .product-card .shoe-details .shoe_name{ 68 | font-size: 24px; 69 | font-weight: 500; 70 | color: #161616; 71 | } 72 | .product-card .shoe-details p{ 73 | font-size: 12px; 74 | font-weight: 400; 75 | color: #333; 76 | text-align: justify; 77 | } 78 | .product-card .shoe-details .stars i{ 79 | margin: 0 -1px; 80 | color: #333; 81 | } 82 | .product-card .color-price .color-option{ 83 | display: flex; 84 | align-items: center; 85 | } 86 | .color-price{ 87 | display: flex; 88 | justify-content: space-between; 89 | align-items: center; 90 | margin-top: 10px; 91 | } 92 | .color-price .color-option .color{ 93 | font-size: 18px; 94 | font-weight: 500; 95 | color: #333; 96 | margin-right: 8px; 97 | } 98 | .color-option .circles{ 99 | display: flex; 100 | } 101 | .color-option .circles .circle{ 102 | height: 18px; 103 | width: 18px; 104 | background: #0071C7; 105 | border-radius: 50%; 106 | margin: 0 4px; 107 | cursor: pointer; 108 | transition: all 0.4s ease; 109 | } 110 | .color-option .circles .circle.blue.active{ 111 | box-shadow: 0 0 0 2px #fff, 112 | 0 0 0 4px #0071C7; 113 | } 114 | .color-option .circles .circle.pink{ 115 | background: #FA1795; 116 | } 117 | .color-option .circles .circle.pink.active{ 118 | box-shadow: 0 0 0 2px #fff, 119 | 0 0 0 4px #FA1795; 120 | } 121 | .color-option .circles .circle.yellow{ 122 | background: #F5DA00; 123 | } 124 | .color-option .circles .circle.yellow.active{ 125 | box-shadow: 0 0 0 2px #fff, 126 | 0 0 0 4px #F5DA00; 127 | } 128 | .color-price .price{ 129 | display: flex; 130 | flex-direction: column; 131 | justify-content: center; 132 | align-items: center; 133 | } 134 | .color-price .price .price_num{ 135 | font-size: 25px; 136 | font-weight: 600; 137 | color: #707070; 138 | } 139 | .color-price .price .price_letter{ 140 | font-size: 10px; 141 | font-weight: 600; 142 | margin-top: -4px; 143 | color: #707070; 144 | } 145 | .product-card .button{ 146 | position: relative; 147 | height: 50px; 148 | width: 100%; 149 | border-radius: 25px; 150 | margin-top: 30px; 151 | overflow: hidden; 152 | } 153 | .product-card .button .button-layer{ 154 | position: absolute; 155 | height: 100%; 156 | width: 300%; 157 | left: -100%; 158 | background-image: linear-gradient(135deg,#9708CC, #43CBFF,#9708CC, #43CBFF ); 159 | transition: all 0.4s ease; 160 | border-radius: 25PX; 161 | } 162 | .product-card .button:hover .button-layer{ 163 | left: 0; 164 | } 165 | .product-card .button button{ 166 | position: relative; 167 | height: 100%; 168 | width: 100%; 169 | background: none; 170 | outline: none; 171 | border: none; 172 | font-size: 18px; 173 | font-weight: 600; 174 | letter-spacing: 1px; 175 | color: #fff; 176 | } --------------------------------------------------------------------------------