plans.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Plans</title>
    <link rel="stylesheet" href="css/all.min.css" />
    <link rel="stylesheet" href="css/framework.css" />
    <link rel="stylesheet" href="css/master.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap" rel="stylesheet" />
  </head>
  <body>
    <div class="page d-flex">
      <div class="sidebar bg-white p-20 p-relative">
        <h3 class="p-relative txt-c mt-0">Elzero</h3>
        <ul>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="index.html">
              <i class="fa-regular fa-chart-bar fa-fw"></i>
              <span>Dashboard</span>
            </a>
          </li>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="settings.html">
              <i class="fa-solid fa-gear fa-fw"></i>
              <span>Settings</span>
            </a>
          </li>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="profile.html">
              <i class="fa-regular fa-user fa-fw"></i>
              <span>Profile</span>
            </a>
          </li>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="projects.html">
              <i class="fa-solid fa-diagram-project fa-fw"></i>
              <span>Projects</span>
            </a>
          </li>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="courses.html">
              <i class="fa-solid fa-graduation-cap fa-fw"></i>
              <span>Courses</span>
            </a>
          </li>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="friends.html">
              <i class="fa-regular fa-circle-user fa-fw"></i>
              <span>Friends</span>
            </a>
          </li>
          <li>
            <a class="d-flex align-center fs-14 c-black rad-6 p-10" href="files.html">
              <i class="fa-regular fa-file fa-fw"></i>
              <span>Files</span>
            </a>
          </li>
          <li>
            <a class="active d-flex align-center fs-14 c-black rad-6 p-10" href="plans.html">
              <i class="fa-regular fa-credit-card fa-fw"></i>
              <span>Plans</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="content w-full">
        <!-- Start Head -->
        <div class="head bg-white p-15 between-flex">
          <div class="search p-relative">
            <input class="p-10" type="search" placeholder="Type A Keyword" />
          </div>
          <div class="icons d-flex align-center">
            <span class="notification p-relative">
              <i class="fa-regular fa-bell fa-lg"></i>
            </span>
            <img src="imgs/avatar.png" alt="" />
          </div>
        </div>
        <!-- End Head -->
        <h1 class="p-relative">Plans</h1>
        <div class="plans-page d-grid m-20 gap-20">
          <div class="plan green bg-white p-20">
            <div class="top bg-green txt-c p-20">
              <h2 class="m-0 c-white">Free</h2>
              <div class="price c-white"><span>$</span>0.00</div>
            </div>
            <ul>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Text Lessons</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Videos Lessons</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Appear On Leaderboard</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>Browse Content Without Ads</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>Access All Assignments</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>Get Daily Prizes</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>Earn Certificate</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>1 GB Space For Hosting Files</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>Access Badge System</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
            </ul>
            <a href="#" class="btn-shape bg-green c-white d-block w-fit">Join</a>
          </div>
          <!-- Start Plan -->
          <div class="plan blue bg-white p-20">
            <div class="top bg-blue txt-c p-20">
              <h2 class="m-0 c-white">Basic</h2>
              <div class="price c-white"><span>$</span>7.99</div>
            </div>
            <ul class="list-none p-0">
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Text Lessons</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Videos Lessons</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Appear On Leaderboard</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Browse Content Without Ads</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Assignments</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Get Daily Prizes</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Earn Certificate</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>1 GB Space For Hosting Files</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-xmark fa-fw"></i>
                <span>Access Badge System</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
            </ul>
            <a href="#" class="btn-shape bg-blue c-white d-block w-fit">Join</a>
          </div>
          <!-- End Plan -->
          <!-- Start Plan -->
          <div class="plan orange bg-white p-20">
            <div class="top bg-orange txt-c p-20">
              <h2 class="m-0 c-white">Premium</h2>
              <div class="price c-white"><span>$</span>19.99</div>
            </div>
            <ul class="list-none p-0">
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Text Lessons</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Videos Lessons</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Appear On Leaderboard</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Browse Content Without Ads</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access All Assignments</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Get Daily Prizes</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Earn Certificate</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>1 GB Space For Hosting Files</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
              <li>
                <i class="fa-solid fa-check fa-fw yes"></i>
                <span>Access Badge System</span>
                <i class="fa-solid fa-circle-info help"></i>
              </li>
            </ul>
            <p class="c-grey m-0 txt-c">This Is Your Current Plan</p>
          </div>
          <!-- End Plan -->
        </div>
      </div>
    </div>
  </body>
</html>