Background Colors

To set a background color in a code block, add the bold text to the class.

pth-bg-blue
pth-bg-pink
pth-bg-teal
pth-bg-yellow
pth-bg-green
pth-bg-white
pth-bg-black

Ex: adding <p class=”pth-bg-pink”>Content</p> 👇🏽

Hello, World!

Text Colors

To set the text color in a code block, add the bold text to the class.

pth-text-blue
pth-text-pink
pth-text-teal
pth-text-yellow
pth-text-green
pth-text-white
pth-text-black

Ex: adding <p class=”pth-text-white pth-bg-blue”>Content</p> 👇🏽

Content

Underline

To add the underline element to H1 or H2 text in a code block, wrap the text like so using the style-underline class:

Ex: <h2>You're here because you want <span class="style-underline">MORE</h2>

You're here because you want MORE

Hero

Putting the code for the hero block here for reference

<div class="pth-hero">
  <div class="text-container">
    <h3>No more hard work going unrecognized.</h3>
    <h3>No more leaving money on the table.</h3>
    <h3>No more taking a backseat in your career.</h3>
    <h1><b>Craft your Dream Career with <span class="style-underline">Confidence</span></b> <br />
      <i>(get ready to open your WAY fatter weekly paycheck!)</i></h1>
    <p>Introducing <strong>The Career Level Up</strong></p>
    <a href="#pricing" class="pth-btn">Join Now!</a>
  </div>
</div>

Pricing Cards

<div class="card-wrapper two-card" id="pricing">
  <div class="pth-row max-width-container">
      <div class="price-card pth-bg-teal">
        <div class="inner">
          <h2 class="bold">Most Flexible</h2>
          <h3 class="bold style-underline"><a href="https://www.peptalkher.com/leveluppay/career-level-up-program-6monthplan">Get Started for $397</a></h3>
          <p>*Plus 5 additional monthly payments</p>
          <a href="https://www.peptalkher.com/leveluppay/career-level-up-program" class="uppercase pth-text-blue price-card__link">
            or save 20% by <span class="style-underline" style="display:block;">paying in full</span>
          </a>
        </div>
      </div>

      <div class="price-card pth-bg-pink">
        <div class="inner">
          <h2 class="bold">Best Value</h2>
          <h3><i>Everything in Career Level Up plus..</i></h3>

          <b>+ Personalized one on one coaching -</b> Career Strategy Call with Meggie to map out how to navigate your next career steps
          <b>+ Unlimited email access to me, Meggie for course duration</b> so that you have a coach on tap when you need it most
          <br/><br/>
          <span class="text-l">$2,997</span>
          <br/>
          <a href="https://www.peptalkher.com/leveluppay/career-level-up-program-vip" class="style-underline uppercase pth-text-blue price-card__link">I WANNA BE A VIP</a>
        </div>
      </div>
    </div>
</div>

Result 👇🏽

Most Flexible

Get Started for $397

*Plus 5 additional monthly payments

or save 20% by paying in full

Best Value

Everything in Career Level Up plus..

+ Personalized one on one coaching - Career Strategy Call with Meggie to map out how to navigate your next career steps + Unlimited email access to me, Meggie for course duration so that you have a coach on tap when you need it most

$2,997
I WANNA BE A VIP

Color Block with White Content Section

<div class="color-bar-section pth-gradient-bg">
  <div class="pth-bg-white max-width-container pth-inner-container">
    <center>
      <h3>Section header</h3>
      <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh leo, ultricies ut accumsan vitae, malesuada ornare metus. Integer vitae condimentum odio, vitae ullamcorper risus.</b></p>
    </center>
  </div>
</div>

Result👇🏽

Section header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh leo, ultricies ut accumsan vitae, malesuada ornare metus. Integer vitae condimentum odio, vitae ullamcorper risus.

Text-Only Block

<div class="color-bar-section pth-bg-green pth-text-white">
  <div class="max-width-container">
    <center>
      <h2 class="pth-text-white">You're here because you want <span class="style-underline">MORE</span>*</h2>
      <p><i>Imagine how it would feel to…</i></p>
    </center>
  </div>
</div>

Result 👇🏽

You're here because you want MORE*

Imagine how it would feel to…