mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
102 lines
4.8 KiB
HTML
102 lines
4.8 KiB
HTML
<div class="card">
|
|
<div class="card__content">
|
|
<span>Honey</span>
|
|
<svg class="svg-icon" height="100" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
|
|
<path class="svg-fill-primary" d="M56.493,56.709c-1.563-1.599-3-3.458-4.257-5.559-2.03,.234-3.916,.144-5.38-.036-1.15,1.895-2.488,3.853-3.988,5.667,1.32,.323,3.799,.799,6.835,.799,2.066,0,4.392-.225,6.79-.871Z" opacity=".5">
|
|
</path>
|
|
<path class="svg-icon" d="M64.1,62.169c-1.742-.799-3.476-1.868-5.128-3.197h-.009c-9.574,3-15.394,1.051-17.172,.26-.081-.458-.126-.808-.153-1.024-.189,.216-.386,.431-.593,.638-1.374,1.446-2.874,2.739-4.464,3.736-.153,.099-.305,.189-.458,.278,1.257,5.119,4.437,13.436,12.268,17.567,.458,.242,.961,.359,1.473,.359,.323,0,.656-.045,.979-.153,.485-.162,11.11-3.817,13.939-18.169-.234-.09-.458-.189-.683-.296Zm-14.038,11.936c-2.919-1.976-4.859-4.913-6.125-7.742,1.518,.287,3.314,.485,5.371,.485,2.299,0,4.922-.243,7.859-.889-2.12,4.868-5.371,7.194-7.104,8.146Z" opacity=".5">
|
|
</path>
|
|
<path class="svg-icon" d="M80.787,47.952c-3.063-6.413-11.119-10.508-14.541-11.478-1.329-.386-2.811-.683-4.518-.907-.278-2.784-1.572-5.272-3.494-7.104,.799-1.769,2.811-3.575,3.889-4.32,1.428-.97,1.796-2.928,.826-4.356-.979-1.437-2.928-1.814-4.365-.835-.53,.359-4.104,2.883-5.937,6.601-.727-.144-1.482-.225-2.254-.225-.736,0-1.455,.072-2.156,.207-1.832-3.709-5.398-6.224-5.919-6.583-1.437-.97-3.377-.602-4.356,.826-.979,1.428-.611,3.386,.808,4.365,1.069,.736,3.027,2.497,3.862,4.239-1.985,1.85-3.323,4.401-3.592,7.257-9.825,1.302-19.31,8.622-20.845,16.391-.97,4.931,1.383,9.152,6.457,11.577,1.599,.763,3.278,1.15,4.967,1.15,1.446,0,2.919-.287,4.365-.844,.727-.287,1.446-.638,2.138-1.051,.153-.09,.305-.18,.458-.278,1.59-.997,3.09-2.29,4.464-3.736,.207-.207,.404-.422,.593-.638,.431-.467,.835-.943,1.23-1.428,1.5-1.814,2.838-3.772,3.988-5.667,.656-1.069,1.257-2.12,1.787-3.116,.386-.719,.745-1.401,1.069-2.048,.287,.745,.593,1.473,.925,2.173,.485,1.06,1.024,2.066,1.599,3.027,1.257,2.102,2.694,3.961,4.257,5.559,.799,.826,1.626,1.581,2.47,2.254v.009h.009c1.653,1.329,3.386,2.398,5.128,3.197,.225,.108,.449,.207,.683,.296,1.769,.736,3.539,1.195,5.245,1.347,5.092,.476,9.206-1.751,10.993-5.964,1.383-3.26,1.302-6.682-.233-9.897Zm-37.856-2.614c-2.802,5.092-6.934,11.038-11.236,12.708-1.536,.602-2.91,.566-4.329-.117-3.215-1.527-3.251-3.413-3-4.688,.916-4.634,8.047-10.535,15.825-11.415,.332-.045,.665-.072,.997-.09,1.293-.072,2.515-.135,3.673-.189-.539,1.141-1.186,2.434-1.931,3.79Zm32.305,10.05c-.88,2.066-3,2.317-4.634,2.164-4.706-.44-10.436-4.455-13.903-11.343-.745-1.482-1.383-3.089-1.886-4.823,2.443,.054,4.311,.189,5.811,.368,1.697,.207,2.91,.485,3.898,.763,2.281,.647,8.577,3.925,10.589,8.146,.772,1.608,.808,3.108,.126,4.724Z">
|
|
</path>
|
|
</svg>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
|
|
</div>
|
|
<button class="cart">
|
|
<p>Add to cart</p>
|
|
<svg class="svg-icon" viewBox="0 0 20 20">
|
|
<path d="M18.037,18.517L16.787,4.646c-0.034-0.38-0.355-0.672-0.735-0.672h-2.1c-0.258-1.968-1.93-3.499-3.967-3.499c-2.039,0-3.71,1.531-3.967,3.499H3.921c-0.381,0-0.7,0.291-0.735,0.672L1.915,18.72c-0.02,0.206,0.049,0.411,0.19,0.564c0.138,0.152,0.338,0.241,0.545,0.241h14.67c0.012-0.002,0.02-0.002,0.03,0c0.408,0,0.738-0.331,0.738-0.738C18.088,18.692,18.07,18.601,18.037,18.517z M9.985,1.951c1.225,0,2.25,0.87,2.49,2.023h-4.98C7.735,2.821,8.76,1.951,9.985,1.951zM3.457,18.049l1.139-12.6h10.782l1.135,12.6H3.457z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Javierrocadev - Tags: card, add to cart */
|
|
.card {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: #003566;
|
|
color: white;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
border: 2px solid #001d3d;
|
|
}
|
|
|
|
.card::before {
|
|
content: "10%";
|
|
position: absolute;
|
|
width: 100px;
|
|
height: 60px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: -20px;
|
|
left: -20px;
|
|
background-color: red;
|
|
color: white;
|
|
font-weight: 900;
|
|
font-size: 2em;
|
|
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
|
|
transform: rotate(40deg);
|
|
}
|
|
|
|
.card__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.card__content span {
|
|
font-size: 1.5em;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.cart {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 10px 0px;
|
|
border: none;
|
|
background: #ffd60a;
|
|
color: #003566;
|
|
font-weight: 800;
|
|
transition: all .5s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.svg-icon {
|
|
fill: #ffd60a;
|
|
transition: all .7s ease;
|
|
}
|
|
|
|
.cart .svg-icon {
|
|
fill: blue;
|
|
width: 15px;
|
|
}
|
|
|
|
.cart:hover {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.card:hover .card__content svg {
|
|
transform: scale(1.5) rotate(-25deg);
|
|
}
|
|
|
|
</style>
|