nft-preview-card-component
所属分类：NFT
开发工具：SCSS
文件大小：228KB
下载次数：0
上传日期：2023-03-21 14:23:59
上 传 者：
sh-1993
说明： 我开发了一个前端公文包，明确的目的是磨练我的CSS预处理器技能。
(I have developed a Frontend Portfolio with the express purpose of honing my CSS preprocessor skill.)
文件列表:
design (0, 2023-03-21)
design\active-states.jpg (21489, 2023-03-21)
design\desktop-design.jpg (21259, 2023-03-21)
design\desktop-preview.jpg (32344, 2023-03-21)
design\mobile-design.jpg (16701, 2023-03-21)
images (0, 2023-03-21)
images\favicon-32x32.png (1063, 2023-03-21)
images\icon-clock.svg (263, 2023-03-21)
images\icon-ethereum.svg (185, 2023-03-21)
images\icon-view.svg (404, 2023-03-21)
images\image-avatar.png (8830, 2023-03-21)
images\image-equilibrium.jpg (13542, 2023-03-21)
images\screenshot (0, 2023-03-21)
images\screenshot\desktop-view.png (147325, 2023-03-21)
index.html (1430, 2023-03-21)
scss (0, 2023-03-21)
scss\base (0, 2023-03-21)
scss\base\_reset.scss (737, 2023-03-21)
scss\base\_variables.scss (363, 2023-03-21)
scss\main.css (3285, 2023-03-21)
scss\main.css.map (3615, 2023-03-21)
scss\main.min.css (1546, 2023-03-21)
scss\main.scss (103, 2023-03-21)
scss\pages (0, 2023-03-21)
scss\pages\_home.scss (2611, 2023-03-21)
style-guide.md (542, 2023-03-21)
# Frontend Mentor - NFT preview card component solution
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.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Users should be able to:
- View the optimal layout depending on their device's screen size
### Screenshot
### Links
- Solution URL: [https://www.frontendmentor.io/solutions/nft-preview-card-component-FGi7lUKkY]
- Live Site URL: [https://jialeee17.github.io/nft-preview-card-component/]
## My process
### Built with
- HTML5
- CSS3
- Sass pre-processor
- Mobile-first workflow
- RWD Concept
### What I learned
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.
To see how you can add code snippets, see below:
```scss
.nft-price {
color: $cyan;
font-size: 1.1rem;
font-weight: 600;
&::before {
content: url('../../images/icon-ethereum.svg');
margin-right: .3rem;
transform: translateY(2px);
}
}
```
I learned the use of ::before pseudo-element for adding icon. This is a flexible way for adding icon before any elements as you don't have to hardcode it into your html element tag.
### Continued development
In the upcoming projects, I'll focus on the use of SCSS to smoothen my development process. Other than that, I tried to do more advanced projects that are available on Frontend Mentor. For example, projects that included the use of advanced layout properties like flexbox or grid.
### Useful resources
- [Beautiful CSS box-shadow examples](https://getcssscan.com/css-box-shadow-examples) - This website provided lots of beautiful box-shadow that you can choose from. Awesome!
## Author
- GitHub - [jialeee17](https://github.com/jiale456?tab=repositories)
- Frontend Mentor - [jialeee17](https://www.frontendmentor.io/profile/jiale456)
近期下载者：
相关文件：
收藏者：