├── README.md
├── assets
    ├── css
    │   └── style.css
    ├── images
    │   ├── auction-1.jpg
    │   ├── auction-10.jpg
    │   ├── auction-11.jpg
    │   ├── auction-12.jpg
    │   ├── auction-2.jpg
    │   ├── auction-3.jpg
    │   ├── auction-4.jpg
    │   ├── auction-5.jpg
    │   ├── auction-6.jpg
    │   ├── auction-7.jpg
    │   ├── auction-8.jpg
    │   ├── auction-9.jpg
    │   ├── author-banner-1.jpg
    │   ├── author-banner-2.jpg
    │   ├── author-banner-3.jpg
    │   ├── author-banner-4.jpg
    │   ├── author-banner-5.jpg
    │   ├── author-banner-6.jpg
    │   ├── author-banner-7.jpg
    │   ├── author-banner-8.jpg
    │   ├── avatar-1.jpg
    │   ├── avatar-2.jpg
    │   ├── avatar-3.jpg
    │   ├── avatar-4.jpg
    │   ├── avatar-5.jpg
    │   ├── avatar-6.jpg
    │   ├── avatar-7.jpg
    │   ├── avatar-8.jpg
    │   ├── hero-bg-bottom.svg
    │   └── logo.svg
    └── js
    │   └── script.js
├── favicon.svg
├── index.html
├── index.txt
├── readme-images
    └── desktop.png
└── style-guide.md


/README.md:
--------------------------------------------------------------------------------
 1 | <div align="center">
 2 |   
 3 |   ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/nftc)
 4 |   ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/nftc?style=social)
 5 |   ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/nftc?style=social)
 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_)
 7 |   [![YouTube Video Views](https://img.shields.io/youtube/views/xwXGdpRuSiQ?style=social)](https://youtu.be/xwXGdpRuSiQ)
 8 | 
 9 |   <br />
10 |   <br />
11 | 
12 |   <h2 align="center">NFTC - NFT website</h2>
13 | 
14 |   NFTC is fully responsive nft website, <br />Responsive for all devices, built using HTML, CSS, and JavaScript.
15 | 
16 |   <a href="https://codewithsadee.github.io/nftc/"><strong>➥ Live Demo</strong></a>
17 | 
18 | </div>
19 | 
20 | <br />
21 | 
22 | ### Demo Screeshots
23 | 
24 | ![NFTC Desktop Demo](./readme-images/desktop.png "Desktop Demo")
25 | 
26 | ### Prerequisites
27 | 
28 | Before you begin, ensure you have met the following requirements:
29 | 
30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system.
31 | 
32 | ### Run Locally
33 | 
34 | To run **NFTC** locally, run this command on your git bash:
35 | 
36 | Linux and macOS:
37 | 
38 | ```bash
39 | sudo git clone https://github.com/codewithsadee/nftc.git
40 | ```
41 | 
42 | Windows:
43 | 
44 | ```bash
45 | git clone https://github.com/codewithsadee/nftc.git
46 | ```
47 | 
48 | ### Contact
49 | 
50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee).
51 | 
52 | ### License
53 | 
54 | This project is **free to use** and does not contains any license.
55 | 


--------------------------------------------------------------------------------
/assets/css/style.css:
--------------------------------------------------------------------------------
  1 | /*-----------------------------------*\
  2 |   #style.css
  3 | \*-----------------------------------*/
  4 | 
  5 | /**
  6 |  * copyright 2022 codewithsadee
  7 |  */
  8 | 
  9 | 
 10 | 
 11 | 
 12 | 
 13 | /*-----------------------------------*\
 14 |   #CUSTOM PROPERTY
 15 | \*-----------------------------------*/
 16 | 
 17 | :root {
 18 | 
 19 |   /**
 20 |    * colors
 21 |    */
 22 | 
 23 |   --rich-black-fogra-39: hsl(252, 24%, 4%);
 24 |   --spanish-gray: hsl(0, 0%, 56%);
 25 |   --eerie-black-1: hsl(252, 11%, 9%);
 26 |   --eerie-black-2: hsl(0, 0%, 13%);
 27 |   --raisin-black: hsl(249, 9%, 15%);
 28 |   --han-purple: hsl(250, 72%, 51%);
 29 |   --gainsboro: hsl(0, 0%, 88%);
 30 |   --cultured: hsl(0, 0%, 98%);
 31 |   --white_20: hsla(217, 15%, 70%, 0.3);
 32 |   --xiketic: hsl(250, 15%, 8%);
 33 |   --indigo: hsl(277, 94%, 28%);
 34 |   --white: hsl(0, 0%, 100%);
 35 |   --black: hsl(0, 0%, 0%);
 36 | 
 37 |   --gradient-1: linear-gradient(150deg, var(--indigo) 0%, var(--han-purple) 78%);
 38 | 
 39 |   /**
 40 |    * typography
 41 |    */
 42 | 
 43 |   --ff-poppins: 'Poppins', sans-serif;
 44 |   --ff-jost: 'Jost', sans-serif;
 45 | 
 46 |   --fs-1: 4.8rem;
 47 |   --fs-2: 3.2rem;
 48 |   --fs-3: 2.4rem;
 49 |   --fs-4: 1.9rem;
 50 |   --fs-5: 1.4rem;
 51 | 
 52 |   --fw-500: 500;
 53 |   --fw-600: 600;
 54 |   --fw-700: 700;
 55 |   --fw-900: 900;
 56 | 
 57 |   /**
 58 |    * border radius
 59 |    */
 60 | 
 61 |   --radius-4: 4px;
 62 |   --radius-6: 6px;
 63 |   --radius-8: 8px;
 64 | 
 65 |   /**
 66 |    * spacing
 67 |    */
 68 | 
 69 |   --section-padding: 90px;
 70 | 
 71 |   /**
 72 |    * box shadow
 73 |    */
 74 | 
 75 |   --shadow-1: 0 2px 2px var(--black);
 76 |   --shadow-2: 0px 2px 4px var(--black);
 77 | 
 78 |   /**
 79 |    * transition
 80 |    */
 81 | 
 82 |   --transition-1: 0.05s ease;
 83 |   --transition-2: 0.25s ease;
 84 |   --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
 85 |   --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);
 86 | 
 87 | }
 88 | 
 89 | 
 90 | 
 91 | 
 92 | 
 93 | /*-----------------------------------*\
 94 |   #RESET
 95 | \*-----------------------------------*/
 96 | 
 97 | *,
 98 | *::before,
 99 | *::after {
100 |   margin: 0;
101 |   padding: 0;
102 |   box-sizing: border-box;
103 | }
104 | 
105 | li { list-style: none; }
106 | 
107 | a {
108 |   text-decoration: none;
109 |   color: inherit;
110 | }
111 | 
112 | a,
113 | img,
114 | svg,
115 | span,
116 | input,
117 | button,
118 | ion-icon { display: block; }
119 | 
120 | img { height: auto; }
121 | 
122 | input,
123 | button {
124 |   background: none;
125 |   border: none;
126 |   font: inherit;
127 | }
128 | 
129 | input { width: 100%; }
130 | 
131 | button { cursor: pointer; }
132 | 
133 | ion-icon {
134 |   pointer-events: none;
135 |   color: var(--white);
136 | }
137 | 
138 | ::selection { background-color: var(--white_20); }
139 | 
140 | :focus-visible { outline-offset: 4px; }
141 | 
142 | html {
143 |   font-family: var(--ff-poppins);
144 |   font-size: 10px;
145 |   scroll-behavior: smooth;
146 | }
147 | 
148 | body {
149 |   background-color: var(--rich-black-fogra-39);
150 |   color: var(--spanish-gray);
151 |   font-size: 1.6rem;
152 | }
153 | 
154 | ::-webkit-scrollbar { width: 15px; }
155 | 
156 | ::-webkit-scrollbar-track { background-color: hsl(0, 0%, 100%); }
157 | 
158 | ::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }
159 | 
160 | ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }
161 | 
162 | 
163 | 
164 | 
165 | 
166 | /*-----------------------------------*\
167 |   #REUSED STYLE
168 | \*-----------------------------------*/
169 | 
170 | .container { padding-inline: 25px; }
171 | 
172 | .btn {
173 |   color: var(--white);
174 |   font-weight: var(--fw-700);
175 |   border: 2px solid var(--white);
176 |   padding: var(--padding, 4px 10px);
177 |   border-radius: 50px;
178 |   display: flex;
179 |   align-items: center;
180 |   gap: 5px;
181 | }
182 | 
183 | .btn ion-icon { font-size: 1.8rem; }
184 | 
185 | .btn:is(:hover, :focus) {
186 |   background-image: var(--gradient-1);
187 |   background-repeat: no-repeat;
188 |   background-position: center;
189 |   background-size: 120% 120%;
190 |   border-color: transparent;
191 | }
192 | 
193 | .section-subtitle {
194 |   position: relative;
195 |   background-image: var(--gradient-1);
196 |   background-clip: text;
197 |   -webkit-background-clip: text;
198 |   -webkit-text-fill-color: transparent;
199 |   text-transform: uppercase;
200 |   font-weight: var(--fw-600);
201 |   margin-block-end: 15px;
202 |   width: max-content;
203 | }
204 | 
205 | .section-subtitle::after {
206 |   content: "";
207 |   position: absolute;
208 |   top: 12px;
209 |   right: -60px;
210 |   width: 50px;
211 |   height: 3px;
212 |   background-image: var(--gradient-1);
213 | }
214 | 
215 | .h1,
216 | .h2,
217 | .h3 {
218 |   color: var(--white);
219 |   font-family: var(--ff-jost);
220 | }
221 | 
222 | .h2,
223 | .h3 { font-weight: var(--fw-600); }
224 | 
225 | .h2 {
226 |   font-size: var(--fs-2);
227 |   line-height: 1.2;
228 | }
229 | 
230 | .section { padding-block-start: var(--section-padding); }
231 | 
232 | .title-wrapper {
233 |   display: flex;
234 |   justify-content: space-between;
235 |   align-items: center;
236 |   margin-block-end: 50px;
237 | }
238 | 
239 | .btn-link {
240 |   display: flex;
241 |   align-items: center;
242 |   gap: 5px;
243 |   color: var(--white);
244 |   font-weight: var(--fw-500);
245 |   transition: var(--transition-2);
246 | }
247 | 
248 | .btn-link:is(:hover, :focus) { color: var(--han-purple); }
249 | 
250 | .btn-link ion-icon { color: inherit; }
251 | 
252 | .grid-list {
253 |   display: grid;
254 |   gap: 30px;
255 | }
256 | 
257 | .card {
258 |   background-color: var(--eerie-black-1);
259 |   padding: 24px;
260 |   border-radius: var(--radius-8);
261 |   box-shadow: var(--shadow-1);
262 |   transition: var(--transition-2);
263 | }
264 | 
265 | .card-banner {
266 |   overflow: hidden;
267 |   border-radius: var(--radius-6);
268 |   background-color: var(--raisin-black);
269 | }
270 | 
271 | .img-cover {
272 |   width: 100%;
273 |   height: 100%;
274 |   object-fit: cover;
275 | }
276 | 
277 | .card-title,
278 | .card-title > a { transition: var(--transition-2); }
279 | 
280 | 
281 | 
282 | 
283 | 
284 | /*-----------------------------------*\
285 |   #HEADER
286 | \*-----------------------------------*/
287 | 
288 | .header .btn > span { display: none; }
289 | 
290 | .header {
291 |   position: fixed;
292 |   top: 0;
293 |   left: 0;
294 |   width: 100%;
295 |   background-color: var(--xiketic);
296 |   padding-block: 20px;
297 |   transition: var(--transition-1);
298 |   z-index: 4;
299 | }
300 | 
301 | .header.active { box-shadow: var(--shadow-2); }
302 | 
303 | .header .container {
304 |   display: flex;
305 |   align-items: center;
306 |   gap: 30px;
307 | }
308 | 
309 | .menu-open-btn {
310 |   margin-inline-start: auto;
311 |   font-size: 2.6rem;
312 | }
313 | 
314 | .header ion-icon { color: var(--white); }
315 | 
316 | .navbar {
317 |   position: fixed;
318 |   top: 0;
319 |   right: -500px;
320 |   width: 100%;
321 |   max-width: 500px;
322 |   height: 100%;
323 |   background-color: var(--rich-black-fogra-39);
324 |   visibility: hidden;
325 |   z-index: 2;
326 |   transition: 0.15s var(--cubic-in);
327 | }
328 | 
329 | .navbar.active {
330 |   visibility: visible;
331 |   transform: translateX(-500px);
332 |   transition: 0.35s var(--cubic-out);
333 | }
334 | 
335 | .navbar-top,
336 | .navbar-list { padding: 30px; }
337 | 
338 | .navbar-top {
339 |   display: flex;
340 |   justify-content: space-between;
341 |   align-items: center;
342 | }
343 | 
344 | .navbar-title { font-weight: var(--fw-600); }
345 | 
346 | .nav-close-btn ion-icon {
347 |   color: var(--spanish-gray);
348 |   font-size: 2.7rem;
349 |   --ionicon-stroke-width: 40px;
350 | }
351 | 
352 | .navbar-link {
353 |   font-size: var(--fs-3);
354 |   color: var(--white);
355 |   padding-block: 10px;
356 |   font-weight: var(--fw-600);
357 |   transition: var(--transition-1);
358 | }
359 | 
360 | .navbar-link:is(:hover, :focus) { color: var(--han-purple); }
361 | 
362 | .overlay {
363 |   position: fixed;
364 |   inset: 0;
365 |   background-color: hsla(0, 0%, 0%, 0.7);
366 |   transition: var(--transition-2);
367 |   opacity: 0;
368 |   pointer-events: none;
369 |   z-index: 1;
370 | }
371 | 
372 | .overlay.active {
373 |   opacity: 1;
374 |   pointer-events: all;
375 | }
376 | 
377 | 
378 | 
379 | 
380 | 
381 | /*-----------------------------------*\
382 |   #HERO
383 | \*-----------------------------------*/
384 | 
385 | .hero {
386 |   position: relative;
387 |   background-color: var(--xiketic);
388 |   padding-block-start: 120px;
389 |   padding-block-end: var(--section-padding);
390 |   z-index: 1;
391 | }
392 | 
393 | .hero .section-subtitle { margin-block-end: 30px; }
394 | 
395 | .hero-title {
396 |   font-size: var(--fs-1);
397 |   font-weight: var(--fw-900);
398 |   line-height: 1.2;
399 |   word-wrap: break-word;
400 |   margin-block-end: 25px;
401 | }
402 | 
403 | .hero-text {
404 |   font-size: var(--fs-4);
405 |   margin-block-end: 25px;
406 | }
407 | 
408 | .hero .btn-group {
409 |   display: flex;
410 |   flex-wrap: wrap;
411 |   gap: 15px;
412 | }
413 | 
414 | .hero .btn { --padding: 12px 30px; }
415 | 
416 | .hero-bg-bottom {
417 |   position: absolute;
418 |   bottom: 0;
419 |   left: 0;
420 |   right: 0;
421 |   z-index: -1;
422 | }
423 | 
424 | 
425 | 
426 | 
427 | 
428 | /*-----------------------------------*\
429 |   #EXPLOER
430 | \*-----------------------------------*/
431 | 
432 | .explore-card:hover { transform: translateY(-5px); }
433 | 
434 | .explore-card .card-banner {
435 |   aspect-ratio: 1 / 1;
436 |   margin-block-end: 35px;
437 | }
438 | 
439 | .explore-card .card-title > a:is(:hover, :focus) { color: var(--han-purple); }
440 | 
441 | .explore-card .card-author {
442 |   display: flex;
443 |   align-items: center;
444 |   gap: 10px;
445 |   margin-block: 10px;
446 | }
447 | 
448 | .explore-card .author-link {
449 |   color: var(--white);
450 |   font-family: var(--ff-jost);
451 |   font-weight: var(--fw-500);
452 |   transition: var(--transition-2);
453 | }
454 | 
455 | .explore-card .author-link:is(:hover, :focus) { color: var(--han-purple); }
456 | 
457 | .explore-card .wrapper {
458 |   display: flex;
459 |   justify-content: space-between;
460 |   align-items: center;
461 |   margin-block-end: 15px;
462 | }
463 | 
464 | .explore-card .wrapper-item { color: var(--white); }
465 | 
466 | .explore-card .btn {
467 |   font-size: var(--fs-5);
468 |   --padding: 8px 15px;
469 | }
470 | 
471 | 
472 | 
473 | 
474 | 
475 | /*-----------------------------------*\
476 |   #TOP SELLER
477 | \*-----------------------------------*/
478 | 
479 | .top-seller .section-title { margin-block-end: 50px; }
480 | 
481 | .top-seller-card {
482 |   display: flex;
483 |   align-items: center;
484 |   gap: 15px;
485 | }
486 | 
487 | .top-seller-card .card-avatar {
488 |   border-radius: 50%;
489 |   overflow: hidden;
490 | }
491 | 
492 | .top-seller-card .card-title {
493 |   color: var(--cultured);
494 |   font-size: 1.6rem;
495 |   font-weight: var(--fw-600);
496 |   margin-block-end: 5px;
497 | }
498 | 
499 | .top-seller-card .card-title > a:is(:hover, :focus) { color: var(--han-purple); }
500 | 
501 | 
502 | 
503 | 
504 | 
505 | /*-----------------------------------*\
506 |   #COLLECTION
507 | \*-----------------------------------*/
508 | 
509 | .collection-card { text-align: center; }
510 | 
511 | .collection-card .card-banner { aspect-ratio: 1 / 0.75; }
512 | 
513 | .collection-card .card-avatar {
514 |   position: relative;
515 |   width: max-content;
516 |   margin-inline: auto;
517 |   margin-block: -40px 15px;
518 |   border-radius: 50px;
519 |   overflow: hidden;
520 |   border: 3px solid var(--white_20);
521 |   padding: 5px;
522 |   transition: var(--transition-2);
523 | }
524 | 
525 | .collection-card .card-avatar img { border-radius: inherit; }
526 | 
527 | .collection-card:is(:hover, :focus) .card-avatar { box-shadow: 0 5px 10px hsla(223, 82%, 30%, 0.5); }
528 | 
529 | .collection-card:is(:hover, :focus) .card-title { color: var(--han-purple); }
530 | 
531 | 
532 | 
533 | 
534 | 
535 | /*-----------------------------------*\
536 |   #INSTRUCTION
537 | \*-----------------------------------*/
538 | 
539 | .instruction { padding-block-end: var(--section-padding); }
540 | 
541 | .instruction .section-title { margin-block-end: 50px; }
542 | 
543 | .instruction-icon ion-icon {
544 |   font-size: 5rem;
545 |   color: var(--han-purple);
546 |   --ionicon-stroke-width: 25px;
547 | }
548 | 
549 | .instruction-title {
550 |   color: var(--white);
551 |   font-family: var(--ff-jost);
552 |   font-size: var(--fs-3);
553 |   font-weight: var(--fw-600);
554 |   margin-block: 15px;
555 | }
556 | 
557 | 
558 | 
559 | 
560 | 
561 | /*-----------------------------------*\
562 |   #FOOTER
563 | \*-----------------------------------*/
564 | 
565 | .footer { background-color: var(--xiketic); }
566 | 
567 | .footer-top {
568 |   padding-block: var(--section-padding);
569 |   border-block-end: 1px solid hsla(0, 0%, 100%, 0.2);
570 |   display: grid;
571 |   gap: 50px 40px;
572 | }
573 | 
574 | .footer-text {
575 |   color: var(--gainsboro);
576 |   margin-block: 15px 24px;
577 | }
578 | 
579 | .social-list {
580 |   display: flex;
581 |   align-items: center;
582 |   gap: 10px;
583 | }
584 | 
585 | .social-link {
586 |   background-color: var(--eerie-black-2);
587 |   color: var(--cultured);
588 |   width: 42px;
589 |   height: 42px;
590 |   font-size: 1.8rem;
591 |   border-radius: var(--radius-4);
592 |   overflow: hidden;
593 | }
594 | 
595 | .social-link ion-icon {
596 |   padding: 12px;
597 |   transition: var(--transition-2);
598 | }
599 | 
600 | .social-link:is(:hover, :focus) ion-icon { transform: translateY(-42px); }
601 | 
602 | .footer-list-title {
603 |   color: var(--cultured);
604 |   font-family: var(--ff-jost);
605 |   font-size: var(--fs-3);
606 |   margin-block-end: 20px;
607 | }
608 | 
609 | .footer-link {
610 |   width: max-content;
611 |   color: var(--gainsboro);
612 |   margin-block: 12px;
613 |   transition: var(--transition-1);
614 | }
615 | 
616 | .footer-link:is(:hover, :focus) { 
617 |   text-decoration: underline;
618 |   background-color: hsla(0, 0%, 100%, 0.05);
619 | }
620 | 
621 | .newsletter-form { position: relative; }
622 | 
623 | .newsletter-input {
624 |   background-color: var(--eerie-black-2);
625 |   color: var(--gainsboro);
626 |   font-size: var(--fs-5);
627 |   padding: 12px 20px;
628 |   padding-inline-end: 80px;
629 |   border-radius: var(--radius-4);
630 |   outline: none;
631 |   transition: var(--transition-1);
632 | }
633 | 
634 | .newsletter-input:focus { box-shadow: 0 0 1px 4px hsl(0, 0%, 40%); }
635 | 
636 | .newsletter-btn {
637 |   background-image: var(--gradient-1);
638 |   position: absolute;
639 |   top: 0;
640 |   right: 0;
641 |   bottom: 0;
642 |   padding-inline: 25px;
643 |   border-radius: 50px 4px 4px 50px;
644 | }
645 | 
646 | .newsletter-btn ion-icon { --ionicon-stroke-width: 40px; }
647 | 
648 | .footer-bottom {
649 |   color: var(--gainsboro);
650 |   padding-block: 25px;
651 |   text-align: center;
652 | }
653 | 
654 | .copyright-link {
655 |   text-decoration: underline;
656 |   display: inline-block;
657 |   transition: var(--transition-1);
658 | }
659 | 
660 | .copyright-link:is(:hover, :focus) { background-color: hsla(0, 0%, 100%, 0.05); }
661 | 
662 | 
663 | 
664 | 
665 | 
666 | /*-----------------------------------*\
667 |   #BACK TO TOP
668 | \*-----------------------------------*/
669 | 
670 | .back-to-top {
671 |   position: fixed;
672 |   bottom: 0;
673 |   right: 15px;
674 |   background-color: var(--xiketic);
675 |   color: var(--cultured);
676 |   font-size: 2rem;
677 |   padding: 15px 12px;
678 |   border-radius: var(--radius-6);
679 |   box-shadow: var(--shadow-2);
680 |   z-index: 2;
681 |   visibility: hidden;
682 |   opacity: 0;
683 |   transition: var(--transition-1);
684 | }
685 | 
686 | .back-to-top.active {
687 |   visibility: visible;
688 |   opacity: 1;
689 |   transform: translateY(-15px);
690 | }
691 | 
692 | .back-to-top:is(:hover, :focus) { background-color: var(--raisin-black); }
693 | 
694 | 
695 | 
696 | 
697 | 
698 | /*-----------------------------------*\
699 |   #MEDIA QUERIES
700 | \*-----------------------------------*/
701 | 
702 | /**
703 |  * responsive for larger than 575px screen
704 |  */
705 | 
706 | @media (min-width: 575px) {
707 | 
708 |   /**
709 |    * REUSED STYLE, FOOTER
710 |    */
711 | 
712 |   .grid-list,
713 |   .footer-top { grid-template-columns: 1fr 1fr; }
714 | 
715 | }
716 | 
717 | 
718 | 
719 | 
720 | 
721 | /**
722 |  * responsive for larger than 768px screen
723 |  */
724 | 
725 | @media (min-width: 768px) {
726 | 
727 |   /**
728 |    * CUSTOM PROPERTY
729 |    */
730 | 
731 |   :root {
732 | 
733 |     /**
734 |      * typography
735 |      */
736 | 
737 |     --fs-1: 6.4rem;
738 | 
739 |   }
740 | 
741 | 
742 | 
743 |   /**
744 |    * HEADER
745 |    */
746 | 
747 |   .header .btn > span { display: block; }
748 | 
749 |   .header .btn { --padding: 12px 30px; }
750 | 
751 | 
752 | 
753 |   /**
754 |    * HERO
755 |    */
756 | 
757 |   .hero {
758 |     min-height: 700px;
759 |     display: flex;
760 |     justify-content: flex-start;
761 |     align-items: center;
762 |   }
763 | 
764 |   .hero-title { max-width: 650px; }
765 | 
766 | }
767 | 
768 | 
769 | 
770 | 
771 | 
772 | /**
773 |  * responsive for larger than 992px screen
774 |  */
775 | 
776 | @media (min-width: 992px) {
777 | 
778 |   /**
779 |    * REUSED STYLE
780 |    */
781 | 
782 |   .grid-list { grid-template-columns: repeat(3, 1fr); }
783 | 
784 | 
785 | 
786 |   /**
787 |    * INSTRUCTION
788 |    */
789 | 
790 |   .instruction .grid-list { grid-template-columns: repeat(4, 1fr); }
791 | 
792 | 
793 | 
794 |   /**
795 |    * FOOTER
796 |    */
797 | 
798 |   .footer-top { grid-template-columns: 1fr 0.6fr 0.6fr 1fr; }
799 | 
800 |   .footer-brand { padding-inline-end: 60px; }
801 | 
802 | }
803 | 
804 | 
805 | 
806 | 
807 | 
808 | /**
809 |  * responsive for larger than 1200px screen
810 |  */
811 | 
812 | @media (min-width: 1200px) {
813 | 
814 |   /**
815 |    * REUSED STYLE
816 |    */
817 | 
818 |   .container {
819 |     max-width: 1180px;
820 |     width: 100%;
821 |     margin-inline: auto;
822 |   }
823 | 
824 |   .grid-list { grid-template-columns: repeat(4, 1fr); }
825 | 
826 | 
827 | 
828 |   /**
829 |    * HEADER
830 |    */
831 | 
832 |   .overlay,
833 |   .navbar-top,
834 |   .menu-open-btn { display: none; }
835 | 
836 |   .navbar,
837 |   .navbar.active {
838 |     all: unset;
839 |     margin-inline: auto;
840 |   }
841 | 
842 |   .navbar-list {
843 |     padding: 0;
844 |     display: flex;
845 |     align-items: center;
846 |     gap: 30px;
847 |   }
848 | 
849 |   .navbar-link { --fs-3: 1.6rem; }
850 | 
851 | 
852 | 
853 |   /**
854 |    * HERO
855 |    */
856 | 
857 |   .hero { min-height: 770px; }
858 | 
859 | 
860 | 
861 |   /**
862 |    * TOP SELLER
863 |    */
864 | 
865 |   .top-seller .grid-list { grid-template-columns: repeat(3, 1fr); }
866 | 
867 | 
868 | 
869 |   /**
870 |    * INSTRUCTION
871 |    */
872 | 
873 |   .instruction { padding-block-end: 120px; }
874 | 
875 | }


--------------------------------------------------------------------------------
/assets/images/auction-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-1.jpg


--------------------------------------------------------------------------------
/assets/images/auction-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-10.jpg


--------------------------------------------------------------------------------
/assets/images/auction-11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-11.jpg


--------------------------------------------------------------------------------
/assets/images/auction-12.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-12.jpg


--------------------------------------------------------------------------------
/assets/images/auction-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-2.jpg


--------------------------------------------------------------------------------
/assets/images/auction-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-3.jpg


--------------------------------------------------------------------------------
/assets/images/auction-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-4.jpg


--------------------------------------------------------------------------------
/assets/images/auction-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-5.jpg


--------------------------------------------------------------------------------
/assets/images/auction-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-6.jpg


--------------------------------------------------------------------------------
/assets/images/auction-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-7.jpg


--------------------------------------------------------------------------------
/assets/images/auction-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-8.jpg


--------------------------------------------------------------------------------
/assets/images/auction-9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/auction-9.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-1.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-2.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-3.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-4.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-5.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-6.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-7.jpg


--------------------------------------------------------------------------------
/assets/images/author-banner-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/author-banner-8.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-1.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-2.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-3.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-4.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-5.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-6.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-7.jpg


--------------------------------------------------------------------------------
/assets/images/avatar-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/assets/images/avatar-8.jpg


--------------------------------------------------------------------------------
/assets/images/hero-bg-bottom.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 465" version="1.1"><defs><linearGradient x1="49.7965246%" y1="28.2355058%" x2="49.7778147%" y2="98.4657689%" id="linearGradient-1"><stop stop-color="rgba(69,40,220, 0.15)" offset="0%"></stop><stop stop-color="rgba(87,4,138, 0.15)" offset="100%"></stop></linearGradient></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><polygon points="" fill="url(#linearGradient-1)"><animate id="graph-animation" xmlns="http://www.w3.org/2000/svg" dur="2s" repeatCount="" attributeName="points" values="0,464 0,464 111.6,464 282.5,464 457.4,464 613.4,464 762.3,464 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,323.3 282.5,373 457.4,423.8 613.4,464 762.3,464 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,336.6 457.4,363.5 613.4,414.4 762.3,464 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,323.3 613.4,340 762.3,425.6 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,290.4 762.3,368 912.3,446.4 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,329.6 912.3,420 1068.2,427.6 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,402.4 1068.2,373 1191.2,412 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,336.6 1191.2,334 1328.1,404 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,282 1328.1,314 1440.1,372.8 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,204 1328.1,254 1440.1,236 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,204 1328.1,164 1440.1,144.79999999999998 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,204 1328.1,164 1440.1,8 1440.1,464 0,464;" fill="freeze"></animate></polygon></g></svg>


--------------------------------------------------------------------------------
/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="68" height="48" viewBox="0 0 68 48" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M21.8578 0H51.5883L29.7305 32.3977H0L21.8578 0Z" fill="white"/>
3 | <path d="M23.1598 35.4003L14.6937 47.9487H45.8345L67.6923 15.551H44.7085L31.3167 35.4003H23.1598Z" fill="#D6D6D6"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/assets/js/script.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | 
 5 | /**
 6 |  * navbar toggle
 7 |  */
 8 | 
 9 | const overlay = document.querySelector("[data-overlay]");
10 | const navbar = document.querySelector("[data-navbar]");
11 | const menuCloseBtn = document.querySelector("[data-nav-close-btn]");
12 | const menuOpenBtn = document.querySelector("[data-nav-open-btn]");
13 | 
14 | const elemArr = [overlay, menuCloseBtn, menuOpenBtn];
15 | 
16 | for (let i = 0; i < elemArr.length; i++) {
17 |   elemArr[i].addEventListener("click", function () {
18 |     navbar.classList.toggle("active");
19 |     overlay.classList.toggle("active");
20 |   });
21 | }
22 | 
23 | /**
24 |  * toggle navbar when any navbar link will be clicked
25 |  */
26 | 
27 | const navbarLinks = document.querySelectorAll("[data-navlink]");
28 | 
29 | for (let i = 0; i < navbarLinks.length; i++) {
30 |   navbarLinks[i].addEventListener("click", function () {
31 |     navbar.classList.toggle("active");
32 |     overlay.classList.toggle("active");
33 |   });
34 | }
35 | 
36 | 
37 | 
38 | 
39 | 
40 | /**
41 |  * add active class on header and back-to-top btn
42 |  * when window will scroll 100px from top
43 |  */
44 | 
45 | const header = document.querySelector("[data-header]");
46 | const backTopBtn = document.querySelector("[data-back-top-btn]");
47 | 
48 | window.addEventListener("scroll", function () {
49 |   if (window.scrollY >= 100) {
50 |     header.classList.add("active");
51 |     backTopBtn.classList.add("active");
52 |   } else {
53 |     header.classList.remove("active");
54 |     backTopBtn.classList.remove("active");
55 |   }
56 | });


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="50" height="50" rx="10" fill="white"/>
3 | <path d="M18.1994 10.6H35.0646L22.6653 28.9783H5.8L18.1994 10.6Z" fill="#4528DC"/>
4 | <path d="M18.9379 30.6816L14.1354 37.8H31.8006L44.2 19.4217H31.1619L23.5651 30.6816H18.9379Z" fill="#57048A"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | 
   4 | <head>
   5 |   <meta charset="UTF-8">
   6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   8 |   <title>NFTC - Explore world's best NFT</title>
   9 | 
  10 |   <!-- 
  11 |     - favicon
  12 |   -->
  13 |   <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
  14 | 
  15 |   <!-- 
  16 |     - custom css link
  17 |   -->
  18 |   <link rel="stylesheet" href="./assets/css/style.css">
  19 | 
  20 |   <!-- 
  21 |     - google font link
  22 |   -->
  23 |   <link rel="preconnect" href="https://fonts.googleapis.com">
  24 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25 |   <link
  26 |     href="https://fonts.googleapis.com/css2?family=Jost:wght@600;900&family=Poppins:wght@400;500;600;700&display=swap"
  27 |     rel="stylesheet">
  28 | </head>
  29 | 
  30 | <body id="top">
  31 | 
  32 |   <!-- 
  33 |     - #HEADER
  34 |   -->
  35 | 
  36 |   <header class="header" data-header>
  37 |     <div class="container">
  38 | 
  39 |       <div class="overlay" data-overlay></div>
  40 | 
  41 |       <a href="#" class="logo">
  42 |         <img src="./assets/images/logo.svg" width="68" height="48" alt="NFTC Logo">
  43 |       </a>
  44 | 
  45 |       <nav class="navbar" data-navbar>
  46 | 
  47 |         <div class="navbar-top">
  48 |           <p class="navbar-title">Menu</p>
  49 | 
  50 |           <button class="nav-close-btn" aria-label="Close Menu" data-nav-close-btn>
  51 |             <ion-icon name="close-circle-outline"></ion-icon>
  52 |           </button>
  53 |         </div>
  54 | 
  55 |         <ul class="navbar-list">
  56 | 
  57 |           <li>
  58 |             <a href="#home" class="navbar-link" data-navlink>Home</a>
  59 |           </li>
  60 | 
  61 |           <li>
  62 |             <a href="#explore" class="navbar-link" data-navlink>Explore</a>
  63 |           </li>
  64 | 
  65 |           <li>
  66 |             <a href="#top-seller" class="navbar-link" data-navlink>Top Seller</a>
  67 |           </li>
  68 | 
  69 |           <li>
  70 |             <a href="#collection" class="navbar-link" data-navlink>Collection</a>
  71 |           </li>
  72 | 
  73 |           <li>
  74 |             <a href="#instruction" class="navbar-link" data-navlink>Instruction</a>
  75 |           </li>
  76 | 
  77 |           <li>
  78 |             <a href="#" class="navbar-link" data-navlink>Contact</a>
  79 |           </li>
  80 | 
  81 |         </ul>
  82 | 
  83 |       </nav>
  84 | 
  85 |       <button class="menu-open-btn" aria-label="Open Menu" data-nav-open-btn>
  86 |         <ion-icon name="menu-outline"></ion-icon>
  87 |       </button>
  88 | 
  89 |       <a href="#" class="btn" aria-labelledby="wallet">
  90 |         <ion-icon name="wallet-outline"></ion-icon>
  91 | 
  92 |         <span id="wallet">Wallet Connect</span>
  93 |       </a>
  94 | 
  95 |     </div>
  96 |   </header>
  97 | 
  98 | 
  99 | 
 100 | 
 101 | 
 102 |   <main>
 103 |     <article>
 104 | 
 105 |       <!-- 
 106 |         - #HERO
 107 |       -->
 108 | 
 109 |       <section class="hero" id="home">
 110 | 
 111 |         <div class="container">
 112 | 
 113 |           <p class="section-subtitle">Netstorm</p>
 114 | 
 115 |           <h2 class="h1 hero-title">Discover, collect, and sell extraordinary NFTs</h2>
 116 | 
 117 |           <p class="hero-text">
 118 |             Explore on the world's best & largest NFT marketplace
 119 |           </p>
 120 | 
 121 |           <div class="btn-group">
 122 | 
 123 |             <button class="btn">
 124 |               <ion-icon name="rocket-outline" aria-hidden="true"></ion-icon>
 125 | 
 126 |               <span>Explore</span>
 127 |             </button>
 128 | 
 129 |             <button class="btn">
 130 |               <ion-icon name="create-outline" aria-hidden="true"></ion-icon>
 131 | 
 132 |               <span>Create</span>
 133 |             </button>
 134 | 
 135 |           </div>
 136 | 
 137 |         </div>
 138 | 
 139 |         <svg class="hero-bg-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 465" version="1.1">
 140 |           <defs>
 141 |             <linearGradient x1="49.7965246%" y1="28.2355058%" x2="49.7778147%" y2="98.4657689%" id="linearGradient-1">
 142 |               <stop stop-color="rgba(69,40,220, 0.15)" offset="0%"></stop>
 143 |               <stop stop-color="rgba(87,4,138, 0.15)" offset="100%"></stop>
 144 |             </linearGradient>
 145 |           </defs>
 146 |           <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 147 |             <polygon points="" fill="url(#linearGradient-1)">
 148 |               <animate id="graph-animation" xmlns="http://www.w3.org/2000/svg" dur="2s" repeatCount=""
 149 |                 attributeName="points"
 150 |                 values="0,464 0,464 111.6,464 282.5,464 457.4,464 613.4,464 762.3,464 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,323.3 282.5,373 457.4,423.8 613.4,464 762.3,464 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,336.6 457.4,363.5 613.4,414.4 762.3,464 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,323.3 613.4,340 762.3,425.6 912.3,464 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,290.4 762.3,368 912.3,446.4 1068.2,464 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,329.6 912.3,420 1068.2,427.6 1191.2,464 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,402.4 1068.2,373 1191.2,412 1328.1,464 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,336.6 1191.2,334 1328.1,404 1440.1,464 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,282 1328.1,314 1440.1,372.8 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,204 1328.1,254 1440.1,236 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,204 1328.1,164 1440.1,144.79999999999998 1440.1,464 0,464; 0,464 0,367 111.6,263 282.5,282 457.4,263 613.4,216 762.3,272 912.3,376 1068.2,282 1191.2,204 1328.1,164 1440.1,8 1440.1,464 0,464;"
 151 |                 fill="freeze"></animate>
 152 |             </polygon>
 153 |           </g>
 154 |         </svg>
 155 | 
 156 |       </section>
 157 | 
 158 | 
 159 | 
 160 | 
 161 | 
 162 |       <!-- 
 163 |         - #EXPLORE
 164 |       -->
 165 | 
 166 |       <section class="section explore" id="explore">
 167 |         <div class="container">
 168 | 
 169 |           <p class="section-subtitle">Exclusive Assets</p>
 170 | 
 171 |           <div class="title-wrapper">
 172 |             <h2 class="h2 section-title">Explore</h2>
 173 | 
 174 |             <a href="#" class="btn-link">
 175 |               <span>Explore All</span>
 176 | 
 177 |               <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
 178 |             </a>
 179 |           </div>
 180 | 
 181 |           <ul class="grid-list">
 182 | 
 183 |             <li>
 184 |               <div class="card explore-card">
 185 | 
 186 |                 <figure class="card-banner">
 187 |                   <a href="#">
 188 |                     <img src="./assets/images/auction-1.jpg" width="600" height="600" loading="lazy"
 189 |                       alt="Walking On Air" class="img-cover">
 190 |                   </a>
 191 |                 </figure>
 192 | 
 193 |                 <h3 class="h3 card-title">
 194 |                   <a href="#">Walking On Air</a>
 195 |                 </h3>
 196 | 
 197 |                 <span class="card-author">
 198 |                   Owned By <a href="#" class="author-link">Richard</a>
 199 |                 </span>
 200 | 
 201 |                 <div class="wrapper">
 202 |                   <data class="wrapper-item" value="1.5">1.5 ETH</data>
 203 | 
 204 |                   <span class="wrapper-item">1 of 1</span>
 205 |                 </div>
 206 | 
 207 |                 <button class="btn">
 208 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 209 | 
 210 |                   <span>Place a Bid</span>
 211 |                 </button>
 212 | 
 213 |               </div>
 214 |             </li>
 215 | 
 216 |             <li>
 217 |               <div class="card explore-card">
 218 | 
 219 |                 <figure class="card-banner">
 220 |                   <a href="#">
 221 |                     <img src="./assets/images/auction-2.jpg" width="600" height="600" loading="lazy" alt="Domain Names"
 222 |                       class="img-cover">
 223 |                   </a>
 224 |                 </figure>
 225 | 
 226 |                 <h3 class="h3 card-title">
 227 |                   <a href="#">Domain Names</a>
 228 |                 </h3>
 229 | 
 230 |                 <span class="card-author">
 231 |                   Owned By <a href="#" class="author-link">John Deo</a>
 232 |                 </span>
 233 | 
 234 |                 <div class="wrapper">
 235 |                   <data class="wrapper-item" value="2.7">2.7 ETH</data>
 236 | 
 237 |                   <span class="wrapper-item">1 of 1</span>
 238 |                 </div>
 239 | 
 240 |                 <button class="btn">
 241 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 242 | 
 243 |                   <span>Place a Bid</span>
 244 |                 </button>
 245 | 
 246 |               </div>
 247 |             </li>
 248 | 
 249 |             <li>
 250 |               <div class="card explore-card">
 251 | 
 252 |                 <figure class="card-banner">
 253 |                   <a href="#">
 254 |                     <img src="./assets/images/auction-3.jpg" width="600" height="600" loading="lazy" alt="Trading Cards"
 255 |                       class="img-cover">
 256 |                   </a>
 257 |                 </figure>
 258 | 
 259 |                 <h3 class="h3 card-title">
 260 |                   <a href="#">Trading Cards</a>
 261 |                 </h3>
 262 | 
 263 |                 <span class="card-author">
 264 |                   Owned By <a href="#" class="author-link">Arham</a>
 265 |                 </span>
 266 | 
 267 |                 <div class="wrapper">
 268 |                   <data class="wrapper-item" value="2.3">2.3 ETH</data>
 269 | 
 270 |                   <span class="wrapper-item">1 of 1</span>
 271 |                 </div>
 272 | 
 273 |                 <button class="btn">
 274 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 275 | 
 276 |                   <span>Place a Bid</span>
 277 |                 </button>
 278 | 
 279 |               </div>
 280 |             </li>
 281 | 
 282 |             <li>
 283 |               <div class="card explore-card">
 284 | 
 285 |                 <figure class="card-banner">
 286 |                   <a href="#">
 287 |                     <img src="./assets/images/auction-4.jpg" width="600" height="600" loading="lazy"
 288 |                       alt="Industrial Revolution" class="img-cover">
 289 |                   </a>
 290 |                 </figure>
 291 | 
 292 |                 <h3 class="h3 card-title">
 293 |                   <a href="#">Industrial Revolution</a>
 294 |                 </h3>
 295 | 
 296 |                 <span class="card-author">
 297 |                   Owned By <a href="#" class="author-link">Yasmin</a>
 298 |                 </span>
 299 | 
 300 |                 <div class="wrapper">
 301 |                   <data class="wrapper-item" value="1.8">1.8 ETH</data>
 302 | 
 303 |                   <span class="wrapper-item">1 of 1</span>
 304 |                 </div>
 305 | 
 306 |                 <button class="btn">
 307 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 308 | 
 309 |                   <span>Place a Bid</span>
 310 |                 </button>
 311 | 
 312 |               </div>
 313 |             </li>
 314 | 
 315 |             <li>
 316 |               <div class="card explore-card">
 317 | 
 318 |                 <figure class="card-banner">
 319 |                   <a href="#">
 320 |                     <img src="./assets/images/auction-5.jpg" width="600" height="600" loading="lazy" alt="Utility"
 321 |                       class="img-cover">
 322 |                   </a>
 323 |                 </figure>
 324 | 
 325 |                 <h3 class="h3 card-title">
 326 |                   <a href="#">Utility</a>
 327 |                 </h3>
 328 | 
 329 |                 <span class="card-author">
 330 |                   Owned By <a href="#" class="author-link">Junaid</a>
 331 |                 </span>
 332 | 
 333 |                 <div class="wrapper">
 334 |                   <data class="wrapper-item" value="1.7">1.7 ETH</data>
 335 | 
 336 |                   <span class="wrapper-item">1 of 1</span>
 337 |                 </div>
 338 | 
 339 |                 <button class="btn">
 340 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 341 | 
 342 |                   <span>Place a Bid</span>
 343 |                 </button>
 344 | 
 345 |               </div>
 346 |             </li>
 347 | 
 348 |             <li>
 349 |               <div class="card explore-card">
 350 | 
 351 |                 <figure class="card-banner">
 352 |                   <a href="#">
 353 |                     <img src="./assets/images/auction-6.jpg" width="600" height="600" loading="lazy" alt="Sports"
 354 |                       class="img-cover">
 355 |                   </a>
 356 |                 </figure>
 357 | 
 358 |                 <h3 class="h3 card-title">
 359 |                   <a href="#">Sports</a>
 360 |                 </h3>
 361 | 
 362 |                 <span class="card-author">
 363 |                   Owned By <a href="#" class="author-link">ArtNox</a>
 364 |                 </span>
 365 | 
 366 |                 <div class="wrapper">
 367 |                   <data class="wrapper-item" value="1.7">1.7 ETH</data>
 368 | 
 369 |                   <span class="wrapper-item">1 of 1</span>
 370 |                 </div>
 371 | 
 372 |                 <button class="btn">
 373 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 374 | 
 375 |                   <span>Place a Bid</span>
 376 |                 </button>
 377 | 
 378 |               </div>
 379 |             </li>
 380 | 
 381 |             <li>
 382 |               <div class="card explore-card">
 383 | 
 384 |                 <figure class="card-banner">
 385 |                   <a href="#">
 386 |                     <img src="./assets/images/auction-7.jpg" width="600" height="600" loading="lazy"
 387 |                       alt="Cartoon Heroes" class="img-cover">
 388 |                   </a>
 389 |                 </figure>
 390 | 
 391 |                 <h3 class="h3 card-title">
 392 |                   <a href="#">Cartoon Heroes</a>
 393 |                 </h3>
 394 | 
 395 |                 <span class="card-author">
 396 |                   Owned By <a href="#" class="author-link">Junaid</a>
 397 |                 </span>
 398 | 
 399 |                 <div class="wrapper">
 400 |                   <data class="wrapper-item" value="3.2">3.2 ETH</data>
 401 | 
 402 |                   <span class="wrapper-item">1 of 1</span>
 403 |                 </div>
 404 | 
 405 |                 <button class="btn">
 406 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 407 | 
 408 |                   <span>Place a Bid</span>
 409 |                 </button>
 410 | 
 411 |               </div>
 412 |             </li>
 413 | 
 414 |             <li>
 415 |               <div class="card explore-card">
 416 | 
 417 |                 <figure class="card-banner">
 418 |                   <a href="#">
 419 |                     <img src="./assets/images/auction-8.jpg" width="600" height="600" loading="lazy" alt="Gaming Chair"
 420 |                       class="img-cover">
 421 |                   </a>
 422 |                 </figure>
 423 | 
 424 |                 <h3 class="h3 card-title">
 425 |                   <a href="#">Gaming Chair</a>
 426 |                 </h3>
 427 | 
 428 |                 <span class="card-author">
 429 |                   Owned By <a href="#" class="author-link">Johnson</a>
 430 |                 </span>
 431 | 
 432 |                 <div class="wrapper">
 433 |                   <data class="wrapper-item" value="0.69">0.69 ETH</data>
 434 | 
 435 |                   <span class="wrapper-item">1 of 1</span>
 436 |                 </div>
 437 | 
 438 |                 <button class="btn">
 439 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 440 | 
 441 |                   <span>Place a Bid</span>
 442 |                 </button>
 443 | 
 444 |               </div>
 445 |             </li>
 446 | 
 447 |             <li>
 448 |               <div class="card explore-card">
 449 | 
 450 |                 <figure class="card-banner">
 451 |                   <a href="#">
 452 |                     <img src="./assets/images/auction-9.jpg" width="600" height="600" loading="lazy" alt="Utility"
 453 |                       class="img-cover">
 454 |                   </a>
 455 |                 </figure>
 456 | 
 457 |                 <h3 class="h3 card-title">
 458 |                   <a href="#">Utility</a>
 459 |                 </h3>
 460 | 
 461 |                 <span class="card-author">
 462 |                   Owned By <a href="#" class="author-link">Junaid</a>
 463 |                 </span>
 464 | 
 465 |                 <div class="wrapper">
 466 |                   <data class="wrapper-item" value="1.7">1.7 ETH</data>
 467 | 
 468 |                   <span class="wrapper-item">1 of 1</span>
 469 |                 </div>
 470 | 
 471 |                 <button class="btn">
 472 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 473 | 
 474 |                   <span>Place a Bid</span>
 475 |                 </button>
 476 | 
 477 |               </div>
 478 |             </li>
 479 | 
 480 |             <li>
 481 |               <div class="card explore-card">
 482 | 
 483 |                 <figure class="card-banner">
 484 |                   <a href="#">
 485 |                     <img src="./assets/images/auction-10.jpg" width="600" height="600" loading="lazy" alt="Sports"
 486 |                       class="img-cover">
 487 |                   </a>
 488 |                 </figure>
 489 | 
 490 |                 <h3 class="h3 card-title">
 491 |                   <a href="#">Sports</a>
 492 |                 </h3>
 493 | 
 494 |                 <span class="card-author">
 495 |                   Owned By <a href="#" class="author-link">ArtNox</a>
 496 |                 </span>
 497 | 
 498 |                 <div class="wrapper">
 499 |                   <data class="wrapper-item" value="1.7">1.7 ETH</data>
 500 | 
 501 |                   <span class="wrapper-item">1 of 1</span>
 502 |                 </div>
 503 | 
 504 |                 <button class="btn">
 505 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 506 | 
 507 |                   <span>Place a Bid</span>
 508 |                 </button>
 509 | 
 510 |               </div>
 511 |             </li>
 512 | 
 513 |             <li>
 514 |               <div class="card explore-card">
 515 | 
 516 |                 <figure class="card-banner">
 517 |                   <a href="#">
 518 |                     <img src="./assets/images/auction-11.jpg" width="600" height="600" loading="lazy"
 519 |                       alt="Cartoon Heroes" class="img-cover">
 520 |                   </a>
 521 |                 </figure>
 522 | 
 523 |                 <h3 class="h3 card-title">
 524 |                   <a href="#">Cartoon Heroes</a>
 525 |                 </h3>
 526 | 
 527 |                 <span class="card-author">
 528 |                   Owned By <a href="#" class="author-link">Junaid</a>
 529 |                 </span>
 530 | 
 531 |                 <div class="wrapper">
 532 |                   <data class="wrapper-item" value="3.2">3.2 ETH</data>
 533 | 
 534 |                   <span class="wrapper-item">1 of 1</span>
 535 |                 </div>
 536 | 
 537 |                 <button class="btn">
 538 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 539 | 
 540 |                   <span>Place a Bid</span>
 541 |                 </button>
 542 | 
 543 |               </div>
 544 |             </li>
 545 | 
 546 |             <li>
 547 |               <div class="card explore-card">
 548 | 
 549 |                 <figure class="card-banner">
 550 |                   <a href="#">
 551 |                     <img src="./assets/images/auction-12.jpg" width="600" height="600" loading="lazy" alt="Gaming Chair"
 552 |                       class="img-cover">
 553 |                   </a>
 554 |                 </figure>
 555 | 
 556 |                 <h3 class="h3 card-title">
 557 |                   <a href="#">Gaming Chair</a>
 558 |                 </h3>
 559 | 
 560 |                 <span class="card-author">
 561 |                   Owned By <a href="#" class="author-link">Johnson</a>
 562 |                 </span>
 563 | 
 564 |                 <div class="wrapper">
 565 |                   <data class="wrapper-item" value="0.69">0.69 ETH</data>
 566 | 
 567 |                   <span class="wrapper-item">1 of 1</span>
 568 |                 </div>
 569 | 
 570 |                 <button class="btn">
 571 |                   <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 572 | 
 573 |                   <span>Place a Bid</span>
 574 |                 </button>
 575 | 
 576 |               </div>
 577 |             </li>
 578 | 
 579 |           </ul>
 580 | 
 581 |         </div>
 582 |       </section>
 583 | 
 584 | 
 585 | 
 586 | 
 587 | 
 588 |       <!-- 
 589 |         - #TOP SELLER
 590 |       -->
 591 | 
 592 |       <section class="section top-seller" id="top-seller">
 593 |         <div class="container">
 594 | 
 595 |           <p class="section-subtitle">Creative Artist</p>
 596 | 
 597 |           <h2 class="h2 section-title">Top Sellers</h2>
 598 | 
 599 |           <ul class="grid-list">
 600 | 
 601 |             <li>
 602 |               <div class="card top-seller-card">
 603 | 
 604 |                 <figure class="card-avatar">
 605 |                   <a href="#">
 606 |                     <img src="./assets/images/avatar-1.jpg" width="64" height="64" loading="lazy" alt="Richard">
 607 |                   </a>
 608 |                 </figure>
 609 | 
 610 |                 <div>
 611 |                   <h3 class="card-title">
 612 |                     <a href="#">@Richard</a>
 613 |                   </h3>
 614 | 
 615 |                   <data value="1.5">1.5 BNB</data>
 616 |                 </div>
 617 | 
 618 |               </div>
 619 |             </li>
 620 | 
 621 |             <li>
 622 |               <div class="card top-seller-card">
 623 | 
 624 |                 <figure class="card-avatar">
 625 |                   <a href="#">
 626 |                     <img src="./assets/images/avatar-2.jpg" width="64" height="64" loading="lazy" alt="John Deo">
 627 |                   </a>
 628 |                 </figure>
 629 | 
 630 |                 <div>
 631 |                   <h3 class="card-title">
 632 |                     <a href="#">@JohnDeo</a>
 633 |                   </h3>
 634 | 
 635 |                   <data value="2.3">2.3 BNB</data>
 636 |                 </div>
 637 | 
 638 |               </div>
 639 |             </li>
 640 | 
 641 |             <li>
 642 |               <div class="card top-seller-card">
 643 | 
 644 |                 <figure class="card-avatar">
 645 |                   <a href="#">
 646 |                     <img src="./assets/images/avatar-3.jpg" width="64" height="64" loading="lazy" alt="Junaid">
 647 |                   </a>
 648 |                 </figure>
 649 | 
 650 |                 <div>
 651 |                   <h3 class="card-title">
 652 |                     <a href="#">@Junaid</a>
 653 |                   </h3>
 654 | 
 655 |                   <data value="2.5">2.5 BNB</data>
 656 |                 </div>
 657 | 
 658 |               </div>
 659 |             </li>
 660 | 
 661 |             <li>
 662 |               <div class="card top-seller-card">
 663 | 
 664 |                 <figure class="card-avatar">
 665 |                   <a href="#">
 666 |                     <img src="./assets/images/avatar-4.jpg" width="64" height="64" loading="lazy" alt="Yasmin">
 667 |                   </a>
 668 |                 </figure>
 669 | 
 670 |                 <div>
 671 |                   <h3 class="card-title">
 672 |                     <a href="#">@Yasmin</a>
 673 |                   </h3>
 674 | 
 675 |                   <data value="1.9">1.9 BNB</data>
 676 |                 </div>
 677 | 
 678 |               </div>
 679 |             </li>
 680 | 
 681 |             <li>
 682 |               <div class="card top-seller-card">
 683 | 
 684 |                 <figure class="card-avatar">
 685 |                   <a href="#">
 686 |                     <img src="./assets/images/avatar-5.jpg" width="64" height="64" loading="lazy" alt="Arham H">
 687 |                   </a>
 688 |                 </figure>
 689 | 
 690 |                 <div>
 691 |                   <h3 class="card-title">
 692 |                     <a href="#">@ArhamH</a>
 693 |                   </h3>
 694 | 
 695 |                   <data value="3.2">3.2 BNB</data>
 696 |                 </div>
 697 | 
 698 |               </div>
 699 |             </li>
 700 | 
 701 |             <li>
 702 |               <div class="card top-seller-card">
 703 | 
 704 |                 <figure class="card-avatar">
 705 |                   <a href="#">
 706 |                     <img src="./assets/images/avatar-6.jpg" width="64" height="64" loading="lazy" alt="Sara">
 707 |                   </a>
 708 |                 </figure>
 709 | 
 710 |                 <div>
 711 |                   <h3 class="card-title">
 712 |                     <a href="#">@Sara</a>
 713 |                   </h3>
 714 | 
 715 |                   <data value="4.7">4.7 BNB</data>
 716 |                 </div>
 717 | 
 718 |               </div>
 719 |             </li>
 720 | 
 721 |           </ul>
 722 | 
 723 |         </div>
 724 |       </section>
 725 | 
 726 | 
 727 | 
 728 | 
 729 | 
 730 |       <!-- 
 731 |         - #COLLECTION
 732 |       -->
 733 | 
 734 |       <section class="section collection" id="collection">
 735 |         <div class="container">
 736 | 
 737 |           <p class="section-subtitle">Most Popular</p>
 738 | 
 739 |           <div class="title-wrapper">
 740 |             <h2 class="h2 section-title">Popular Collections</h2>
 741 | 
 742 |             <a href="#" class="btn-link">
 743 |               <span>View All</span>
 744 | 
 745 |               <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
 746 |             </a>
 747 |           </div>
 748 | 
 749 |           <ul class="grid-list">
 750 | 
 751 |             <li>
 752 |               <a href="#" class="card collection-card">
 753 | 
 754 |                 <figure class="card-banner">
 755 |                   <img src="./assets/images/author-banner-1.jpg" width="600" height="450" loading="lazy"
 756 |                     alt="Virtual Worlds" class="img-cover">
 757 |                 </figure>
 758 | 
 759 |                 <figure class="card-avatar">
 760 |                   <img src="./assets/images/avatar-1.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 761 |                 </figure>
 762 | 
 763 |                 <h3 class="h3 card-title">Virtual Worlds</h3>
 764 | 
 765 |                 <span class="card-text">ERC-729</span>
 766 | 
 767 |               </a>
 768 |             </li>
 769 | 
 770 |             <li>
 771 |               <a href="#" class="card collection-card">
 772 | 
 773 |                 <figure class="card-banner">
 774 |                   <img src="./assets/images/author-banner-2.jpg" width="600" height="450" loading="lazy"
 775 |                     alt="Digital Arts" class="img-cover">
 776 |                 </figure>
 777 | 
 778 |                 <figure class="card-avatar">
 779 |                   <img src="./assets/images/avatar-2.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 780 |                 </figure>
 781 | 
 782 |                 <h3 class="h3 card-title">Digital Arts</h3>
 783 | 
 784 |                 <span class="card-text">ERC-522</span>
 785 | 
 786 |               </a>
 787 |             </li>
 788 | 
 789 |             <li>
 790 |               <a href="#" class="card collection-card">
 791 | 
 792 |                 <figure class="card-banner">
 793 |                   <img src="./assets/images/author-banner-3.jpg" width="600" height="450" loading="lazy" alt="Sports"
 794 |                     class="img-cover">
 795 |                 </figure>
 796 | 
 797 |                 <figure class="card-avatar">
 798 |                   <img src="./assets/images/avatar-3.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 799 |                 </figure>
 800 | 
 801 |                 <h3 class="h3 card-title">Sports</h3>
 802 | 
 803 |                 <span class="card-text">ERC-495</span>
 804 | 
 805 |               </a>
 806 |             </li>
 807 | 
 808 |             <li>
 809 |               <a href="#" class="card collection-card">
 810 | 
 811 |                 <figure class="card-banner">
 812 |                   <img src="./assets/images/author-banner-4.jpg" width="600" height="450" loading="lazy"
 813 |                     alt="Photography" class="img-cover">
 814 |                 </figure>
 815 | 
 816 |                 <figure class="card-avatar">
 817 |                   <img src="./assets/images/avatar-4.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 818 |                 </figure>
 819 | 
 820 |                 <h3 class="h3 card-title">Photography</h3>
 821 | 
 822 |                 <span class="card-text">ERC-873</span>
 823 | 
 824 |               </a>
 825 |             </li>
 826 | 
 827 |             <li>
 828 |               <a href="#" class="card collection-card">
 829 | 
 830 |                 <figure class="card-banner">
 831 |                   <img src="./assets/images/author-banner-5.jpg" width="600" height="450" loading="lazy"
 832 |                     alt="Collectibles" class="img-cover">
 833 |                 </figure>
 834 | 
 835 |                 <figure class="card-avatar">
 836 |                   <img src="./assets/images/avatar-5.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 837 |                 </figure>
 838 | 
 839 |                 <h3 class="h3 card-title">Collectibles</h3>
 840 | 
 841 |                 <span class="card-text">ERC-972</span>
 842 | 
 843 |               </a>
 844 |             </li>
 845 | 
 846 |             <li>
 847 |               <a href="#" class="card collection-card">
 848 | 
 849 |                 <figure class="card-banner">
 850 |                   <img src="./assets/images/author-banner-6.jpg" width="600" height="450" loading="lazy"
 851 |                     alt="Trading Cards" class="img-cover">
 852 |                 </figure>
 853 | 
 854 |                 <figure class="card-avatar">
 855 |                   <img src="./assets/images/avatar-6.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 856 |                 </figure>
 857 | 
 858 |                 <h3 class="h3 card-title">Trading Cards</h3>
 859 | 
 860 |                 <span class="card-text">ERC-397</span>
 861 | 
 862 |               </a>
 863 |             </li>
 864 | 
 865 |             <li>
 866 |               <a href="#" class="card collection-card">
 867 | 
 868 |                 <figure class="card-banner">
 869 |                   <img src="./assets/images/author-banner-7.jpg" width="600" height="450" loading="lazy"
 870 |                     alt="Walking On Air" class="img-cover">
 871 |                 </figure>
 872 | 
 873 |                 <figure class="card-avatar">
 874 |                   <img src="./assets/images/avatar-7.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 875 |                 </figure>
 876 | 
 877 |                 <h3 class="h3 card-title">Walking On Air</h3>
 878 | 
 879 |                 <span class="card-text">ERC-403</span>
 880 | 
 881 |               </a>
 882 |             </li>
 883 | 
 884 |             <li>
 885 |               <a href="#" class="card collection-card">
 886 | 
 887 |                 <figure class="card-banner">
 888 |                   <img src="./assets/images/author-banner-8.jpg" width="600" height="450" loading="lazy"
 889 |                     alt="Domain Names" class="img-cover">
 890 |                 </figure>
 891 | 
 892 |                 <figure class="card-avatar">
 893 |                   <img src="./assets/images/avatar-8.jpg" width="64" height="64" loading="lazy" alt="card avatar">
 894 |                 </figure>
 895 | 
 896 |                 <h3 class="h3 card-title">Domain Names</h3>
 897 | 
 898 |                 <span class="card-text">ERC-687</span>
 899 | 
 900 |               </a>
 901 |             </li>
 902 | 
 903 |           </ul>
 904 | 
 905 |         </div>
 906 |       </section>
 907 | 
 908 | 
 909 | 
 910 | 
 911 | 
 912 |       <!-- 
 913 |         - #INSTRUCTION
 914 |       -->
 915 | 
 916 |       <section class="section instruction" id="instruction">
 917 |         <div class="container">
 918 | 
 919 |           <p class="section-subtitle">How It Works</p>
 920 | 
 921 |           <h2 class="h2 section-title">Create and sell your NFTs</h2>
 922 | 
 923 |           <ul class="grid-list">
 924 | 
 925 |             <li class="instruction-item">
 926 | 
 927 |               <div class="instruction-icon">
 928 |                 <ion-icon name="wallet-outline"></ion-icon>
 929 |               </div>
 930 | 
 931 |               <h3 class="instruction-title">Set up your wallet</h3>
 932 | 
 933 |               <p class="instruction-text">
 934 |                 Once you’ve set up your wallet of choice, connect it to OpenSea by clicking the NFT Marketplace in the
 935 |                 top right corner.
 936 |                 Learn about the wallets we support.
 937 |               </p>
 938 | 
 939 |             </li>
 940 | 
 941 |             <li class="instruction-item">
 942 | 
 943 |               <div class="instruction-icon">
 944 |                 <ion-icon name="grid-outline"></ion-icon>
 945 |               </div>
 946 | 
 947 |               <h3 class="instruction-title">Create your collection</h3>
 948 | 
 949 |               <p class="instruction-text">
 950 |                 Click Create and set up your collection. Add social links, a description, profile & banner images, and
 951 |                 set a secondary
 952 |                 sales fee.
 953 |               </p>
 954 | 
 955 |             </li>
 956 | 
 957 |             <li class="instruction-item">
 958 | 
 959 |               <div class="instruction-icon">
 960 |                 <ion-icon name="file-tray-outline"></ion-icon>
 961 |               </div>
 962 | 
 963 |               <h3 class="instruction-title">Add your NFTs</h3>
 964 | 
 965 |               <p class="instruction-text">
 966 |                 Upload your work (image, video, audio, or 3D art), add a title and description, and customize your NFTs
 967 |                 with properties,
 968 |                 stats, and unlockable content.
 969 |               </p>
 970 | 
 971 |             </li>
 972 | 
 973 |             <li class="instruction-item">
 974 | 
 975 |               <div class="instruction-icon">
 976 |                 <ion-icon name="bag-handle-outline"></ion-icon>
 977 |               </div>
 978 | 
 979 |               <h3 class="instruction-title">List them for sale</h3>
 980 | 
 981 |               <p class="instruction-text">
 982 |                 Choose between auctions, fixed-price listings, and declining-price listings. You choose how you want to
 983 |                 sell your NFTs!
 984 |               </p>
 985 | 
 986 |             </li>
 987 | 
 988 |           </ul>
 989 | 
 990 |         </div>
 991 |       </section>
 992 | 
 993 |     </article>
 994 |   </main>
 995 | 
 996 | 
 997 | 
 998 | 
 999 | 
1000 |   <!-- 
1001 |     - #FOOTER
1002 |   -->
1003 | 
1004 |   <footer class="footer">
1005 |     <div class="container">
1006 | 
1007 |       <div class="footer-top">
1008 | 
1009 |         <div class="footer-brand">
1010 | 
1011 |           <a href="#" class="logo">
1012 |             <img src="./assets/images/logo.svg" width="68" height="48" alt="NFTC Logo">
1013 |           </a>
1014 | 
1015 |           <p class="footer-text">
1016 |             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis non, fugit totam vel laboriosam vitae.
1017 |           </p>
1018 | 
1019 |           <ul class="social-list">
1020 | 
1021 |             <li>
1022 |               <a href="#" class="social-link">
1023 |                 <ion-icon name="logo-facebook"></ion-icon>
1024 |                 <ion-icon name="logo-facebook"></ion-icon>
1025 |               </a>
1026 |             </li>
1027 | 
1028 |             <li>
1029 |               <a href="#" class="social-link">
1030 |                 <ion-icon name="logo-twitter"></ion-icon>
1031 |                 <ion-icon name="logo-twitter"></ion-icon>
1032 |               </a>
1033 |             </li>
1034 | 
1035 |             <li>
1036 |               <a href="#" class="social-link">
1037 |                 <ion-icon name="logo-pinterest"></ion-icon>
1038 |                 <ion-icon name="logo-pinterest"></ion-icon>
1039 |               </a>
1040 |             </li>
1041 | 
1042 |             <li>
1043 |               <a href="#" class="social-link">
1044 |                 <ion-icon name="logo-discord"></ion-icon>
1045 |                 <ion-icon name="logo-discord"></ion-icon>
1046 |               </a>
1047 |             </li>
1048 | 
1049 |           </ul>
1050 | 
1051 |         </div>
1052 | 
1053 |         <ul class="footer-list">
1054 | 
1055 |           <li>
1056 |             <p class="footer-list-title">Useful Links</p>
1057 |           </li>
1058 | 
1059 |           <li>
1060 |             <a href="#" class="footer-link">All NFTs</a>
1061 |           </li>
1062 | 
1063 |           <li>
1064 |             <a href="#" class="footer-link">How It Works</a>
1065 |           </li>
1066 | 
1067 |           <li>
1068 |             <a href="#" class="footer-link">Create</a>
1069 |           </li>
1070 | 
1071 |           <li>
1072 |             <a href="#" class="footer-link">Explore</a>
1073 |           </li>
1074 | 
1075 |           <li>
1076 |             <a href="#" class="footer-link">Privacy & Terms</a>
1077 |           </li>
1078 | 
1079 |         </ul>
1080 | 
1081 |         <ul class="footer-list">
1082 | 
1083 |           <li>
1084 |             <p class="footer-list-title">Community</p>
1085 |           </li>
1086 | 
1087 |           <li>
1088 |             <a href="#" class="footer-link">Help Center</a>
1089 |           </li>
1090 | 
1091 |           <li>
1092 |             <a href="#" class="footer-link">Partners</a>
1093 |           </li>
1094 | 
1095 |           <li>
1096 |             <a href="#" class="footer-link">Suggestions</a>
1097 |           </li>
1098 | 
1099 |           <li>
1100 |             <a href="#" class="footer-link">Blog</a>
1101 |           </li>
1102 | 
1103 |           <li>
1104 |             <a href="#" class="footer-link">Newsletter</a>
1105 |           </li>
1106 | 
1107 |         </ul>
1108 | 
1109 |         <div class="footer-list">
1110 | 
1111 |           <p class="footer-list-title">Subscribe Us</p>
1112 | 
1113 |           <form action="" class="newsletter-form">
1114 |             <input type="email" name="email" placeholder="info@yourmail.com" required class="newsletter-input">
1115 | 
1116 |             <button type="submit" class="newsletter-btn" aria-label="Submit">
1117 |               <ion-icon name="paper-plane-outline"></ion-icon>
1118 |             </button>
1119 |           </form>
1120 | 
1121 |         </div>
1122 | 
1123 |       </div>
1124 | 
1125 |       <div class="footer-bottom">
1126 |         <p class="copyright">
1127 |           &copy; 2022 <a href="#" class="copyright-link">codewithsadee</a>. All Rights Reserved
1128 |         </p>
1129 |       </div>
1130 | 
1131 |     </div>
1132 |   </footer>
1133 | 
1134 | 
1135 | 
1136 | 
1137 | 
1138 |   <!-- 
1139 |     - #BACK TO TOP
1140 |   -->
1141 | 
1142 |   <a href="#top" class="back-to-top" aria-label="Back to Top" data-back-top-btn>
1143 |     <ion-icon name="arrow-up-outline"></ion-icon>
1144 |   </a>
1145 | 
1146 | 
1147 | 
1148 | 
1149 | 
1150 |   <!-- 
1151 |     - custom js link
1152 |   -->
1153 |   <script src="./assets/js/script.js"></script>
1154 | 
1155 |   <!-- 
1156 |     - ionicon link
1157 |   -->
1158 |   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
1159 |   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
1160 | 
1161 | </body>
1162 | 
1163 | </html>


--------------------------------------------------------------------------------
/index.txt:
--------------------------------------------------------------------------------
  1 | NFTC - Explore world's best NFT
  2 | 
  3 | 
  4 | 
  5 | #---------- HEADER ----------#
  6 | 
  7 | alt = NFTC Logo
  8 | 
  9 | Menu
 10 | 
 11 | aria-label = Close Menu
 12 | <ion-icon name="close-circle-outline"></ion-icon>
 13 | 
 14 | Home
 15 | Explore
 16 | Top Seller
 17 | Collection
 18 | Instruction
 19 | Contact
 20 | 
 21 | aria-label = Open Menu
 22 | <ion-icon name="menu-outline"></ion-icon>
 23 | 
 24 | <ion-icon name="wallet-outline"></ion-icon>
 25 | Wallet Connect
 26 | 
 27 | 
 28 | 
 29 | 
 30 | #---------- HERO ----------#
 31 | 
 32 | Netstorm
 33 | 
 34 | Discover, collect, and sell extraordinary NFTs
 35 | 
 36 | Explore on the world's best & largest NFT marketplace
 37 | 
 38 | <ion-icon name="rocket-outline" aria-hidden="true"></ion-icon>
 39 | Explore
 40 | 
 41 | <ion-icon name="create-outline" aria-hidden="true"></ion-icon>
 42 | Create
 43 | 
 44 | 
 45 | 
 46 | 
 47 | #---------- EXPLORE ----------#
 48 | 
 49 | Exclusive Assets
 50 | 
 51 | Explore
 52 | 
 53 | Explore All
 54 | <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
 55 | 
 56 | alt = Walking On Air
 57 | Walking On Air
 58 | 
 59 | Owned By
 60 | Richard
 61 | 
 62 | 1.5 ETH
 63 | 1 of 1
 64 | 
 65 | <ion-icon name="bag-add-outline" aria-hidden="true"></ion-icon>
 66 | Place a Bid
 67 | 
 68 | Domain Names
 69 | 
 70 | John Deo
 71 | 2.7
 72 | 
 73 | Trading Cards
 74 | 
 75 | Arham
 76 | 2.3
 77 | 
 78 | Industrial Revolution
 79 | 
 80 | Yasmin
 81 | 1.8
 82 | 
 83 | Utility
 84 | 
 85 | Junaid
 86 | 1.7
 87 | 
 88 | Sports
 89 | 
 90 | ArtNox
 91 | 1.7
 92 | 
 93 | Cartoon Heroes
 94 | 
 95 | Junaid
 96 | 3.2
 97 | 
 98 | Gaming Chair
 99 | 
100 | Johnson
101 | 0.69
102 | 
103 | Utility
104 | 
105 | Junaid
106 | 1.7
107 | 
108 | Sports
109 | 
110 | ArtNox
111 | 1.7
112 | 
113 | Cartoon Heroes
114 | 
115 | Junaid
116 | 3.2
117 | 
118 | Gaming Chair
119 | 
120 | Johnson
121 | 0.69
122 | 
123 | 
124 | 
125 | 
126 | #---------- EXPLORE ----------#
127 | 
128 | Creative Artist
129 | 
130 | Top Sellers
131 | 
132 | alt = Richard
133 | 
134 | @Richard
135 | 1.5 BNB
136 | 
137 | @JohnDeo
138 | 2.3 BNB
139 | 
140 | @Junaid
141 | 2.5 BNB
142 | 
143 | @Yasmin
144 | 1.9 BNB
145 | 
146 | @ArhamH
147 | 3.2 BNB
148 | 
149 | @Sara
150 | 4.7 BNB
151 | 
152 | 
153 | 
154 | 
155 | #---------- COLLECTION ----------#
156 | 
157 | Most Popular
158 | 
159 | Popular Collections
160 | 
161 | View All
162 | <ion-icon name="arrow-forward-outline" aria-hidden="true"></ion-icon>
163 | 
164 | alt = Virtual Worlds
165 | 
166 | alt = card avatar
167 | 
168 | Virtual Worlds
169 | ERC-729
170 | 
171 | 
172 | Digital Arts
173 | ERC-522
174 | 
175 | 
176 | Sports
177 | ERC-495
178 | 
179 | 
180 | Photography
181 | ERC-873
182 | 
183 | 
184 | Collectibles
185 | ERC-972
186 | 
187 | 
188 | Trading Cards
189 | ERC-397
190 | 
191 | 
192 | Walking On Air
193 | ERC-403
194 | 
195 | 
196 | Domain Names
197 | ERC-687
198 | 
199 | 
200 | 
201 | 
202 | #---------- INSTRUCTION ----------#
203 | 
204 | How It Works
205 | 
206 | Create and sell your NFTs
207 | 
208 | <ion-icon name="wallet-outline"></ion-icon>
209 | 
210 | Set up your wallet
211 | 
212 | Once you’ve set up your wallet of choice, connect it to OpenSea by clicking the NFT Marketplace in the top right corner. Learn about the wallets we support.
213 | 
214 | <ion-icon name="grid-outline"></ion-icon>
215 | 
216 | Create your collection
217 | 
218 | Click Create and set up your collection. Add social links, a description, profile & banner images, and set a secondary sales fee.
219 | 
220 | <ion-icon name="file-tray-outline"></ion-icon>
221 | 
222 | Add your NFTs
223 | 
224 | Upload your work (image, video, audio, or 3D art), add a title and description, and customize your NFTs with properties, stats, and unlockable content.
225 | 
226 | <ion-icon name="bag-handle-outline"></ion-icon>
227 | 
228 | List them for sale
229 | 
230 | Choose between auctions, fixed-price listings, and declining-price listings. You choose how you want to sell your NFTs!
231 | 
232 | 
233 | 
234 | 
235 | #---------- FOOTER ----------#
236 | 
237 | alt = NFTC Logo
238 | 
239 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis non, fugit totam vel laboriosam vitae.
240 | 
241 | <ion-icon name="logo-facebook"></ion-icon>
242 | <ion-icon name="logo-twitter"></ion-icon>
243 | <ion-icon name="logo-pinterest"></ion-icon>
244 | <ion-icon name="logo-discord"></ion-icon>
245 | 
246 | Useful Links
247 | 
248 | All NFTs
249 | How It Works
250 | Create
251 | Explore
252 | Privacy & Terms
253 | 
254 | Community
255 | 
256 | Help Center
257 | Partners
258 | Suggestions
259 | Blog
260 | Newsletter
261 | 
262 | Subscribe Us
263 | 
264 | placeholder = info@yourmail.com
265 | 
266 | aria-label = Submit
267 | <ion-icon name="paper-plane-outline"></ion-icon>
268 | 
269 | &copy; 2022 codewithsadee. All Rights Reserved
270 | 
271 | 
272 | 
273 | 
274 | #---------- BACK TO TOP ----------#
275 | 
276 | aria-label = Back to Top
277 | <ion-icon name="arrow-up-outline"></ion-icon>


--------------------------------------------------------------------------------
/readme-images/desktop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithsadee/nftc/2efd8ac179fbc02234b087e0f4342bffbf1e8cea/readme-images/desktop.png


--------------------------------------------------------------------------------
/style-guide.md:
--------------------------------------------------------------------------------
 1 | # Essential Stuff
 2 | 
 3 | ## Html import links
 4 | 
 5 | Google font
 6 | 
 7 | ``` html
 8 | <link rel="preconnect" href="https://fonts.googleapis.com">
 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 | <link
11 |   href="https://fonts.googleapis.com/css2?family=Jost:wght@600;900&family=Poppins:wght@400;500;600;700&display=swap"
12 |   rel="stylesheet">
13 | ```
14 | 
15 | Ionicon
16 | 
17 | ``` html
18 | <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
19 | <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
20 | ```
21 | 
22 | ---
23 | 
24 | ## Colors
25 | 
26 | ``` css
27 | --rich-black-fogra-39: hsl(252, 24%, 4%);
28 | --spanish-gray: hsl(0, 0%, 56%);
29 | --eerie-black-1: hsl(252, 11%, 9%);
30 | --eerie-black-2: hsl(0, 0%, 13%);
31 | --raisin-black: hsl(249, 9%, 15%);
32 | --han-purple: hsl(250, 72%, 51%);
33 | --gainsboro: hsl(0, 0%, 88%);
34 | --cultured: hsl(0, 0%, 98%);
35 | --white_20: hsla(217, 15%, 70%, 0.3);
36 | --xiketic: hsl(250, 15%, 8%);
37 | --indigo: hsl(277, 94%, 28%);
38 | --white: hsl(0, 0%, 100%);
39 | --black: hsl(0, 0%, 0%);
40 | 
41 | --gradient-1: linear-gradient(150deg, var(--indigo) 0%, var(--han-purple) 78%);
42 | ```
43 | 
44 | ## Typography
45 | 
46 | ``` css
47 | --ff-poppins: 'Poppins', sans-serif;
48 | --ff-jost: 'Jost', sans-serif;
49 | 
50 | --fs-1: 4.8rem;
51 | --fs-2: 3.2rem;
52 | --fs-3: 2.4rem;
53 | --fs-4: 1.9rem;
54 | --fs-5: 1.4rem;
55 | 
56 | --fw-500: 500;
57 | --fw-600: 600;
58 | --fw-700: 700;
59 | --fw-900: 900;
60 | ```
61 | 
62 | ## Border Radius
63 | 
64 | ``` css
65 | --radius-4: 4px;
66 | --radius-6: 6px;
67 | --radius-8: 8px;
68 | ```
69 | 
70 | ## Spacing
71 | 
72 | ``` css
73 | --section-padding: 90px;
74 | ```
75 | 
76 | ## Shadow
77 | 
78 | ``` css
79 | --shadow-1: 0 2px 2px var(--black);
80 | --shadow-2: 0px 2px 4px var(--black);
81 | ```
82 | 
83 | ## Transition
84 | 
85 | ``` css
86 | --transition-1: 0.05s ease;
87 | --transition-2: 0.25s ease;
88 | --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
89 | --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02);
90 | ```
91 | 


--------------------------------------------------------------------------------