Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit f0c5899

Browse files
nft card match design
1 parent 3d09594 commit f0c5899

File tree

1 file changed

+34
-19
lines changed

1 file changed

+34
-19
lines changed

‎src/components/newbie/NftCard/NftCard.css‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap");
22

33
:root {
44
/* primary */
@@ -14,17 +14,19 @@
1414

1515
.nftCardBody {
1616
font-size: 18px;
17-
font-family: 'Outfit', sans-serif;
17+
font-family: "Outfit", sans-serif;
1818
height: 100vh;
1919
background-color: var(--mainBg);
2020
}
2121

2222
.nftCard-cardItem {
2323
background-color: var(--cardBg);
24-
width: 300px;
25-
padding: 20px;
24+
max-width: 350px;
25+
padding: 24px;
26+
padding-bottom: 32px;
2627
border-radius: 15px;
2728
color: var(--Soft-blue);
29+
box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.0952917);
2830
}
2931

3032
.nftCard-nft-img {
@@ -62,27 +64,29 @@
6264

6365
.nftCard-title {
6466
color: var(--White);
65-
margin: 15px 0px;
66-
font-size: 18px;
67+
margin: 20px 0px 16px;
68+
font-size: 22px;
69+
line-height: 27.72px;
6770
font-weight: 600;
6871
transition: all 0.4s ease-in-out;
6972
}
7073
.nftCard-desc {
7174
display: flex;
7275
font-weight: 300;
7376
justify-content: space-between;
74-
margin: 20px 0px;
77+
margin: 24px 0px;
7578
font-size: 16px;
7679
align-items: center;
80+
line-height: 20.16px;
7781
}
7882

7983
.nftCard-price {
8084
color: var(--Cyan);
81-
font-weight: 400;
85+
font-weight: 600;
8286
}
8387

8488
.nftCard-icon {
85-
margin-right: 5px;
89+
margin-right: 6.48px;
8690
display: flex;
8791
align-items: center;
8892
height: 100%;
@@ -92,16 +96,21 @@
9296
.nftCard-countdown {
9397
display: flex;
9498
align-items: center;
95-
font-size: 14px;
99+
font-size: 16px;
96100
}
97101

98-
.nftCard-p {
99-
font-weight: 300;
100-
font-size: 16px;
102+
.nftCard-countdown {
103+
font-weight: 400;
101104
}
102105

103-
.nftCard-p:first-of-type {
104-
line-height: 1.5;
106+
.nftCard-countdown > .nftCard-icon {
107+
margin-right: 7.7px;
108+
}
109+
110+
.nftCard-p {
111+
font-weight: 300;
112+
font-size: 18px;
113+
line-height: 26px;
105114
}
106115

107116
.nftCard-info {
@@ -110,19 +119,25 @@
110119
font-weight: 300;
111120
}
112121

122+
.nftCard-info .nftCard-p {
123+
line-height: 20.16px;
124+
font-weight: 400;
125+
font-size: 16px;
126+
}
127+
113128
.nftCard-line {
114129
width: 100%;
115130
height: 1px;
116131
background-color: var(--line);
117-
margin-bottom: 15px;
132+
margin-bottom: 16px;
118133
}
119134

120135
.nftCard-avatar {
121-
width: 30px;
122-
height: 30px;
136+
width: 33px;
137+
height: 33px;
123138
border-radius: 50%;
124139
border: 1px solid var(--White);
125-
margin-right: 15px;
140+
margin-right: 16px;
126141
}
127142

128143
.nftCard-span {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /