#212121
1.card { 2 max-width: 350px; 3 background-color: rgb(7 16 45); 4 background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84)); 5 background: -webkit-linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84)); 6 display: flex; 7 flex-direction: column; 8 padding: 20px; 9 border-radius: 20px; 10 border: 1px solid rgb(84 90 106); 11} 12 13.small-text, .title,.desc { 14 font-weight: 600; 15} 16 17.title,.desc { 18 margin: 8px 0; 19} 20 21.small-text { 22 color: #488aec; 23 font-size: 14px; 24} 25 26.title { 27 color: #fff; 28 font-size: 26px; 29 line-height: 26px; 30} 31 32.desc { 33 color: rgb(151 153 167); 34 font-size: 13px; 35} 36 37.buttons { 38 display: flex; 39 align-items: center; 40 justify-content: center; 41 gap: 10px; 42 margin-top: 10px; 43} 44 45.button { 46 display: flex; 47 align-items: center; 48 justify-content: space-between; 49 border-radius: 10px; 50 padding: 6px; 51 text-decoration: none; 52} 53 54.button:first-child { 55 box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17; 56 background-color: #488aec; 57} 58 59.button:last-child { 60 box-shadow: 0 4px 6px -1px #0b162531, 0 2px 4px -1px #0e192b17; 61 background-color: #fff; 62} 63 64.icon { 65 height: 25px; 66 width: 25px; 67} 68 69.icon svg { 70 width: 100%; 71 height: 100%; 72} 73 74.icon svg:last-child { 75 fill: #000 76} 77 78.button-text { 79 display: flex; 80 flex-direction: column; 81 margin-left: 8px; 82} 83 84.button-text span:first-child { 85 font-size: 12px; 86 font-weight: 600; 87} 88 89.google span:first-child { 90 color: rgb(219 206 253); 91} 92 93.apple span:first-child { 94 color: rgb(81 87 108); 95} 96 97.google span:last-child { 98 color: #fff; 99 font-weight: 800; 100} 101 102.apple span:last-child { 103 color: #000; 104 font-weight: 800; 105}
2.8K views
2.8K views
Comments
MIT License