itsoverformr
#1 Hltn
- Joined
- Sep 6, 2025
- Posts
- 649
- Reputation
- 281
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hairmaxxing — Wavy & Curly Edition</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--cream: #faf6f0;
--warm-white: #fff9f2;
--caramel: #c4895a;
--deep-brown: #2c1a0e;
--cocoa: #5c3d1e;
--blush: #e8b89a;
--sage: #8a9e7a;
--gold: #d4a843;
--soft-pink: #f5e0d0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--cream);
color: var(--deep-brown);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
overflow-x: hidden;
}
/* HERO */
.hero {
min-height: 100vh;
background: linear-gradient(160deg, #2c1a0e 0%, #5c3d1e 50%, #c4895a 100%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 60px 24px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
pointer-events: none;
}
.hero-eyebrow {
font-family: 'DM Sans', sans-serif;
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--blush);
margin-bottom: 20px;
animation: fadeUp 0.8s ease both;
}
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(3rem, 10vw, 7rem);
line-height: 1.0;
color: var(--cream);
margin-bottom: 12px;
animation: fadeUp 0.9s ease 0.1s both;
}
.hero h1 em {
font-style: italic;
color: var(--blush);
}
.hero-sub {
font-size: 1rem;
color: rgba(250,246,240,0.7);
max-width: 480px;
line-height: 1.7;
margin-top: 20px;
animation: fadeUp 1s ease 0.2s both;
}
.hero-curl-types {
display: flex;
gap: 12px;
margin-top: 36px;
flex-wrap: wrap;
justify-content: center;
animation: fadeUp 1s ease 0.3s both;
}
.curl-badge {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
color: var(--cream);
padding: 8px 18px;
border-radius: 50px;
font-size: 0.8rem;
letter-spacing: 0.05em;
backdrop-filter: blur(4px);
}
/* SECTIONS */
.section {
padding: 80px 24px;
max-width: 860px;
margin: 0 auto;
}
.section-label {
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--caramel);
margin-bottom: 12px;
}
.section h2 {
font-family: 'Playfair Display', serif;
font-size: clamp(1.8rem, 5vw, 3rem);
color: var(--deep-brown);
line-height: 1.2;
margin-bottom: 28px;
}
.section h2 em {
font-style: italic;
color: var(--caramel);
}
.lead {
font-size: 1.05rem;
line-height: 1.8;
color: var(--cocoa);
margin-bottom: 32px;
}
/* DIVIDER */
.divider {
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--caramel), var(--gold));
border-radius: 2px;
margin: 0 auto 60px;
}
/* ROUTINE STEPS */
.steps {
display: grid;
gap: 20px;
margin-top: 32px;
}
.step {
background: var(--warm-white);
border-left: 4px solid var(--caramel);
border-radius: 0 12px 12px 0;
padding: 24px 28px;
position: relative;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.step:hover {
transform: translateX(4px);
box-shadow: -4px 4px 20px rgba(196,137,90,0.12);
}
.step-number {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--blush);
line-height: 1;
margin-bottom: 6px;
}
.step h3 {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
color: var(--deep-brown);
margin-bottom: 8px;
}
.step p {
font-size: 0.92rem;
line-height: 1.7;
color: var(--cocoa);
}
/* PRODUCT CARDS */
.brand-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
margin-top: 32px;
}
.brand-card {
border-radius: 20px;
padding: 32px 28px;
position: relative;
overflow: hidden;
transition: transform 0.25s ease;
}
.brand-card:hover { transform: translateY(-4px); }
.brand-card.shea {
background: linear-gradient(145deg, #1a4a2e, #2d6e4a);
color: white;
}
.brand-card.camille {
background: linear-gradient(145deg, #6b2d6b, #9b4d9b);
color: white;
}
.brand-card.asiam {
background: linear-gradient(145deg, #1a3a5c, #2d5f8a);
color: white;
}
.brand-name {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-style: italic;
margin-bottom: 6px;
opacity: 0.95;
}
.brand-tagline {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.65;
margin-bottom: 20px;
}
.product-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.product-list li {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.15);
font-size: 0.88rem;
}
.product-list li:last-child { border-bottom: none; padding-bottom: 0; }
.product-list li strong {
font-size: 0.9rem;
font-weight: 500;
}
.product-list li span {
opacity: 0.7;
font-size: 0.8rem;
font-weight: 300;
}
/* METHODS */
.method-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 32px;
}
.method-card {
background: var(--warm-white);
border-radius: 16px;
padding: 28px 24px;
text-align: center;
border: 1px solid rgba(196,137,90,0.15);
transition: box-shadow 0.2s ease;
}
.method-card:hover {
box-shadow: 0 8px 30px rgba(196,137,90,0.12);
}
.method-icon {
font-size: 2.2rem;
margin-bottom: 14px;
}
.method-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.05rem;
color: var(--deep-brown);
margin-bottom: 10px;
}
.method-card p {
font-size: 0.85rem;
line-height: 1.65;
color: var(--cocoa);
}
/* HAIRSTYLES */
.hairstyle-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 32px;
}
.hairstyle-item {
background: linear-gradient(135deg, var(--soft-pink), var(--warm-white));
border-radius: 16px;
padding: 28px 24px;
border: 1px solid rgba(196,137,90,0.2);
}
.hairstyle-item h3 {
font-family: 'Playfair Display', serif;
font-size: 1.1rem;
color: var(--deep-brown);
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.hairstyle-item p {
font-size: 0.87rem;
line-height: 1.65;
color: var(--cocoa);
}
.tag {
display: inline-block;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--caramel);
color: white;
padding: 3px 10px;
border-radius: 50px;
margin-top: 12px;
}
.tag.wavy { background: var(--sage); }
.tag.curly { background: var(--caramel); }
.tag.both { background: var(--gold); color: var(--deep-brown); }
/* TIPS */
.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-top: 32px;
}
.tip {
background: var(--deep-brown);
color: var(--cream);
border-radius: 16px;
padding: 24px 20px;
}
.tip .tip-emoji { font-size: 1.6rem; margin-bottom: 10px; }
.tip h4 {
font-family: 'Playfair Display', serif;
font-size: 1rem;
margin-bottom: 8px;
color: var(--blush);
}
.tip p { font-size: 0.82rem; line-height: 1.6; opacity: 0.8; }
/* FOOTER */
footer {
background: var(--deep-brown);
color: var(--blush);
text-align: center;
padding: 48px 24px;
font-size: 0.85rem;
font-style: italic;
font-family: 'Playfair Display', serif;
letter-spacing: 0.05em;
}
/* BIG QUOTE */
.pull-quote {
background: linear-gradient(135deg, var(--caramel), var(--gold));
color: white;
border-radius: 24px;
padding: 48px 40px;
text-align: center;
margin: 60px 24px;
max-width: 860px;
margin-left: auto;
margin-right: auto;
}
.pull-quote p {
font-family: 'Playfair Display', serif;
font-size: clamp(1.3rem, 3vw, 2rem);
font-style: italic;
line-height: 1.5;
}
.pull-quote cite {
display: block;
margin-top: 16px;
font-size: 0.75rem;
font-style: normal;
letter-spacing: 0.2em;
text-transform: uppercase;
opacity: 0.75;
font-family: 'DM Sans', sans-serif;
}
/* ANIMATIONS */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<!-- HERO -->
<section class="hero">
<p class="hero-eyebrow">The ultimate guide</p>
<h1>Hair<em>maxxing</em></h1>
<p class="hero-sub">Unlock your curl's full potential. A complete guide to products, routines, and styles for wavy and curly hair types.</p>
<div class="hero-curl-types">
<span class="curl-badge">2A · 2B · 2C Wavy</span>
<span class="curl-badge">3A · 3B · 3C Curly</span>
<span class="curl-badge">4A · 4B Coily</span>
</div>
</section>
<!-- WHAT IS HAIRMAXXING -->
<section class="section">
<p class="section-label">Chapter 01</p>
<h2>What is <em>Hairmaxxing</em>?</h2>
<p class="lead">Hairmaxxing is the intentional, consistent effort to get your hair to its healthiest, most defined, and most beautiful state possible. It's not about changing your natural texture — it's about working <em>with</em> it. For wavy and curly hair, that means moisture, definition, and patience.</p>
<p class="lead">The curl community has developed decades of knowledge around what these hair types need: the right balance of protein and moisture, gentle cleansing, layering products from thinnest to thickest, and protective styling to retain length and prevent breakage.</p>
</section>
<div class="divider"></div>
<!-- THE ROUTINE -->
<section class="section">
<p class="section-label">Chapter 02</p>
<h2>The <em>Core Routine</em></h2>
<p class="lead">A consistent wash day routine is the backbone of hairmaxxing. Every step builds on the last — skipping steps means skipping results.</p>
<div class="steps">
<div class="step">
<div class="step-number">01</div>
<h3>Pre-Poo (Optional but Powerful)</h3>
<p>Apply a generous coat of oil — coconut, olive, or castor — to dry hair before washing. This protects strands from the stripping effect of shampoo and adds slip for detangling. Leave on 20–30 min, or overnight with a satin cap.</p>
</div>
<div class="step">
<div class="step-number">02</div>
<h3>Cleanse — Gently</h3>
<p>Use a sulfate-free shampoo or co-wash (conditioner washing) to cleanse your scalp without stripping natural oils. Massage the scalp with your fingertips, letting the lather rinse through the length. For 2A–2B waves, you may tolerate a mild lather shampoo. For 3C–4B, co-wash more frequently and shampoo monthly.</p>
</div>
<div class="step">
<div class="step-number">03</div>
<h3>Deep Condition — Every Single Time</h3>
<p>This is non-negotiable. Apply a rich deep conditioner from mid-length to ends, detangle with a wide-tooth comb or fingers, and sit under a heat cap or hooded dryer for 15–30 minutes. Rinse with cool water to seal the cuticle and boost shine.</p>
</div>
<div class="step">
<div class="step-number">04</div>
<h3>Apply Leave-In Conditioner</h3>
<p>On soaking wet hair, section by section, work in a leave-in conditioner. This forms the moisture foundation your styling products will sit on top of. The wetter your hair when you apply products, the better the definition and less frizz.</p>
</div>
<div class="step">
<div class="step-number">05</div>
<h3>Style — LOC or LCO Method</h3>
<p>Layer your products strategically. LOC = Leave-in, Oil, Cream (better for high porosity hair). LCO = Leave-in, Cream, Oil (better for low porosity hair). Apply a gel or mousse last for hold and definition, then scrunch upward to encourage curl formation.</p>
</div>
<div class="step">
<div class="step-number">06</div>
<h3>Dry Without Disturbing</h3>
<p>Plop hair in a microfiber towel or old cotton T-shirt for 20 minutes to absorb excess water. Then diffuse on low heat or air dry. Do NOT touch your hair while it dries — this is how frizz happens. Once fully dry, scrunch out the crunch (SOTC) to reveal soft, bouncy curls.</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- PRODUCTS -->
<section class="section">
<p class="section-label">Chapter 03</p>
<h2>The <em>Holy Grail</em> Brands</h2>
<p class="lead">These three brands have earned cult status in the curly community for a reason. Here's what to grab from each, and why.</p>
<div class="brand-grid">
<div class="brand-card shea">
<div class="brand-name">SheaMoisture</div>
<div class="brand-tagline">Moisture-rich · Widely available</div>
<ul class="product-list">
<li>
<strong>Manuka Honey & Mafura Oil Intensive Hydration Shampoo</strong>
<span>Rich cleanse that doesn't strip — perfect for 3B–4B hair</span>
</li>
<li>
<strong>Jamaican Black Castor Oil Strengthen & Restore Treatment Masque</strong>
<span>Protein + moisture balance, great for breakage-prone curls</span>
</li>
<li>
<strong>Coconut & Hibiscus Curl Enhancing Smoothie</strong>
<span>Classic curl cream — defines and softens simultaneously</span>
</li>
<li>
<strong>100% Virgin Coconut Oil Daily Hydration Leave-In</strong>
<span>Lightweight, great for waves and fine curls as a base layer</span>
</li>
</ul>
</div>
<div class="brand-card camille">
<div class="brand-name">Camille Rose</div>
<div class="brand-tagline">Salon-quality · Botanical blends</div>
<ul class="product-list">
<li>
<strong>Moroccan Pear Conditioning Custard</strong>
<span>Defines curls with incredible shine and light hold</span>
</li>
<li>
<strong>Curl Love Moisture Milk</strong>
<span>Leave-in + styler hybrid — ideal for 3A–3C hair types</span>
</li>
<li>
<strong>Algae Renew Deep Conditioning Mask</strong>
<span>Marine ingredients that restore elasticity and bounce</span>
</li>
<li>
<strong>Fresh Curl Revitalizer</strong>
<span>Refreshes second and third day curls without re-washing</span>
</li>
</ul>
</div>
<div class="brand-card asiam">
<div class="brand-name">As I Am</div>
<div class="brand-tagline">Science-backed · Frizz control</div>
<ul class="product-list">
<li>
<strong>Coconut CoWash Cleansing Conditioner</strong>
<span>The OG co-wash — gentle enough for daily use on all curl types</span>
</li>
<li>
<strong>So Much Moisture Yucca & Plantain Super Moisturizer</strong>
<span>Intense moisture bomb for thirsty, high porosity curls</span>
</li>
<li>
<strong>Twist Defining Cream</strong>
<span>Defines twist-outs and wash-and-gos with frizz control</span>
</li>
<li>
<strong>Dry & Itchy Scalp Care Conditioner</strong>
<span>Addresses scalp health while deeply conditioning strands</span>
</li>
</ul>
</div>
</div>
</section>
<!-- PULL QUOTE -->
<div class="pull-quote">
<p>"Your curls are not a problem to be solved — they're a texture to be understood, nourished, and celebrated."</p>
<cite>The hairmaxxing philosophy</cite>
</div>
<!-- STYLING METHODS -->
<section class="section">
<p class="section-label">Chapter 04</p>
<h2>Styling <em>Techniques</em></h2>
<p class="lead">How you apply products matters as much as which products you use. Master these techniques and watch your results transform.</p>
<div class="method-cards">
<div class="method-card">
<div class="method-icon">🌀</div>
<h3>Praying Hands</h3>
<p>Press palms together with product between them and smooth down sections of hair. Creates definition without disrupting the curl pattern.</p>
</div>
<div class="method-card">
<div class="method-icon">✊</div>
<h3>Scrunching</h3>
<p>Cup sections of hair and scrunch upward toward the scalp. This encourages the natural curl formation and helps products absorb evenly.</p>
</div>
<div class="method-card">
<div class="method-icon">🔄</div>
<h3>Raking</h3>
<p>Use fingers like a rake to pull product through from root to tip. Ensures even distribution and elongates the curl slightly for those who prefer less shrinkage.</p>
</div>
<div class="method-card">
<div class="method-icon">🌿</div>
<h3>Shingling</h3>
<p>Apply product in small sections, smoothing and defining each curl individually. Time-intensive but produces maximum definition — great for special occasions.</p>
</div>
<div class="method-card">
<div class="method-icon">🌊</div>
<h3>Squish to Condish</h3>
<p>While rinsing conditioner, cup water into your curls and squish upward repeatedly. Helps curls clump together naturally for defined, frizz-free results.</p>
</div>
<div class="method-card">
<div class="method-icon">🪄</div>
<h3>Diffusing</h3>
<p>Use a diffuser attachment on low heat and low speed. Hover the diffuser under sections without touching — this lifts at the root and preserves definition.</p>
</div>
</div>
</section>
<div class="divider"></div>
<!-- HAIRSTYLES -->
<section class="section">
<p class="section-label">Chapter 05</p>
<h2>Go-To <em>Hairstyles</em></h2>
<p class="lead">The best hairstyle is one that works with your curl pattern. Here are tried-and-true looks for every occasion — from wash-and-go ease to protective styles that retain length.</p>
<div class="hairstyle-list">
<div class="hairstyle-item">
<h3>🌊 Wash-and-Go</h3>
<p>The everyday essential. Apply your leave-in, curl cream, and gel to soaking wet hair, let dry without touching, then SOTC. Maximum definition with minimum effort.</p>
<span class="tag both">All types</span>
</div>
<div class="hairstyle-item">
<h3>🌀 Twist-Out</h3>
<p>Two-strand twists on damp, product-loaded hair. Let dry completely (overnight is best), unravel gently, and separate with oil on fingertips for fluffy, stretched volume.</p>
<span class="tag curly">3A–4B</span>
</div>
<div class="hairstyle-item">
<h3>🔄 Braid-Out</h3>
<p>Similar to the twist-out but using three-strand braids. Creates a looser, more S-shaped wave pattern with lots of volume. Great for both naturally wavy and curly hair.</p>
<span class="tag both">All types</span>
</div>
<div class="hairstyle-item">
<h3>🎀 Pineapple Updo</h3>
<p>A loose, high ponytail on top of the head secured with a satin scrunchie. The ultimate method for preserving curl definition overnight or keeping curls off your face.</p>
<span class="tag both">All types</span>
</div>
<div class="hairstyle-item">
<h3>🌺 Half-Up Space Buns</h3>
<p>Split the top section of hair into two buns while leaving curls loose underneath. A playful, textured look that works beautifully on 2C–3B hair.</p>
<span class="tag wavy">2C–3B</span>
</div>
<div class="hairstyle-item">
<h3>🌸 Bantu Knots</h3>
<p>Section hair and coil each section into a tight knot close to the scalp. Wear as-is for a sculptural protective style, or unravel when dry for voluminous, defined curls.</p>
<span class="tag curly">3C–4B</span>
</div>
<div class="hairstyle-item">
<h3>🍃 Flat Twist Updo</h3>
<p>Flat twists along the scalp that gather into a loose updo at the nape or crown. Elegant, protective, and lasts several days with a satin bonnet at night.</p>
<span class="tag curly">3B–4B</span>
</div>
<div class="hairstyle-item">
<h3>✨ Finger Coils</h3>
<p>Wrap small sections of hair around a finger, coiling from root to tip with gel. Creates incredibly uniform, springy coils — labor of love, worth every minute.</p>
<span class="tag curly">3C–4A</span>
</div>
<div class="hairstyle-item">
<h3>🎋 Messy Curl Updo</h3>
<p>Pull curls loosely into a bun or clip, letting pieces fall free around the face. Relaxed and effortless — perfect for second-day hair when curls need refreshing.</p>
<span class="tag wavy">2A–3A</span>
</div>
</div>
</section>
<div class="divider"></div>
<!-- PRO TIPS -->
<section class="section">
<p class="section-label">Chapter 06</p>
<h2>Hairmaxxing <em>Pro Tips</em></h2>
<p class="lead">The details make the difference. These habits separate good hair days from great ones.</p>
<div class="tips-grid">
<div class="tip">
<div class="tip-emoji">🛏️</div>
<h4>Satin Everything</h4>
<p>Sleep on a satin pillowcase or wear a satin bonnet every night. Cotton pillowcases create friction that causes frizz and breakage. Non-negotiable.</p>
</div>
<div class="tip">
<div class="tip-emoji">🌡️</div>
<h4>Know Your Porosity</h4>
<p>Low porosity hair needs lighter products and heat to open the cuticle. High porosity needs heavier butters and proteins to seal moisture in. Everything flows from this.</p>
</div>
<div class="tip">
<div class="tip-emoji">💧</div>
<h4>Hydrate From Within</h4>
<p>Drink enough water. Eat enough healthy fats (avocado, salmon, nuts). What you put in your body shows up in your hair — always.</p>
</div>
<div class="tip">
<div class="tip-emoji">✂️</div>
<h4>Trim Regularly</h4>
<p>Dusty or damaged ends prevent hair from looking its best. A small trim every 10–12 weeks removes split ends before they travel up the hair shaft.</p>
</div>
<div class="tip">
<div class="tip-emoji">🚿</div>
<h4>Cool Rinse Always</h4>
<p>Finish every conditioner rinse with cool water. It closes the cuticle, adds serious shine, and helps product seal in better.</p>
</div>
<div class="tip">
<div class="tip-emoji">📅</div>
<h4>Protein Rotation</h4>
<p>Alternate between protein-heavy and moisture-heavy deep conditioners. Too much protein causes brittleness; too much moisture causes limp, lifeless curls.</p>
</div>
</div>
</section>
<footer>
"Healthy hair is the foundation. Everything else is decoration." — Curl up, show up, hairmax on.
</footer>
</body>
</html>
