Card by dldrs
#e8e8e8
1.card { 2 width: 400px; 3 height: auto; 4 background: #f9f9f9; 5 border-radius: 5px; 6 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.1); 7 margin: 20px; 8 padding: 0 10px; 9} 10 11.card-wrapper { 12 display: inline-flex; 13 flex-wrap: nowrap; 14 align-items: center; 15 width: 100%; 16} 17 18.card-icon { 19 width: 20%; 20} 21 22.card-icon .icon-cart-box { 23 background-color: #e0f2f1; 24 width: 3em; 25 height: 3em; 26 border-radius: 50%; 27 text-align: center; 28 padding: 15px 0px; 29 margin: 0 auto; 30} 31 32.card-content { 33 width: 80%; 34} 35 36.card-title-wrapper { 37 display: inline-flex; 38 flex-wrap: nowrap; 39 align-items: baseline; 40 width: 100%; 41} 42 43.card-title { 44 width: 95%; 45 font-size: 1em; 46 font-weight: 600; 47 color: #333; 48 padding: 20px 0 0 10px; 49} 50 51.card-action { 52 width: 5%; 53 text-align: right; 54 padding: 0 30px; 55} 56 57.card-action svg { 58 cursor: pointer; 59 fill: rgba(0, 0, 0, 0.2); 60 transition: 0.3s ease-in-out; 61} 62 63.card-action svg:hover { 64 fill: rgba(0, 0, 0, 0.6); 65} 66 67.product-name { 68 font-size: 0.8em; 69 color: #757575; 70 padding: 10px 0 0 10px; 71} 72 73.product-name:hover { 74 cursor: pointer; 75 text-decoration: underline; 76} 77 78.product-price { 79 font-size: 0.9em; 80 font-weight: 600; 81 color: #333; 82 padding: 0 0 10px 10px; 83} 84 85.btn-view-cart { 86 font-size: 0.7em; 87 font-weight: 600; 88 padding: 5px 10px; 89 margin: 5px 10px 20px; 90 border-radius: 15px; 91 color: #009688; 92 border: 1px solid #009688; 93 background-color: #e0f2f1; 94 box-shadow: none; 95 text-transform: uppercase; 96 cursor: pointer; 97 transition: 0.4s ease-in-out; 98} 99 100.btn-view-cart:hover, 101.btn-view-cart:active, 102.btn-view-cart:focus { 103 color: white; 104 background-color: #009688; 105 border: 1px solid #009688; 106} 107
260 views
260 views
Variations
1 MIT License