├── .gitignore ├── README-template.md ├── README.md ├── design ├── active-states.jpg ├── desktop-design.jpg ├── desktop-preview.jpg └── mobile-design.jpg ├── images ├── favicon-32x32.png ├── icon-clock.svg ├── icon-ethereum.svg ├── icon-view.svg ├── image-avatar.png └── image-equilibrium.jpg ├── index.html ├── style-guide.md └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /README-template.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - NFT preview card component solution 2 | 3 | This is a solution to the [NFT preview card component challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/nft-preview-card-component-SbdUL_w0U). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 4 | 5 | ## Table of contents 6 | 7 | - [Overview](#overview) 8 | - [The challenge](#the-challenge) 9 | - [Screenshot](#screenshot) 10 | - [Links](#links) 11 | - [My process](#my-process) 12 | - [Built with](#built-with) 13 | - [What I learned](#what-i-learned) 14 | - [Continued development](#continued-development) 15 | - [Useful resources](#useful-resources) 16 | - [Author](#author) 17 | - [Acknowledgments](#acknowledgments) 18 | 19 | **Note: Delete this note and update the table of contents based on what sections you keep.** 20 | 21 | ## Overview 22 | 23 | ### The challenge 24 | 25 | Users should be able to: 26 | 27 | - View the optimal layout depending on their device's screen size 28 | - See hover states for interactive elements 29 | 30 | ### Screenshot 31 | 32 |  33 | 34 | Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. 35 | 36 | Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. 37 | 38 | Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. 39 | 40 | **Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.** 41 | 42 | ### Links 43 | 44 | - Solution URL: [Add solution URL here](https://your-solution-url.com) 45 | - Live Site URL: [Add live site URL here](https://your-live-site-url.com) 46 | 47 | ## My process 48 | 49 | ### Built with 50 | 51 | - Semantic HTML5 markup 52 | - CSS custom properties 53 | - Flexbox 54 | - CSS Grid 55 | - Mobile-first workflow 56 | - [React](https://reactjs.org/) - JS library 57 | - [Next.js](https://nextjs.org/) - React framework 58 | - [Styled Components](https://styled-components.com/) - For styles 59 | 60 | **Note: These are just examples. Delete this note and replace the list above with your own choices** 61 | 62 | ### What I learned 63 | 64 | Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge. 65 | 66 | To see how you can add code snippets, see below: 67 | 68 | ```html 69 |
Our Equilibrium collection promotes balance and calm.
46 | 47 |