Codepen Plans

In this example below you will see how to do a Codepen Plans with some HTML / CSS and Javascript

https://codepen.io/signup/plans/

Thumbnail
This awesome code was written by Bazalt, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Bazalt ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Codepen Plans</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class=" page-header "><img src="https://assets.codepen.io/assets/logos/codepen-logo-9c0933e8569e634b75ac2eb808da908d.svg" alt="CODEPEN"></header>


<div class=" main-container ">

  <header class=" main-header ">
    <h1 class=" main-header__logo "><img src="https://assets.codepen.io/assets/logos/codepen-logo-9c0933e8569e634b75ac2eb808da908d.svg" alt="CODEPEN"></h1>
    <h1 class=" main-header__name ">Change of Plan</h1>
  </header>

  <div class=" plans ">


    <div class=" plan plan-pro ">

      <div class=" badge ">
        <span class="pro">PRO</span>
      </div>

      <div class=" pricing-month ">
        <span class=" dollar-sign ">$</span>
        <span class=" dollar-amount ">9</span>
        <span class=" per ">/ MONTH</span>
      </div>

      <div class=" pricing-year ">
        <span class=" dollar-sign ">$</span>
        <span class=" dollar-amount ">75</span>
        <span class=" per ">/ YEAR</span>
        <span class=" save ">Save $33!</span>
      </div>

      <ul class=" feature-list ">
        <li> Unlimited Private Pens </li>
        <li> Live View </li>
        <li> Asset Hosting <span class=" feature-serious ">1 GB</span> </li>
        <li> Collab Mode <span class=" feature-serious ">2 people</span> </li>
        <li> Professor Mode <span class=" feature-serious ">10 students</span> </li>
        <li> <span class=" feature-serious ">100</span> Send-to-Phone Messages </li>
        <li> Unlimited Embed Themes w/ Custom CSS </li>
        <li> Custom CSS on your Profile, Blog, and Blog posts </li>
      </ul>

      <a href="" class="button">Upgrade</a>

    </div>


    <div class=" plan plan-super ">

      <div class=" badge ">
        SUPER <span class="pro">PRO</span>
      </div>

      <div class=" pricing-month ">
        <span class=" dollar-sign ">$</span>
        <span class=" dollar-amount ">30</span>
        <span class=" per ">/ MONTH</span>
      </div>

      <div class=" pricing-year ">
        <span class=" dollar-sign ">$</span>
        <span class=" dollar-amount ">300</span>
        <span class=" per ">/ YEAR</span>
        <span class=" save ">Save $60!</span>
      </div>

      <ul class=" feature-list ">
        <li>Unlimited Private Pens</li>
        <li>Live View</li>
        <li>Asset Hosting <span class=" feature-serious ">5 GB</span></li>
        <li>Collab Mode <span class=" feature-serious ">6 people</span></li>
        <li>Professor Mode <span class=" feature-serious ">35 students</span></li>
        <li><span class=" feature-serious ">1,000</span> Send-to-Phone Messages</li>
        <li>Unlimited Embed Themes w/ Custom CSS</li>
        <li>Custom CSS on your Profile, Blog, and Blog posts</li>
      </ul>

      <a href="" class="button">Upgrade</a>

    </div>


    <div class=" plan plan-team ">

      <div class=" badge ">
        TEAM <span class="pro">PRO</span>
      </div>

      <div class=" pricing-month ">
        <span class=" dollar-sign ">$</span>
        <span class=" dollar-amount ">40</span>
        <span class=" per ">/ MONTH</span>
      </div>

      <div class=" pricing-year ">
        <span class=" dollar-sign ">$</span>
        <span class=" dollar-amount ">400</span>
        <span class=" per ">/ YEAR</span>
        <span class=" save ">Save $80!</span>
      </div>

      <div class="team-select">
        <select>
          <option>5 Team Members</option>
          <option>10 Team Members</option>
          <option>15 Team Members</option>
          <option>20 Team Members</option>
          <option>25 Team Members</option>
          <option>30 Team Members</option>
          <option>35 Team Members</option>
          <option>40 Team Members</option>
          <option>45 Team Members</option>
          <option>50 Team Members</option>
          <option>55 Team Members</option>
        </select>
      </div>

      <ul class=" feature-list ">
        <li>Shared billing</li>
        <li>Give <span class="pro">PRO</span> accounts to up to <span class=" feature-serious ">5</span> Team Members</li>
        <li>Invite and change Team members at any time</li>
        <li>Shared access to your <span class=" feature-serious ">10 GB</span> of Asset Hosting</li>
        <li>A Team profile page</li>
        <li>Shared editing access to Team-owned Pens</li>
        <li>Create Team-owned Collections</li>
      </ul>

     <a href="" class="button">Upgrade</a>

    </div>

  </div>

</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Bazalt/codepen-plans-NdqWLL */
body {
  background: url(https://assets.codepen.io/assets/logos/codepen-logo-pattern-4da6cbcab93941536e5b1b9fee0779e3.png) #252525;
  margin: 0px;
  padding: 0px;
  color: white;
}

.page-header {
  height: 30px;
  background: black;
}

.page-header img {
  height: 20px;
  margin: 5px 10px;
}

.main-container {
  width: 87%;
  min-width: 1050px;
  max-width: 1700px;
  margin: 0 auto;
}

.main-header {
  padding: 60px 0 30px 0;
}

.main-header__logo img {
  height: 30px;
  opacity: 0.5;
}

.main-header__name {
  font-size: 55px;
  font-family: Sans-Serif;
  margin-top: -20px;
}

.plans {
  display: flex;
  font-size: 14px;
  font-family: Tahoma;
}

.plan {
  flex: 1;
  margin: 0 20px 20px 0;
  background: rgba(200, 200, 200, 0.15);
  padding: 0 0 50px 0;
  position: relative;
}

.plan-pro {
  border-top: 10px solid #0ebeff;
}

.badge {
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  font-weight: bold;
}

.pro {
  background: yellow;
  border-radius: 3px;
  color: black;
  padding: 2px 5px 2px 5px;
}

.plan-pro .pricing-month {
  background: #009fda;
}

.pricing-month {
  padding: 3px 15px 5px 15px;
}

.dollar-sign {
  font-weight: 800px;
  font-size: 1.7em;
  position: relative;
  top: -1em;
}

.dollar-amount {
  font-weight: 800px;
  font-size: 4em;
}

.per {
  font-size: 1.2em;
}

.pricing-year {
  padding: 3px 15px 5px 15px;
}

.plan-pro .pricing-year {
  background: #0ebeff;
}

.save {
  color: #fcd000;
  font-style: italic;
  font-size: 1.2em;
  font-weight: 700;
}

.feature-list {
  padding: 0.5em 1em 0 2em;
  margin-bottom: 50px;
}

.feature-list li {
  margin: 0 0 0.5em 0;
}

.feature-serious {
  font-size: 0.9em;
  padding: 0.15em 0.6em;
  border-radius: 8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  font-weight: bold;
}

.button {
  background: #47CF73;
  font-size: 2em;
  color: white;
  text-align: center;    
  text-decoration: none;
  padding: 10px; 
  border-radius: 3px;
  position: absolute;
  bottom: 30px;
  right: 20px;
  left: 20px;
}

.button:hover {
  background: #2fb45a;
}

.plan-pro .feature-serious {
  background: #0ebeff;
}

.plan-super {
  border-top: 10px solid #AE63E4;
}

.plan-super .pricing-month {
  background: #9738DC;
}

.plan-super .pricing-year {
  background: #AE63E4;
}

.plan-super .feature-serious {
  background: #AE63E4;
}

.plan-team {
  border-top: 10px solid #47CF73;
  margin-right: 0px;
}

.plan-team .pricing-month {
  background: #2fb45a;
}

.plan-team .pricing-year {
  background: #47CF73;
}

.plan-team .feature-serious {
  background: #47CF73;
}

.plan-team .team-select {
  margin-top: 10px;
  text-align: center;
}

.plan-team select {
  width: 80%;
}

li .pro {
  font-size: 10px;
  padding: 1px 3px 1px 3px;
}

Comments