Back to search
128Views
0Likes
0Downloads
Code · Live Preview
Componenthtml
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us — Aperture</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=DM+Sans:wght@300;400;500;600&family=DM+Serif+Display&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
/>
<!-- Link CSS File -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Navigation -->
<nav>
<div class="nav-inner">
<a href="#" class="logo">
<div class="logo-mark"><span>A</span></div>
<span class="logo-name">Aperture</span>
</a>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#" class="active">Contact</a></li>
</ul>
<button class="hamburger" id="hamburger" aria-label="Toggle menu">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="mobile-nav" id="mobileNav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#" class="active">Contact</a>
</div>
</nav>
<!-- Page Header -->
<section class="page-header">
<div class="page-header-inner">
<p class="eyebrow">Get in touch</p>
<h1 class="page-title">Contact Us</h1>
<p class="page-subtitle">
Have a question or want to work together? Fill out the form or reach
us through any of the channels below — we'll respond within 24 hours.
</p>
</div>
</section>
<!-- Main -->
<main class="main">
<!-- Left Column -->
<div class="left-col">
<!-- Map -->
<div class="card map-card">
<iframe
src="https://www.openstreetmap.org/export/embed.html?bbox=-73.9976%2C40.7420%2C-73.9836%2C40.7520&layer=mapnik&marker=40.7470%2C-73.9906"
loading="lazy"
referrerpolicy="no-referrer"
title="Office Location"
allowfullscreen
>
</iframe>
</div>
<!-- Contact Info -->
<div class="card info-card">
<p class="card-title">Contact Information</p>
<div class="info-rows">
<div class="info-row">
<div class="info-icon"><i class="fas fa-location-dot"></i></div>
<div>
<p class="info-label">Address</p>
<p class="info-value">
350 Fifth Avenue, Suite 4200<br />New York, NY 10118, USA
</p>
</div>
</div>
<div class="info-row">
<div class="info-icon"><i class="fas fa-phone"></i></div>
<div>
<p class="info-label">Phone</p>
<p class="info-value">
<a href="tel:+12125551234">+1 (212) 555-1234</a>
</p>
</div>
</div>
<div class="info-row">
<div class="info-icon"><i class="fas fa-envelope"></i></div>
<div>
<p class="info-label">Email</p>
<p class="info-value">
<a href="mailto:hello@aperture.com">hello@aperture.com</a>
</p>
</div>
</div>
<div class="info-row">
<div class="info-icon"><i class="fas fa-clock"></i></div>
<div>
<p class="info-label">Hours</p>
<p class="info-value">
Mon–Fri: 9:00 AM – 6:00 PM<br />Sat–Sun: Closed
</p>
</div>
</div>
</div>
</div>
<!-- Social -->
<div class="card social-card">
<p class="card-title">Follow Us</p>
<div class="social-links">
<a href="#" class="social-link" aria-label="Facebook"
><i class="fab fa-facebook-f"></i
></a>
<a href="#" class="social-link" aria-label="X / Twitter"
><i class="fab fa-x-twitter"></i
></a>
<a href="#" class="social-link" aria-label="LinkedIn"
><i class="fab fa-linkedin-in"></i
></a>
<a href="#" class="social-link" aria-label="Instagram"
><i class="fab fa-instagram"></i
></a>
<a href="#" class="social-link" aria-label="YouTube"
><i class="fab fa-youtube"></i
></a>
</div>
</div>
</div>
<!-- Right Column: Form -->
<div class="right-col">
<div class="card form-card">
<h2 class="form-heading">Send a message</h2>
<p class="form-subtext">
All fields marked <span style="color: var(--red)">*</span> are
required.
</p>
<form id="contactForm" novalidate>
<!-- Name row -->
<div class="form-row">
<div class="form-group">
<label for="firstName"
>First Name <span class="required">*</span></label
>
<input
type="text"
id="firstName"
name="firstName"
placeholder="John"
autocomplete="given-name"
/>
<span class="field-error" id="firstNameError"
><i
class="fas fa-circle-exclamation"
style="font-size: 11px"
></i>
Required</span
>
</div>
<div class="form-group">
<label for="lastName"
>Last Name <span class="required">*</span></label
>
<input
type="text"
id="lastName"
name="lastName"
placeholder="Doe"
autocomplete="family-name"
/>
<span class="field-error" id="lastNameError"
><i
class="fas fa-circle-exclamation"
style="font-size: 11px"
></i>
Required</span
>
</div>
</div>
<!-- Email -->
<div class="form-group">
<label for="email"
>Email Address <span class="required">*</span></label
>
<input
type="email"
id="email"
name="email"
placeholder="john@example.com"
autocomplete="email"
/>
<span class="field-error" id="emailError"
><i
class="fas fa-circle-exclamation"
style="font-size: 11px"
></i>
Enter a valid email address</span
>
</div>
<!-- Phone -->
<div class="form-group">
<label for="phone"
>Phone Number <span class="optional">(Optional)</span></label
>
<input
type="tel"
id="phone"
name="phone"
placeholder="+1 (212) 555-1234"
autocomplete="tel"
/>
</div>
<!-- Subject -->
<div class="form-group">
<label for="subject"
>Subject <span class="required">*</span></label
>
<select id="subject" name="subject">
<option value="" disabled selected>Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales & Pricing</option>
<option value="partnership">Partnership</option>
<option value="feedback">Feedback</option>
<option value="other">Other</option>
</select>
<span class="field-error" id="subjectError"
><i
class="fas fa-circle-exclamation"
style="font-size: 11px"
></i>
Please select a subject</span
>
</div>
<!-- Message -->
<div class="form-group">
<label for="message"
>Message <span class="required">*</span></label
>
<textarea
id="message"
name="message"
placeholder="Tell us how we can help you…"
maxlength="500"
></textarea>
<div class="textarea-footer">
<span class="field-error" id="messageError"
><i
class="fas fa-circle-exclamation"
style="font-size: 11px"
></i>
Please enter your message</span
>
<span class="char-count" id="charCount">0 / 500</span>
</div>
</div>
<!-- Privacy -->
<div class="checkbox-group">
<input type="checkbox" id="privacy" name="privacy" />
<label for="privacy" class="checkbox-label">
I agree to the <a href="#">Privacy Policy</a> and consent to
having my data processed.
</label>
</div>
<span
class="field-error"
id="privacyError"
style="
margin-top: -16px;
margin-bottom: 20px;
display: none;
align-items: center;
gap: 4px;
"
>
<i class="fas fa-circle-exclamation" style="font-size: 11px"></i>
You must agree to the privacy policy
</span>
<!-- Submit -->
<button type="submit" class="btn-submit" id="submitBtn">
<span id="btnText">Send Message</span>
<div class="spinner" id="spinner"></div>
<i
class="fas fa-arrow-right"
id="btnArrow"
style="font-size: 12px"
></i>
</button>
</form>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="footer-inner">
<div class="footer-left">
<div class="footer-logo"><span>A</span></div>
<span class="footer-copy"
>© 2026 Aperture. All rights reserved.</span
>
</div>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Cookies</a>
</div>
</div>
</footer>
<!-- Toast -->
<div class="toast" id="toast" role="alert" aria-live="polite">
<div class="toast-icon"><i class="fas fa-check"></i></div>
<div>
<p class="toast-title">Message sent!</p>
<p class="toast-body">We'll get back to you within 24 hours.</p>
</div>
<button class="toast-close" onclick="hideToast()" aria-label="Dismiss">
<i class="fas fa-times"></i>
</button>
</div>
<!-- Link Js File -->
<script src="app.js"></script>
</body>
</html>Detecting libraries...
Component details
Overview, install command, dependencies, and project links.
A clean, professional Contact Us page built with pure HTML, CSS, and Vanilla JS — no frameworks, no gradients, no fluff. Features a two-column layout with a contact form on the right and office info, map, and social links on the left. Fully responsive with a collapsible mobile nav. Includes real-time form validation, character counter, loading state on submit, and a toast notification on success. Typography uses DM Serif Display for headings and DM Sans for body text, with a warm neutral background, white cards, 1px borders, and a near-black accent — professional and minimal without being boring.
Added Apr 12, 2026
Discussion
Feedback, implementation tips, and usage notes.
0 threads
Comments
Sign in to join the conversation