├── README.md ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # HTML-CSS-Product-Card 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/42389395/175930945-48bb0984-ca39-4819-ac76-d638a05ae009.mov 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Test 7 | 8 | 9 | 10 | 11 | 12 |
13 |
New Product
14 |
15 | 16 |
17 |
18 | LEGO, Toy 19 |

Red Lego Man

20 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, possimus nostrum!

21 |
22 |
$16.49$8.99
23 |
24 | 25 | 26 |
27 |
28 |
29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700'); 2 | * 3 | { 4 | -webkit-box-sizing: border-box; 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | 11 | body 12 | { 13 | font-family: 'Roboto', sans-serif; 14 | background-color: #f2eee3; 15 | } 16 | a 17 | { 18 | text-decoration: none; 19 | } 20 | .product-card { 21 | width: 380px; 22 | position: relative; 23 | box-shadow: 0 2px 7px #dfdfdf; 24 | margin: 50px auto; 25 | background: #fafafa; 26 | } 27 | 28 | .badge { 29 | position: absolute; 30 | left: 0; 31 | top: 20px; 32 | text-transform: uppercase; 33 | font-size: 13px; 34 | font-weight: 700; 35 | background: red; 36 | color: #fff; 37 | padding: 3px 10px; 38 | } 39 | 40 | .product-tumb { 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | height: 300px; 45 | padding: 50px; 46 | background: #f0f0f0; 47 | } 48 | 49 | .product-tumb img { 50 | max-width: 100%; 51 | max-height: 100%; 52 | } 53 | 54 | .product-details { 55 | padding: 30px; 56 | } 57 | 58 | .product-catagory { 59 | display: block; 60 | font-size: 12px; 61 | font-weight: 700; 62 | text-transform: uppercase; 63 | color: #ccc; 64 | margin-bottom: 18px; 65 | } 66 | 67 | .product-details h4 a { 68 | font-weight: 500; 69 | display: block; 70 | margin-bottom: 18px; 71 | text-transform: uppercase; 72 | color: #363636; 73 | text-decoration: none; 74 | transition: 0.3s; 75 | } 76 | 77 | .product-details h4 a:hover { 78 | color: red; 79 | } 80 | 81 | .product-details p { 82 | font-size: 15px; 83 | line-height: 22px; 84 | margin-bottom: 18px; 85 | color: #999; 86 | } 87 | 88 | .product-bottom-details { 89 | overflow: hidden; 90 | border-top: 1px solid #eee; 91 | padding-top: 20px; 92 | } 93 | 94 | .product-bottom-details div { 95 | float: left; 96 | width: 50%; 97 | } 98 | 99 | .product-price { 100 | font-size: 18px; 101 | color: red; 102 | font-weight: 600; 103 | } 104 | 105 | .product-price small { 106 | font-size: 80%; 107 | font-weight: 400; 108 | text-decoration: line-through; 109 | display: inline-block; 110 | margin-right: 5px; 111 | } 112 | 113 | .product-links { 114 | text-align: right; 115 | } 116 | 117 | .product-links a { 118 | display: inline-block; 119 | margin-left: 5px; 120 | color: #e1e1e1; 121 | transition: 0.3s; 122 | font-size: 17px; 123 | } 124 | 125 | .product-links a:hover { 126 | color: red; 127 | } --------------------------------------------------------------------------------