From Figma to HTML5/CSS/JavaScript
Budget: $15 – $25 USD
Turn one page of Figma desing into HTML5/CSS/JS - versions for desktop / tablet / mobile (responsive). Use
The design:
https://www.figma.com/file/LCNreFX6R2uKzNfmta9zl2/Ordered-Space---shared?node-id=0%3A1
- use "bootstrap": "^5.1.3", "jquery": "^3.6.0" or you can use the latest React if that is more convenient
- Include the versions with on hover as in figma design file
- every link should be clickable with href="#"
- the dropdowns should be expandable with dmmy data (should work on mobile in the way that it's taking almost the whole screen)
- the "Follow button" - please prepare the code for different states mentioned in figma
- if anything is possible to be done in SCSS/CSS like borders, it should be.
- images should be .svg and they can't be inline coded, they should be downloaded from Figma and stored in images folder as .svg, the picture can be a .png
- please pay attention to font (it's a google font so embedable and free - please pay attention to the style of it in Figma and replicated that exactly in SCSS/CSS)
- the code should be a valid HTML5 (use https://validator.w3.org/ to validate it)
- use media queries according to Bootstrap 5 definition of devices. Please use SCSS and include this file https://gist.github.com/pacid/3a6d7de6df99cf18cf7136b11d998461 and use these media query variables for your code.
- there is no header, it is just an empty space as it is already implemented
- what is a link it is indicated in the design
- View replies (2) v - this should load two comments (and this link should disappear when clicked)
- Reply | (this represents the link in the comment and three dots bar. On click/tap on the three dots - two links should appear ("Copy link" and "Report")
- some links are marked only in one place
The design:
https://www.figma.com/file/LCNreFX6R2uKzNfmta9zl2/Ordered-Space---shared?node-id=0%3A1
- use "bootstrap": "^5.1.3", "jquery": "^3.6.0" or you can use the latest React if that is more convenient
- Include the versions with on hover as in figma design file
- every link should be clickable with href="#"
- the dropdowns should be expandable with dmmy data (should work on mobile in the way that it's taking almost the whole screen)
- the "Follow button" - please prepare the code for different states mentioned in figma
- if anything is possible to be done in SCSS/CSS like borders, it should be.
- images should be .svg and they can't be inline coded, they should be downloaded from Figma and stored in images folder as .svg, the picture can be a .png
- please pay attention to font (it's a google font so embedable and free - please pay attention to the style of it in Figma and replicated that exactly in SCSS/CSS)
- the code should be a valid HTML5 (use https://validator.w3.org/ to validate it)
- use media queries according to Bootstrap 5 definition of devices. Please use SCSS and include this file https://gist.github.com/pacid/3a6d7de6df99cf18cf7136b11d998461 and use these media query variables for your code.
- there is no header, it is just an empty space as it is already implemented
- what is a link it is indicated in the design
- View replies (2) v - this should load two comments (and this link should disappear when clicked)
- Reply | (this represents the link in the comment and three dots bar. On click/tap on the three dots - two links should appear ("Copy link" and "Report")
- some links are marked only in one place