From 2d4d85553164c32a0d3b95b9c8913d01a7fb5c76 Mon Sep 17 00:00:00 2001 From: nderevj Date: Tue, 10 Mar 2026 16:39:53 -0700 Subject: [PATCH 01/30] modern redesign --- src/_css/main.css | 500 +++++++++++++++++++--------------------------- src/index.html | 183 ++++++++++------- 2 files changed, 324 insertions(+), 359 deletions(-) diff --git a/src/_css/main.css b/src/_css/main.css index 0deb358..8d158a0 100644 --- a/src/_css/main.css +++ b/src/_css/main.css @@ -1,386 +1,302 @@ -/* ----------------------------------------------------------------------------- -//////////////////////////////////////////////////////////////////////////////// -CORE STYLES (low resolution, old devices) -//////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------ */ +:root { + --color-primary: #348aa7; /* Blue */ + --color-secondary: #bce784; /* Green */ + --color-accent: #513b56; /* Dark Purple */ + --color-bg: #ffffff; + --color-bg-alt: #f4f7f8; + --color-text: #333333; + --color-text-light: #666666; + --container-width: 1000px; + --spacing: 1.5rem; +} /* --------------------------------- */ /* General */ /* --------------------------------- */ -html, -body { - height: 100%; +* { + box-sizing: border-box; } -body { - font-family: "source-sans-pro", sans-serif; - font-size: 100%; /* Use device defaults, typically 16px. */ +html { + scroll-behavior: smooth; } -a { - color: #bce784; - font-weight: bold; - text-decoration: none; +body { + font-family: "source-sans-pro", sans-serif; + line-height: 1.6; + color: var(--color-text); + margin: 0; + background-color: var(--color-bg); } -header { - color: #513b56; - font-size: larger; - text-align: center; +h1, +h2, +h3 { + font-family: "bebas-neue", sans-serif; + color: var(--color-accent); + margin-top: 0; + text-transform: uppercase; + letter-spacing: 1px; } -p { - color: #513b56; +h1 { + font-size: clamp(2.5rem, 8vw, 4rem); } -h1 { - color: #513b56; - font-family: "bebas-neue", sans-serif; +h2 { + font-size: clamp(2rem, 5vw, 2.5rem); text-align: center; + margin-bottom: 2rem; } -/* --------------------------------- */ -/* Content */ -/* --------------------------------- */ +h3 { + font-size: 1.5rem; + color: var(--color-primary); +} -article { - font-size: 6vw; - padding: 1rem; +p { + margin-bottom: 1rem; } -.emote-winky-face { - display: inline-block; +a { + color: var(--color-primary); + text-decoration: none; + transition: opacity 0.2s; +} - -webkit-transform: translateX(1vw) translateY(-2vw) rotate(45deg); - -ms-transform: translateX(1vw) translateY(-2vw) rotate(45deg); - transform: translateX(1vw) translateY(-2vw) rotate(45deg); +a:hover { + opacity: 0.8; } -.glow-green { - color: #bce784; +ul { + padding-left: 1.5rem; } -.company-flyer-qrcode { - display: none; +.container { + max-width: var(--container-width); + margin: 0 auto; + padding: 0 var(--spacing); } /* --------------------------------- */ -/* Sections */ +/* Hero */ /* --------------------------------- */ -#dont-speak-geek { - background-color: #bce784; - font-family: "verveine", sans-serif; - font-size: 10vw; - padding: 10vw 0; +.hero { + background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%); + color: #fff; + padding: 100px 0; text-align: center; } -#dont-speak-geek > header { - color: #513b56; +.hero h1 { + color: var(--color-secondary); + margin-bottom: 0.5rem; } -#dont-speak-geek > p { - color: #348aa7; - margin: 0; +.tagline { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 2rem; + text-transform: uppercase; + letter-spacing: 2px; } -/* --------------------------------- */ - -#nbs-your-lifesaver { - background-color: #ffffff; - color: #513b56; - font-family: "source-sans-pro", sans-serif; - - background-image: url("../_images/nbs-lifesaver-empty-faded-500px.png"); - background-position: center center; - background-repeat: no-repeat; - background-size: 50vw; +.intro { + font-size: 1.2rem; + max-width: 600px; + margin: 0 auto 2.5rem; + font-family: "verveine", sans-serif; + color: #e0e0e0; } -#nbs-your-lifesaver > div { - text-align: center; +.btn { + display: inline-block; + background-color: var(--color-secondary); + color: var(--color-accent); + padding: 0.8rem 2rem; + border-radius: 50px; + font-weight: bold; + font-size: 1.1rem; + transition: transform 0.2s, box-shadow 0.2s; } -#nbs-your-lifesaver p { - display: inline-block; - margin: 0; - text-align: left; +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } -#nbs-your-lifesaver #call-to-action { - margin: 1rem 0; +/* --------------------------------- */ +/* Sections */ +/* --------------------------------- */ + +.section { + padding: 80px 0; } -#nbs-your-lifesaver #call-to-action > span:first-of-type { - margin: 0; +.alt-bg { + background-color: var(--color-bg-alt); } -#nbs-your-lifesaver #call-to-action > span { - display: block; - margin: 0; - margin-left: 15vw; +.grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; } -#nbs-your-lifesaver #call-to-action > span:last-of-type { - margin-left: 45vw; +.card { + background: #fff; + padding: 2rem; + border-radius: 12px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); + text-align: center; + border-top: 5px solid var(--color-secondary); } +/* --------------------------------- */ +/* Platforms */ /* --------------------------------- */ -#nbs-can-help { - background-color: #348aa7; - font-family: "verveine", sans-serif; - font-size: 8vw; - padding: 8vw 0; - text-align: center; - - background-image: url("../_images/nbs-bubbles-250px.png"); - background-position: right 1rem bottom; - background-repeat: no-repeat; - background-size: 30vw; +.flex-row { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 2rem; } -#nbs-can-help .company-acronym { - color: #513b56; +.platform-group { + flex: 1; + min-width: 250px; + text-align: center; } -#nbs-can-help > header { - color: #a4bab7; +.platform-group ul { + list-style: none; + padding: 0; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; } -#nbs-can-help > p { - color: #513b56; - margin: 0; +.platform-group li { + background: var(--color-accent); + color: #fff; + padding: 0.5rem 1.5rem; + border-radius: 20px; + font-weight: bold; } +/* --------------------------------- */ +/* Pricing */ /* --------------------------------- */ -#how-nbs-helps { - background-color: #ffffff; - overflow: auto; +.pricing-info { + display: flex; + flex-direction: column; + align-items: center; + gap: 3rem; + text-align: center; } -#how-nbs-helps h1 { - margin-bottom: 0.5rem; +.price-box { + background: var(--color-primary); + color: #fff; + padding: 3rem; + border-radius: 50%; + width: 250px; + height: 250px; + display: flex; + flex-direction: column; + justify-content: center; + box-shadow: 0 10px 20px rgba(52, 138, 167, 0.3); } -#how-nbs-helps p { - margin-top: 0; - text-align: justify; +.price { + font-size: 3rem; + font-family: "bebas-neue", sans-serif; + line-height: 1; +} + +.referral-box { + max-width: 600px; + background: var(--color-secondary); + padding: 2rem; + border-radius: 12px; + color: var(--color-accent); } /* --------------------------------- */ -/* Company Info */ +/* Contact */ /* --------------------------------- */ -.company-name-word::first-letter, -.company-acronym { - color: #348aa7; - font-weight: bold; +.contact-section { + text-align: center; } -.company-number { - color: #513b56; +.contact-methods { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 1.5rem; + margin-top: 2rem; } -/* ----------------------------------------------------------------------------- -//////////////////////////////////////////////////////////////////////////////// -BREAKPOINTS -//////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------ */ - -/* 500px @ 16px */ -@media all and (min-width: 31.25rem) { - #nbs-your-lifesaver { - background-image: url("../_images/nbs-lifesaver-empty-faded-800px.png"); - } - - #nbs-can-help { - background-size: 25vw; - } - - #how-nbs-helps { - text-align: center; - } - - #how-nbs-helps > section { - display: inline-block; - font-size: large; - margin: auto 0.5rem; - vertical-align: top; - width: 43vw; - } -} - -/* 600px @ 16px */ -@media all and (min-width: 37.5rem) { - article { - font-size: 4vw; - } - - #nbs-your-lifesaver, - #nbs-can-help { - background-size: 20vw; - background-position: right 1rem center; - } - - #nbs-your-lifesaver #call-to-action { - display: block; - text-align: center; - } - - #nbs-your-lifesaver #call-to-action > span, - #nbs-your-lifesaver #call-to-action > span:last-of-type { - display: inline-block; - margin: 0; - } +.contact-link { + background: var(--color-accent); + color: #fff; + padding: 1rem 2rem; + border-radius: 8px; + font-weight: bold; + flex: 1; + min-width: 200px; } -/* 800px @ 16px */ -@media all and (min-width: 50rem) { - #how-nbs-helps > section { - margin: auto 0.5rem; - width: 29vw; - } +.contact-link:hover { + background: var(--color-primary); + color: #fff; } -/* 1000px @ 16px */ -@media all and (min-width: 62.5rem) { - article, - header { - text-align: left; - } - - .emote-winky-face { - -webkit-transform: translateX(1vw) translateY(-2vw) rotate(45deg); - -ms-transform: translateX(1vw) translateY(-2vw) rotate(45deg); - transform: translateX(0.25vw) translateY(-0.5vw) rotate(45deg); - } - - #dont-speak-geek, - #nbs-can-help { - font-size: 4vw; - padding: 4rem; - text-align: left; - } - - #dont-speak-geek > p { - margin-top: -1vw; - margin-left: 12vw; - } - - #nbs-your-lifesaver { - background-position: right 15vw center; - background-size: 15vw; - } - - #nbs-can-help > header, - #nbs-can-help > p { - text-align: right; - } - - #nbs-can-help { - background-position: right 10vw center; - background-size: 10vw; - } - - #nbs-can-help > p { - margin-top: -1vw; - margin-right: 8vw; - } - - #nbs-your-lifesaver, - #how-nbs-helps { - font-size: 3vw; - } +/* --------------------------------- */ +/* Footer */ +/* --------------------------------- */ - #nbs-your-lifesaver > header, - #how-nbs-helps > header { - text-align: center; - } +.footer { + background-color: var(--color-accent); + color: #fff; + padding: 2rem 0; + text-align: center; + font-size: 0.9rem; } -/* 1200px @ 16px */ -@media all and (min-width: 75rem) { - #dont-speak-geek, - #nbs-can-help { - padding-top: 3rem; - padding-bottom: 3rem; - } - - #dont-speak-geek > header, - #dont-speak-geek > p { - font-size: 3vw; - } - - #dont-speak-geek > p { - margin-top: -0.5vw; - margin-left: 7vw; - } - - #nbs-your-lifesaver { - background-size: 9vw; - background-position: right 27vw center; - } - - #nbs-your-lifesaver > header, - #nbs-your-lifesaver p { - font-size: 2vw; - } - - #nbs-your-lifesaver #call-to-action { - margin-bottom: 0; - } - - #nbs-can-help { - background-size: 8vw; - background-position: right 6vw center; - } - - #nbs-can-help > header, - #nbs-can-help > p { - font-size: 3vw; - } - - #nbs-can-help > p { - margin-top: -0.5vw; - margin-right: 2vw; - } +/* --------------------------------- */ +/* Responsive */ +/* --------------------------------- */ - #how-nbs-helps > header { - font-size: 2vw; +@media (min-width: 768px) { + .pricing-info { + flex-direction: row; + justify-content: center; } } -/* ----------------------------------------------------------------------------- -//////////////////////////////////////////////////////////////////////////////// -PRINT -//////////////////////////////////////////////////////////////////////////////// ------------------------------------------------------------------------------ */ +.company-flyer-qrcode { + display: none; +} @media print { - body { - print-color-adjust: exact; - } - - .company-flyer-qrcode { - display: block !important; - position: fixed; - bottom: 0; - left: 50%; - transform: translate(-50%); - margin-bottom: 1rem; - width: 6.25rem; + .hero { + background: none; + color: #000; } - - #dont-speak-geek { - padding-top: 1.75rem; - padding-bottom: 1.75rem; + .btn, + .contact-link { + border: 1px solid #000; } - - #how-nbs-helps h1 { - margin-top: 0.25em; + .company-flyer-qrcode { + display: block; + max-width: 100px; + margin: 1rem auto; } } diff --git a/src/index.html b/src/index.html index 170bbc9..50d4c1b 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + - - Support, App & Web Design and Training | Network Based Solutions, LLC - + Support, App & Web Design and Training | Network Based Solutions, LLC - - @@ -52,7 +48,6 @@ } - - From 0da9c18b097823432568a7cf8043d0abe9f0db21 Mon Sep 17 00:00:00 2001 From: nderevj Date: Tue, 10 Mar 2026 16:57:05 -0700 Subject: [PATCH 03/30] personalized wording --- src/index.html | 68 ++++++++++++++++++++++++++++---------------------- 1 file changed, 38 insertions(+), 30 deletions(-) diff --git a/src/index.html b/src/index.html index e07b517..94778b4 100644 --- a/src/index.html +++ b/src/index.html @@ -28,7 +28,7 @@ @@ -72,28 +72,33 @@

Network Based Solutions

-

Your Technology Lifesaver

-

Don't speak geek? Neither do we. We're here to help you navigate the digital waters.

- Get Help Now +

Your Personal Computer Dude

+

+ Technology should be a tool that empowers you, not a source of frustration.
+ I provide friendly, patient, and expert help to make your digital life run smoothly. +

+ Let's Talk
-

How We Help

+

How I Can Help You

Software Support

-

Expert assistance with all your applications and software needs.

+

Whether it's a quick fix or a complex issue, I'm here to help you get your software working perfectly.

App & Web Design

-

Beautiful, functional, and modern digital experiences tailored for you.

+

+ Together, we can create a beautiful and functional digital presence that truly reflects who you are. +

-

Training

-

Personalized, step-by-step guidance to help you master your technology.

+

Learning & Training

+

I offer patient, one-on-one guidance to help you feel confident and capable with your technology.

@@ -101,17 +106,17 @@

Training

-

Platforms We Support

+

Expertise Across All Your Devices

-

Mobile

+

Mobile Support

  • Android
  • iOS
-

Desktop & Laptop

+

Computer Support