Card by sabbircoder07
#e8e8e8
1.advice-container { 2 font-family: "Manrope", sans-serif; 3 display: flex; 4 flex-direction: column; 5 align-items: center; 6 text-align: center; 7 width: 320px; 8 height: auto; 9 background-color: hsl(217, 19%, 24%); 10 border-radius: 10px; 11 padding: 30px 16px 0 16px; 12} 13 14.paragraph { 15 font-size: 17px; 16 background-image: linear-gradient(to right, hsl(150, 100%, 66%),#C031B5); 17 -webkit-background-clip: text; 18 -webkit-text-fill-color: transparent; 19 text-transform: uppercase; 20 font-weight: 500; 21 letter-spacing: 1px; 22 /*Reason: there are some contrast issues*/ 23} 24 25.advice-details { 26 color: hsl(193, 38%, 86%); 27 font-size: 20px; 28 font-weight: 500; 29 margin: 30px 0; 30 line-height: 25px; 31 text-wrap: balance; 32 letter-spacing: 1px; 33} 34 35.pattern-divider path { 36 fill: hsl(217, 19%, 38%); 37} 38 39button { 40 height: 55px; 41 width: 55px; 42 border-radius: 50%; 43 border: none; 44 background: #00e673; 45 margin-top: 20px; 46 margin-bottom: -25px; 47 cursor: pointer; 48 transition: 0.3s all 49} 50 51button:hover { 52 box-shadow: 0rem 0rem 10px 10px rgba(82, 255, 168, 0.5); 53} 54 55 56
811 views
811 views
MIT License