Card by Admin12121
#212121
1.h3 span { 2 font-weight: 800; 3 background: linear-gradient(125deg, #b663ff, #13c1ef); 4 text-transform: uppercase; 5 -webkit-background-cLip: text; 6 -webkit-text-filL-coLor: transparent; 7} 8 9.h3::after { 10 content: ''; 11 margin-top: -5px; 12 height: 3px; 13 width: 25%; 14 background: linear-gradient(125deg, #b663ff, #13c1ef); 15 display: block; 16} 17 18.main { 19 display: flex; 20 justify-content: center; 21 align-items: center; 22} 23 24.card { 25 width: 80%; 26 position: relative; 27 background-color: rgb(16 16 16); 28 border: 1px solid rgb(255 255 255 / 5%); 29 border-radius: 1.5rem; 30 padding: 1rem; 31} 32 33.card:after { 34 content: ""; 35 height: 70px; 36 width: 1px; 37 position: absolute; 38 left: -1px; 39 top: 65%; 40 transition: top, opacity; 41 transition-duration: 600ms; 42 transition-timing-function: ease; 43 background: linear-gradient(transparent, mediumslateblue,transparent); 44 box-shadow: 0 0 30px mediumslateblue; 45 opacity: 0; 46} 47 48.card:after { 49 top: 65%; 50 opacity: 0; 51} 52 53.card:hover:after { 54 top: 25%; 55 opacity: 1; 56} 57 58.card-content { 59 display: flex; 60 flex-direction: column; 61 justify-content: center; 62 align-items: center; 63 background-image: radial-gradient( 64 rgba(255, 255, 255, 0.1) 1px, 65 transparent 1px 66 ); 67 background-position: 50% 50%; 68 background-size: 1.1rem 1.1rem; 69 padding: 2.3rem; 70 border-radius: 1.25rem; 71 overflow: hidden; 72} 73 74.card-content .h1,.h3,.p { 75 text-align: center; 76} 77 78.card-content .h1 { 79 color: rgb(250 249 246); 80 font-size: 2.6rem; 81} 82 83.card-content .h3 { 84 color: #fff; 85 text-transform: uppercase; 86 font-size: 1.5rem; 87} 88 89.card-content .p { 90 color: rgb(255 255 255 / 75%); 91 line-height: 1.3rem; 92} 93 94@media(max-width: 700px) { 95 .card { 96 width: calc(100% - 2rem); 97 margin: 0rem 1rem; 98 padding: 0.75rem; 99 border-radius: 1rem; 100 } 101} 102 103@media(max-width: 600px) { 104 .card-content { 105 padding: 3rem; 106 } 107 108 .card-content .h1 { 109 font-size: 2.2rem; 110 } 111} 112
Β
742 views
742 views
MIT License