Card by MuhammadHasann
#e8e8e8
1.card { 2 --pink-500: #fda8ff; 3 --red-400: #f56767; 4 --sky-300: #bbefff; 5 --blue-500: #00a3fe; 6 7 cursor: pointer; 8 position: relative; 9 display: flex; 10 flex-direction: column; 11 justify-content: center; 12 gap: 0.75rem; 13 14 padding: 1rem; 15 width: 14rem; 16 height: auto; 17 background-color: black; 18 19 border-radius: 0.5rem; 20} 21 22.card .rectangle { 23 position: absolute; 24 25 width: 0.925rem; 26 aspect-ratio: 1 / 1; 27 background-color: white; 28 29 opacity: 0; 30 box-shadow: 0rem 0rem 0rem 0.175rem black; 31} 32.card:hover .rectangle { 33 opacity: 1; 34} 35 36.card .rectangle.left-top { 37 top: -0.25rem; 38 left: -0.25rem; 39} 40.card .rectangle.right-top { 41 top: -0.25rem; 42 right: -0.25rem; 43} 44.card .rectangle.left-bottom { 45 bottom: -0.25rem; 46 left: -0.25rem; 47} 48.card .rectangle.right-bottom { 49 bottom: -0.25rem; 50 right: -0.25rem; 51} 52 53.card .image { 54 position: relative; 55 z-index: 10; 56 display: flex; 57 justify-content: center; 58 align-items: center; 59 60 padding: 0.25rem; 61 width: 100%; 62 height: 7.25rem; 63 background-color: var(--pink-500); 64 65 border-radius: 0.25rem; 66} 67 68.card .image .svg { 69 width: 2.5rem; 70 fill: black; 71} 72 73.card .title { 74 position: relative; 75 z-index: 10; 76 77 font-size: 1.25rem; 78 color: white; 79 font-weight: bold; 80} 81 82.card .love { 83 display: flex; 84 align-items: center; 85 gap: 0.375rem; 86 87 font-size: 1rem; 88 font-weight: bold; 89 color: white; 90} 91 92.card .love .svg { 93 width: 1.25rem; 94 fill: var(--red-400); 95} 96 97.card .category { 98 display: flex; 99 align-items: center; 100 gap: 0.375rem; 101} 102 103.card .category .button { 104 cursor: pointer; 105 106 padding: 0.25rem 0.5rem; 107 background-color: #d9d9d9; 108 109 font-size: 0.5rem; 110 color: black; 111 112 border: 2px solid transparent; 113 border-radius: 9999px; 114 transition: all 0.3s ease-in-out; 115} 116.card .category .button:hover { 117 border: 2px solid var(--blue-500); 118} 119 120.card .action { 121 padding-block: 0.375rem; 122 margin-top: 0.75rem; 123 background-color: var(--sky-300); 124 125 font-size: 0.75rem; 126 font-weight: 700; 127 color: black; 128 129 border: 2px solid transparent; 130 border-radius: 0.5rem; 131 transition: all 0.3s ease-in-out; 132} 133.card .action:hover { 134 border: 2px solid var(--blue-500); 135} 136
973 views
973 views
MIT License