mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
123 lines
3.9 KiB
HTML
123 lines
3.9 KiB
HTML
<div class="card">
|
|
|
|
<div class="image">
|
|
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 116.83 182.61" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" class="img-product"><defs></defs><g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata><path d="M99.33 20.55c-4.24,-1.91 -3.3,-0.4 -8.3,-3.82 -4.06,-2.78 -12.82,-7.22 -17.68,-9.3 -0.94,-0.4 -2.53,-1.19 -4.13,-1.73l-6.69 -1.8c-0.99,-0.23 -1.3,-0.65 -2.22,-0.84 -2.53,-0.53 -3.82,-0.46 -6.69,-1.8 -1.49,-0.7 -2.01,-1.69 -3.83,-1.04 -0.87,0.31 -1.19,0.64 -1.58,1.41 -2.44,4.98 -7.2,7.7 -11.26,11.02l-2.61 1.83c-3.93,2.6 -9.38,4.53 -13.7,6.73 -2.89,1.47 -0.86,0.97 -4.02,0.7 -3.13,-0.27 -6.21,3.31 -8.33,5.29 -1.04,0.97 -0.92,0.53 -1.85,1.4 -0.47,0.44 -1.08,1.33 -1.33,1.49 -1.07,0.68 -4.09,2.28 -4.75,3.1 -1.3,1.63 1.31,5.1 2.23,7.24 0.64,1.49 1.76,3.02 3.13,4.07 0.74,0.56 1.15,1.74 1.7,2.61 -4.07,2.78 -3.12,3.46 -2.09,4.55 2.17,2.3 3.66,4.97 5.89,7.28 4.1,4.26 1.12,4.68 2.64,8.38 0.55,1.33 0.85,1.09 0.9,2.64 0.11,3.4 -2.12,4.67 -1.04,9.36 1.66,7.23 0.4,2.11 0.06,5.96 -0.07,0.84 0.09,2.01 0.28,2.8 0.37,1.51 0.52,1.49 1.31,2.75 -3.14,5.43 0.18,6.41 -0.44,8.98 -0.6,2.51 -0.95,3.64 -0.11,6.01 0.32,0.9 1.2,2.1 1.3,2.75 0.18,1.1 -0.42,1.33 -0.22,2.94 0.25,2.12 -0.18,4.23 0.11,5.95 0.29,1.75 0.42,0.99 0.2,3.05 -0.34,3.15 -1.45,5.88 -0.63,9.03 0.31,1.2 -2.36,8.82 -2.7,10.03 -1.79,6.36 -5.05,13.1 -6.2,19.61 -0.61,3.43 -2.34,1.66 -1.11,6.28 0.92,3.47 4.04,4.61 5.91,7.28 0.79,1.12 0.41,1.28 1.7,2.65l2.35 2.25c1.77,1.48 2.49,2.9 5.16,4.13l2.42 0.76c2.87,0.45 5.92,-1.16 8.06,-2.98l5.48 -5.18c2.01,-2 3.71,-4.85 5.66,-6.98 2.12,-2.32 9.8,-15.54 11.11,-18.32 0.6,-1.26 1.15,-1.61 1.93,-2.45 1.29,-1.38 0.99,-2.19 1.76,-3.35 0.69,-1.05 1.38,-1.26 2.33,-2.87 2.62,-4.45 24.66,-42 26.3,-45.85 0.9,-2.11 3.13,-4.62 4.12,-6.85 2.49,-5.61 5.17,-12.08 8.85,-17.34 2.18,-3.12 8.43,-13.52 8.19,-15.8 0.86,-0.42 7.8,-14 8.75,-15.88 2.13,-4.22 1.53,-9.85 -2.88,-12.09 -4.39,-2.47 -8.77,-3.95 -13.43,-6.05z" class="fil-shoes2"></path></g></svg>
|
|
</div>
|
|
<div class="text">
|
|
<span>Shoes Force</span>
|
|
<p>$100</p>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by MuhammadHasann - Tags: card */
|
|
.card {
|
|
position: relative;
|
|
background: #fff;
|
|
width: 190px;
|
|
height: 265px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 120ms;
|
|
overflow: hidden;
|
|
box-shadow: 0px 1px 13px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.card:active {
|
|
transform: scale(.95);
|
|
}
|
|
|
|
.card::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-shadow: inset 0px 0px 25px 5px rgba(255, 255, 255, .5);
|
|
z-index: 1;
|
|
}
|
|
|
|
.card::after {
|
|
content: "Add to Cart";
|
|
position: absolute;
|
|
bottom: -50%;
|
|
left: 0;
|
|
padding-left: 15px;
|
|
background: #181818;
|
|
width: 100%;
|
|
height: 60px;
|
|
color: #fff;
|
|
line-height: 50px;
|
|
text-transform: uppercase;
|
|
z-index: 2;
|
|
transition: all .2s ease-in;
|
|
}
|
|
|
|
.card:hover::after {
|
|
bottom: 0;
|
|
}
|
|
|
|
.card:active::after {
|
|
content: "Adding !";
|
|
height: 65px;
|
|
}
|
|
|
|
.image {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 100px;
|
|
height: auto;
|
|
filter: drop-shadow(3px 3px 5px #18181815);
|
|
transform: translate(-50%, -50%);
|
|
animation: shoes 1s ease infinite alternate;
|
|
transition: all .5s ease-in;
|
|
}
|
|
|
|
@keyframes shoes {
|
|
from {
|
|
top: 48%;
|
|
}
|
|
|
|
to {
|
|
top: 52%;
|
|
}
|
|
}
|
|
|
|
.card:hover .image {
|
|
/* top: 20%;
|
|
left: 30%; */
|
|
width: 220px;
|
|
height: auto;
|
|
animation: none;
|
|
transform: rotate(15deg) translate(-35%, -25%);
|
|
}
|
|
|
|
.text {
|
|
position: absolute;
|
|
top: 15%;
|
|
left: -80%;
|
|
color: #181818;
|
|
transition: all .3s ease-in;
|
|
}
|
|
|
|
.text span {
|
|
font-size: 25px;
|
|
font-weight: 400;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.text p {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.card:hover .text {
|
|
top: 15%;
|
|
left: 5%;
|
|
}
|
|
|
|
.fil-shoes2 {
|
|
fill: #a59573
|
|
}
|
|
</style>
|