WEBSITE
<!-- Navigation -->
<nav class="navbar">
<div class="logo">VELORUM <span>COUNCIL</
span></div>
<ul class="nav-links">
<li><a href="#about">THE MISSION</a></
li>
<li><a
href="#opportunities">OPPORTUNITIES</a></
li>
<li><a href="#gallery">EXCELLENCE</a></
li>
<li><a href="#apply" class="nav-
btn">APPLY NOW</a></li>
</ul>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="container">
<h1>ELEVATE YOUR <i>POTENTIAL.</
i><br><b>LEAD THE COUNCIL.</b></h1>
<p>The definitive platform for students
to gain <u>verified leadership experience</
u>. Build a portfolio that speaks louder
than words and secure your future in higher
education.</p>
<a href="#apply" class="btn-
primary">GET CERTIFIED</a>
</div>
</header>
<!-- About Section -->
<section id="about" class="about-section">
<div class="container">
<small>ABOUT THE COUNCIL</small>
<h2>A Legacy of <b>Student Leadership</
b></h2>
<p>The Velorum Council Club isn't just
an extracurricular; it is a <i>governance
body</i> designed to simulate executive
leadership. We believe that college
admissions shouldn't just see a list of
clubs—they should see a track record of
impact, responsibility, and formal
recognition.</p>
</div>
</section>
<!-- Opportunities Section -->
<section id="opportunities"
class="features">
<div class="card">
<small>OPPORTUNITY 01</small>
<h3><b>PRESTIGIOUS</b> CERTIFICATION</
h3>
<p>Every active member receives a
<i>formal credential</i> that validates
their role, hours served, and specific
achievements for college portfolios.</p>
</div>
<div class="card">
<small>OPPORTUNITY 02</small>
<h3><b>EXECUTIVE</b> ROLES</h3>
<p>Take the chair. Govern committees in
<b>Finance, Outreach, or Project
Management</b> to show colleges you can
handle high-level pressure.</p>
</div>
<div class="card">
<small>OPPORTUNITY 03</small>
<h3><b>ADMISSIONS</b> STRATEGY</h3>
<p>Access exclusive workshops on how to
translate your council experience into
<i>winning personal statements</i> and Ivy-
league level resumes.</p>
</div>
</section>
<!-- Image Gallery Section -->
<section id="gallery" class="gallery-
section">
<div class="gallery-grid">
<div class="img-box">
<img src="https://
[Link]/
photo-1523240715639-994132030f9a?
auto=format&fit=crop&w=800&q=80"
alt="Student Council Meeting">
<div class="img-overlay">Council
Deliberation</div>
</div>
<div class="img-box">
<img src="https://
[Link]/
photo-1517486808906-6ca8b3f04846?
auto=format&fit=crop&w=800&q=80"
alt="Leadership Workshop">
<div class="img-overlay">Global
Impact Initiatives</div>
</div>
<div class="img-box">
<img src="https://
[Link]/
photo-1531482615713-2afd69097998?
auto=format&fit=crop&w=800&q=80"
alt="Certificate Ceremony">
<div class="img-
overlay">Certification Excellence</div>
</div>
</div>
</section>
<!-- Submission Form Section -->
<!-- Submission Form Section -->
<section id="apply" class="form-section">
<div class="form-container">
<small>MEMBERSHIP APPLICATION</small>
<h2>Join the <b>Inner Circle</b></h2>
<p>Submit your details to begin the
evaluation process for the upcoming
semester.</p>
<form class="application-form">
<div class="form-group">
<input type="text"
placeholder="FULL NAME" required>
<input type="email"
placeholder="INSTITUTIONAL EMAIL" required>
</div>
<div class="form-group">
<input type="text"
placeholder="GRADE LEVEL / YEAR" required>
<input type="text"
placeholder="INTENDED MAJOR" required>
</div>
<textarea placeholder="WHY DO YOU
SEEK A SEAT ON THE VELORUM COUNCIL?"
rows="5"></textarea>
<button type="submit" class="btn-
primary">SUBMIT CANDIDACY</button>
</form>
</div>
</section>
<footer class="footer">
<p>© 2026 VELORUM COUNCIL CLUB. ALL
RIGHTS RESERVED. <i>EXCELLENCE IN
GOVERNANCE.</i></p>
</footer>
CSS: /* COLOR PALETTE & DESIGN */
:root {
--navy: #0a192f; /* Deep Authority
*/
--gold: #c5a059; /* Achievement &
Certification */
--light-gold: #f4e4bc; /* Soft accents */
--slate: #4a5568; /* Professional
text */
--white: #ffffff;
--off-white: #f8f9fa;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Helvetica Neue", Helvetica,
Arial, sans-serif;
line-height: 1.6;
color: var(--navy);
background-color: var(--white);
}
/* NAVIGATION */
.navbar {
display: flex;
justify-content: space-between;
padding: 25px 5%;
align-items: center;
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
border-bottom: 2px solid var(--off-
white);
}
.logo {
font-family: serif;
font-weight: 900;
letter-spacing: 3px;
font-size: 1.2rem;
text-transform: uppercase;
color: var(--navy);
}
.logo span {
color: var(--gold);
font-weight: 200;
font-style: italic;
}
.nav-links a {
text-decoration: none;
font-size: 0.7rem;
letter-spacing: 2px;
font-weight: 700;
color: var(--navy);
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--gold);
}
/* HERO SECTION */
.hero {
padding: 140px 20px;
text-align: center;
background-color: var(--navy);
color: var(--white);
/* Sublte texture background */
background-image: radial-gradient(circle
at 20% 30%, rgba(197, 160, 89, 0.05) 0%,
transparent 50%);
}
.hero h1 {
font-size: 5rem;
line-height: 0.85;
letter-spacing: -3px;
text-transform: uppercase;
margin-bottom: 30px;
}
.hero h1 b { display: block; color: var(--
gold); }
.hero h1 i { font-family: serif; font-
weight: 400; text-transform: lowercase;
color: var(--white); }
.hero p {
color: var(--off-white);
font-size: 1.1rem;
max-width: 650px;
margin: 0 auto 40px;
opacity: 0.8;
}
/* ABOUT SECTION */
.about-section {
padding: 100px 0;
text-align: center;
background: var(--off-white);
}
.about-section small {
color: var(--gold);
letter-spacing: 5px;
font-weight: 800;
font-size: 0.7rem;
}
.about-section h2 b {
color: var(--gold);
}
/* CARDS (OPPORTUNITIES) */
.features {
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(300px, 1fr));
padding: 80px 5%;
gap: 30px;
background: white;
}
.card {
padding: 50px;
border-left: 4px solid var(--off-white);
background: white;
transition: all 0.4s ease;
}
.card:hover {
border-left: 4px solid var(--gold);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.card small {
color: var(--gold);
font-weight: 800;
}
.card h3 b {
color: var(--navy);
}
/* GALLERY OVERLAY */
.img-overlay {
background: var(--navy) !important;
color: var(--gold) !important;
border-left: 3px solid var(--gold);
}
/* FORM SECTION */
.form-section {
padding: 100px 5%;
background: var(--navy);
color: var(--white);
}
.form-section h2 b {
color: var(--gold);
}
input, textarea {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
color: white;
}
input::placeholder, textarea::placeholder {
color: rgba(255,255,255,0.4);
}
input:focus, textarea:focus {
outline: 1px solid var(--gold);
background: rgba(255,255,255,0.1);
}
/* BUTTONS */
.btn-primary {
background: var(--gold);
color: var(--navy);
transition: transform 0.2s, background
0.3s;
}
.btn-primary:hover {
background: var(--light-gold);
transform: scale(1.05);
}
.nav-btn {
border: 1px solid var(--gold);
padding: 8px 15px;
color: var(--gold) !important;
}
/* FOOTER */
.footer {
background: #050c16;
color: rgba(255,255,255,0.5);
padding: 40px;
}
.footer i {
color: var(--gold);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.hero h1 { font-size: 3rem; }
.navbar { padding: 20px; }
}