2RE
53ca1fb834
Static HTML/CSS/JS portfolio for the design studio 2RE03: locally vendored Bootstrap 5.3.3, self-hosted Inter + Space Grotesk fonts, six pages, Collins-style scroll-snap carousels, a case-studies index with 10 detail pages, and a Web3Forms contact form.
144 lines
6.9 KiB
HTML
144 lines
6.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Contact | 2RE03</title>
|
|
<meta name="description" content="Contact 2RE03 about a web design, logo, print, 3D modeling, or written project.">
|
|
<meta name="theme-color" content="#2ee666">
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<a class="visually-hidden-focusable" href="#main">Skip to content</a>
|
|
|
|
<header class="site-header" data-bs-theme="dark">
|
|
<nav class="navbar navbar-expand-lg" aria-label="Primary navigation">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="index.html">2RE03</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNav"
|
|
aria-controls="primaryNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="primaryNav">
|
|
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 align-items-lg-center">
|
|
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="case-studies.html">Case Studies</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="work.html">Work</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
|
|
<li class="nav-item"><a class="nav-link active" aria-current="page" href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<section class="hero hero--compact">
|
|
<div class="container">
|
|
<p class="eyebrow eyebrow-ink mb-2">Contact</p>
|
|
<h1>Let's make something.</h1>
|
|
<p class="hero-lead mb-0">Tell us what you're working on. The form goes straight to us.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="row g-5">
|
|
<div class="col-lg-7">
|
|
<div class="contact-panel p-4 p-md-5">
|
|
<h2 class="h4 mb-1">Start a project</h2>
|
|
<p class="text-body-secondary">Fields marked <span class="text-brand" aria-hidden="true">*</span>
|
|
<span class="visually-hidden">asterisk</span> are required.</p>
|
|
|
|
<form id="contactForm" class="needs-validation" action="https://api.web3forms.com/submit"
|
|
method="POST" novalidate>
|
|
<input type="hidden" name="access_key" value="15eda3b3-cbe1-444e-a5d8-abe3cd75da01">
|
|
<input type="hidden" name="from_name" value="2RE03 Website">
|
|
<!-- Honeypot: hidden from real users, catches bots -->
|
|
<input type="checkbox" name="botcheck" class="d-none" tabindex="-1" autocomplete="off" aria-hidden="true">
|
|
|
|
<div class="mb-3">
|
|
<label for="contactName" class="form-label">Name <span class="text-brand" aria-hidden="true">*</span></label>
|
|
<input type="text" class="form-control" id="contactName" name="name" required autocomplete="name">
|
|
<div class="invalid-feedback">Please enter your name.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="contactEmail" class="form-label">Email <span class="text-brand" aria-hidden="true">*</span></label>
|
|
<input type="email" class="form-control" id="contactEmail" name="email" required autocomplete="email"
|
|
inputmode="email">
|
|
<div class="invalid-feedback">Please enter a valid email address.</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="contactSubject" class="form-label">Subject <span class="text-muted fw-normal">(optional)</span></label>
|
|
<input type="text" class="form-control" id="contactSubject" name="subject">
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="contactMessage" class="form-label">Message <span class="text-brand" aria-hidden="true">*</span></label>
|
|
<textarea class="form-control" id="contactMessage" name="message" rows="6" required
|
|
placeholder="What are you making? Any deadline or budget in mind?"></textarea>
|
|
<div class="invalid-feedback">Please enter a message.</div>
|
|
</div>
|
|
<div id="formStatus" class="alert mt-3 mb-0" role="status" aria-live="polite" tabindex="-1" hidden></div>
|
|
|
|
<button type="submit" class="btn btn-brand btn-lg mt-3">Send message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-5">
|
|
<h2 class="h4">What to include</h2>
|
|
<p class="text-body-secondary">The more context, the faster we can respond:</p>
|
|
<ul>
|
|
<li>A sentence or two about the project</li>
|
|
<li>Rough timeline, if you have one</li>
|
|
<li>Budget range, if it's fixed</li>
|
|
<li>Links to anything you like: yours, or someone else's</li>
|
|
</ul>
|
|
<hr>
|
|
<h2 class="h4">Response time</h2>
|
|
<p class="text-body-secondary mb-0">We read everything that comes in and aim to reply within a couple
|
|
of days. If it looks like a fit, we'll suggest a quick call.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="container py-4">
|
|
<div class="row gy-4">
|
|
<div class="col-md-5">
|
|
<span class="footer-brand">2RE03</span>
|
|
<p class="mt-2 mb-0">Design, writing, and code for the web and everything around it.</p>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<h2 class="h6 text-uppercase text-white mb-3">Explore</h2>
|
|
<ul class="list-unstyled mb-0">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="case-studies.html">Case Studies</a></li>
|
|
<li><a href="work.html">Work</a></li>
|
|
<li><a href="about.html">About</a></li>
|
|
<li><a href="services.html">Services</a></li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md-4">
|
|
<h2 class="h6 text-uppercase text-white mb-3">Start something</h2>
|
|
<p class="mb-3">Tell us what you're making and we'll take it from there.</p>
|
|
<a class="btn btn-brand btn-sm" href="index.html">Back to home</a>
|
|
</div>
|
|
</div>
|
|
<hr class="border-secondary-subtle mt-4">
|
|
<p class="small mb-0">© <span data-year>2026</span> 2RE03. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/bootstrap.bundle.min.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|