Jingjing Bao's Web App Project
===
Here is the codepen link to my project:
https://codepen.io/Amybao/pen/mdwZZzL

---
## About the project

My project is about an AI writing help website. The web page I created is the pricing page of the website, where one can sign up as a user, get information about the different payment options, and complete the payment by clicking the "Select" button

## Details about the webpage
* ### 1. Navbar

I created a navigation bar to help people find their way around the site. Each button in the navigation bar is supposed to take visitors to the page it links to. However, since I haven't created the pages, I used href="#" to create empty links.


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="https://assets.codepen.io/6858843/logo+pen.png" alt="" width="25" height="24">
    </a>
    <a class="navbar-brand" href="#">AI Writing</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Products</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

* ### 2. The "GET STARTED" button

The "GET STARTED" button on the page is linked to a signup page. By clikcing the "GET STARTED" button, people can sign up to the website.


* ### 3. Three "PAYMENT PLANS" boxes

I created three boxes to list the three types of payment plans. By clicking the **"More details" link** on each box, people can read the details of each plan.



I used a table to show the comparisons between the different plans.

 <table class="table table-striped">
    <thead>
      <tr>
        <th>Features</th>
        <th>Basic Plan</th>
        <th>Premium Plan</th>
        <th>One Off</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>lorem ipsum</td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
      <tr>
        <td>lorem ipsum</td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
      <tr>
        <td>lorem ipsum</td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
      <tr>
        <td>lorem ipsum</td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
      <tr>
        <td>lorem ipsum</td>
        <td></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
      <tr>
        <td>lorem ipsum</td>
        <td></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
      <tr>
        <td>lorem ipsum</td>
        <td></td>
        <td></td>
        <td><img src="https://assets.codepen.io/6858843/check.svg" /></td>
      </tr>
    </tbody>

  </table>

</div>

* ### 4. The "Select" button

The "Select" button is linked to a payment page at the bottom of the webpage. By clicking the "Select" button, people can proceed to make a payment for the plan they have chosen.