This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- I used VS code for development, Chrome to check output and github pages for deployment and version control. I used chrome dev tools to fix immediate ui checks and proper size fixes
- Coding languages:
- HTML, CSS
- fonts
-
This is a crazy assignment and bit challenging. I got to learn how to make cover an image with a color and element on hover.
-
Another challenging part I faced is during output, with pixel perfect I managed to achieve output easily.
-
Integrating existing local code to Git
- git commands used
git init git remote add origin <git repo link> git branch -M main git add -A git commit -m "" git push origin <branch name>
- I started with planning the design. I checked wether all the dependency images and colors are available.
- Found the colors and the font size are not clear in the design provided
- Used below references image color picker and pixel perfect to achieve color and layout.
- With the HTML code for Elements and CSS for styles closed this challenge.
- for colors i used imagecolorpicker.com this website and figured the colors on the image
- for mapping fonts and checking exact matching of my layout with ui given i used pixel perfect
- Frontend Mentor - @chaitanya71998
- Twitter - @ChaitanyaTerli
Thanks to frontendmentor