Converting a Bootstrap 2 page to Foundation 5

In Progress Posted Apr 4, 2014 Paid on delivery
In Progress Paid on delivery

I need a very experience programmer to help port a page so it functions using Foundation 5\'s framework on a concrete5 CMS page.

here is the old page

[url removed, login to view]

here is the new page

[url removed, login to view]

as you can see, foundation, all the scripts, and css files should be correctly linked.

there are references to superscrollorama, scrollspy, and easing.

the main thing that needs to be done is to get the HTML structure similar to the old version, and to go through the [url removed, login to view] to see if any names need to be updated. the [url removed, login to view] can be ignored, and rather plugged into foundation\'s own version.

i\'ve included all the JS files, but if you can use magellan vs. scroll spy, and anything else that foundation offers, what ever makes the project easier.

the ideal end result is to get the site put together so it works, i\'m not the most experience UX programmer so if you see a function going about something in a roundabout way, just assume that it\'s a hack and do what works best for you. as long as the page stretches full screen, i can use concrete5 to add more slides, the menu comes off canvas, and there\'s parallax, i\'m happy!!

thanks for those with a quick reply! so i just want to confirm with anyone bidding, that they are clear that even the page listed as "old page" has issues not found on the original starting point , which is this theme.
so please make sure you can preserve the text and scroll animation, and that the layout remains beautiful and full screen across media.

http://longstoryshortparallax.15robots.com


also, good to note, is that i wish for the push menu icon to be visible even in full screen size, not just for mobile.
ideally this project will be finished in 1-2 days, so i can put content on sunday.

thanks again for the interest, i look forward to working with you.

DETAIL SPECS -please read

the overall feeling desired is like:
http://jswebtech.com/projects/alomar/

the original Theme
http://skywaydesignstudio.com/index.php?cID=155
adapted from
http://longstoryshortparallax.15robots.com/

and foundation5 has been installed on this page
http://skywaydesignstudio.com/index.php?cID=185



WORK TO BE DONE:
Navigation:
2 types of navigation: one is for front page only -
NAVI 1 is slides 1-x (controls per block/stack added)
NAVI 2 is other pages in concrete5, and this is added by AJAX plugin in for concrete5.

navigation working like this:
http://www.iamfredfocus.com/
notice in the beginning, the “slide 1, 2, 3, 4” appear centered below the logo,
then use an AFFIX/magellan interaction to turn into a top bar.

off canvas toggle button is there in the top left always.

SLIDE 1:
NAVI 1 is floating on the first slide with parallax effect when scroll
and become “affixed” once we pass slide 1.
a white bar appears from top , and the mini-logo is centered in the middle of the bar.
the function “‘.$blockName.’” is removed or hidden from inside the <a>
so all there is is 4 dots inside the menu bar. simple, much like a image carousel.
the off canvas menu is still visible always, now inside the bar as well

SLIDE 2:
USING STACK - ABOUT
the three paragraphs should actually be side by side, with gutters.
in the original concrete5 theme “long story short parallax”
you could load 3 blocks, and assign bootstrap class span4 to each one.
probably the core feature needs to be updated to Foundation Grid.

OFFCANVAS:
a copy of the NAVI 1 resides there already.
below that is an auto-nav block, and a login block that may need a CSS adjustment to match
also there is the AJAX repaid page loading. please keep in mind to set the appropriate CSS selectors
so the pages load with AJAX.

the off canvas menu behaves exactly like the
foundation.zurb.com , simple elegant. and works on mobile.

note: the other pages in concrete5 i will be loading through AJAX are mainly photo galleries, and other blocks,
there will need to be a bind function assigned to the isotope sorting of the front page gallery in case someone goes back to front page.


Isotope Filter (portfolio section):
USING STACK - FOLIO
/packages/dojo-page filter pro
page list block templates, one acts as a menu selector for categories,
one acts as the isotope grid.
this section, please make the isotope items fluid, so that they resize as well as reorganize.

also i use /packages/tony_popup
to load videos and media galery inside a modal window
right now, as you can see the sorting is not working properly yet, and of course the popup is not working because of the class changes.

CMS HTML5 jQuery / Prototype PHP User Interface / IA

Project ID: #5761318

About the project

6 proposals Remote project Active Apr 5, 2014

Awarded to:

VnBestSolutions

Dear Sir, We claim to get it done perfectly for you EXACTLY in the way you want it - Kindly give we a chance and we will prove myself - Ready to prove our words, let's get it done right away and I mean RIGHT AWAY !! More

$305 USD in 3 days
(42 Reviews)
5.5

6 freelancers are bidding on average $227 for this job

kchg

Hello Sir. I am interested in your project. I have good skill and my place is 8th in freelancer. I can do your project. If you give me this project, i will work full time for you. Please contact with me for this p More

$237 USD in 3 days
(145 Reviews)
8.2
Time2win

Hello, We have excellent team of programmers and designers to work on your project efficiently and complete job in time. We have read your deepest requirement at our best and will surely give better results. thanks

$263 USD in 10 days
(12 Reviews)
4.3