Conclusion:

I learned a lot from this project but I am unsure as to the benefits of a fluid site, A responsive site using 4 or 5 media queries and pixels seems like the best way to go for now.  A full fluid site has to many bugs, using images or videos can be messy, and there ends up being a lot more css then seems needed.  Some aspects of fluid I do like but stil using media queries I feel fluid is added work and complicates things that would normally be no issue, like my images on the home page, these stretch and to fix them there is a lot of work needed to fix this,  whereas if it was pixels I could change the size every couple of hundred pixels.

I am happy with what I have learned and how the site turned out.  I feel I understand css and html better for this and going forward I 'm comfortable to try different things and that I could achieve a look a client wanted.

the 6 pages are:

• home
• weddings
• anniversary
• contact
• other
• video

*the video page is a link in the footer


Parts of the site I couldnt fix properly.
The images on the hompage are set by percent, but I dont fully understand how the height attribute works and so the images lose ratio as the window closes.  I tried a temporary fix where the iages are set to max and min widths using the media queries.  This works ok but for a real site ths would have to be addressed.
The main links arent exactly spaced apart, this is because the li's are set to percent and some words are longer so I added classes to each li to try fix this, Its hard to notice but is something again for a real site Id look further into.

Website:

I had another go at the image slideshow and found a responsive slideshow on slide.js.  This stil needed some editing to the css but I was able to implement it the way I liked.  Its fully responsive and works well.

I have implemented 2 custom bits of javascript.  one is an image swap on rollover, this is used for the social icons and the link to my blogger.  The other is using getElemenyById, this is sed for the dropdown menu when the user clicks the plus.  This works by setting the margin-top of the image div to minus 45px, then when the user clicks the plus the function changes the margin-top back to 0.
I rearranged the javascript so if javascript is disabled the menu will be shown.
here is all the javascript:



this is the image swap
html
onmouseover="document.blog.src=blogger.src" onmouseout="document.blog.src=bloggerGrey.src"

js file
bloggerGrey=new Image;
 blogger=new Image;

bloggerGrey.src="images/bloggerGrey.png";
blogger.src="images/blogger.png";




this part is at the bottom of the html page, this is for users who jave javascript disabled

<script>
window.onload = function(){
document.getElementById("image").style.marginTop="-54px";

document.getElementById("ulList").style.opacity="0";
}
</script>


this is the function for the dropdown menu

function showMenu(){
document.getElementById("image").style.WebkitTransition="margin-top 1s";
document.getElementById("image").style.marginTop="0px";

document.getElementById("show").style.display="none";
document.getElementById("hide").style.display="block";

//list items
document.getElementById("ulList").style.WebkitTransition="opacity 2s";
document.getElementById("ulList").style.opacity="1";
}

WEb Project

I have finished the homepage, which will be the base for all other pages.  Since i uploaded the photoshop file I have changed the colors and some layout.  I am using a 3 main colors, dark grey, light grey and a deep purple. 

Some of the code isnt as clean as it coud be, for example I sed class names for all the links so I could style each one, whereas I could use nth:child but as I am not to sure on that I wanted to do what I was comfortable with, with more time I would try clean up the html and css.  One thing I have learned is that he design has to be well thought out before hand, as it is for different screen sizes some style elements have to be removed, or completely reshaped, and In future I would spend alot more time designing the site.

I added in an image slider, and this is an example of where design has to be thought out.  The image slider works perfectly in full screen but was causing problems on ipad due to its size, so I had to copy the css and restyle the slider to fit on ipad, but then it was too big for the phone, so I removed it from the phone and inserted images instead.  This is also an example of liquid style making it hard to add style to an item.  As the slider uses pixels and relative position I could not make it responsive, therefore I had to do a separate one for ipad, then remove it for iphone.