Summary
This is a short-term contract to make a few front end tweaks to the navigation of a website landing page. I need 2 elements in the navigation header moved from the right side to the left side, and a responsive hamburger menu added.
Technologies used
– HTML
– Tailwind CSS
– TailwindUI
– AlpineJS
– Statamic
– Gitlab
Skill requirements
You need to be familiar with all of the technologies used (from the previous section). If you’re not familiar with Statamic, it’s okay if you are instead familiar with Laravel. Statamic is a CMS based on Laravel so setting up and running a project is the same.
What needs to be done
The landing page is based on the second example on this page [https://tailwindui.com/components/marketing/page-examples/landing-pages](https://tailwindui.com/components/marketing/page-examples/landing-pages). I will share the exact site when we discuss the project in more detail.
There are two things that need to be done:
1. Move 2 links from the right side of the nav bar to the left bar. If you’re looking at the example I linked above, it would be as if you were moving the “Log in” link to where the “Product” link is in the navigation bar.
2. Create a hamburger menu at smaller screen sizes. You can see in the linked example, if you make your browser window smaller, the navigation bar links disappear and are replaced with a hamburger menu. When you click the hamburger menu, a menu appears with the nav bar links.
I can provide markup for the hamburger menu from the example, you will just need to customize it for my site and make the Javascript work using Alpine JS.
This all must be done using Tailwind CSS and Alpine JS. You cannot import any other javascript or CSS like jQuery or Bootstrap. If you’re not comfortable with Tailwind CSS and Alpine.js this is probably not the job for you.
How we will work together
1. I will give you access to the Git repository and the markup from the example.
2. You will create a branch on that repository, do your work and then commit and make a pull request back to the main branch.
3. I will review and give feedback
How to apply
1. Send me a link to at least 1 site you’ve worked on using Tailwind CSS.
2. Tell me how much you would charge for this job, or your hourly rate.
3. Tell me what version of PHP you use
4. Tell me the name of the configuration file in Tailwind CSS.
Posted On: April 19, 2022 07:50 UTC
Category: Front-End Development
Skills:Tailwind CSS, CSS, HTML, Statamic CMS
Country: United States
click to apply