CSS Responsive Updates for HTML Page
Budget: $30 – $250 AUD
I need someone to make some CSS responsive updates based on a single HTML file.
Needs adjusting to make it look like exactly like the Figma document for desktop / mobile versions.
Key Tasks:
- Adjust the content sections for responsiveness.
- Ensure the design matches on a large screen monitor, in addition to the specified breakpoints.
- Responsive fonts
Website (< 150 kb): https://we.tl/t-EYqhuBbOg8
- Desktop (1920 x 1080) https://www.figma.com/proto/Jx8T2JgnHfQ2xZ1U8DFOp4/FOXHAT_Landing-Page-%5BMarch-2025%5D?page-id=1153%3A608&node-id=1242-139&viewport=9145%2C1353%2C0.3&t=N4IZdBCBVXQuiZKX-1&scaling=scale-down&content-scaling=fixed
- Desktop (1400 x 900)
https://www.figma.com/proto/Jx8T2JgnHfQ2xZ1U8DFOp4/FOXHAT_Landing-Page-%5BMarch-2025%5D?page-id=1153%3A608&node-id=1241-75&viewport=9145%2C1353%2C0.3&t=N4IZdBCBVXQuiZKX-1&scaling=scale-down&content-scaling=fixed
- Mobile (iPhone 16)
https://www.figma.com/proto/Jx8T2JgnHfQ2xZ1U8DFOp4/FOXHAT_Landing-Page-%5BMarch-2025%5D?page-id=1153%3A608&node-id=3001-138&viewport=9145%2C1353%2C0.3&t=N4IZdBCBVXQuiZKX-1&scaling=scale-down&content-scaling=fixed
Please note, no specific animations or transitions are required for this task. Your primary focus will be on making the content sections responsive and ensuring the page matches the design across all specified views.
Needs adjusting to make it look like exactly like the Figma document for desktop / mobile versions.
Key Tasks:
- Adjust the content sections for responsiveness.
- Ensure the design matches on a large screen monitor, in addition to the specified breakpoints.
- Responsive fonts
Website (< 150 kb): https://we.tl/t-EYqhuBbOg8
- Desktop (1920 x 1080) https://www.figma.com/proto/Jx8T2JgnHfQ2xZ1U8DFOp4/FOXHAT_Landing-Page-%5BMarch-2025%5D?page-id=1153%3A608&node-id=1242-139&viewport=9145%2C1353%2C0.3&t=N4IZdBCBVXQuiZKX-1&scaling=scale-down&content-scaling=fixed
- Desktop (1400 x 900)
https://www.figma.com/proto/Jx8T2JgnHfQ2xZ1U8DFOp4/FOXHAT_Landing-Page-%5BMarch-2025%5D?page-id=1153%3A608&node-id=1241-75&viewport=9145%2C1353%2C0.3&t=N4IZdBCBVXQuiZKX-1&scaling=scale-down&content-scaling=fixed
- Mobile (iPhone 16)
https://www.figma.com/proto/Jx8T2JgnHfQ2xZ1U8DFOp4/FOXHAT_Landing-Page-%5BMarch-2025%5D?page-id=1153%3A608&node-id=3001-138&viewport=9145%2C1353%2C0.3&t=N4IZdBCBVXQuiZKX-1&scaling=scale-down&content-scaling=fixed
Please note, no specific animations or transitions are required for this task. Your primary focus will be on making the content sections responsive and ensuring the page matches the design across all specified views.