diff options
Diffstat (limited to 'examples/portfolio/src/components/Skills.astro')
| -rw-r--r-- | examples/portfolio/src/components/Skills.astro | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/examples/portfolio/src/components/Skills.astro b/examples/portfolio/src/components/Skills.astro new file mode 100644 index 000000000..5df5bb0d3 --- /dev/null +++ b/examples/portfolio/src/components/Skills.astro @@ -0,0 +1,62 @@ +--- +import Icon from './Icon.astro'; +--- + +<section class="box skills"> + <div class="stack gap-2 lg:gap-4"> + <Icon icon="terminal-window" color="var(--accent-regular)" size="2.5rem" gradient /> + <h2>Full Stack</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p> + </div> + <div class="stack gap-2 lg:gap-4"> + <Icon icon="trophy" color="var(--accent-regular)" size="2.5rem" gradient /> + <h2>Industry Leader</h2> + <p>Neque viverra justo nec ultrices dui. Est ultricies integer quis auctor elit.</p> + </div> + <div class="stack gap-2 lg:gap-4"> + <Icon icon="strategy" color="var(--accent-regular)" size="2.5rem" gradient /> + <h2>Strategy-Minded</h2> + <p>Urna porttitor rhoncus dolor purus non enim praesent ornare.</p> + </div> +</section> + +<style> + .box { + border: 1px solid var(--gray-800); + border-radius: 0.75rem; + padding: 1.5rem; + background-color: var(--gray-999_40); + box-shadow: var(--shadow-sm); + } + + .skills { + display: flex; + flex-direction: column; + gap: 3rem; + } + + .skills h2 { + font-size: var(--text-lg); + } + + .skills p { + color: var(--gray-400); + } + + @media (min-width: 50em) { + .box { + border-radius: 1.5rem; + padding: 2.5rem; + } + + .skills { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 5rem; + } + + .skills h2 { + font-size: var(--text-2xl); + } + } +</style> |