HTMLify

index.html
Views: 163 | Author: cody
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pricing Cards</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <section class="landing-page-section">
        <h2>Become <span class="gradient-text">Atheros Member</span></h2>
        <p>
          The price for each plan represents a one-time payment. <!--? more text here -->
        </p>
        <div class="pricing-container">
          <article class="pricing-card pricing-card--primary">
            <img
              src="assets/complete-package.svg"
              alt="Complete Package"
              class="plan-icon"
            >
            <h3>The Complete Package</h3>
            <div class="pricing-card__price">
              <img
                alt="Price"
                src="assets/price.svg"
              >
              $94.00
              <s>$174</s>
            </div>
            <a
              class="enroll"
              title="Enroll Now"
              target="_blank"
              rel="noopener"
              href="https://learning.atheros.ai/course-detail/ux-design-process"
            >
              Enroll Now
            </a>
            <div class="divider"></div>
            <ul>
              <li>
                The Complete Package includes all the benefits mentioned in the next two packages 👇🏼
              </li>
              <!--? More benefits here -->
            </ul>
          </article>       
          <!--? More cards here -->
        </div>
      </section>
    </body>
</html>

          <!-- You get <strong>lifetime access</strong> to mentioned benefits with a <strong>single payment</strong>. -->

<!-- <li>
                Online Video Course
              </li>
              <li>
                E-book in PDF format
              </li>
              <li>
                Design resources + special deals on design assets
              </li>
              <li>
                Access to the Slack mentoring channel
              </li> -->

<!-- <article class="pricing-card">
  <img
    src="assets/video.svg"
    alt="Video Course"
    class="plan-icon"
  >
  <h3>Video Course</h3>
  <div class="pricing-card__price">
    <img
      alt="Price"
      src="assets/price.svg"
    >
    $86.00
    <s>$49</s>
  </div>
  <a
    class="enroll"
    title="Enroll Now"
    target="_blank"
    rel="noopener"
    href="https://learning.atheros.ai/course-detail/ux-design-process"
  >
    Enroll Now
  </a>
  <div class="divider"></div>
  <ul>
    <li>
      More than 4.5 hours of videos (theory explained on practical examples + designing real app design in Figma)
    </li>
    <li>
      10 Modules, 31 Chapters, 30 Quizzes + Certificate
    </li>
    <li>
      Get feedback and mentoring directly from Jan Mraz and other members in a private Slack channel
    </li>
    <li>
      Database with useful design freebies, tools, and other links
    </li>
  </ul>
</article>
<article class="pricing-card">
  <img
    src="assets/ebook.svg"
    alt="E-book Package"
    class="plan-icon"
  >
  <h3>E-book</h3>
  <div class="pricing-card__price">
    <img
      alt="Price"
      src="assets/price.svg"
    >
    $27.00
    <s>$29</s>
  </div>
  <a
    class="enroll"
    title="Enroll Now"
    target="_blank"
    rel="noopener"
    href="https://learning.atheros.ai/course-detail/ux-design-process"
  >
    Enroll Now
  </a>
  <div class="divider"></div>
  <ul>
    <li>
      150+ pages of design knowledge in PDF format
    </li>
    <li>
      Design explained on practical examples + components cheatsheet
    </li>
    <li>
      Database with useful design freebies, tools, and other useful links
    </li>
    <li>
      Special deals on design assets and tools that are available only for the Atheros students!
    </li>
  </ul>
</article> -->

Comments