aknuth
/
bay-area-affiliates
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new marketing stuff

This commit is contained in:
Andreas Knuth 2025-08-25 16:55:49 -05:00
parent fcdd98c9ca
commit b266a641e4
8 changed files with 492 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
ads/andreas-bc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

164
ads/businesscard_andreas.html Normal file
View File

@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bay Area Affiliates – Business Card Mock (HTML)</title>
<style>
:root {
--ratio: 1.75; /* 3.5:2 */
--brand-blue: #0a1fff;
--brand-blue-dark: #0018ff;
--accent-red: #c62828;
--ink: #0b0b0b;
}
html, body { height: 100%; }
body {
margin: 0;
background: red;
display: grid;
place-items: center;
padding: 24px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: var(--ink);
}
/* Business Card */
.card-wrap {
width: min(600px, 80vw);
aspect-ratio: var(--ratio) / 1;
}
.card {
display: grid;
grid-template-rows: 1fr auto 1fr;
height: 100%;
width: 100%;
background: #fff;
outline: 5px solid #fff;
overflow: hidden;
}
/* TOP BAND */
.brand {
display: flex;
gap: 12px;
align-items: center;
padding: 12px clamp(9px, 2vw, 24px);
border-bottom: 1px solid #e8e8ee;
justify-content: center;
}
.logo {
width: 50px;
height: 50px;
flex: 0 0 auto;
}
.company-title {
line-height: 1.05;
margin: 0;
font-weight: 900;
letter-spacing: -.02em;
font-size: clamp(20px, 3vw, 36px);
}
.subtitle {
margin: 2px 0 0;
color: var(--brand-blue-dark);
font-weight: 800;
font-size: clamp(14px, 2vw, 24px);
}
.person-info {
margin: 2px 0 0;
font-weight: 800;
font-size: clamp(16px, 2.5vw, 28px);
letter-spacing: -.01em;
display: flex;
align-items: center;
}
.person-info .job {
color: var(--brand-blue);
font-weight: 600;
margin-left: 6px;
font-size: 1.5rem;
}
/* MIDDLE BAND */
.banner {
background: var(--brand-blue);
color: #fff;
text-align: center;
padding: 8px clamp(9px, 2vw, 24px);
}
.banner .line1 {
font-weight: 800;
font-size: clamp(12px, 1.8vw, 22px);
letter-spacing: .2px;
}
.rule {
height: 1px;
width: min(500px, 92%);
margin: 4px auto;
background: rgba(255,255,255,.75);
}
.banner .line2 {
font-weight: 600;
opacity: .95;
font-size: clamp(10px, 1.4vw, 18px);
}
/* BOTTOM BAND */
.contact {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px clamp(9px, 2vw, 24px);
gap: 2px;
}
.phone {
font-size: 1.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -.01em;
}
.email,
.address,
.web {
font-size: clamp(12px, 1.6vw, 18px);
font-weight: 600;
margin-top: 2px;
}
.address {
text-align: center;
font-weight: 500;
opacity: .9;
}
.email a,
.web a {
color: var(--brand-blue-dark);
text-decoration: none;
}
.email a:hover,
.web a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="card-wrap" role="img" aria-label="Bay Area Affiliates business card mock, white background with blue middle banner, contact details shown">
<section class="card">
<header class="brand">
<img class="logo" alt="Bay Area Affiliates logo" src="logo192.png" />
<div>
<h1 class="company-title">Networking &amp; IT Services</h1>
<p class="subtitle">Bay Area Affiliates, Inc.</p>
<p class="person-info">Andreas Knuth <span class="job">| CEO &amp; Systems Engineer</span></p>
</div>
</header>
<div class="banner">
<div class="line1">Reliable IT Services Since 1996</div>
<div class="rule" aria-hidden="true"></div>
<div class="line2">On-Site & Remote Support • Networks • Servers • Backups • EMail Solutions • Microsoft&nbsp;Support</div>
</div>
<footer class="contact">
<div class="address">1001 Blucher St., Corpus Christi, Texas 78401</div>
<div class="phone">(361) 232-6578</div>
<div class="email"><a href="mailto:andreas.knuth@bayarea-cc.com">andreas.knuth@bayarea-cc.com</a> | <a href="https://bayarea-cc.com/" target="_blank" rel="noopener">www.bayarea-cc.com</a></div>
</footer>
</section>
</div>
</body>
</html>

164
ads/businesscard_elvin.html Normal file
View File

@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bay Area Affiliates – Business Card Mock (HTML)</title>
<style>
:root {
--ratio: 1.75; /* 3.5:2 */
--brand-blue: #0a1fff;
--brand-blue-dark: #0018ff;
--accent-red: #c62828;
--ink: #0b0b0b;
}
html, body { height: 100%; }
body {
margin: 0;
background: red;
display: grid;
place-items: center;
padding: 24px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: var(--ink);
}
/* Business Card */
.card-wrap {
width: min(600px, 80vw);
aspect-ratio: var(--ratio) / 1;
}
.card {
display: grid;
grid-template-rows: 1fr auto 1fr;
height: 100%;
width: 100%;
background: #fff;
outline: 5px solid #fff;
overflow: hidden;
}
/* TOP BAND */
.brand {
display: flex;
gap: 12px;
align-items: center;
padding: 12px clamp(9px, 2vw, 24px);
border-bottom: 1px solid #e8e8ee;
justify-content: center;
}
.logo {
width: 50px;
height: 50px;
flex: 0 0 auto;
}
.company-title {
line-height: 1.05;
margin: 0;
font-weight: 900;
letter-spacing: -.02em;
font-size: clamp(20px, 3vw, 36px);
}
.subtitle {
margin: 2px 0 0;
color: var(--brand-blue-dark);
font-weight: 800;
font-size: clamp(14px, 2vw, 24px);
}
.person-info {
margin: 2px 0 0;
font-weight: 800;
font-size: clamp(16px, 2.5vw, 28px);
letter-spacing: -.01em;
display: flex;
align-items: center;
}
.person-info .job {
color: var(--brand-blue);
font-weight: 600;
margin-left: 6px;
font-size: 1.5rem;
}
/* MIDDLE BAND */
.banner {
background: var(--brand-blue);
color: #fff;
text-align: center;
padding: 8px clamp(9px, 2vw, 24px);
}
.banner .line1 {
font-weight: 800;
font-size: clamp(12px, 1.8vw, 22px);
letter-spacing: .2px;
}
.rule {
height: 1px;
width: min(500px, 92%);
margin: 4px auto;
background: rgba(255,255,255,.75);
}
.banner .line2 {
font-weight: 600;
opacity: .95;
font-size: clamp(10px, 1.4vw, 18px);
}
/* BOTTOM BAND */
.contact {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px clamp(9px, 2vw, 24px);
gap: 2px;
}
.phone {
font-size: 1.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -.01em;
}
.email,
.address,
.web {
font-size: clamp(12px, 1.6vw, 18px);
font-weight: 600;
margin-top: 2px;
}
.address {
text-align: center;
font-weight: 500;
opacity: .9;
}
.email a,
.web a {
color: var(--brand-blue-dark);
text-decoration: none;
}
.email a:hover,
.web a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="card-wrap" role="img" aria-label="Bay Area Affiliates business card mock, white background with blue middle banner, contact details shown">
<section class="card">
<header class="brand">
<img class="logo" alt="Bay Area Affiliates logo" src="logo192.png" />
<div>
<h1 class="company-title">Networking &amp; IT Services</h1>
<p class="subtitle">Bay Area Affiliates, Inc.</p>
<p class="person-info">Elvin Brunks <span class="job">| Systems Engineer</span></p>
</div>
</header>
<div class="banner">
<div class="line1">Reliable IT Services Since 1996</div>
<div class="rule" aria-hidden="true"></div>
<div class="line2">On-Site & Remote Support • Networks • Servers • Backups • EMail Solutions • Microsoft&nbsp;Support</div>
</div>
<footer class="contact">
<div class="address">1001 Blucher St., Corpus Christi, Texas 78401</div>
<div class="phone">(361) 765-8400</div>
<div class="email"><a href="mailto:andreas.knuth@bayarea-cc.com">ebrunks@bayarea-cc.com</a> | <a href="https://bayarea-cc.com/" target="_blank" rel="noopener">www.bayarea-cc.com</a></div>
</footer>
</section>
</div>
</body>
</html>

164
ads/businesscard_wallie.html Normal file
View File

@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bay Area Affiliates – Business Card Mock (HTML)</title>
<style>
:root {
--ratio: 1.75; /* 3.5:2 */
--brand-blue: #0a1fff;
--brand-blue-dark: #0018ff;
--accent-red: #c62828;
--ink: #0b0b0b;
}
html, body { height: 100%; }
body {
margin: 0;
background: red;
display: grid;
place-items: center;
padding: 24px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: var(--ink);
}
/* Business Card */
.card-wrap {
width: min(600px, 80vw);
aspect-ratio: var(--ratio) / 1;
}
.card {
display: grid;
grid-template-rows: 1fr auto 1fr;
height: 100%;
width: 100%;
background: #fff;
outline: 5px solid #fff;
overflow: hidden;
}
/* TOP BAND */
.brand {
display: flex;
gap: 12px;
align-items: center;
padding: 12px clamp(9px, 2vw, 24px);
border-bottom: 1px solid #e8e8ee;
justify-content: center;
}
.logo {
width: 50px;
height: 50px;
flex: 0 0 auto;
}
.company-title {
line-height: 1.05;
margin: 0;
font-weight: 900;
letter-spacing: -.02em;
font-size: clamp(20px, 3vw, 36px);
}
.subtitle {
margin: 2px 0 0;
color: var(--brand-blue-dark);
font-weight: 800;
font-size: clamp(14px, 2vw, 24px);
}
.person-info {
margin: 2px 0 0;
font-weight: 800;
font-size: clamp(16px, 2.5vw, 28px);
letter-spacing: -.01em;
display: flex;
align-items: center;
}
.person-info .job {
color: var(--brand-blue);
font-weight: 600;
margin-left: 6px;
font-size: 1.5rem;
}
/* MIDDLE BAND */
.banner {
background: var(--brand-blue);
color: #fff;
text-align: center;
padding: 8px clamp(9px, 2vw, 24px);
}
.banner .line1 {
font-weight: 800;
font-size: clamp(12px, 1.8vw, 22px);
letter-spacing: .2px;
}
.rule {
height: 1px;
width: min(500px, 92%);
margin: 4px auto;
background: rgba(255,255,255,.75);
}
.banner .line2 {
font-weight: 600;
opacity: .95;
font-size: clamp(10px, 1.4vw, 18px);
}
/* BOTTOM BAND */
.contact {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px clamp(9px, 2vw, 24px);
gap: 2px;
}
.phone {
font-size: 1.5rem;
font-weight: 900;
line-height: 1;
letter-spacing: -.01em;
}
.email,
.address,
.web {
font-size: clamp(12px, 1.6vw, 18px);
font-weight: 600;
margin-top: 2px;
}
.address {
text-align: center;
font-weight: 500;
opacity: .9;
}
.email a,
.web a {
color: var(--brand-blue-dark);
text-decoration: none;
}
.email a:hover,
.web a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="card-wrap" role="img" aria-label="Bay Area Affiliates business card mock, white background with blue middle banner, contact details shown">
<section class="card">
<header class="brand">
<img class="logo" alt="Bay Area Affiliates logo" src="logo192.png" />
<div>
<h1 class="company-title">Networking &amp; IT Services</h1>
<p class="subtitle">Bay Area Affiliates, Inc.</p>
<p class="person-info">Wallie Coley <span class="job">| Systems Engineer</span></p>
</div>
</header>
<div class="banner">
<div class="line1">Reliable IT Services Since 1996</div>
<div class="rule" aria-hidden="true"></div>
<div class="line2">On-Site & Remote Support • Networks • Servers • Backups • EMail Solutions • Microsoft&nbsp;Support</div>
</div>
<footer class="contact">
<div class="address">1001 Blucher St., Corpus Christi, Texas 78401</div>
<div class="phone">(361) 765-8401</div>
<div class="email"><a href="mailto:andreas.knuth@bayarea-cc.com">walliec@bayarea-cc.com</a> | <a href="https://bayarea-cc.com/" target="_blank" rel="noopener">www.bayarea-cc.com</a></div>
</footer>
</section>
</div>
</body>
</html>

BIN
ads/elvin-bc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
ads/logo192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
ads/sign.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
ads/wallie-bc.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 KiB