Public/galaxy
2
0
Fork 0
mirror of https://github.com/uiverse-io/galaxy.git synced 2025-11-28 05:00:22 +08:00
Code Issues Projects Releases Packages Wiki Activity
galaxy/Cards/sofiapetushok_brave-treefrog-56.html

543 lines
No EOL
17 KiB
HTML
Raw Permalink Blame History

<div class="card">
<svg
class="card-image"
xmlns="http://www.w3.org/2000/svg"
width="70"
height="70"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.4 4.4 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.55.55 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563s-.561.994-.292 1.969.836 1.675 1.266 1.563m3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.4 4.4 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948m.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563s.561.994.292 1.969-.836 1.675-1.266 1.563"
></path>
</svg>
<div class="card-price-tag">
<span class="price-value">$100</span>
</div>
<svg
text-rendering="geometricPrecision"
shape-rendering="geometricPrecision"
height="50"
width="50"
viewBox="0 0 200 350"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
class="ring-1"
>
<defs>
<radialGradient
gradientTransform="matrix(1 0 0 0.860612 0.5 0.618787)"
gradientUnits="objectBoundingBox"
spreadMethod="pad"
r="0.5"
cy="0"
cx="0"
id="ebT4AgJ0WZ62-fill"
>
<stop
stop-color="#313131"
offset="48.4041%"
id="ebT4AgJ0WZ62-fill-0"
></stop>
<stop
stop-color="#a5a5a5"
offset="68.1857%"
id="ebT4AgJ0WZ62-fill-1"
></stop>
<stop
stop-color="#282828"
offset="84.0109%"
id="ebT4AgJ0WZ62-fill-2"
></stop>
</radialGradient>
<radialGradient
gradientTransform="matrix(0.999964 0.008506 -0.012489 1.468176 0.496001 0)"
gradientUnits="objectBoundingBox"
spreadMethod="pad"
r="0.803687"
cy="0"
cx="0"
id="ebT4AgJ0WZ63-fill"
>
<stop
stop-color="#313131"
offset="66.5167%"
id="ebT4AgJ0WZ63-fill-0"
></stop>
<stop
stop-color="#929292"
offset="79.3157%"
id="ebT4AgJ0WZ63-fill-1"
></stop>
<stop
stop-color="#282828"
offset="100%"
id="ebT4AgJ0WZ63-fill-2"
></stop>
</radialGradient>
</defs>
<path
fill="url(#ebT4AgJ0WZ62-fill)"
transform="translate(.79738 0.07381)"
d="M52.80126,148.52946c0-54.09424,43.1045-97.44452,97.19874-97.44452c54.02838,0,97.83949,43.74533,97.9461,97.74875c0,4.48899-15.841036,8.59818-21.21294,3.870883-.611021-2.50634-.402559-3.828048,0-4.910803c7.308634-19.657872-34.28954-75.61349-76.73315-75.61349s-76.85095,34.40734-76.85095,76.85095s27.897301,76.44983,70.340911,76.44983c1.832594,0,10.881874-3.528414,14.410289,0c4.397368,5.041913,5.519605,8.849302,4.757083,12.041874-.919128,3.848258-1.140559,6.87447-4.632193,9.130546-2.6467.21463-5.32315.32404-8.02514.32404-54.09424,0-97.19874-44.35382-97.19874-98.44806h-.00001Z"
></path>
<path
fill="url(#ebT4AgJ0WZ63-fill)"
transform="matrix(1 0 0-1-20.148641 311.37469)"
d="M268.094741,163.50711c0,54.09424-43.068431,97.94629-97.162671,97.94629s-97.94629-43.85205-97.94629-97.94629m9.892327,0c0,42.44361,45.610353,76.85095,88.053963,76.85095s97.162671-34.40734,97.162671-76.85095"
></path>
</svg>
<svg
text-rendering="geometricPrecision"
shape-rendering="geometricPrecision"
height="45"
width="45"
viewBox="0 0 200 350"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
class="ring-2"
>
<defs>
<radialGradient
gradientTransform="matrix(1 0 0 0.860612 0.5 0.618787)"
gradientUnits="objectBoundingBox"
spreadMethod="pad"
r="0.5"
cy="0"
cx="0"
id="ebT4AgJ0WZ62-fill"
>
<stop
stop-color="#313131"
offset="48.4041%"
id="ebT4AgJ0WZ62-fill-0"
></stop>
<stop
stop-color="#a5a5a5"
offset="68.1857%"
id="ebT4AgJ0WZ62-fill-1"
></stop>
<stop
stop-color="#282828"
offset="84.0109%"
id="ebT4AgJ0WZ62-fill-2"
></stop>
</radialGradient>
<radialGradient
gradientTransform="matrix(0.999964 0.008506 -0.012489 1.468176 0.496001 0)"
gradientUnits="objectBoundingBox"
spreadMethod="pad"
r="0.803687"
cy="0"
cx="0"
id="ebT4AgJ0WZ63-fill"
>
<stop
stop-color="#313131"
offset="66.5167%"
id="ebT4AgJ0WZ63-fill-0"
></stop>
<stop
stop-color="#929292"
offset="79.3157%"
id="ebT4AgJ0WZ63-fill-1"
></stop>
<stop
stop-color="#282828"
offset="100%"
id="ebT4AgJ0WZ63-fill-2"
></stop>
</radialGradient>
</defs>
<path
fill="url(#ebT4AgJ0WZ62-fill)"
transform="translate(.79738 0.07381)"
d="M52.80126,148.52946c0-54.09424,43.1045-97.44452,97.19874-97.44452c54.02838,0,97.83949,43.74533,97.9461,97.74875c0,4.48899-15.841036,8.59818-21.21294,3.870883-.611021-2.50634-.402559-3.828048,0-4.910803c7.308634-19.657872-34.28954-75.61349-76.73315-75.61349s-76.85095,34.40734-76.85095,76.85095s27.897301,76.44983,70.340911,76.44983c1.832594,0,10.881874-3.528414,14.410289,0c4.397368,5.041913,5.519605,8.849302,4.757083,12.041874-.919128,3.848258-1.140559,6.87447-4.632193,9.130546-2.6467.21463-5.32315.32404-8.02514.32404-54.09424,0-97.19874-44.35382-97.19874-98.44806h-.00001Z"
></path>
<path
fill="url(#ebT4AgJ0WZ63-fill)"
transform="matrix(1 0 0-1-20.148641 311.37469)"
d="M268.094741,163.50711c0,54.09424-43.068431,97.94629-97.162671,97.94629s-97.94629-43.85205-97.94629-97.94629m9.892327,0c0,42.44361,45.610353,76.85095,88.053963,76.85095s97.162671-34.40734,97.162671-76.85095"
></path>
</svg>
<svg
text-rendering="geometricPrecision"
shape-rendering="geometricPrecision"
height="50"
width="50"
viewBox="0 0 200 300"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
class="ring-3"
>
<defs>
<radialGradient
gradientTransform="matrix(1 0 0 0.860612 0.5 0.618787)"
gradientUnits="objectBoundingBox"
spreadMethod="pad"
r="0.5"
cy="0"
cx="0"
id="ebT4AgJ0WZ62-fill"
>
<stop
stop-color="#313131"
offset="48.4041%"
id="ebT4AgJ0WZ62-fill-0"
></stop>
<stop
stop-color="#a5a5a5"
offset="68.1857%"
id="ebT4AgJ0WZ62-fill-1"
></stop>
<stop
stop-color="#282828"
offset="84.0109%"
id="ebT4AgJ0WZ62-fill-2"
></stop>
</radialGradient>
<radialGradient
gradientTransform="matrix(0.999964 0.008506 -0.012489 1.468176 0.496001 0)"
gradientUnits="objectBoundingBox"
spreadMethod="pad"
r="0.803687"
cy="0"
cx="0"
id="ebT4AgJ0WZ63-fill"
>
<stop
stop-color="#313131"
offset="66.5167%"
id="ebT4AgJ0WZ63-fill-0"
></stop>
<stop
stop-color="#929292"
offset="79.3157%"
id="ebT4AgJ0WZ63-fill-1"
></stop>
<stop
stop-color="#282828"
offset="100%"
id="ebT4AgJ0WZ63-fill-2"
></stop>
</radialGradient>
</defs>
<path
fill="url(#ebT4AgJ0WZ62-fill)"
transform="translate(.79738 0.07381)"
d="M52.80126,148.52946c0-54.09424,43.1045-97.44452,97.19874-97.44452c54.02838,0,97.83949,43.74533,97.9461,97.74875c0,4.48899-15.841036,8.59818-21.21294,3.870883-.611021-2.50634-.402559-3.828048,0-4.910803c7.308634-19.657872-34.28954-75.61349-76.73315-75.61349s-76.85095,34.40734-76.85095,76.85095s27.897301,76.44983,70.340911,76.44983c1.832594,0,10.881874-3.528414,14.410289,0c4.397368,5.041913,5.519605,8.849302,4.757083,12.041874-.919128,3.848258-1.140559,6.87447-4.632193,9.130546-2.6467.21463-5.32315.32404-8.02514.32404-54.09424,0-97.19874-44.35382-97.19874-98.44806h-.00001Z"
></path>
<path
fill="url(#ebT4AgJ0WZ63-fill)"
transform="matrix(1 0 0-1-20.148641 311.37469)"
d="M268.094741,163.50711c0,54.09424-43.068431,97.94629-97.162671,97.94629s-97.94629-43.85205-97.94629-97.94629m9.892327,0c0,42.44361,45.610353,76.85095,88.053963,76.85095s97.162671-34.40734,97.162671-76.85095"
></path>
</svg>
<div class="card-info">
<div class="left-info">
<span class="product-title"
>PRODUCT NAME
<p>Lorem ipsum dolor sit amet</p>
<div class="star-rating">
<span class="star">
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
fill="currentColor"
class="bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
</span>
<span class="star">
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
fill="currentColor"
class="bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
</span>
<span class="star">
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
fill="currentColor"
class="bi bi-star-fill"
viewBox="0 0 16 16"
>
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"
></path>
</svg>
</span>
<span class="star">
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
fill="currentColor"
class="bi bi-star"
viewBox="0 0 16 16"
>
<path
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"
></path>
</svg>
</span>
<span class="star">
<svg
xmlns="http://www.w3.org/2000/svg"
width="10"
height="10"
fill="currentColor"
class="bi bi-star"
viewBox="0 0 16 16"
>
<path
d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"
></path>
</svg>
</span>
</div>
</span>
</div>
<div class="right-info">
<ul class="features-list">
<li class="list-item">
<p class="feature-sub-title">Your title</p>
<span class="feature-desc">Lorem ipsum dolor sit amet</span>
</li>
<li class="list-item">
<p class="feature-sub-title">Your title</p>
<span class="feature-desc">Lorem ipsum dolor sit amet</span>
</li>
</ul>
</div>
</div>
<div class="add-to-cart-btn">
<button>Add to cart</button>
</div>
</div>
<style>
/* From Uiverse.io by sofiapetushok - Website: https://www.freepik.com/free-vector/gradient-product-card-template_31222279.htm#fromView=keyword&page=1&position=2 - Name: Image by freepik - Tags: card */
ul {
list-style: none;
padding: 0;
}
.card {
width: 250px;
height: 354px;
background: #1b1b1b;
position: relative;
border-radius: 12px;
box-shadow: 0px 10px 10px 0 #1b1b1b;
}
.card .card-image {
position: relative;
height: 54%;
width: 45%;
display: block;
margin: auto;
color: #c8c8c8;
filter: drop-shadow(0 0 5px #111111);
}
.card .card-info {
height: 100%;
border-radius: 12px 12px 0 0;
width: 100%;
color: #fff;
display: flex;
background: linear-gradient(#4f4f4f64, transparent);
}
.card .card-info {
font-size: 0.8rem;
max-height: 120px;
}
.card .card-info .left-info,
.card .card-info .right-info {
flex: 1;
padding: 16px;
}
.card .card-info .left-info .product-title {
font-size: 14px;
line-height: 1.1;
letter-spacing: 0.4px;
font-weight: bold;
margin-bottom: 18px;
display: block;
}
.card .card-info p {
font-size: 10px;
margin-top: 12px;
line-height: 1.2;
letter-spacing: 0.3px;
font-weight: normal;
}
.card .card-info .left-info .star-rating {
display: flex;
margin-top: 20px;
}
.card .card-info .left-info .star-rating span {
display: block;
width: 16px;
color: rgb(242, 99, 255);
}
.card .card-info .right-info {
margin: 0;
position: relative;
}
.card .card-info .right-info::before {
position: absolute;
content: "";
width: 2px;
height: calc(100% - 20px);
background: #df29ff;
left: -5px;
}
.card .card-info .right-info ul {
margin: 0;
list-style: none;
}
.card .card-info .right-info ul li {
padding: 0;
font-size: 10px;
margin: 10px 0;
}
.card .card-info .right-info ul li:first-child {
margin-top: 0;
}
.card .card-info .right-info ul li p.feature-sub-title {
font-size: 8px;
margin-bottom: 5px;
letter-spacing: 0.3px;
line-height: 0.9;
color: #e96dff;
font-weight: bold;
text-transform: uppercase;
}
.card .card-info .right-info ul li .feature-sub-title:first-child {
margin-top: 0;
}
.add-to-cart-btn {
display: flex;
position: absolute;
bottom: 10px;
margin-top: 20px;
width: 100%;
flex: 1;
flex-basis: 200px;
margin: auto;
justify-content: center;
}
.add-to-cart-btn button {
border: none;
font-size: 7px;
background: linear-gradient(
45deg,
transparent,
#f532f1 40%,
#f532f1,
#a141fb 60%,
transparent
);
padding: 6px 10px;
color: #fff;
font-weight: bold;
background-size: 200%;
background-position: 0% 0%;
text-transform: uppercase;
border-radius: 30px;
transition: 0.4s ease-in-out;
}
.card .card-price-tag {
position: absolute;
right: 12px;
top: 0;
color: #fff;
font-size: 0.6rem;
font-weight: 600;
padding: 3px 10px;
border-radius: 0 0 5px 5px;
background: linear-gradient(#df29ff, #dc0ba5);
}
.card svg {
position: absolute;
}
.card::before {
position: absolute;
content: "";
height: 90px;
width: 90px;
border-radius: 50%;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(245, 46, 255);
filter: blur(25px);
box-shadow: 0 0 70px 0 #f51cf1;
}
.card svg.ring-1 {
top: 16px;
left: 16px;
rotate: 210deg;
filter: blur(1px) brightness(0.7);
transition: 1s ease-in-out;
}
.card svg.ring-2 {
top: 40%;
right: 0;
rotate: 150deg;
filter: brightness(0.5);
transition: 0.8s ease-in-out;
}
.card svg.ring-3 {
top: 40%;
left: 5px;
rotate: 270deg;
filter: brightness(0.7);
transition: 0.9s ease-in-out;
}
.card:hover svg.ring-1 {
top: 6px;
left: 20%;
rotate: 230deg;
scale: 1.25;
}
.card:hover svg.ring-2 {
top: 45%;
right: 15px;
rotate: 210deg;
filter: brightness(0.9);
scale: 1.3;
}
.card:hover svg.ring-3 {
top: 32%;
left: 5%;
rotate: 210deg;
filter: brightness(1);
scale: 1.3;
}
.card .add-to-cart-btn button:hover {
background-position: 100% 100%;
}
</style>
Reference in a new issue View git blame Copy permalink