Founder Article Template

<!--
===========================================
FOUNDER ARTICLE TEMPLATE
===========================================
HOW TO USE THIS TEMPLATE:
1. Replace all [PLACEHOLDERS] with your content
2. Find every instance of BRAND COLOUR and swap the hex value to your own
3. Find every instance of BRAND PREFIX and swap "mee" to your own prefix
4. Do not change any class names, structure or CSS properties — only the values flagged below
5. Do not add inline styles or extra HTML elements outside the structure provided
===========================================
-->

<div class="mee-article">
<!-- ↑ BRAND PREFIX: change "mee" in "mee-article" to your own prefix throughout -->

  <div class="mee-subtitle">
    [YOUR SUBTITLE HERE — one punchy line that sets the tone of the article]
  </div>

  <p>
    [OPENING PARAGRAPH — set the scene. Who is this for and why does it matter to them?]
  </p>

  <p>
    [SECOND PARAGRAPH — expand on the idea. Keep it conversational, no jargon.]
  </p>

  <h2>[SECTION HEADING ONE]</h2>

  <p>[SHORT INTRO LINE FOR THIS SECTION — one or two sentences max.]</p>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <h2>[SECTION HEADING TWO]</h2>

  <p>[SHORT INTRO LINE FOR THIS SECTION]</p>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <div class="mee-fact-box">
    <strong>[YOUR BRAND NAME] Tip:</strong> [ONE STANDALONE INSIGHT OR TIP RELEVANT TO YOUR AUDIENCE — this sits outside the main flow so make it count.]
  </div>

  <h2>[SECTION HEADING THREE]</h2>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <p>
    <span class="mee-highlight">[A KEY PHRASE OR SENTENCE YOU WANT TO HIGHLIGHT — use sparingly, one or two per article maximum.]</span>
  </p>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <h2>[SECTION HEADING FOUR]</h2>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <h2>[SECTION HEADING FIVE — CLOSING SECTION]</h2>

  <p>[BODY PARAGRAPH FOR THIS SECTION]</p>

  <p>
    <span class="mee-highlight">[SECOND HIGHLIGHT IF NEEDED — again, use sparingly.]</span>
  </p>

  <div class="mee-closing">
    [CLOSING LINE — one memorable sentence that lands the whole piece. Italic pull quote style. No fluff.]
  </div>

  <div class="mee-community-box">
    <h2>[COMMUNITY QUESTION HEADING — short, inviting]</h2>
    <p>
      [CALL TO COMMENT — ask the community a direct question related to the article. Keep it open ended and genuine. Two to three sentences maximum.]
    </p>
  </div>

<style>
/*
===========================================
CSS — WHAT TO CHANGE AND WHAT TO LEAVE ALONE
===========================================
CHANGE: Any value marked with ← BRAND COLOUR or ← BRAND PREFIX
LEAVE:  All property names, selectors, layout values, font sizes, margins and padding
===========================================
*/

.mee-article { /* ← BRAND PREFIX: replace "mee" with your prefix in every selector below */
  max-width: 850px;
  margin: 60px auto;
  background: #ffffff;
  padding: 50px;
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08);
  font-family: Georgia, serif;
  color: #222;
  line-height: 1.8;
}

.mee-article .mee-subtitle {
  font-size: 20px;
  color: #555;
  margin-bottom: 35px;
  font-style: italic;
}

.mee-article h2 {
  font-size: 28px;
  margin-top: 50px;
  margin-bottom: 20px;
  color: #111;
  font-family: Georgia, serif;
}

.mee-article p {
  font-size: 18px;
  margin-bottom: 24px;
  font-family: Georgia, serif;
}

.mee-article .mee-highlight {
  background: #178080; /* ← BRAND COLOUR: replace with your hex value */
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: bold;
}

.mee-article .mee-closing {
  font-size: 20px;
  font-style: italic;
  color: #111;
  border-left: 5px solid #178080; /* ← BRAND COLOUR: replace with your hex value */
  border-radius: 0;
  padding-left: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.mee-article .mee-community-box {
  background: #edf7f7; /* ← BRAND COLOUR: replace with a very light tint of your brand colour */
  border-radius: 14px;
  padding: 30px 35px;
  margin-top: 50px;
  border: 2px solid #178080; /* ← BRAND COLOUR: replace with your hex value */
}

.mee-article .mee-community-box h2 {
  margin-top: 0;
  color: #0d5252; /* ← BRAND COLOUR: replace with a dark shade of your brand colour */
}

.mee-article .mee-community-box p {
  color: #1a6666; /* ← BRAND COLOUR: replace with a mid shade of your brand colour */
  margin-bottom: 0;
}

.mee-article .mee-fact-box {
  background: #111;
  color: #e8f5f5; /* ← BRAND COLOUR: replace with a very light tint of your brand colour */
  padding: 25px;
  border-radius: 12px;
  margin: 35px 0;
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.7;
}

.mee-article .mee-fact-box strong {
  color: #178080; /* ← BRAND COLOUR: replace with your hex value */
}

@media screen and (max-width: 768px) {
  .mee-article {
    padding: 30px;
    margin: 20px;
  }

  .mee-article h2 {
    font-size: 24px;
  }

  .mee-article p {
    font-size: 17px;
  }

  .mee-article .mee-subtitle {
    font-size: 18px;
  }
}
</style>

</div>