پیشنمایش زنده
کد HTML
<div class="advice-container">
<p class="paragraph">A D V I S E # 140</p>
<div class="advice-details">“If your hair is thinning, try dying your hair a similar tone to your scalp.”</div>
<div class="pattern-divider">
<svg width="295" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#4F5D74" d="M0 8h122v1H0zM173 8h122v1H173z"></path><g transform="translate(138)" fill="#CEE3E9"><rect width="6" height="16" rx="3"></rect><rect x="14" width="6" height="16" rx="3"></rect></g></g></svg>
</div>
<button>
<svg class="icon-dice" width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 0H4a4.005 4.005 0 0 0-4 4v16a4.005 4.005 0 0 0 4 4h16a4.005 4.005 0 0 0 4-4V4a4.005 4.005 0 0 0-4-4ZM7.5 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4.5 4.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm0-9a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z" fill="#202733"></path></svg>
</button>
</div>
کد CSS
.advice-container {
font-family: "Manrope", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 320px;
height: auto;
background-color: hsl(217, 19%, 24%);
border-radius: 10px;
padding: 30px 16px 0 16px;
}
.paragraph {
font-size: 17px;
background-image: linear-gradient(to right, hsl(150, 100%, 66%),#C031B5);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
/*Reason: there are some contrast issues*/
}
.advice-details {
color: hsl(193, 38%, 86%);
font-size: 20px;
font-weight: 500;
margin: 30px 0;
line-height: 25px;
text-wrap: balance;
letter-spacing: 1px;
}
.pattern-divider path {
fill: hsl(217, 19%, 38%);
}
button {
height: 55px;
width: 55px;
border-radius: 50%;
border: none;
background: #00e673;
margin-top: 20px;
margin-bottom: -25px;
cursor: pointer;
transition: 0.3s all
}
button:hover {
box-shadow: 0rem 0rem 10px 10px rgba(82, 255, 168, 0.5);
}