<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bnaw — Say hello</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Nunito+Sans:wght@400;600;700&display=swap');
:root{
--bg:#fdf3ec;
--card:#ffffff;
--ink:#3a2e2a;
--muted:#9b8b83;
--peach:#f2a679;
--lilac:#c9b8e8;
--line:#f0ddd0;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
background:var(--bg);
color:var(--ink);
font-family:'Nunito Sans', sans-serif;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:32px 16px;
}
.wrap{
width:100%;
max-width:900px;
background:var(--card);
border-radius:28px;
box-shadow:0 30px 60px -30px rgba(58,46,42,0.25);
overflow:hidden;
}
.top{
padding:40px 44px 8px;
text-align:center;
}
.badge{
display:inline-block;
background:var(--lilac);
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
padding:6px 14px;
border-radius:999px;
margin-bottom:18px;
}
.top h1{
font-family:'Fraunces', serif;
font-size:38px;
font-weight:600;
line-height:1.15;
}
.top p{
margin-top:12px;
color:var(--muted);
font-size:15px;
max-width:38ch;
margin-left:auto;
margin-right:auto;
line-height:1.6;
}
.grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:0;
padding:32px 44px 44px;
}
@media (max-width:680px){
.grid{ grid-template-columns:1fr; }
.top h1{ font-size:30px; }
}
.info{
padding-right:32px;
display:flex;
flex-direction:column;
gap:18px;
}
.pill{
background:#fdf3ec;
border:1px solid var(--line);
border-radius:16px;
padding:16px 18px;
}
.pill .k{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.06em;
color:var(--muted);
font-weight:700;
margin-bottom:4px;
}
.pill a, .pill span.v{
color:var(--ink);
text-decoration:none;
font-weight:600;
font-size:14px;
}
.pill a:hover{ color:var(--peach); }
.form-side{
padding-left:32px;
border-left:1px dashed var(--line);
}
@media (max-width:680px){
.form-side{ border-left:none; padding-left:0; padding-top:24px; border-top:1px dashed var(--line); }
.info{ padding-right:0; }
}
.field{ margin-bottom:18px; }
.field label{
display:block;
font-size:12px;
font-weight:700;
color:var(--muted);
margin-bottom:6px;
}
.field input, .field textarea{
width:100%;
border:1px solid var(--line);
border-radius:14px;
padding:12px 16px;
font-family:'Nunito Sans', sans-serif;
font-size:14px;
outline:none;
background:#fffaf6;
resize:none;
color:var(--ink);
}
.field input:focus, .field textarea:focus{
border-color:var(--peach);
}
.field textarea{ min-height:96px; }
.submit{
width:100%;
padding:14px;
background:var(--peach);
color:#fff;
border:none;
border-radius:14px;
font-weight:700;
font-size:14px;
cursor:pointer;
transition:filter 0.15s ease;
}
.submit:hover{ filter:brightness(0.95); }
.status{
font-size:13px;
color:#7a9b6a;
margin-top:10px;
min-height:16px;
font-weight:600;
}
</style>
</head>
<body>
<div class="wrap">
<div class="top">
<span class="badge">We reply within a day</span>
<h1>Say hello to bnaw</h1>
<p>Got a question, an idea, or just want to chat? We'd genuinely love to hear from you.</p>
</div>
<div class="grid">
<div class="info">
<div class="pill">
<div class="k">Email</div>
<a href="mailto:hello@bnaw.co">hello@bnaw.co</a>
</div>
<div class="pill">
<div class="k">Phone</div>
<a href="tel:+10000000000">+1 (000) 000-0000</a>
</div>
<div class="pill">
<div class="k">Studio</div>
<span class="v">123 Placeholder St, Your City</span>
</div>
<div class="pill">
<div class="k">Hours</div>
<span class="v">Mon–Fri, 9am–6pm</span>
</div>
</div>
<div class="form-side">
<form id="contactForm">
<div class="field">
<label for="name">Your name</label>
<input type="text" id="name" required>
</div>
<div class="field">
<label for="email">Your email</label>
<input type="email" id="email" required>
</div>
<div class="field">
<label for="message">Your message</label>
<textarea id="message" required></textarea>
</div>
<button type="submit" class="submit">Send it over</button>
<div class="status" id="status"></div>
</form>
</div>
</div>
</div>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e){
e.preventDefault();
document.getElementById('status').textContent = 'Thank you! Connect a backend to actually deliver this. 🌸';
this.reset();
});
</script>
</body>
</html>
