This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
This project uses the Advice Slip API to generate random quotes of advice.
Users should be able to:
- View the optimal layout for the app depending on their device's screen size
- See hover states for all interactive elements on the page
- Generate a new piece of advice by clicking the dice icon
- Solution URL: [https://github.com/usernameisleye/Advice-generator]
- Live Site URL: [https://usernameisleye.github.io/Advice-generator/]
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- Styled Components - For styles
<button class="flex justify-center items-center bg-neon-green w-12 h-12 rounded-full absolute left-1/2 -translate-x-2/4 cursor-pointer outline-none hover:shadow-[0px_0px_20px] hover:shadow-neon-green"><img class="" src="./images/icon-dice.svg" alt=""></button>
Improvement of my knowledge in the usage of Tailwind CSS is needed.
-
[https://api.adviceslip.com/advice] - This provided me with the API I needed to use for this project.
-
[https://fonts.google.com/] - This provided me with the beautiful fonts I used for the development of this project.
- Frontend Mentor - @usernameisleye
- Twitter - @usernameistripp