diff options
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> |