---
# System prepended metadata

title: Jingjing Bao's Web App Project

---

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.        

![](https://i.imgur.com/VKaEe2S.png)

```
<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.       

![](https://i.imgur.com/mEjxtZV.png) 
![](https://i.imgur.com/gNBrlWX.png)


  *   ### 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.       

 ![](https://i.imgur.com/rtLRggx.png)
 
 ![](https://i.imgur.com/MdQCROm.png)
 
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.        
 
![](https://i.imgur.com/rtLRggx.png)
![](https://i.imgur.com/Mby38DX.png)


