63 lines
1.3 KiB
Plaintext
63 lines
1.3 KiB
Plaintext
---
|
|
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>
|