js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

committing to merge

Browse Source
This commit is contained in:
Kelsey Jackson
2025-06-02 12:34:26 -05:00
parent b3650c623a
commit 7df785508d
1 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
docs/assets/examples/layouts/ecommerce-1.html
View File

@@ -18,14 +18,42 @@
deals!</a>
<header slot="header" class="wa-cluster wa-desktop-only" style="justify-content: space-between">
<div style="background-color: black; height: 40px; width: 40px"></div>
<wa-input placeholder="Medium" size="medium" class="wa-desktop-only" style="width: 50%;">
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
<wa-input placeholder="Search the best shops in the country" size="medium" style="width: 50%;">
<wa-icon name="magnifying-glass" variant="solid" slot="suffix"></wa-icon>
</wa-input>
<div class="wa-desktop-only"><wa-icon name="exclamation-triangle"></wa-icon><wa-icon
name="exclamation-triangle"></wa-icon></div>
<div class="wa-cluster"><wa-icon name="circle-user"></wa-icon><wa-icon name="shopping-cart"></wa-icon></div>
</header>
<main>
Main
<main style="margin: 0 auto; max-width: 140ch;">
<img style="object-fit: none;" src="https://uploads.webawesome.com/cta-1440.jpg" alt="" sizes="(max-width: 480px) 480px,
(max-width: 600px) 600px, (max-width: 900px) 900px, 1440px"
srcset="https://uploads.webawesome.com/cta-480.jpg 480w, https://uploads.webawesome.com/cta-600.jpg 600w, https://uploads.webawesome.com/cta-900.jpg 900w, https://uploads.webawesome.com/cta-1440.jpg 1440w" />
<!--<div class="wa-stack wa-align-items-center wa-gap-xl" style="margin-block: var(--wa-space-4xl);">
<h2 class="wa-heading-3xl" style="text-align: center">
Unlock Your Future: <br />Start Learning Web Development Today!
</h2>
<div class="wa-cluster wa-gap-xs">
<wa-button>Get Started</wa-button>
<wa-button appearance="plain">Find out more <wa-icon slot="suffix" name="arrow-right"></wa-icon></wa-button>
</div>
</div>-->
<div class="wa-stack wa-align">
<h2 class="wa-heading-2xl">Recipes</h2>
<div class="wa-grid">
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1548340748-6d2b7d7da280?q=80&w=3027&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
Appetizers and Snacks
</a>
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1644704265419-96ddaf628e71?q=80&w=5340&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center">
Main Dishes
</a>
<a href="#" class="wa-frame wa-align-items-center wa-border-radius-m wa-link-plain wa-heading-xl wa-dark"
style="padding: var(--wa-space-3xl);background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1551024506-0bccd828d307?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');background-size: cover;background-position: center; text-align: center;">
Desserts
</a>
</div>
<wa-button appearance="plain"><wa-icon slot="suffix" name="arrow-right"></wa-icon>View More Recipes</wa-button>
</div>
</main>
<footer slot="footer">Footer</footer>
</wa-page>