mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
71 lines
5.8 KiB
HTML
71 lines
5.8 KiB
HTML
<div class="card">
|
|
<div class="pricing-block-content">
|
|
<p class="pricing-plan">Starter</p>
|
|
<div data-currency-simple="USD" data-currency="$ USD" class="price-value">
|
|
<p class="price-number">$<span class="price-integer">0</span></p>
|
|
<div id="priceDiscountCent">/mo</div>
|
|
</div>
|
|
<div class="pricing-note">free forever</div>
|
|
<ul role="list" class="check-list">
|
|
<li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
|
|
<li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
|
|
<li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
|
|
<li class="check-list-item"><svg style="color: rgb(102, 78, 255);" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" zoomAndPan="magnify" viewBox="0 0 30 30.000001" height="16" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="id1"><path d="M 2.328125 4.222656 L 27.734375 4.222656 L 27.734375 24.542969 L 2.328125 24.542969 Z M 2.328125 4.222656" clip-rule="nonzero" fill="#664eff"></path></clipPath></defs><g clip-path="url(#id1)"><path fill="#664eff" d="M 27.5 7.53125 L 24.464844 4.542969 C 24.15625 4.238281 23.65625 4.238281 23.347656 4.542969 L 11.035156 16.667969 L 6.824219 12.523438 C 6.527344 12.230469 6 12.230469 5.703125 12.523438 L 2.640625 15.539062 C 2.332031 15.84375 2.332031 16.335938 2.640625 16.640625 L 10.445312 24.324219 C 10.59375 24.472656 10.796875 24.554688 11.007812 24.554688 C 11.214844 24.554688 11.417969 24.472656 11.566406 24.324219 L 27.5 8.632812 C 27.648438 8.488281 27.734375 8.289062 27.734375 8.082031 C 27.734375 7.875 27.648438 7.679688 27.5 7.53125 Z M 27.5 7.53125" fill-opacity="1" fill-rule="nonzero"></path></g></svg>Lorem Ipsum</li>
|
|
</ul>
|
|
</div></div>
|
|
<style>
|
|
/* From Uiverse.io by alexruix - Tags: subscription, card, sub, plan */
|
|
/*Neo Brutalism pricing card*/
|
|
.card {
|
|
width: 190px;
|
|
height: 254px;
|
|
background: #00FFA0;
|
|
padding: 1rem;
|
|
border-radius: 1rem;
|
|
border: .5vmin solid #05060f;
|
|
box-shadow: .4rem .4rem #05060f;
|
|
overflow: hidden;
|
|
color: black;
|
|
}
|
|
|
|
/*Card content*/
|
|
.pricing-block-content {
|
|
display: flex;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.pricing-plan {
|
|
color: #05060f;
|
|
font-size: 1.3rem;
|
|
line-height: 1.25;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.price-value {
|
|
display: flex;
|
|
color: #05060f;
|
|
font-size: 1.8rem;
|
|
line-height: 1.25;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pricing-note {
|
|
opacity: .8;
|
|
}
|
|
|
|
/*Checklist*/
|
|
.check-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: .5rem;
|
|
margin-top: .5rem;
|
|
}
|
|
|
|
.check-list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
</style>
|