Week 7A

Fall Break - No class

Week 7B

In class today we had the final critique for our websites. This is the feedback that I was given on my website.

• Testimony Section
• The graphics I use to represent the different people that I was quoting were too rough and simple. I could have used actual stock photos of people or maybe made my icons a little more detailed with more than just two colors.
• Peak and Flow Logo
• Rob thought that the logo at the top of the website was too bright and hard to read. Maybe I could have had more contrast between the logo and the background because they were similar in color. 
• Activewear Images
• I could have incorporated some sort of design into the edge of the box that I put the photos in. Maybe I could have used the Peak and Flow logo to break the edge of the images. 
• Footer
• Instead of just using trees in the footer I could have added people running along with the trees. The trees felt slightly Christmasy. The tree part of the footer also did not resize properly with the rest of the website. The grass part below the trees would disappear when you resized the website.

Week 6B

In class on Wednesday I worked on the footer for my website. I found a website called Font Awesome that has icons for social media. I am using these icons in the footer of my page. I also made the icons clickable with links to the different social media sites and I made them have a rollover color change. This is what the icons look like and what the code for them looks like.

Css Code

Html Code

Icons

Week 6 Out of Class

This week outside of class our homework was to show some progress from the critique. Instead of starting a new area of my website I decided to just adjust the different parts of my website that people had given me feedback on. I got rid of the circle that I had behind the earth icon and changed the rest of the icons to be the same shade of blue as the earth. In the background of the header and feature area I put an image of a forest. In order to get the image to go behind both the header and the feature area I put the image in its own little container in the CSS code. Then in the HTML I put the divs for the feature and header bands and columns inside the background image container div. By doing this I was able to get the image to go behind both separate bands. I also changed all of the image type on my website to selectable type. I changed the type below the icons in the about section and the type below the product photos. In order to get the type to go on top of the product images I used W3 Schools to figure out the code. I put the image and the text into a container that went inside the column. Then inside that container I put the text into its little box.

Header with background image 

Updated Icons

Updated products

Header/Feature Area Code

Product Area Code

Week 6A

This Monday in class we had the 50% critique. I received some great feedback from Professor Panafino and the rest of the class. Some of these suggestions included that I should maybe add a background image in the feature are to sort of show where the girl is running. It was also suggested that I could add a texture or pattern instead of just a solid color. It was suggested that I get rid of the circle that I had behind the earth icon because the two circles seemed repetitive. Below the photo of the products I had the price and the word "colors" and it was suggested that I get rid of both. Since you're not able to purchase the clothing from my website it is misleading to include the price. The word "color" was unnecessary because right below it I showed what the colors were. This was some of the feedback that I got in class.