diff options
author | 2025-06-05 14:25:23 +0000 | |
---|---|---|
committer | 2025-06-05 14:25:23 +0000 | |
commit | e586d7d704d475afe3373a1de6ae20d504f79d6d (patch) | |
tree | 7e3fa24807cebd48a86bd40f866d792181191ee9 /examples/portfolio/src/components/ContactCTA.astro | |
download | astro-e586d7d704d475afe3373a1de6ae20d504f79d6d.tar.gz astro-e586d7d704d475afe3373a1de6ae20d504f79d6d.tar.zst astro-e586d7d704d475afe3373a1de6ae20d504f79d6d.zip |
Sync from a8e1c0a7402940e0fc5beef669522b315052df1blatest
Diffstat (limited to 'examples/portfolio/src/components/ContactCTA.astro')
-rw-r--r-- | examples/portfolio/src/components/ContactCTA.astro | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/ContactCTA.astro b/examples/portfolio/src/components/ContactCTA.astro new file mode 100644 index 000000000..6986bd740 --- /dev/null +++ b/examples/portfolio/src/components/ContactCTA.astro @@ -0,0 +1,46 @@ +--- +import CallToAction from './CallToAction.astro'; +import Icon from './Icon.astro'; +--- + +<aside> + <h2>Interested in working together?</h2> + <CallToAction href="mailto:me@example.com"> + Send Me a Message + <Icon icon="paper-plane-tilt" size="1.2em" /> + </CallToAction> +</aside> + +<style> + aside { + display: flex; + flex-direction: column; + align-items: center; + gap: 3rem; + border-top: 1px solid var(--gray-800); + border-bottom: 1px solid var(--gray-800); + padding: 5rem 1.5rem; + background-color: var(--gray-999_40); + box-shadow: var(--shadow-sm); + } + + h2 { + font-size: var(--text-xl); + text-align: center; + max-width: 15ch; + } + + @media (min-width: 50em) { + aside { + padding: 7.5rem; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + } + + h2 { + font-size: var(--text-3xl); + text-align: left; + } + } +</style> |