Week 16A: Final Class

Today in class I presented my final website. The main feedback I received was that the gif was a little choppy overall. This is something I agree with but I opted the gif to be choppy instead of having it be smooth and extremely slow. I am hoping to be able to look into this and have the gif be smoother in the future. Also the more about section links needs to be a little different than the body copy so everyone knows that they are links. Even though I received feedback on both sides of this I may add a back button to the text pages to break up the text.

Week 15 Out of Class: Color Guardipsum Completed

Below is a screenshot of the completed website. From this shot the change to the deck can be seen. I changed the font and made the question at the bottom slightly smaller to allow the title to be largest and most important header on the page.

 Below shows the gif in its last frame. I was able to fix my gif's clarity by adding in my website's background in the background of my photoshop document. I also redid the frames of the gif, I ended up created less frames to have the rifle spin faster. It also shows the color hover I created, it is a deeper maroon to match the new deck under the header.

 With the help from some of my peers, like Kate W, I was able to get a sticky footer to work on my website. The above and below screenshots show the viewport on my browser and the working footer. This shows that while the footer is stuck to the bottom, it does scroll down to allow for the text to continue.

I have placed my folder onto the server and have tried it successfully on different browsers (chrome, firefox, and safari) and on different computers.

Week 15B

For class today I had created all of my secondary pages and linked them to their corresponding tosses. Below are screenshots of two of the secondary pages. I created all of the copy myself within word then placed it in my code. Color guardipsum is based off about 110 jargon words that I have gathered about color guard

This is the page that is linked to the Quad (four paragraphs of text)

 This is the page that is linked to Double (two paragraphs)

Today in class I worked on hover states of the rifle gif and other elements and refined the footer. 

Below is a screenshot of something I am still working on, which is the actual text hover. The H3 tag seemed to be blocking any link styles I attempted to create. So to attempt to fix the problem I placed all of the H3 styles in the link class instead and got rid of the h tag on the singles link. Below is what came of this. The color and typeface did carry over and the hover did work, but the text align and size elements did not carry over.

I do have the gif hover working and it does spin once for the single on hover. I am planning on refining and cleaning up the gif because there is a few size issues and I want to make it spin faster before I render it out for each toss rotation.

Some refining I did was I lengthened the footer's navy blue color to give it some breath along the bottom and to be able to space the header out and away from the audience heads.

I am also hoping to refine the sub header/deck to separate it from the bottom copy. I am thinking about creating a ribbon like flag that may fit well with my theme.

Code!
I realized I have not been posting screenshots of my code so here is everything!

This is my main index.html file with all of the new script from today included.

This is my single.html page

Double.html

Triple.html (the not shown code is the same as above so it will not be in the rest of the screenshots)

Quad.html

Five.html

Six.html

This is my css file that is linked to all of my html files. It contains all of the style for all 7 pages.

all the text formatting tags

Main page content containers

Footer content containers and link tags

Week 15A

Today I spent class time continuing work on my website. Below are screenshots of my progress throughout the class while I was adding elements.

 Throughout the process I put background colors on my divs so I could see their location and padding.
Below is while I was trying to add in a place holder image of the rifle that will be spinning. I also added in the bottom text question. (which is still not curved because I am still working on that problem).

 Below is a close up of the footer share section that I completed today. The flags no longer have poles based off of the feedback I had received before break. I also lowered the saturation so they would be less attention drawing. The flags do "wave" the change picture when they are hovered over. The below screenshot shows the hover state while above is its regular state.

 Above is the set of divs I was working on before adding in the toss content. I was able to get both columns to fit in the wrapper and at the height I wanted.

Above is what I got completed during class today.

• finish all of the footer content
• getting in all of the share links and their hover states
• placing in the rifle and bottom text
• figuring out placement of the toss column

As of right now all of the text on the site is selectable, if I can figure out how to have it curve in all browsers, all the text will stay selectable.

Week 14: Out of Class

There was no Week 14B because of Thanksgiving Break. I was able to start coding over break a little.



Below is a screenshot of what I have done in chrome. I have the background image in and repeating. I figured out how to code a fixed footer and got almost all of the footer information in and centered with the header (not sold on the deck placement yet.) The only section missing from the footer is the share section with the flags. Both links in the more about color guard section are working with hovers.

(the white was it help me to see the div not part of the design) I had figured out how to get my text to curve (like it does in my mockup) and still be selectable! Below is how it looked as I had started to tweak it (in the Gua area). But I decided before I do this I should check it in other browsers. It looked fine in chrome and safari. 

But below is how it looked in firefox. The curve was not working at all. So I saved this html document (that has the curve) as index2 so I can come back to this problem. The screenshot at the top is index.html which has the curve span tags removed for now.