mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
102 lines
2.9 KiB
HTML
102 lines
2.9 KiB
HTML
<div class="card">
|
|
<div class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="38px" width="38px" version="1.1" id="heart" viewBox="0 0 471.701 471.701" xml:space="preserve">
|
|
<linearGradient id="gradientColor">
|
|
<stop offset="5%" stop-color="#7eaaff"></stop>
|
|
<stop offset="95%" stop-color="#ff48fb"></stop>
|
|
</linearGradient>
|
|
<g>
|
|
<path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"></path>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<p class="title">Favourites</p>
|
|
<p class="text">Check all your favourites in one place.</p>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by vk-uiux - Tags: animation, gradient, card, hover, css, hover effect, css effect, hoverme */
|
|
.card {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
min-width: 200px;
|
|
height: 250px;
|
|
background-color: #292929;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
|
|
border: 2px solid rgba(7, 7, 7, 0.12);
|
|
font-size: 16px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
|
|
.icon {
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
height: 80px;
|
|
max-width: 80px;
|
|
background: linear-gradient(90deg, #7eaaff 0%, #ff48fb 40%, rgba(0, 0, 0, 0.28) 60%);
|
|
border-radius: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: all 0.8s ease;
|
|
background-position: 0px;
|
|
background-size: 200px;
|
|
}
|
|
|
|
.icon svg {
|
|
fill: white;
|
|
}
|
|
|
|
.card .title {
|
|
width: 100%;
|
|
margin: 0;
|
|
text-align: center;
|
|
margin-top: 30px;
|
|
color: white;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 4px;
|
|
}
|
|
|
|
.card .text {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
color: white;
|
|
font-weight: 200;
|
|
letter-spacing: 2px;
|
|
opacity: 0;
|
|
max-height: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover {
|
|
height: 270px;
|
|
}
|
|
|
|
.card:hover .text {
|
|
transition: all 0.3s ease;
|
|
opacity: 1;
|
|
max-height: 40px;
|
|
}
|
|
|
|
.card:hover .icon {
|
|
background-position: -120px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover .icon svg path {
|
|
fill: url('#gradientColor');
|
|
transition: all 0.3s ease;
|
|
}
|
|
</style>
|