mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
108 lines
4.5 KiB
HTML
108 lines
4.5 KiB
HTML
<div class="card">
|
|
<div class="card-top">
|
|
<p class="card__title">Rick And Morty</p>
|
|
<div class="rating">
|
|
<svg width="17" height="17" viewBox="0 0 17 17" fill="none">
|
|
<path d="M8.51948 1.625C9.1214 1.625 10.0427 4.16625 10.4636 5.43013C10.6014 5.8437 10.9837 6.13054 11.4192 6.14904C12.7373 6.20505 15.375 6.39722 15.375 7.0384C15.375 7.66696 13.5161 9.17543 12.5322 9.92976C12.1816 10.1986 12.0365 10.6604 12.1687 11.082C12.5631 12.34 13.2755 14.8755 12.7573 15.3009C12.2506 15.717 10.2147 14.2326 9.15246 13.4009C8.77021 13.1016 8.22949 13.1012 7.84719 13.4004C6.78473 14.2321 4.75246 15.717 4.28166 15.3009C3.79912 14.8745 4.47615 12.3275 4.84741 11.0727C4.97086 10.6555 4.82425 10.2029 4.47885 9.93826C3.49798 9.18681 1.625 7.66933 1.625 7.0384C1.625 6.3962 4.2711 6.20444 5.5871 6.14878C6.0197 6.13048 6.3998 5.84769 6.53973 5.43793C6.97041 4.17673 7.91633 1.625 8.51948 1.625Z" fill="#00B9AE" stroke="#00B9AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="card__info">
|
|
<p class="episode__num">46Ep</p>
|
|
<p class="episode__type">Fantasy</p>
|
|
</div>
|
|
<div class="card__btns">
|
|
<button class="add-btn">+</button>
|
|
<button class="watch-btn">watch</button>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by satyamchaudharydev - Tags: card */
|
|
.card {
|
|
--width: 190px;
|
|
--height: 210px;
|
|
--primary: #00b9ae;
|
|
--text: #f9f9f9b2;
|
|
--secondary: #f9f9f933;
|
|
--radius: 20px;
|
|
color: #fff;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
width: var(--width);
|
|
height: var(--height);
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(22, 24, 30, 0) 0%,
|
|
rgba(22, 24, 30, 0.7) 65.28%
|
|
),
|
|
linear-gradient(0deg, rgba(22, 24, 30, 0.4), rgba(22, 24, 30, 0.4));
|
|
background-size: cover;
|
|
border-radius: var(--radius);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.7rem;
|
|
padding: 1em;
|
|
padding-top: 1.4em;
|
|
}
|
|
|
|
|
|
/* */
|
|
|
|
.card .card__title {
|
|
margin: 0;
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.rating {
|
|
margin-top: 0.5em;
|
|
width: 85px;
|
|
height: 16px;
|
|
background-image: url("data:image/svg+xml,%20%3Csvg%0A%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20%20%20%20%20width%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20height%3D%2217%22%0A%20%20%20%20%20%20%20%20%20%20viewBox%3D%220%200%2017%2017%22%0A%20%20%20%20%20%20%20%20%20%20fill%3D%22none%22%0A%20%20%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20%20%20%20%20d%3D%22M8.51948%201.625C9.1214%201.625%2010.0427%204.16625%2010.4636%205.43013C10.6014%205.8437%2010.9837%206.13054%2011.4192%206.14904C12.7373%206.20505%2015.375%206.39722%2015.375%207.0384C15.375%207.66696%2013.5161%209.17543%2012.5322%209.92976C12.1816%2010.1986%2012.0365%2010.6604%2012.1687%2011.082C12.5631%2012.34%2013.2755%2014.8755%2012.7573%2015.3009C12.2506%2015.717%2010.2147%2014.2326%209.15246%2013.4009C8.77021%2013.1016%208.22949%2013.1012%207.84719%2013.4004C6.78473%2014.2321%204.75246%2015.717%204.28166%2015.3009C3.79912%2014.8745%204.47615%2012.3275%204.84741%2011.0727C4.97086%2010.6555%204.82425%2010.2029%204.47885%209.93826C3.49798%209.18681%201.625%207.66933%201.625%207.0384C1.625%206.3962%204.2711%206.20444%205.5871%206.14878C6.0197%206.13048%206.3998%205.84769%206.53973%205.43793C6.97041%204.17673%207.91633%201.625%208.51948%201.625Z%22%0A%20%20%20%20%20%20%20%20%20%20%20%20fill%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke%3D%22%2300B9AE%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-width%3D%222%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E");
|
|
background-repeat: space;
|
|
}
|
|
|
|
.card .card__info {
|
|
display: flex;
|
|
margin-top: auto;
|
|
font-size: 0.8rem;
|
|
color: var(--text);
|
|
font-weight: 400;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.card .card__btns {
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.card button {
|
|
border: none;
|
|
background: none;
|
|
cursor: pointer;
|
|
background: var(--primary);
|
|
color: #fff;
|
|
border-radius: var(--radius);
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.card button:hover {
|
|
opacity: 0.8;
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.card .add-btn {
|
|
color: #fff;
|
|
padding: 0.5em 0.8em;
|
|
background: rgba(249, 249, 249, 0.2);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.card .watch-btn {
|
|
flex: 1;
|
|
}
|
|
|
|
</style>
|