adoptmeow

This page is my Capstone project for the Microverse's HTML and CSS course curriculum. The design was inspired on the work of Mathew Njuguna and others on Behance, specially this project: patashuleke. I have learned a lot and am very thankful!

The original design is a Directory of Schools, but we are encouraged to change the theme to a different one, so I went ahead and created a site that helps people adopt cats. It would be a bridge between those who found cats abandoned, those who can keep them temporarily, those who can help with resources, and those who want to adopt them for good.

Main Page

This page is meant to allow the user to search for cats or shelters using keywords. If he or she doesn't know how to navigate the site, there's a button just below the search bar that'll scroll down, taking the user to a part of the website that explains everything.

Categories and Results Page

This page shows the results of a search made by keywords in the main page, or by categories in this same page. You can search by name of shelter, or by characteristic of the cat you're looking for.

Some of the original images were these:

AUTHOR - Pedro Henrique Ferreira Donda

GitHub: https://github.com/phfdonda
LinkedIn: https://www.linkedin.com/in/pedro-donda-808621bb/

Built with:

HTML5
CSS3

Check it online!

Live Preview

The specifications of the project were as follows:

1- This is a real-world-like project with a design made by a professional.

I didn't have an exact page to just inspect the code and have tips of how to build it; I had only the design to be inspired upon. I was expected to select, with my own knowledge, the proper technologies and techniques to achieve the business specifications.

2- I had to create three pages:

• the main page (search page), with a link to the results page.
• the search results page, with a list of schools (or, in this case, cat shelters) each with a link to the detail shelter page.
• the detail shelter page.

3- Each of these pages should have versions for 3 different screen sizes:

• mobile: up to 768px
• tablet: up to 1024px
• desktop: from 1024px

4- I had to follow the guidelines of the given design, including:

• colors (they are not explicitly in the design, but I could pick them from the design page)
• typographies: font face, size and weight (I could use a similar one given on the design)
• layout: composition and space between elements, for the 3 given screen sizes;

Contributions and issues are welcome!

License This project is MIT licensed.