#212121
1.card { 2 max-width: 320px; 3 display: flex; 4 align-items: flex-start; 5 justify-content: space-between; 6 border-radius: 0.5rem; 7 background: #606c88; 8 background: -webkit-linear-gradient(to right, #3f4c6b, #606c88); 9 background: linear-gradient(to right top, #3f4c6b, #606c88); 10 padding: 1rem; 11 color: rgb(107, 114, 128); 12 box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4); 13} 14 15.icon { 16 height: 2rem; 17 width: 2rem; 18 flex-shrink: 0; 19 display: flex; 20 align-items: center; 21 justify-content: center; 22 border-radius: 0.5rem; 23 background-color: #153586; 24 color: rgb(59, 130, 246); 25} 26 27.icon svg { 28 height: 1.25rem; 29 width: 1.25rem; 30} 31 32.content { 33 margin-left: 0.75rem; 34 font-size: 0.875rem; 35 line-height: 1.25rem; 36 font-weight: 400; 37} 38 39.title { 40 margin-bottom: 0.25rem; 41 font-size: 0.875rem; 42 line-height: 1.25rem; 43 font-weight: 600; 44 color: rgb(255, 255, 255); 45} 46 47.desc { 48 margin-bottom: 0.5rem; 49 font-size: 0.875rem; 50 line-height: 1.25rem; 51 font-weight: 400; 52 color: rgb(202, 200, 200); 53} 54 55.actions { 56 display: grid; 57 grid-template-columns: repeat(2, minmax(0, 1fr)); 58 grid-gap: 0.5rem; 59 gap: 0.5rem; 60} 61 62.download, .notnow { 63 width: 100%; 64 display: inline-flex; 65 justify-content: center; 66 border-radius: 0.5rem; 67 padding: 0.375rem 0.5rem; 68 text-align: center; 69 font-size: 0.75rem; 70 line-height: 1rem; 71 color: rgb(255, 255, 255); 72 outline: 2px solid transparent; 73 border: 1px solid rgba(253, 253, 253, 0.363); 74} 75 76.download { 77 background-color: #284385; 78 font-weight: 600; 79} 80 81.download:hover { 82 background-color: #153586; 83} 84 85.notnow { 86 background-color: #606c88; 87 font-weight: 500; 88} 89 90.notnow:hover { 91 background-color: #3f4c6b; 92} 93 94.close { 95 margin: -0.375rem -0.375rem -0.375rem auto; 96 height: 2rem; 97 width: 2rem; 98 display: inline-flex; 99 border-radius: 0.5rem; 100 background-color: #606c88; 101 padding: 0.375rem; 102 color: rgba(255, 255, 255, 1); 103 border: none; 104} 105 106.close svg { 107 height: 1.25rem; 108 width: 1.25rem; 109} 110 111.close:hover { 112 background-color: rgb(58, 69, 83); 113}
7.3K views
7.3K views
Comments
Variations
1 MIT License