-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstatement.htm
24 lines (24 loc) · 3.25 KB
/
statement.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Written Statement</title>
<link rel="stylesheet" type="text/css" href="zoo.css">
<link rel="shortcut icon" href="images/favicon.png">
</head>
<body>
<div class="statementContainer">
<h2>Nick's Written Statement</h2>
<p>My overall goal for this website was to make a more modern and up-to-date experience for the visitors of the zoo website. I started by choosing a color scheme that is representative of typical "zoo colors." This includes shades of green, yellow, brown, and white. When the user goes onto each page, there are distinct sections (similar to the records assignment) that allow the user to easily navigate each part of the page. The top of each page has a big green navigation bar with easy to read tabs and a large logo. This will encourage all visitors to dive deeper into the page</p>
<p>The first page utilizes everything that is required of the project: a jQuery slider, CSS styling, a non-standard font (from FontSquirrel), and several images. It gives a good overview of the website and encourages the user to dive in deeper</p>
<p>The next page that is re-designed is the animals page, which is under the "Visit" tab. I organized this page by creating a separate section for each animal type. Each section contains a brief summary of animals are available for viewing as well as an image of that animal type (mammals, birds, etc.)</p>
<p>The last page that I designed was the "About Us" page. Currently, there is no such page on the existing zoo website. I chose to add this to the top-level headers because I felt that this is a page that users of many websites want to see. On this page, I included, in this order: an about the zoo description, an upcoming events section, a social media section (with a live tweet feed and a live instagram feed), a video section (with the YouTube API), a how to donate section, and a "Friends of the Zoo" section.</p>
<h3>Ambition Points</h3>
<ul>
<li>The first ambition category that I would like to sell is my Nav bar. When the user scrolls 100 pixels down the page, The nav and logo shrink. This was not explicitly taught in class, so I had to do some independent research into how this is done. This involved copying all of the ancestral CSS for the nav bar and changing "nav" to my "shrink" class. The nav bar had the shrink class added/removed based on where scrolling was occuring</li>
<li>My second ambition category was for the Instagram feed. We did not go over this in class and Instagram makes it relatively difficult to use their API, so I had to do some significant research to implement it.</li>
<li>My third ambition category was to create a "to top" button that brings the user to the top of the page when it is clicked. This was done with a fixed box with an arrow at the bottom of the page. jQuery was then written to allow the page to scroll to the top.</li>
<li>My fourth ambition category was to add a favicon to the browser tab. This was as simple as adding a link to the head tag.</li>
<li>My last ambition category was using "font icons" for the social media buttons in the footer. I was able to figure out how to import the font, how to implement it in CSS, and how to insert it into my HTML file. This also required significant external research. </li>
</ul>
</div>
</body>
</html>