Project Gallery
Explore About Us – Our Story & Team in detail
1
/1
100%
Project Overview
About Us – Our Story & Team
Project Description
Discover who we are and what drives us. This modern, responsive About Us page, built with HTML, CSS, JavaScript, and Bootstrap, showcases our team, vision, and journey with a clean, elegant layout designed for easy reading and perfect alignment across devices.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | BNA align</title>
<!-- Bootstrap 5 CSS (light version) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome 6 (free icons) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Font (Inter) -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..700&display=swap" rel="stylesheet">
</head>
<body>
<!-- ========== HEADER / NAV ========== -->
<nav class="navbar navbar-expand-lg navbar-light bg-transparent py-3">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-arrow-right-arrow-left text-primary me-2"></i>BNA align
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item mx-2"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item mx-2"><a class="nav-link active-page" href="#">About</a></li>
<li class="nav-item mx-2"><a class="nav-link" href="#">Services</a></li>
<li class="nav-item mx-2"><a class="nav-link" href="#">Contact</a></li>
<li class="nav-item ms-3">
<a class="btn btn-primary rounded-pill px-4" href="#"><i class="fas fa-handshake me-2"></i>Let's talk</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- ========== MAIN ABOUT SECTION ========== -->
<main class="container section-padding pt-2">
<!-- intro heading (aligned center + left border) -->
<div class="row justify-content-center text-center mb-5">
<div class="col-lg-8">
<span class="badge bg-primary bg-opacity-10 text-primary px-3 py-2 rounded-pill mb-3">
<i class="far fa-compass me-1"></i> get to know us
</span>
<h1 class="display-4 fw-bold">We're on a mission to <span class="text-primary">realign</span> the way teams collaborate</h1>
<p class="lead text-secondary mt-3">BNA align crafts human‑centered tools that bring clarity, purpose and connection to modern workplaces.</p>
</div>
</div>
<!-- story & stats row (bootstrap alignment) -->
<div class="row g-4 align-items-center">
<div class="col-lg-6">
<div class="story-bg">
<h2 class="section-title h1">Our story</h2>
<p class="fs-5 text-secondary">Founded in 2021, BNA align started as a tiny side project between two engineers who believed that alignment shouldn't be a buzzword — it should be a daily practice.</p>
<p class="text-secondary">Today we help over 200+ remote and hybrid teams to sync their goals, values and workflows without endless meetings. We combine smart design with behavioural science to make alignment feel effortless.</p>
<div class="row mt-4 g-3">
<div class="col-6">
<div class="d-flex align-items-center">
<i class="fas fa-circle-check text-primary fs-2 me-3"></i>
<div><strong class="d-block fs-4">200+</strong> <span class="text-secondary">teams onboard</span></div>
</div>
</div>
<div class="col-6">
<div class="d-flex align-items-center">
<i class="fas fa-globe text-primary fs-2 me-3"></i>
<div><strong class="d-block fs-4">15+</strong> <span class="text-secondary">countries</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- stats cards right side (neat grid) -->
<div class="col-lg-6">
<div class="row g-4">
<div class="col-sm-6">
<div class="bg-white p-4 rounded-4 shadow-sm text-center h-100">
<i class="fas fa-mug-hot text-primary fs-1 mb-3"></i>
<div class="stat-number">8.4k</div>
<div class="stat-label">coffee brewed</div>
<small class="text-muted">(by our team)</small>
</div>
</div>
<div class="col-sm-6">
<div class="bg-white p-4 rounded-4 shadow-sm text-center h-100">
<i class="fas fa-hand-holding-heart text-primary fs-1 mb-3"></i>
<div class="stat-number">98%</div>
<div class="stat-label">client satisfaction</div>
</div>
</div>
<div class="col-sm-6">
<div class="bg-white p-4 rounded-4 shadow-sm text-center h-100">
<i class="fas fa-users text-primary fs-1 mb-3"></i>
<div class="stat-number">24</div>
<div class="stat-label">core team members</div>
</div>
</div>
<div class="col-sm-6">
<div class="bg-white p-4 rounded-4 shadow-sm text-center h-100">
<i class="fas fa-calendar-check text-primary fs-1 mb-3"></i>
<div class="stat-number">12</div>
<div class="stat-label">meetings saved / week</div>
</div>
</div>
</div>
</div>
</div>
<!-- ===== VALUES SECTION (well designed cards) ===== -->
<div class="mt-5 pt-4">
<div class="text-center">
<h2 class="section-title display-6" style=":after; left:50%; transform:translateX(-50%);">Our values — they keep us aligned</h2>
<p class="text-secondary col-lg-7 mx-auto">We don't just build products, we build trust. These principles guide every decision.</p>
</div>
<div class="row g-4 mt-3">
<div class="col-md-4">
<div class="value-card p-4 shadow-sm h-100">
<div class="bg-primary bg-opacity-10 rounded-3 d-inline-block p-3 mb-4">
<i class="fas fa-feather-alt text-primary fs-2"></i>
</div>
<h3 class="h4 fw-semibold">Radical simplicity</h3>
<p class="text-secondary">We remove the noise so you can focus on what matters. No bloated dashboards — just clear paths.</p>
</div>
</div>
<div class="col-md-4">
<div class="value-card p-4 shadow-sm h-100">
<div class="bg-primary bg-opacity-10 rounded-3 d-inline-block p-3 mb-4">
<i class="fas fa-seedling text-primary fs-2"></i>
</div>
<h3 class="h4 fw-semibold">Growth mindset</h3>
<p class="text-secondary">We evolve together with our community. Feedback is our fuel, mistakes are lessons.</p>
</div>
</div>
<div class="col-md-4">
<div class="value-card p-4 shadow-sm h-100">
<div class="bg-primary bg-opacity-10 rounded-3 d-inline-block p-3 mb-4">
<i class="fas fa-hand-peace text-primary fs-2"></i>
</div>
<h3 class="h4 fw-semibold">Empathy first</h3>
<p class="text-secondary">We design for humans, not just users. Understanding each other is the ultimate alignment.</p>
</div>
</div>
</div>
</div>
<!-- ===== TEAM SECTION (image placeholders with BS grid) ===== -->
<div class="mt-5 pt-3">
<div class="d-flex align-items-center justify-content-between flex-wrap">
<h2 class="section-title h1 mb-0">Meet the minds</h2>
<p class="text-secondary mt-2">we're tiny, but we dream big <i class="fas fa-smile-wink ms-1"></i></p>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4 g-4 mt-2">
<div class="col">
<div class="bg-white p-4 rounded-4 text-center shadow-sm h-100">
<div class="team-img-wrapper">
<i class="fas fa-user-astronaut"></i>
</div>
<h4 class="h5 fw-bold">Alex Rivera</h4>
<span class="badge bg-light text-secondary mb-2">co-founder & CPO</span>
<p class="small text-secondary">Makes sure products feel human. Former design lead at Loom.</p>
<div>
<a href="#" class="text-secondary me-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-secondary"><i class="fab fa-x-twitter"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="bg-white p-4 rounded-4 text-center shadow-sm h-100">
<div class="team-img-wrapper">
<i class="fas fa-user-tie"></i>
</div>
<h4 class="h5 fw-bold">Jordan Chen</h4>
<span class="badge bg-light text-secondary mb-2">co-founder & CTO</span>
<p class="small text-secondary">Loves distributed systems & making code align with people.</p>
<div>
<a href="#" class="text-secondary me-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-secondary"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="bg-white p-4 rounded-4 text-center shadow-sm h-100">
<div class="team-img-wrapper">
<i class="fas fa-user-circle"></i>
</div>
<h4 class="h5 fw-bold">Samira Obi</h4>
<span class="badge bg-light text-secondary mb-2">head of community</span>
<p class="small text-secondary">Brings customers and product closer, one conversation at a time.</p>
<div>
<a href="#" class="text-secondary me-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-secondary"><i class="fab fa-slack"></i></a>
</div>
</div>
</div>
<div class="col">
<div class="bg-white p-4 rounded-4 text-center shadow-sm h-100">
<div class="team-img-wrapper">
<i class="fas fa-user-nurse"></i>
</div>
<h4 class="h5 fw-bold">Maya Patel</h4>
<span class="badge bg-light text-secondary mb-2">lead researcher</span>
<p class="small text-secondary">Studies team dynamics so we stay evidence‑based.</p>
<div>
<a href="#" class="text-secondary me-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-secondary"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- ===== CTA BANNER (aligned with flex) ===== -->
<div class="my-5 p-5 bg-gradient-primary text-white rounded-5" style="background: linear-gradient(135deg, #0d2b66, #1e4b8f);">
<div class="row align-items-center">
<div class="col-md-8">
<h3 class="display-6 fw-semibold">Feel the alignment?</h3>
<p class="opacity-75 mb-md-0">Join 200+ teams that use BNA align to stay synced.</p>
</div>
<div class="col-md-4 text-md-end">
<a href="#" class="btn btn-light rounded-pill px-5 py-3 fw-semibold shadow"><i class="fas fa-paper-plane me-2"></i>Get started</a>
</div>
</div>
</div>
</main>
<!-- ========== FOOTER ========== -->
<footer class="bg-white border-top mt-4 py-4">
<div class="container">
<div class="row gy-3 align-items-center">
<div class="col-md-4">
<a class="navbar-brand" href="#"><i class="fas fa-arrow-right-arrow-left text-primary me-2"></i>BNA align</a>
<p class="text-secondary small mt-2">© 2025 — alignment for everyone.</p>
</div>
<div class="col-md-4">
<ul class="list-inline mb-0 text-center">
<li class="list-inline-item mx-3"><a href="#" class="text-secondary">Privacy</a></li>
<li class="list-inline-item mx-3"><a href="#" class="text-secondary">Terms</a></li>
<li class="list-inline-item mx-3"><a href="#" class="text-secondary">Careers</a></li>
<li class="list-inline-item mx-3"><a href="#" class="text-secondary">Blog</a></li>
</ul>
</div>
<div class="col-md-4 text-md-end">
<a href="#" class="text-secondary fs-5 me-3"><i class="fab fa-x-twitter"></i></a>
<a href="#" class="text-secondary fs-5 me-3"><i class="fab fa-linkedin"></i></a>
<a href="#" class="text-secondary fs-5"><i class="fab fa-github"></i></a>
</div>
</div>
</div>
</footer>
</body>
</html>CSS
<style>
* {
font-family: 'Inter', sans-serif;
}
body {
background: #f8fafc;
scroll-behavior: smooth;
}
/* soft pastel accents */
.section-title {
font-weight: 600;
letter-spacing: -0.02em;
position: relative;
display: inline-block;
margin-bottom: 2rem;
}
.section-title:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 70px;
height: 4px;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
border-radius: 4px;
}
/* value cards hover */
.value-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: none;
border-radius: 24px;
background: white;
}
.value-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 30px -10px rgba(0,100,200,0.15) !important;
}
/* team image placeholder */
.team-img-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: linear-gradient(145deg, #e0f2fe, #bae6fd);
display: flex;
align-items: center;
justify-content: center;
color: #1e3a8a;
font-size: 3rem;
border: 3px solid white;
box-shadow: 0 8px 20px rgba(0,0,0,0.03);
}
/* story section background */
.story-bg {
background: white;
border-radius: 36px;
padding: 2.5rem;
box-shadow: 0 15px 35px -15px rgba(0,0,0,0.05);
}
.stat-item {
text-align: center;
padding: 1.8rem 0.5rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: #0f172a;
line-height: 1;
}
.stat-label {
color: #475569;
font-weight: 500;
margin-top: 0.5rem;
}
/* navbar / header soft */
.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
letter-spacing: -0.02em;
color: #0f172a !important;
}
.navbar {
backdrop-filter: blur(4px);
background: rgba(255,255,255,0.7) !important;
}
.active-page {
font-weight: 600;
color: #2563eb !important;
border-bottom: 2px solid #2563eb;
}
footer a {
text-decoration: none;
color: #334155;
transition: color 0.2s;
}
footer a:hover {
color: #2563eb;
}
/* custom container spacing */
.section-padding {
padding: 4rem 0;
}
</style>JavaScript
<!-- Bootstrap JS (for toggler, etc) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- tiny JavaScript to make the page a bit interactive (just for demo) -->
<script>
(function() {
// highlight current year in footer
document.querySelector('.footer .small')?.addEventListener('mouseenter', (e) => {
// just a tiny effect: nothing fancy
});
// optional: console welcome
console.log('BNA align — well designed about page with Bootstrap');
})();
</script>