I have a one page site I need built out using FoundationPress for the theme and responsive framework. I believe FoundationPress uses Zurbs Foundation 6 X/Y grid. Thats a definite requirement for this project. That github is located here: (link removed by Toogit admin)
A few key assumptions:
1. Lets keep our Foundation max row at 1350px. Foundation has this designated in the settings scss and it may need to be rem calc conversion. This will essentially be our grid-container class and all space outside of that will continue with the white background color.
2. You will notice many images in this layout that are cut off left or right depending on their placement. Its important they reveal the rest of the image if the browser width extends beyond our set rem calc of 1350px.
3. The video play button/link below the hero section of the page will play in a pop over, preferrable Magnific Popup or something similar.
4. In the What is ProZenity Mood? section (adjacent to the above mentioned video link), the word psychobiotics will need to be a hover over tooltip to show some text explaining what that is. I would ideally like to make something like this reusable via a custom shortcode.
5. The purple bar just below the sections that swap left and right image/text placement, will rotate a series of phrases. We can show centered white does below the phrase (not in the layout) and have this cycle via enqueued slick slider js.
6. The FAQ section needs to wok in a very specific way. Questions will flank the left column while answers appear in a slick slider of cards. There needs to be an active state for the question you are on in the left column while the array of slides (answers per question) show in the right column. I would prefer a fade effect between sets of answers and the sliders to advance one at a time via the controls once loaded. Slide advancement does not need to be automatic, but with the ability if the client requests it during revisions. So the array of cards are the answers in order of the questions on the right. The dots correspond to each answer while the arrows advance next and previous answers.
7. Ignore the footer content and leave as just a blue block with a simple copyright centered until we have an approved version for that. The PSD is not accurate to what will be there so no need to code anything more than the blue bar for this first round.
8. The PSD was designed @2x so will look correct scale when viewing at 200% on a retina display and 100% on non-retina. If scale is looking too blown up please advise prior to coding too much of the page.
9. Email signup will be connected to MailChimp.
10. All styling should be accommodated by well-organized Sass with use of clear and practical mixins for transitions, colors, shadows, etc... Anything that can be done with CSS should be done. Drop-shadows are a perfect example. Unless its on a complicated image, it can be CSS using a mixin to maintain reuse and consistency.
11. Myriad Pro is our main font, but I always prefer to use Google fonts where an alternative is suitable. PT Sans is a great replacement for Myriad Pro and can be used via Google. Other fonts, if discovered in the PSD, should utilize Google Fonts or a suitable alternative. Please consult with me before substitution.
We are a small shop, specializing in creative, boutique websites. The right candidate has an impeccable attention to detail and will maintain a direct line of communication throughout the project to ensure its success.
Thank you for bidding. I look forward to working together.
About the recuiterMember since May 20, 2018 Jianguo Chang
from Antioquia, Colombia
Candidate shortlisted and hiredHiring open till - Apr 2, 2022
Work from Anywhere
40 hrs / week Looking for help? Checkout our video tutorial
How to search and apply for jobs
How to apply? Do you have more questions about the Job?
See frequently asked questions