This is a solution to the NFT Preview Card Component from Frontend Mentor
This solution is uploaded as a part of the Advanced CSS Techniques Learning Path. I submitted the solution for this challenge a few months ago. In this solution, I have added a little more fun effect to the hover states and I have also improved the overall accessibility of the website. T
- Semantic HTML5
- SCSS
- CSS
- Parcel Bundler
Here's a short form of the overall workflow.
projectFolder/
| > node_modules
| > src/
| > scss/
| > style.scss
| > index.html
Install parel using npm
npm install parcel@latest -D
Link the SCSS file to the HTML just like normal CSS.
<html>
<head>
<link rel="stylesheet" href="./scss/style.scss" />
</head>
<body>
...
</body>
</html>{
// added by user start
"name": "project-name",
"source": "src/index.html",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
// added by user end
"devDependencies": {
"parcel": "latest"
}
}Starting the development server is easy by using the npx command.
npx parcel
This should start a development server with the port localhost:1234 on your system. Open it in your browser to get a live preview.
I learned more about building accessible websites. I used semantic HTML tags to create the website. Along with that, I used aria attributes make the links accessible. Used position: absolute to create the illustration.
Added a blur effect to the view overlay to make it look better. I think adding a few of my personal touches will make it better and help me learn more things.
Powered by Parcel and hosted with Vercel.