mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
98 lines
2.4 KiB
HTML
98 lines
2.4 KiB
HTML
<div class="card">
|
|
<div>
|
|
<p class="Name-9999">Abo</p>
|
|
<p class="Price-9999">10$</p>
|
|
<svg viewBox="0 0 20 20" class="svg-icon">
|
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" fill="none"></path>
|
|
</svg>
|
|
<p class="YouGet-9999">lorem-impus</p>
|
|
<svg viewBox="0 0 20 20" class="svg-icon2">
|
|
<path d="M7.629,14.566c0.125,0.125,0.291,0.188,0.456,0.188c0.164,0,0.329-0.062,0.456-0.188l8.219-8.221c0.252-0.252,0.252-0.659,0-0.911c-0.252-0.252-0.659-0.252-0.911,0l-7.764,7.763L4.152,9.267c-0.252-0.251-0.66-0.251-0.911,0c-0.252,0.252-0.252,0.66,0,0.911L7.629,14.566z" fill="none"></path>
|
|
</svg>
|
|
<p class="Description-9999">lorem-ipsum</p>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by WrongCodeU - Tags: subscription, blue, card, box-shadow */
|
|
.card {
|
|
width: 12em;
|
|
height: 15em;
|
|
background: lightblue;
|
|
border-radius: 1em;
|
|
border-color: black;
|
|
border-style: solid;
|
|
border-width: 0.4em;
|
|
box-shadow: 0.3em 0.3em black;
|
|
}
|
|
|
|
.svg-icon {
|
|
margin-top: 0.3em;
|
|
margin-left: 0.5em;
|
|
width: 2em;
|
|
height: 2.5em;
|
|
}
|
|
|
|
.svg-icon path,
|
|
.svg-icon polygon,
|
|
.svg-icon rect {
|
|
fill: rgb(0, 110, 255);
|
|
}
|
|
|
|
.svg-icon circle {
|
|
stroke: #000;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.Name-9999 {
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
font-weight: 900;
|
|
font-size: 2em;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.Price-9999 {
|
|
margin-bottom: 0.3em;
|
|
margin-top: -0.3em;
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
font-weight: 900;
|
|
font-size: 3em;
|
|
margin-left: 0.3em;
|
|
}
|
|
|
|
.Description-9999 {
|
|
font-size: 1.1em;
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
font-weight: 900;
|
|
position: relative;
|
|
margin-left: 4em;
|
|
margin-top: -2.4em;
|
|
}
|
|
|
|
.YouGet-9999 {
|
|
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
|
font-weight: 900;
|
|
position: relative;
|
|
margin-left: 4em;
|
|
margin-top: -2.4em;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.svg-icon2 {
|
|
margin-top: 1em;
|
|
margin-left: 0.5em;
|
|
width: 2em;
|
|
height: 2em;
|
|
}
|
|
|
|
.svg-icon2 path,
|
|
.svg-icon2 polygon,
|
|
.svg-icon2 rect {
|
|
fill: rgb(0, 110, 255);
|
|
}
|
|
|
|
.svg-icon2 circle {
|
|
stroke: #000;
|
|
stroke-width: 1;
|
|
}
|
|
|
|
</style>
|