web design, website template, contact page design, ui design inspiration, small business website, HTML CSS template, minimalist web design, earthy color palette <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bnaw — Get in touch</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
:root{
--ink:#151316;
--paper:#f0ede6;
--moss:#4a5d43;
--clay:#b5502e;
--line:#151316;
--muted:#6b675f;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
background:var(--paper);
color:var(--ink);
font-family:'Space Grotesk', sans-serif;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:32px 16px;
}
.wrap{
width:100%;
max-width:920px;
border:2px solid var(--line);
background:var(--paper);
position:relative;
}
.top{
display:flex;
justify-content:space-between;
align-items:flex-start;
padding:28px 32px;
border-bottom:2px solid var(--line);
gap:16px;
flex-wrap:wrap;
}
.logo{
font-size:34px;
font-weight:700;
letter-spacing:-0.03em;
}
.logo span{ color:var(--clay); }
.tag{
font-family:'DM Mono', monospace;
font-size:12px;
color:var(--muted);
text-transform:uppercase;
letter-spacing:0.08em;
max-width:220px;
text-align:right;
}
.grid{
display:grid;
grid-template-columns:1.1fr 1fr;
}
@media (max-width:720px){
.grid{ grid-template-columns:1fr; }
.info{ border-right:none !important; border-bottom:2px solid var(--line); }
}
.info{
padding:32px;
border-right:2px solid var(--line);
}
.info h1{
font-size:28px;
line-height:1.15;
letter-spacing:-0.02em;
margin-bottom:16px;
}
.info p.lead{
color:var(--muted);
font-size:15px;
line-height:1.5;
margin-bottom:28px;
max-width:36ch;
}
.channel{
font-family:'DM Mono', monospace;
font-size:13px;
padding:14px 0;
border-top:1px solid #d8d4ca;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}
.channel:last-child{ border-bottom:1px solid #d8d4ca; }
.channel .label{ color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-size:11px; }
.channel a{ color:var(--ink); text-decoration:none; }
.channel a:hover{ color:var(--clay); }
.form-side{
padding:32px;
}
.field{
margin-bottom:22px;
}
.field label{
display:block;
font-family:'DM Mono', monospace;
font-size:11px;
text-transform:uppercase;
letter-spacing:0.08em;
color:var(--muted);
margin-bottom:8px;
}
.field input,
.field textarea{
width:100%;
border:none;
border-bottom:2px solid var(--line);
background:transparent;
font-family:'Space Grotesk', sans-serif;
font-size:16px;
padding:8px 2px;
color:var(--ink);
outline:none;
resize:none;
}
.field input:focus,
.field textarea:focus{
border-bottom-color:var(--clay);
}
.field textarea{ min-height:96px; }
.submit{
margin-top:8px;
width:100%;
padding:14px 20px;
background:var(--ink);
color:var(--paper);
border:2px solid var(--ink);
font-family:'Space Grotesk', sans-serif;
font-weight:600;
font-size:14px;
text-transform:uppercase;
letter-spacing:0.05em;
cursor:pointer;
transition:background 0.15s ease, color 0.15s ease;
}
.submit:hover{
background:var(--paper);
color:var(--ink);
}
.status{
font-family:'DM Mono', monospace;
font-size:12px;
color:var(--moss);
margin-top:12px;
min-height:16px;
}
.foot{
border-top:2px solid var(--line);
padding:16px 32px;
font-family:'DM Mono', monospace;
font-size:11px;
color:var(--muted);
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:8px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<div class="logo">bn<span>aw</span>.</div>
<div class="tag">Say what's on your mind — we read everything</div>
</div>
<div class="grid">
<div class="info">
<h1>Let's talk.</h1>
<p class="lead">Questions, ideas, or just want to say hi — drop a line and someone from the team will get back to you.</p>
<div class="channel">
<span class="label">Email</span>
<a href="mailto:hello@bnaw.co">hello@bnaw.co</a>
</div>
<div class="channel">
<span class="label">Phone</span>
<a href="tel:+10000000000">+1 (000) 000-0000</a>
</div>
<div class="channel">
<span class="label">Studio</span>
<span>123 Placeholder St, Your City</span>
</div>
<div class="channel">
<span class="label">Hours</span>
<span>Mon–Fri, 9am–6pm</span>
</div>
</div>
<div class="form-side">
<form id="contactForm">
<div class="field">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="field">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="field">
<label for="message">Message</label>
<textarea id="message" name="message" required></textarea>
</div>
<button type="submit" class="submit">Send message</button>
<div class="status" id="status"></div>
</form>
</div>
</div>
<div class="foot">
<span>© 2026 bnaw.</span>
<span>Replace placeholder contact details before publishing.</span>
</div>
</div>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e){
e.preventDefault();
document.getElementById('status').textContent = 'Thanks — your message has been noted. (Wire this form up to your backend or a form service to actually send it.)';
this.reset();
});
</script>
</body>
</html>
