#47ecf7
1.card { 2 width: 230px; 3 border-radius: 20px; 4 background: #1b233d; 5 padding: 5px; 6 overflow: hidden; 7 box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px; 8 transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); 9} 10 11.card:hover { 12 transform: scale(1.05); 13} 14 15.card .top-section { 16 height: 150px; 17 border-radius: 15px; 18 display: flex; 19 flex-direction: column; 20 background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%); 21 position: relative; 22} 23 24.card .top-section .border { 25 border-bottom-right-radius: 10px; 26 height: 30px; 27 width: 130px; 28 background: white; 29 background: #1b233d; 30 position: relative; 31 transform: skew(-40deg); 32 box-shadow: -10px -10px 0 0 #1b233d; 33} 34 35.card .top-section .border::before { 36 content: ""; 37 position: absolute; 38 width: 15px; 39 height: 15px; 40 top: 0; 41 right: -15px; 42 background: rgba(255, 255, 255, 0); 43 border-top-left-radius: 10px; 44 box-shadow: -5px -5px 0 2px #1b233d; 45} 46 47.card .top-section::before { 48 content: ""; 49 position: absolute; 50 top: 30px; 51 left: 0; 52 background: rgba(255, 255, 255, 0); 53 height: 15px; 54 width: 15px; 55 border-top-left-radius: 15px; 56 box-shadow: -5px -5px 0 2px #1b233d; 57} 58 59.card .top-section .icons { 60 position: absolute; 61 top: 0; 62 width: 100%; 63 height: 30px; 64 display: flex; 65 justify-content: space-between; 66} 67 68.card .top-section .icons .logo { 69 height: 100%; 70 aspect-ratio: 1; 71 padding: 7px 0 7px 15px; 72} 73 74.card .top-section .icons .logo .top-section { 75 height: 100%; 76} 77 78.card .top-section .icons .social-media { 79 height: 100%; 80 padding: 8px 15px; 81 display: flex; 82 gap: 7px; 83} 84 85.card .top-section .icons .social-media .svg { 86 height: 100%; 87 fill: #1b233d; 88} 89 90.card .top-section .icons .social-media .svg:hover { 91 fill: white; 92} 93 94.card .bottom-section { 95 margin-top: 15px; 96 padding: 10px 5px; 97} 98 99.card .bottom-section .title { 100 display: block; 101 font-size: 17px; 102 font-weight: bolder; 103 color: white; 104 text-align: center; 105 letter-spacing: 2px; 106} 107 108.card .bottom-section .row { 109 display: flex; 110 justify-content: space-between; 111 margin-top: 20px; 112} 113 114.card .bottom-section .row .item { 115 flex: 30%; 116 text-align: center; 117 padding: 5px; 118 color: rgba(170, 222, 243, 0.721); 119} 120 121.card .bottom-section .row .item .big-text { 122 font-size: 12px; 123 display: block; 124 color: white; 125 font-weight: 700; 126} 127 128.card .bottom-section .row .item .regular-text { 129 font-size: 9px; 130} 131 132.card .bottom-section .row .item:nth-child(2) { 133 border-left: 1px solid rgba(255, 255, 255, 0.126); 134 border-right: 1px solid rgba(255, 255, 255, 0.126); 135}
Comments
MIT License