Cahaba River Apparel | Cahaba River Apparel

<!DOCTYPE html>

<head>

<title>Cahaba River Apparel | Built for the Hard Working & Outdoors</title>

<style>

/* --- BRAND IDENTITY & PALETTE --- */

:root {

--primary-dark: #1a1a1a; /* Charcoal/Steel */

--accent-green: #2d4a22; /* Deep Outdoor Timber Green */

--patriot-red: #8b1e1e; /* Subdued Patriotic Flag Red */

--light-bg: #f5f5f5; /* Light Gray/Stone */

--white: #ffffff;

--text-dark: #222222;

--text-light: #777777;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: var(--white);

color: var(--text-dark);

line-height: 1.6;

}

/* --- HEADER & NAVIGATION --- */

header {

background-color: var(--primary-dark);

padding: 15px 5%;

display: flex;

justify-content: space-between;

align-items: center;

position: sticky;

top: 0;

z-index: 1000;

border-bottom: 3px solid var(--accent-green);

}

.logo h1 {

color: var(--white);

font-size: 1.5rem;

text-transform: uppercase;

letter-spacing: 2px;

}

.logo span {

color: var(--patriot-red);

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin-left: 20px;

}

nav ul li a {

color: var(--white);

text-decoration: none;

text-transform: uppercase;

font-size: 0.9rem;

font-weight: 600;

letter-spacing: 1px;

transition: color 0.3s ease;

}

nav ul li a:hover, nav ul li a.active {

color: var(--patriot-red);

}

/* --- CALL TO ACTION BUTTONS --- */

.btn {

display: inline-block;

background-color: var(--accent-green);

color: var(--white);

padding: 12px 28px;

text-decoration: none;

text-transform: uppercase;

font-weight: bold;

letter-spacing: 1px;

border: none;

cursor: pointer;

transition: background 0.3s ease;

}

.btn:hover {

background-color: var(--primary-dark);

outline: 2px solid var(--white);

}

.btn-alt {

background-color: transparent;

outline: 2px solid var(--white);

}

.btn-alt:hover {

background-color: var(--white);

color: var(--primary-dark);

}

/* --- HERO SECTION --- */

.hero {

background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;

height: 70vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

text-align: center;

color: var(--white);

padding: 0 20px;

}

.hero h2 {

font-size: 3.5rem;

text-transform: uppercase;

letter-spacing: 3px;

margin-bottom: 10px;

}

.hero p {

font-size: 1.2rem;

max-width: 600px;

margin-bottom: 30px;

text-transform: uppercase;

letter-spacing: 1px;

}

/* --- PAGE CONTENT CONTAINERS --- */

.section-container {

padding: 60px 10%;

}

.section-title {

text-align: center;

text-transform: uppercase;

font-size: 2rem;

letter-spacing: 2px;

margin-bottom: 40px;

position: relative;

}

.section-title::after {

content: '';

display: block;

width: 60px;

height: 4px;

background-color: var(--patriot-red);

margin: 10px auto 0;

}

/* --- THE STOREGRID (WOOCOMMERCE READY) --- */

.product-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 30px;

}

.product-card {

background-color: var(--white);

border: 1px solid #ddd;

padding: 15px;

text-align: center;

transition: transform 0.3s ease;

}

.product-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0,0,0,0.1);

}

.product-image {

background-color: #eaeaea;

width: 100%;

height: 280px;

margin-bottom: 15px;

display: flex;

align-items: center;

justify-content: center;

color: var(--text-light);

font-weight: bold;

text-transform: uppercase;

}

.product-card h4 {

text-transform: uppercase;

letter-spacing: 1px;

margin-bottom: 5px;

}

.price {

color: var(--patriot-red);

font-weight: bold;

margin-bottom: 15px;

}

/* --- ABOUT US --- */

.about-content {

display: flex;

align-items: center;

gap: 5px;

flex-wrap: wrap;

}

.about-text {

flex: 1;

min-width: 300px;

}

.about-text p {

margin-bottom: 20px;

font-size: 1.1rem;

color: #444;

}

/* --- ACCOUNT & HELP FORMS --- */

.form-flex {

display: flex;

gap: 5px;

flex-wrap: wrap;

}

.form-box {

flex: 1;

min-width: 300px;

background-color: var(--light-bg);

padding: 30px;

border-top: 4px solid var(--accent-green);

}

.form-group {

margin-bottom: 20px;

}

.form-group label {

display: block;

text-transform: uppercase;

font-size: 0.85rem;

font-weight: bold;

margin-bottom: 5px;

}

.form-group input, .form-group textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

background-color: var(--white);

}

/* --- FOOTER --- */

footer {

background-color: var(--primary-dark);

color: var(--white);

text-align: center;

padding: 40px 20px;

margin-top: 60px;

border-top: 3px solid var(--patriot-red);

}

footer p {

font-size: 0.9rem;

color: #999;

}

</style>

</head>

<body>

<h1>Cahaba River<span> Apparel</span></h1>

</div>

<nav>

<ul>

<li><a href="#store">Store</a></li>

<li><a href="#about">About Us</a></li>

<li><a href="#account">Account</a></li>

</ul>

</nav>

</header>

<h2>Built Raw. For the Hard Working.</h2>

<p>Premium outdoor gear and patriotic apparel designed to endure the elements and the job site.</p>

<div>

<a href="#store" class="btn">Shop The Collection</a>

<a href="#about" class="btn btn-alt">Our Mission</a>

</div>

</section>

<h3 class="section-title">The Store</h3>

<div class="product-image">Premium Outdoor Cap [Image]</div>

<h4>The Field Commander Hat</h4>

</div>

<div class="product-image">Workhorse Tee [Image]</div>

<h4>Hardwork Heavyweight Tee</h4>

</div>

<div class="product-image">Patriot Hoodie [Image]</div>

<h4>Old Glory Midweight Hoodie</h4>

</div>

</section>

<h3 class="section-title">About Our Brand</h3>

<p><strong>Cahaba River Apparel</strong> wasn't built in a clean, pristine boardroom. It was forged out of respect for the men who get up before the sun, punch the clock, and clean their hands with heavy-duty scrub soap at the end of the day.</p>

<p>Whether you're tracking game down by the riverbank, working structural steel, or throwing lines out on the water, your apparel shouldn't quit before you do. We combine elite-level rugged durability with unapologetic American patriotism.</p>

</div>

</section>

<h3 class="section-title">My Account</h3>

<br>

<label>Username or Email Address *</label>

</div>

<label>Password *</label>

</div>

<button class="btn">Login</button>

</div>

<h3>Register</h3>

<br>

<label>Email Address *</label>

</div>

<label>Password *</label>

</div>

<button class="btn" style="background-color: var(--patriot-red);">Register</button>

</div>

</section>

<h3 class="section-title">Customer Help & Support</h3>

<h3>Frequently Asked Questions</h3>

<br>

<p><strong>Q: When will my order ship?</strong><br>A: All orders are packed right here in the USA and ship out within 1-2 business days.</p>

<br>

<p><strong>Q: Do you offer bulk discounts for construction or work crews?</strong><br>A: Yes! Reach out via the support form to discuss custom bulk printing and team gear accounts.</p>

</div>

<h3>Contact Support</h3>

<br>

</div>

<label>Order Number (Optional)</label>

</div>

</div>

<button class="btn">Submit Request</button>

</div>

</section>

</footer>

</body>

</html>