Wednesday 13 November 2013

Client Project: First draft coded design

study/home page (desktop view):

















Based on the idea of traffic lights I have created three states for the colour of the navigation; the inactive page is red, the hovered link is amber and the active page is green. There is also a 0.2second delay in the colour change from red to amber, I did this by adding a css transition:

nav a {
text-decoration:none;
color:#d20000;
line-height:100%;
-webkit-transition:color 0.2s ease-in;  
-moz-transition:color 0.2s ease-in;  
-o-transition:color 0.2s ease-in;  
transition:color 0.2s ease-in; 
}

nav a:hover {
color:#eeb70e;
}

The page is responsive; here is the tablet view:






















and here is the mobile view:






















I also added the content for the second (work) page:

















This page includes a rss feed from two sources:

http://www.jobsite.co.uk/cgi-bin/advsearch?rss_feed=1&job_title_atleast=Part-time,ttttt&location_include=Nottingham&search_currency_code=GBP&search_single_currency_flag=N&search_salary_type=A&daysback=7&scc=UK&compare_resolved=TO_NG1_NOTTINGHAM&compare_search=Nottingham&channel_code_include=PARF&channel_page_code=PART

and

http://www.mynottinghamjobs.co.uk/rss

The two feeds are combined using feed informer. (see http://feed.informer.com)

I will seek some feedback from my tutor over the next couple of days so I can make changes and finish the website within the next week.

No comments:

Post a Comment