tags: mstu5003, project, webapp, html, css, creativity
---

# Title:
**Authors:** wenjing Sun

**See project: https://codepen.io/wenjing-sun-the-vuer/pen/MWZPymb?editors=1111**

## Problem
Finding an adoptive home for lovely pets.

## Solution
Our web application is designed to help our audience (people of adoult ages) decide what kind of pet they want to adopt.

On our website you can:
Fill out adoption preferences and choose the pet you want to adopt
See what pets are available for adoption based on your preferences
Learn more about the age, personality and health of the pets we offer you.

## Spefications

:::The flow of using this website:::

1.The user completes registration on the home page
User completes login.
2.User browses through the entire site for available pets, looking for pets that interest them.
3.User gets results.
4.The user can view information about the pet, such as age, gender, personality, and health status.

—For the phases described above—

•Users can click on the login box on the page and login by entering their account name and password.

•In case of forgetting the password, user can complete the login by clicking on Forgot Password.

•If the user has not registered an account yet, the user can complete the registration by clicking don't have an account button.

If you want to share a part of your code:
**HTML**

 <div class="box">
 <div class="left">
 <div class="right">
 <div class="user">
 <div class="pwd">
 </div>
 </div>
 </div>
 </div>
 </div>

**CSS**
If you want to share a part of your code:

.right .submit {
    width: 60%;
    height: 50px;
    color: #f6f6f6;
    /* Setting the background color gradient */
    background-image: linear-gradient(120deg, #c2e0ff 0%, #8ec5fc 100%);
    font-size: 14px;
    /* Remove the input's own border */
    border: none;
    border-radius: 5px;
    margin: 60px 0 0 50%;
    transform: translateX(-50%);
    /* Adding a transition effect */
    transition: all .3s;
    /* Set the cursor to change to a small hand shape on hover */
    cursor: pointer;
}