mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
69 lines
2.1 KiB
HTML
69 lines
2.1 KiB
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>
|
|
<style>
|
|
/* From Uiverse.io by sabbircoder07 - Tags: card, css effect, css3 */
|
|
.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);
|
|
}
|
|
|
|
|
|
|
|
</style>
|