Card by John-CFO
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 background-color: #161617; 3 height: 360px; 4 width: 310px; 5 position: relative; 6 padding: 10px; 7 padding-top: 10px; 8 border-radius: 12px; 9 display: flex; 10 justify-content: center; 11 align-items: center; 12 flex-direction: column; 13} 14 15.card::before { 16 content: ''; 17 background: linear-gradient(315deg,#03a9f4,#ff0058); 18 height: 368px; 19 width: 318px; 20 position: absolute; 21 top: -4px; 22 left: -4px; 23 z-index: -1; 24 border-radius: 12px; 25} 26 27.heading { 28 line-height: 10px; 29 font-size: 18px; 30 text-align: center; 31 font-weight: bold; 32 color: rgb(110, 110, 110); 33} 34 35.heading span { 36 position: relative; 37 top: 24px; 38 font-size: 50px; 39 font-weight: bold; 40 color: rgb(176, 243, 255); 41 z-index: 2; 42 font-family: 'Avalors Personal Use'; 43 letter-spacing: 5px; 44 text-shadow: 0 0 14px white; 45} 46 47.content { 48 width: 100%; 49 height: 250px; 50 display: flex; 51 gap: 20px; 52 justify-content: center; 53 align-items: center; 54 flex-direction: column; 55} 56 57.item { 58 color: white; 59 font-weight: 600; 60 display: flex; 61 align-items: center; 62 justify-content: center; 63 gap: 5px; 64 cursor: pointer; 65} 66 67.item svg { 68 transition-duration: .3s; 69} 70 71.item:hover svg { 72 color: rgb(176,243,255); 73 transition-duration: .2s; 74 transform: translateX(-1em); 75} 76 77button { 78 --glow-color: rgb(176, 243, 255); 79 --glow-spread-color: rgba(123, 251, 255, 0.781); 80 --enhanced-glow-color: rgb(71, 182, 182); 81 --btn-color: rgba(13, 17, 241, 0.508); 82 border: .25em solid var(--glow-color); 83 padding: 1em 2em; 84 color: var(--glow-color); 85 font-size: 14px; 86 font-weight: bold; 87 background-color: var(--btn-color); 88 border-radius: 1em; 89 outline: none; 90 box-shadow: 0 0 1em .25em var(--glow-color), 91 0 0 4em 1em var(--glow-spread-color), 92 inset 0 0 .05em .25em var(--glow-color); 93 text-shadow: 0 0 .5em var(--glow-color); 94 position: relative; 95 transition: all 0.3s; 96 cursor: pointer; 97} 98 99button::after { 100 pointer-events: none; 101 content: ""; 102 position: absolute; 103 top: 120%; 104 left: 0; 105 height: 100%; 106 width: 100%; 107 background-color: var(--glow-spread-color); 108 filter: blur(2em); 109 opacity: .7; 110 transform: perspective(1.5em) rotateX(35deg) scale(1, .6); 111} 112 113button:hover { 114 color: var(--btn-color); 115 background-color: var(--glow-color); 116 box-shadow: 0 0 1em .25em var(--glow-color), 117 0 0 4em 2em var(--glow-spread-color), 118 inset 0 0 .75em .25em var(--glow-color); 119} 120 121button:active { 122 box-shadow: 0 0 0.6em .25em var(--glow-color), 123 0 0 2.5em 2em var(--glow-spread-color), 124 inset 0 0 .5em .25em var(--glow-color); 125} 126 127 128 129 130
490 views
490 views
MIT License