216 lines
8.5 KiB
HTML
216 lines
8.5 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta
|
||
name="description"
|
||
content="Cedarline Digital is an independent software business in British Columbia, Canada, serving as a home for software projects, support resources, and policies."
|
||
>
|
||
<title>Cedarline Digital | Software Built From Strong Foundations</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<header class="site-header" data-header>
|
||
<a class="brand" href="#top" aria-label="Cedarline Digital home">
|
||
<span class="brand-mark" aria-hidden="true">
|
||
<img src="assets/images/logo-transparent.png" alt="">
|
||
</span>
|
||
<span class="brand-text">
|
||
<strong>Cedarline</strong>
|
||
<span>Digital</span>
|
||
</span>
|
||
</a>
|
||
|
||
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" data-nav-toggle>
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
|
||
<nav class="site-nav" id="site-nav" aria-label="Primary navigation" data-nav>
|
||
<a href="#about">About</a>
|
||
<a href="#work">Work</a>
|
||
<a href="#contact">Contact</a>
|
||
<a class="nav-cta" href="mailto:hello@cedarline.digital">Email</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="top">
|
||
<section class="hero" aria-labelledby="hero-title">
|
||
<div class="hero-content">
|
||
<h1 id="hero-title">
|
||
<span>Software. Infrastructure.</span>
|
||
<em>Digital solutions.</em>
|
||
</h1>
|
||
<p class="hero-copy">
|
||
Cedarline Digital is an independent software business based in Beautiful British Columbia, Canada.
|
||
</p>
|
||
<div class="hero-actions" aria-label="Hero actions">
|
||
<a class="button button-primary" href="#about">Learn more <span aria-hidden="true">›</span></a>
|
||
<a class="button button-secondary" href="#contact">Contact</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section about-section" id="about" aria-labelledby="about-title">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">About</p>
|
||
<h2 id="about-title">Independent software, built with care.</h2>
|
||
</div>
|
||
<div class="about-grid">
|
||
<div class="section-copy">
|
||
<p>
|
||
Cedarline Digital is a small software business based in British Columbia, Canada. It exists to build and support practical digital products, web tools, mobile apps, and backend systems.
|
||
</p>
|
||
<p>
|
||
The focus is simple: reliable foundations, clean interfaces, and software that can be maintained over time.
|
||
</p>
|
||
</div>
|
||
<aside class="studio-panel" aria-label="Studio details">
|
||
<dl>
|
||
<div>
|
||
<dt>Based</dt>
|
||
<dd>British Columbia, Canada</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Focus</dt>
|
||
<dd>Software products, web tools, and infrastructure</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Structure</dt>
|
||
<dd>Independent / founder-led</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Status</dt>
|
||
<dd>Preparing public products and resources</dd>
|
||
</div>
|
||
</dl>
|
||
</aside>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section" id="work" aria-labelledby="work-title">
|
||
<div class="section-heading">
|
||
<p class="eyebrow">Work</p>
|
||
<h2 id="work-title">What Cedarline Digital is for.</h2>
|
||
</div>
|
||
<div class="card-grid">
|
||
<article class="service-card">
|
||
<span class="card-icon software-icon" aria-hidden="true"></span>
|
||
<h3>Software products</h3>
|
||
<p>Independent apps, web tools, and SaaS projects developed under the Cedarline Digital name.</p>
|
||
</article>
|
||
<article class="service-card">
|
||
<span class="card-icon web-icon" aria-hidden="true"></span>
|
||
<h3>Support and policies</h3>
|
||
<p>A central home for product support, privacy policies, terms, and related resources.</p>
|
||
</article>
|
||
<article class="service-card">
|
||
<span class="card-icon maintain-icon" aria-hidden="true"></span>
|
||
<h3>Selected client work</h3>
|
||
<p>Freelance development may be offered for practical software projects where the technical fit is clear.</p>
|
||
</article>
|
||
<article class="service-card">
|
||
<span class="card-icon engineering-icon" aria-hidden="true"></span>
|
||
<h3>Web systems</h3>
|
||
<p>Practical frontend, backend, API, dashboard, and infrastructure work.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section brand-section" id="principles" aria-labelledby="brand-title">
|
||
<div class="section-heading centered">
|
||
<p class="eyebrow">Principles</p>
|
||
<h2 id="brand-title">How the work should feel.</h2>
|
||
</div>
|
||
<div class="principle-list">
|
||
<article>
|
||
<span class="line-icon foundation-icon" aria-hidden="true"></span>
|
||
<h3>Reliable foundations</h3>
|
||
<p>Software should be built on clear, dependable technical choices.</p>
|
||
</article>
|
||
<article>
|
||
<span class="line-icon engineering-icon" aria-hidden="true"></span>
|
||
<h3>Practical engineering</h3>
|
||
<p>Tools and frameworks should serve the project, not complicate it.</p>
|
||
</article>
|
||
<article>
|
||
<span class="line-icon experience-icon" aria-hidden="true"></span>
|
||
<h3>Clear interfaces</h3>
|
||
<p>Good software should feel calm, direct, and understandable.</p>
|
||
</article>
|
||
<article>
|
||
<span class="line-icon maintain-icon" aria-hidden="true"></span>
|
||
<h3>Maintainable systems</h3>
|
||
<p>Projects should leave room for updates, support, and future growth.</p>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section contact-section" id="contact" aria-labelledby="contact-title">
|
||
<div class="contact-panel">
|
||
<div class="contact-copy">
|
||
<p class="eyebrow">Contact</p>
|
||
<p>
|
||
For general contact, support, business inquiries, or future product questions, use the email below.
|
||
</p>
|
||
</div>
|
||
<div class="contact-action">
|
||
<a class="contact-link" href="mailto:hello@cedarline.digital">
|
||
<span class="email-icon" aria-hidden="true"></span>
|
||
hello@cedarline.digital
|
||
</a>
|
||
</div>
|
||
<p class="contact-note">
|
||
Product pages, policies, and support resources will be added as they become available.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="site-footer">
|
||
<div class="footer-inner">
|
||
<div class="footer-brand">
|
||
<a class="footer-logo" href="#top" aria-label="Cedarline Digital home">
|
||
<span class="footer-mark" aria-hidden="true">
|
||
<img src="assets/images/logo-transparent.png" alt="">
|
||
</span>
|
||
<span class="footer-wordmark">
|
||
<strong>Cedarline</strong>
|
||
<span>Digital</span>
|
||
</span>
|
||
</a>
|
||
<p>An independent software business based in British Columbia.</p>
|
||
<span class="footer-location">British Columbia, Canada</span>
|
||
</div>
|
||
|
||
<nav class="footer-links" aria-label="Footer navigation">
|
||
<div>
|
||
<h2>Studio</h2>
|
||
<a href="#about">About</a>
|
||
<a href="#work">Work</a>
|
||
<a href="#contact">Contact</a>
|
||
</div>
|
||
<div>
|
||
<h2>Legal</h2>
|
||
<a href="#">Privacy</a>
|
||
<a href="#">Terms</a>
|
||
<a href="mailto:hello@cedarline.digital">Email</a>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="footer-bottom">
|
||
<p>© <span data-year></span> Cedarline Digital. All rights reserved.</p>
|
||
<span>cedarline.digital</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|