Card by amanrajnarayan
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 border: 1px solid white; 3 border-radius: 10px; 4 padding: 1em; 5 display: flex; 6 flex-direction: column; 7 background: hsla(180, 68%, 54%, 1); 8 background: linear-gradient(135deg, rgb(39, 160, 220) 0%, rgb(220, 17, 149) 100%); 9 background: -moz-linear-gradient(135deg, rgb(44, 159, 208) 0%, rgb(222, 21, 151) 100%); 10 background: -webkit-linear-gradient(135deg, rgb(58, 103, 217) 0%, rgb(251, 18, 169) 100%); 11 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#3BD9D9", endColorstr="#FF0DAA", GradientType=1 ); 12 /* background: hsla(197, 100%, 63%, 1); 13 background: linear-gradient(315deg, hsla(197, 100%, 63%, 1) 8%, hsla(294, 82%, 46%, 1) 100%); 14 background: -moz-linear-gradient(315deg, hsla(197, 100%, 63%, 1) 8%, hsla(294, 82%, 46%, 1) 100%); 15 background: -webkit-linear-gradient(315deg, hsla(197, 100%, 63%, 1) 8%, hsla(294, 82%, 46%, 1) 100%); 16 filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#40c9ff", endColorstr="#C315D6", GradientType=1 ); */ 17} 18 19.content { 20 display: flex; 21 flex-direction: row; 22 align-items: flex-end; 23 justify-content: space-around; 24 /* justify-content: center; */ 25} 26 27.item { 28 display: flex; 29 flex-direction: column; 30 align-items: center; 31 border: 1px; 32 border-radius: 7px; 33 margin: 0.4em; 34 padding: 0.7em; 35 box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.565); 36 transition: all 0.1s; 37} 38 39.item:hover { 40 transform: translateY(-0.2em); 41} 42 43.item:nth-child(2) { 44 border: none; 45} 46 47.heading { 48 margin: 1em; 49 margin-top: 0em; 50 margin-bottom: 1.5em; 51 padding: 2px 15px; 52 border-radius: 10px; 53 font-size: large; 54 box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.565); 55} 56 57.heading span { 58 color: #3bd9d9; 59 font-weight: 500; 60} 61 62button { 63 align-items: center; 64 background: none; 65 color: #ffffff; 66 border: 1px solid rgba(255, 255, 255, 0.558); 67 border-radius: 10px; 68 margin-top: 1.25em; 69 padding: 0.7em 0.7em; 70 font-size: 1em; 71 transition: all 0.2s; 72} 73 74button:hover { 75 border-color: #a8ff5c; 76 color: white; 77 /* box-shadow: 0em 0.5em 0.5em -0.4em #f1ff5c; */ 78 box-shadow: 0px 6px 13px rgba(0, 0, 0, 0.565); 79 transform: translateY(-0.25em); 80 cursor: pointer; 81}
481 views
481 views
MIT License