nhcarrigan/portfolio
9
0
Fork 0
generated from nhcarrigan/template
Code Issues Pull Requests Actions Releases Activity

feat: add client banners

Browse Source
This commit is contained in:
Naomi Carrigan
2026-02-02 16:25:14 -08:00
parent 24eda79eae
commit dca728b391
1 changed files with 88 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/index.html
+88
View File
@@ -893,6 +893,54 @@
justify-content: center;
gap: 1rem;
}
/* ============================================
AVAILABILITY BANNER
============================================ */
.availability-banner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, var(--witch-purple) 0%, var(--witch-plum) 100%);
border-radius: 12px;
margin-bottom: 2rem;
}
.availability-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--witch-moon);
font-size: 0.95rem;
}
.availability-item i {
font-size: 1.2rem;
color: #10b981;
}
.availability-item:nth-child(2) i {
color: #ffd700;
}
.availability-item:nth-child(3) i {
color: var(--witch-mauve);
}
.availability-item:nth-child(4) i {
color: #60a5fa;
}
@media (max-width: 768px) {
.availability-banner {
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
}
</style>
<!-- Devicon for technology icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">
@@ -1439,6 +1487,28 @@
})();
</script>
<!--
MARK: Availability Banner
-->
<section class="availability-banner fade-in" role="region" aria-label="Availability information">
<div class="availability-item">
<i class="fas fa-check-circle" aria-hidden="true"></i>
<span><strong>Accepting New Clients</strong></span>
</div>
<div class="availability-item">
<i class="fas fa-shield-alt" aria-hidden="true"></i>
<span><strong>NDA Ready</strong> &mdash; Your project stays confidential</span>
</div>
<div class="availability-item">
<i class="fas fa-clock" aria-hidden="true"></i>
<span><strong>1-3 Business Days</strong> response time</span>
</div>
<div class="availability-item">
<i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
<span><strong>Custom Quotes</strong> available on request</span>
</div>
</section>
<!--
MARK: Tech Stack
-->
@@ -2145,6 +2215,24 @@
<p style="font-size: 1.1rem; max-width: 600px; margin: 0 auto 1.5rem;">
Have a question, want to work together, or just want to say hello? Fill out the form below and we'll get back to you!
</p>
<div class="availability-banner" style="max-width: 680px; margin: 0 auto 1.5rem;">
<div class="availability-item">
<i class="fas fa-check-circle" aria-hidden="true"></i>
<span><strong>Accepting New Clients</strong></span>
</div>
<div class="availability-item">
<i class="fas fa-shield-alt" aria-hidden="true"></i>
<span><strong>NDA Ready</strong> &mdash; Your project stays confidential</span>
</div>
<div class="availability-item">
<i class="fas fa-clock" aria-hidden="true"></i>
<span><strong>1-3 Business Days</strong> response time</span>
</div>
<div class="availability-item">
<i class="fas fa-file-invoice-dollar" aria-hidden="true"></i>
<span><strong>Custom Quotes</strong> available on request</span>
</div>
</div>
<div style="display: flex; justify-content: center; border-radius: 12px; background: var(--witch-moon); padding: 1rem; max-width: 680px; margin: 0 auto; height: 600px; overflow: hidden;">
<iframe
style="border: none; width: 100%; max-width: 640px; height: 100%;"