P4. Design web pages using CSS to control layout

In this task, I am producing a design of a website that I am doing so the CIO(Chief Information Officer) can submit them for approval in order.



My website is about Adopting Grizzly Bears that contain information about the grizzly bears. The website includes 5 different pages which are linked together but the form page can only be accessed from adoption page. The main "Welcome" page include a navigation button which links to the different pages and also the different pages will include navigation button so any web page can be accessed from any web page the user is on, for example, if the user on Facts about Grizzly Bears want to visit Adopt A Bear page, it can be done without any issues as there will be a navigation button to visit that page. The web pages contain logo and a title so it can attract people and they can understand the meaning of the website just from the logo and get to know what the website is through.


It also includes images and media such as GIF to present the website as more interesting and entertainment for the users who are visiting the web page. There is specific information about grizzly bears such as their facts, how they behave with human and why they should be adopted etc. So the user gets to know more about the grizzly bears.



My website is for the people who are interested in grizzly bears such as families, single people, middle-aged – those looking into adopting their pet and share the information about the bear to others so the other people get to know about how important the Bears are to the world. The adoption is for the people who are 18+ as they are eligible to adopt a bear but they should be stable financially to afford a bear. Adopting a bear is the best rather than spending a lot of money on getting baby bear because most of them are hunted in the jungle or are mistreated in shelters.





Here is the design of the site map, it shows that all the web pages are linked together and can be accessed from any pages expect to donate form so the reader gets to everything about the grizzly bears before donating. I drew the design on draw.io as it was easier for me to use plus it saves my work automatically so I don't have to worry about losing my work.

Colour Pallete

I have used some colors such as yellow on the header which include logo and the title and borderline it with black color on each page. The navigation bar is blue color on each page but when the mouse hovers over the bar its changes its color to green. I have used color coding for some color such as the container background for each page is gray "A3A3A3" or I just insert the color name and it works. I receive the code for most of the colors from HTML Color Code.

Font

For the fonts, I use Google Fonts to help me present the title more appealing for the people visiting this website as the title has to be eye catching so I made it differently. The Google fonts are really useful because it has the variety of fonts that anyone can anyone can apply it on their website to make their title or text appear differently and it's easy to produce on the web page by just taking the link from the font I want to use.


















As for the logo, I used Paint to design the logo because it's very simple to use and easy to create the design. Overall I drew the design(bear shape) with a green color background which represents as nature and just added a text which didn't take me a lot of time. Additionally, there wasn't any issue when exporting the file into JPEG as the image file works for the web pages.

Page designs

Page 1

This is the first page of my website and the homepage. It contains logo which is top right on the page and the title is position top center with yellow color filled in the container and outlined with black color. Not much information is added on the homepage as I didn't find it relevant adding on this page so most of the information is added to other pages. There is only one picture of a bear but I added a GIF on this page to make it entertaining for the audience who will view this site as it contains a kid playing with a young grizzly bear and the bear is just messing with the kid. The footer is added with customer service number so that if the person needs any guidance about the website or the bears. It is outlined with black color same as the header. There are the navigation buttons where the users can access to any they wish. The navigation is the blue color with black outline and when the mouse hovers over it the bar changes it color to green.

Page 2

This page provides the person with the information they want to know about the bears. It provides them how grizzly bears can help the environment if they aren't extinct also how much food they eat in a day and what kinds of food they eat and much more. This page doesn't have a footer as I don't think it's necessary to add it on. I added a slideshow on this page to make it look interesting. As for the navigation buttons, its has the same format like the previous and after this page.

Page 3

This page provides the user information about how bears behave with the human. In this layout, I added 2 images and GIF of bear hugging with human and how they play with the human without causing them any harm which shows that how calm the bear with their adopters. It also informs the user how to act in front of the bear and much more. This time I added another container to add text and more container for the images and GIF. The page doesn't look gloomy or boring but exciting.

Page 4

This page informs the user that why they should adopt a bear and what great thing they can do with their donation. This time it has only 2 containers, one with bear pic on the left and the reason why they should adopt on the right. Whereas the donation button is on the middle of the page. Through this page, the user can access the donation if they want to adopt a bear. This navigation bar and the header container is exactly same like the previous pages.

Page 5

This page will input user information when they apply to adopt a bear. The design is plain and simple but it has a background GIF included to make the form more interesting and grab user attention. There is check list box used to allow the user decide which price they will select and drop down the list to select their title. Whereas for the name to email the user have to input their data on the form then after completion click submit.