Card by DeepanshuKant
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 border-radius: 12px; 3 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 4 display: flex; 5 flex-direction: column; 6 font-family: Arial, sans-serif; 7 max-width: 400px; 8 overflow: hidden; 9 transition: box-shadow 0.3s ease; 10 user-select: none; 11} 12 13.card:hover { 14 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 15 transform: translateY(-2px); 16} 17 18.card>button { 19 padding: 10px; 20 background-color: #1c1f2b; 21 color: #fff; 22 outline: none; 23 border: none; 24 font-size: 15px; 25 cursor: pointer; 26} 27 28.card>button:hover { 29 transition: color 0.2s ease; 30 color: #47b8ff; 31} 32 33.heading { 34 background-color: #1c1f2b; 35 color: #fff; 36 font-size: 24px; 37 font-weight: bold; 38 padding: 20px; 39 text-align: center; 40 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); 41} 42 43.heading span { 44 color: #47b8ff; 45 font-weight: normal; 46} 47 48.content { 49 display: flex; 50 flex-direction: column; 51 padding: 20px; 52} 53 54.item { 55 align-items: center; 56 display: flex; 57 margin-bottom: 16px; 58} 59 60.item svg { 61 fill: #47b8ff; 62 margin-right: 12px; 63} 64 65.item span { 66 color: #1c1f2b; 67 font-size: 18px; 68 font-weight: bold; 69} 70 71.item.item--create svg { 72 fill: #5eba7d; 73} 74 75.item.item--create span { 76 color: #5eba7d; 77} 78 79.item.item--post svg { 80 fill: #f44336; 81} 82 83.item.item--post span { 84 color: #f44336; 85} 86 87.item.item--inspire span { 88 color: #fefefe; 89} 90
403 views
403 views
MIT License