Card by SujitAdroja
#e8e8e8
1.columns { 2 width: 18em; 3 position: relative; 4 border-radius: 20px; 5 padding: 35px; 6 border: 2px solid black; 7 transition: all 0.4s; 8} 9 10.columns:hover { 11 box-shadow: 4px 4px 0 1px rgba(0,0,0); 12} 13 14.dots { 15 position: absolute; 16 right: 15px; 17 top: 15px; 18} 19 20.columns .button-container { 21 display: flex; 22 justify-content: space-between; 23 align-items: center; 24 gap: 30px; 25 margin-bottom: 20px; 26} 27 28.offer { 29 font-size: 17px; 30 font-weight: 900; 31 border-bottom: 2px solid black; 32 cursor: pointer; 33 transition: all 0.4s; 34} 35 36.btn { 37 padding: 7px 15px; 38 border: 1px solid black; 39 background-color: orange; 40 border-radius: 10px; 41 letter-spacing: 1px; 42 font-weight: 600; 43 cursor: pointer; 44 transition: all 0.4s; 45} 46 47.columns:hover .btn { 48 box-shadow: 2px 2px 0 1px rgba(0,0,0); 49} 50 51.columns:hover .offer { 52 color: green; 53 border-color: green; 54} 55 56.btn:focus { 57 background: transparent; 58} 59 60.secondary-heading { 61 font-size: 20px; 62 font-weight: 600; 63 margin-bottom: 20px; 64} 65 66.card-description { 67 font-size: 18px; 68 font-weight: 500; 69 line-height: 1.2; 70} 71
522 views
522 views
MIT License