Responsive Design From Figma To Code
1min
Code-ka Project-ga oo dhameystiran.
HTML
CSS
1@import url("https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Work+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
3* {
4 margin: 0;
5 padding: 0;
6 box-sizing: border-box;
7}
8
9/* css variables */
10
11:root {
12 --primary-bg-color: #2b2b2b;
13 --secondary-bg-color: #3b3b3b;
14 --primary-text-color: #ffffff;
15 --secondary-text-color: #858584;
16 --primary-font-family: "Work Sans", sans-serif;
17 --secondary-font-family: "Space Mono", monospace;
18 --btn-color: #a259ff;
19}
20
21body {
22 font-family: var(--primary-font-family);
23 background-color: var(--primary-bg-color);
24 color: var(--primary-text-color);
25}
26
27/* global style */
28.container {
29 max-width: 1280px;
30 margin: auto;
31}
32h1 {
33 font-size: 67px;
34 font-weight: 600;
35 line-height: 73.7px;
36}
37h2 {
38 font-size: 51px;
39}
40h3 {
41 font-size: 38px;
42 font-weight: 600;
43}
44h4 {
45 font-size: 28px;
46}
47h5 {
48 font-size: 22px;
49 font-weight: 400;
50}
51.base {
52 font-size: 16px;
53}
54
55.caption {
56 font-size: 12px;
57 color: var(--secondary-text-color);
58}
59
60a {
61 text-decoration: none;
62}
63
64.secondary-container {
65 /* height: 544px; */
66 width: 1050px;
67 margin: 100px auto;
68 padding: 50px 0;
69}
70
71.flex {
72 display: flex;
73 justify-content: center;
74 align-items: center;
75}
76
77.heading {
78 margin: 50px 0;
79}
80.heading > * {
81 margin: 20px 0;
82}
83
84.light {
85 color: var(--secondary-text-color);
86}
87
88/* .primary-filled-btn {
89 padding: 10px;
90 background-color: var(--btn-color);
91 height: 72px;
92}
93
94.tertiary-filled-btn {
95 padding: 10px;
96 background-color: var(--btn-color);
97 height: 46px;
98} */
99
100.secondary-filled-btn {
101 padding: 10px 15px;
102 background-color: var(--btn-color);
103 height: 60px;
104 border-radius: 20px;
105}
106.secondary-outline-btn {
107 padding: 10px 15px;
108 border: 2px solid var(--btn-color);
109 background-color: transparent;
110 height: 60px;
111 border-radius: 20px;
112}
113
114header {
115 height: 100px;
116 display: flex;
117 justify-content: space-between;
118 align-items: center;
119 /*
120 */
121}
122
123header .logo {
124 cursor: pointer;
125}
126
127header ul {
128 display: flex;
129 align-items: center;
130}
131
132header ul li {
133 list-style-type: none;
134 margin: 0 15px;
135}
136
137header ul li a {
138 text-decoration: none;
139 color: var(--primary-text-color);
140}
141
142header ul li:nth-child(4) {
143 width: 152px;
144 height: 60px;
145 display: flex;
146 /* vertical center */
147 align-items: center;
148 /* horizontal center */
149 justify-content: center;
150}
151
152/* everything inside nth-child(4) */
153header ul li:nth-child(4) > * {
154 margin: 5px;
155}
156
157.left {
158 display: flex;
159 flex-direction: column;
160 gap: 30px;
161}
162
163.btn-icon {
164 /* border: none; */
165 border-radius: 20px;
166 display: flex;
167 justify-content: center;
168 align-items: center;
169 width: 200px;
170 gap: 10px;
171}
172
173.btn-icon a {
174 color: #fff;
175}
176
177.num-text {
178 width: 80%;
179 display: flex;
180 align-items: center;
181 justify-content: space-between;
182}
183
184.right-child {
185 background-color: var(--secondary-bg-color);
186 padding: 20px;
187 border-bottom-left-radius: 10px;
188 border-bottom-right-radius: 10px;
189 display: flex;
190 flex-direction: column;
191 justify-content: start;
192 gap: 20px;
193}
194
195.right-bottom {
196 display: flex;
197 gap: 15px;
198 align-items: center;
199}
200
201.trending-collection {
202 display: grid;
203 gap: 20px;
204 grid-template-columns: repeat(3, 1fr);
205}
206
207.collection-card {
208 display: flex;
209 gap: 20px;
210 flex-direction: column;
211}
212
213.secondary {
214 display: flex;
215 /* justify-content: space-between; */
216 align-items: center;
217 gap: 10px;
218}
219
220.secondary span {
221 background-color: var(--btn-color);
222 width: 100%;
223 height: 100%;
224 font-size: 22px;
225 border-radius: 20px;
226 /* font-weight: 700; */
227}
228
229.collection-info {
230 display: flex;
231 flex-direction: column;
232 gap: 20px;
233}
234
235.top-heading {
236 display: flex;
237 justify-content: space-between;
238}
239.sub-heading > *{
240 margin-top: 10px;
241}
242
243.creators-cards {
244 display: grid;
245 grid-template-columns: repeat(4, 1fr);
246 gap: 15px;
247}
248
249.creator-card {
250 background-color: var(--secondary-bg-color);
251 border-radius: 20px;
252 padding: 30px;
253 display: flex;
254 justify-content: center;
255 align-items: center;
256 flex-direction: column;
257 gap: 10px;
258}
259
260.avator {
261 display: flex;
262 justify-content: flex-start;
263}
264
265.avator span {
266 display: flex;
267 background-color: var(--primary-bg-color);
268 color: var(--secondary-text-color);
269 width: 30px;
270 height: 30px;
271 border-radius: 50%;
272 justify-content: center;
273 align-items: center;
274 transform: translateX(-30px);
275}
276
277.creator-info {
278 display: flex;
279 gap: 10px;
280}
281
282.cards-cat{
283 margin-top: 50px;
284 display: grid;
285 grid-template-columns: repeat(4, 1fr);
286 row-gap: 20px;
287
288}
289
290.card-cat{
291 margin: auto;
292 width: 240px;
293 height: 310px;
294}
295
296.bottom-cat{
297 display: flex;
298 align-items: center;
299 background-color: var(--secondary-bg-color);
300 padding: 25px;
301 margin-top: -4px;
302 border-bottom-left-radius: 20px;
303 border-bottom-right-radius: 20px;
304}
305.discover{
306 display: flex;
307 gap: 20px;
308}
309.discover-card{
310 width: 330px;
311}
312.discover-info{
313 padding: 20px;
314 background-color: var(--secondary-bg-color);
315 margin-top: -4px;
316 border-bottom-left-radius: 20px;
317 border-bottom-right-radius: 20px;
318}
319.discover-avater{
320 gap: 10px;
321 display: flex;
322 flex-direction: column;
323}
324.avater-icon{
325 display: flex;
326 align-items: center;
327 gap: 10px;
328}
329.discover-bottom{
330 margin-top: 20px;
331 display: flex;
332 justify-content: space-between;
333 gap: 10px;
334}
335.discover-left{
336 display: flex;
337 flex-direction: column;
338}
339.discover-right{
340 display: flex;
341 flex-direction: column;
342}
343
344.bg-image{
345 background: url("./images/NFT\ Highlight.png");
346 width: 100%;
347 height: 660px;
348 background-position: center;
349 background-size: cover;
350 background-attachment: fixed;
351}
352.how{
353 display: flex;
354 gap: 20px;
355}
356.how-card{
357 background-color: var(--secondary-bg-color);
358 width: 330px;
359 height: 400px;
360 border-radius: 20px;
361 text-align: center;
362}
363
364.how-text{
365 display: flex;
366 flex-direction: column;
367 gap: 10px;
368 margin: auto;
369 width: 270px;
370}
371
372.news-letter{
373 background-color: var(--secondary-bg-color);
374 display: flex;
375 justify-content: space-around;
376 padding: 50px 20px;
377}
378form{
379 display: flex;
380 position: relative;
381}
382form input{
383 padding: 20px 10px;
384 width: 425px;
385 border-radius: 20px;
386 outline: none;
387}
388form button{
389 position: absolute;
390 right: 0;
391 border: none;
392}
393footer{
394 display: flex;
395 flex-direction: column;
396 align-items: center;
397 background-color: var(--secondary-bg-color);
398}
399.footer-cols{
400 padding: 30px;
401 max-width: 1050px;
402 margin: auto;
403 display: flex;
404 gap: 20px;
405}
406footer .footer-col{
407 width: 325px;
408 display: flex;
409 flex-direction: column;
410 gap: 30px;
411}
412
413footer img{
414 width: 150px;
415}
416
417ul li{
418 margin-bottom: 20px;
419 list-style: none;
420}
421hr{
422 border-color: var(--secondary-text-color);
423 width: 1050px;
424}
425.sub-footer{
426 padding: 30px;
427 width: 1050px;
428}


Updated 25 Mar 2024
Did this page help you?