├── favicon.ico
├── assets
    └── images
    │   ├── logo.png
    │   ├── user.png
    │   ├── item-bg-1.jpg
    │   ├── item-bg-2.jpg
    │   ├── item-bg-3.jpg
    │   ├── item-bg-4.jpg
    │   ├── seller-01.png
    │   ├── seller-02.png
    │   ├── seller-03.png
    │   ├── seller-04.png
    │   ├── seller-05.png
    │   ├── seller-06.png
    │   ├── seller-07.png
    │   ├── seller-08.png
    │   ├── hero-banner.jpg
    │   ├── new-item-1.jpg
    │   ├── new-item-2.jpg
    │   ├── new-item-3.jpg
    │   ├── new-item-4.jpg
    │   ├── bidding-user.png
    │   ├── explore-product-1.jpg
    │   ├── explore-product-2.jpg
    │   ├── explore-product-3.jpg
    │   ├── explore-product-4.jpg
    │   ├── explore-product-5.jpg
    │   ├── explore-product-6.jpg
    │   ├── explore-product-7.jpg
    │   ├── explore-product-8.jpg
    │   ├── single-create-sell-item-1.png
    │   ├── single-create-sell-item-2.png
    │   ├── single-create-sell-item-3.png
    │   └── single-create-sell-item-4.png
├── script.js
├── style.css
└── index.html


/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/favicon.ico


--------------------------------------------------------------------------------
/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/logo.png


--------------------------------------------------------------------------------
/assets/images/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/user.png


--------------------------------------------------------------------------------
/assets/images/item-bg-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/item-bg-1.jpg


--------------------------------------------------------------------------------
/assets/images/item-bg-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/item-bg-2.jpg


--------------------------------------------------------------------------------
/assets/images/item-bg-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/item-bg-3.jpg


--------------------------------------------------------------------------------
/assets/images/item-bg-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/item-bg-4.jpg


--------------------------------------------------------------------------------
/assets/images/seller-01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-01.png


--------------------------------------------------------------------------------
/assets/images/seller-02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-02.png


--------------------------------------------------------------------------------
/assets/images/seller-03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-03.png


--------------------------------------------------------------------------------
/assets/images/seller-04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-04.png


--------------------------------------------------------------------------------
/assets/images/seller-05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-05.png


--------------------------------------------------------------------------------
/assets/images/seller-06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-06.png


--------------------------------------------------------------------------------
/assets/images/seller-07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-07.png


--------------------------------------------------------------------------------
/assets/images/seller-08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/seller-08.png


--------------------------------------------------------------------------------
/assets/images/hero-banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/hero-banner.jpg


--------------------------------------------------------------------------------
/assets/images/new-item-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/new-item-1.jpg


--------------------------------------------------------------------------------
/assets/images/new-item-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/new-item-2.jpg


--------------------------------------------------------------------------------
/assets/images/new-item-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/new-item-3.jpg


--------------------------------------------------------------------------------
/assets/images/new-item-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/new-item-4.jpg


--------------------------------------------------------------------------------
/assets/images/bidding-user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/bidding-user.png


--------------------------------------------------------------------------------
/assets/images/explore-product-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-1.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-2.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-3.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-4.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-5.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-6.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-7.jpg


--------------------------------------------------------------------------------
/assets/images/explore-product-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/explore-product-8.jpg


--------------------------------------------------------------------------------
/assets/images/single-create-sell-item-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/single-create-sell-item-1.png


--------------------------------------------------------------------------------
/assets/images/single-create-sell-item-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/single-create-sell-item-2.png


--------------------------------------------------------------------------------
/assets/images/single-create-sell-item-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/single-create-sell-item-3.png


--------------------------------------------------------------------------------
/assets/images/single-create-sell-item-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Aestheticsuraj234/nft-marketplace/HEAD/assets/images/single-create-sell-item-4.png


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | const Heart_button = document.getElementsByClassName("btn-heart");
 2 | 
 3 | 
 4 | function toggleButton(e){
 5 |     e.classList.toggle("active")
 6 | 
 7 | }
 8 | 
 9 | 
10 | for(let i = 0;i<Heart_button.length;i++)
11 | {
12 |     Heart_button[i].addEventListener("click",function(){
13 |         toggleButton(this);
14 |     })
15 | 
16 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
  2 | 
  3 | * {
  4 |   margin: 0;
  5 |   padding: 0;
  6 |   box-sizing: border-box;
  7 |   font-family: "Poppins", sans-serif;
  8 | }
  9 | 
 10 | ::-webkit-scrollbar {
 11 |   width: 10px;
 12 | }
 13 | 
 14 | ::-webkit-scrollbar-track {
 15 |   background: #050505;
 16 |   border-left: 1px solid #3d3d3d;
 17 | }
 18 | 
 19 | ::-webkit-scrollbar-thumb {
 20 |   background: #d88b2a;
 21 | }
 22 | 
 23 | ::-webkit-scrollbar-thumb:hover {
 24 |   --golden-puppy: hsl(47, 100%, 40%);
 25 | }
 26 | 
 27 | ::-webkit-scrollbar-button {
 28 |   height: 5px;
 29 | }
 30 | 
 31 | body {
 32 |   background-color: #212121;
 33 | }
 34 | 
 35 | /* navbar */
 36 | 
 37 | header {
 38 |   padding: 20px;
 39 |   border-bottom: 1px solid #3d3d3d;
 40 | }
 41 | 
 42 | .nav-container {
 43 |   display: flex;
 44 |   justify-content: space-between;
 45 |   align-items: center;
 46 | }
 47 | 
 48 | .nav-links-container {
 49 |   display: flex;
 50 |   justify-content: space-between;
 51 |   align-items: center;
 52 |   width: 38rem;
 53 | }
 54 | 
 55 | .nav-links {
 56 |   display: flex;
 57 |   justify-content: space-between;
 58 |   align-items: center;
 59 |   list-style: none;
 60 |   flex-direction: row;
 61 |   gap: 20px;
 62 | }
 63 | 
 64 | .navbar-link {
 65 |   text-decoration: none;
 66 |   color: #fff;
 67 |   font-size: 1rem;
 68 |   font-weight: 500;
 69 |   transition: all 0.3s ease;
 70 | }
 71 | 
 72 | .nav-action {
 73 |   display: flex;
 74 |   justify-content: space-between;
 75 |   align-items: center;
 76 |   gap: 20px;
 77 | }
 78 | 
 79 | .search-bar {
 80 |   background-color: #3d3d3d;
 81 |   border: none;
 82 |   outline: none;
 83 |   padding: 14px;
 84 |   width: 15rem;
 85 |   border-radius: 10px;
 86 |   color: #fff;
 87 |   font-size: 1rem;
 88 |   font-weight: 400;
 89 | }
 90 | 
 91 | .btn-primary {
 92 |   background-color: #d88b2a;
 93 |   border: none;
 94 |   outline: none;
 95 |   padding: 14px 24px;
 96 |   border-radius: 10px;
 97 |   color: #fff;
 98 |   font-size: 1rem;
 99 |   font-weight: 400;
100 |   cursor: pointer;
101 |   transition: all 0.3s ease;
102 | }
103 | 
104 | /* hero section */
105 | .hero-section {
106 |   display: flex;
107 |   justify-content: space-between;
108 |   align-items: center;
109 |   padding: 50px;
110 |   width: 100%;
111 |   height: 100vh;
112 | }
113 | 
114 | .left-sub-section {
115 |   display: flex;
116 |   /* for adding direction in flexbox */
117 |   flex-direction: column;
118 |   justify-content: center;
119 |   align-items: flex-start;
120 | }
121 | 
122 | .left-hero-title {
123 |   color: white;
124 |   font-size: 2.5rem;
125 |   font-weight: 600;
126 |   text-transform: capitalize;
127 | }
128 | 
129 | .left-hero-desc {
130 |   color: #c7bcbc;
131 |   font-size: 1rem;
132 |   font-weight: 400;
133 |   margin: 20px 0;
134 | }
135 | 
136 | .btn-group {
137 |   display: flex;
138 |   justify-content: center;
139 |   align-items: center;
140 |   gap: 20px;
141 | }
142 | 
143 | .btn-secondary {
144 |   background-color: #3d3d3d;
145 |   border: 1px solid #d88b2a;
146 |   outline: none;
147 |   padding: 14px 24px;
148 |   border-radius: 10px;
149 |   color: #fff;
150 |   font-size: 1rem;
151 |   font-weight: 400;
152 |   cursor: pointer;
153 |   transition: all 0.3s ease;
154 | }
155 | 
156 | .right-sub-section {
157 |   margin-left: 40px;
158 | }
159 | 
160 | .img-container {
161 |   border-radius: 100%;
162 |   overflow: hidden;
163 |   border: 25px solid #3d3d3d;
164 | }
165 | 
166 | /** Newest Item */
167 | 
168 | .newest-section{
169 |   padding: 50px;
170 |   width: 100%;
171 |   height: auto;
172 |   background-color: #050505;
173 | }
174 | 
175 | .upper-section{
176 |   display: flex;
177 |   justify-content: space-between;
178 |   align-items: center;
179 |   width: 100%;
180 | }
181 | 
182 | .upper-section-title{
183 |   color:white;
184 |   font-size: 2rem;
185 | 
186 | }
187 | 
188 | .lower-section{
189 |   margin-top: 60px;
190 | 
191 | }
192 | 
193 | .lower-section-ul{
194 |   display: grid;
195 |   grid-template-columns: repeat(4,1fr);
196 |   gap: 25px;
197 | 
198 | }
199 | 
200 | .card-item{
201 |   list-style: none;
202 | }
203 | 
204 | .card-container{
205 |   background-color: #262626;
206 |   padding: 18px;
207 |   border-radius: 10px;
208 |   border:1px solid #3d3d3d;
209 | }
210 | 
211 | 
212 | .card-banner-container{
213 |   position: relative;
214 |   overflow: hidden;
215 |   border-radius: 10px;
216 |   height: 210px;
217 |   margin-bottom: 20px;
218 | }
219 | 
220 | .card-banner-container img{
221 |   height:100%;
222 |   width: 100%;
223 |   object-fit: cover;
224 | }
225 | .card-banner-action{
226 |   position: absolute;
227 |   top:10px;
228 |   right:20px;
229 |   left: 10px;
230 |   display: flex;
231 |   justify-content: space-between;
232 |   align-items: center;
233 | }
234 | 
235 | .btn-menu-bar{
236 |   background-color: #d88b2a;
237 |   border: none;
238 |   outline: none;
239 |   height:25px;
240 |   width:25px;
241 |   border-radius: 50%;
242 |   display: flex;
243 |   align-items: center;
244 |   justify-content: center;
245 | }
246 | 
247 | .btn-heart{
248 |   background-color: #3d3d3d;
249 |   border: none;
250 |   outline: none;
251 |   height:25px;
252 |   width:25px;
253 |   border-radius: 50%;
254 |   display: flex;
255 |   align-items: center;
256 |   justify-content: center;
257 |   color: #eeeaea;
258 |   cursor: pointer;
259 | }
260 | 
261 | .btn-heart.active{
262 |   color:#ed3030;
263 | }
264 | 
265 | .card-content{
266 |   display: flex;
267 |   justify-content: space-between;
268 |   align-items: center;
269 |   flex-direction: column;
270 | }
271 | 
272 | .card-title{
273 |   color:white;
274 |   font-size: 17px;
275 |   font-weight: 500;
276 | }
277 | 
278 | 
279 | .user-data-container{
280 |   display: flex;
281 |   justify-content: space-between;
282 |   align-items: center;
283 |   width: 100%;
284 | }
285 | 
286 | .left-container{
287 |   display: flex;
288 |   justify-content: center;
289 |   align-items: center;
290 |   gap:4px;
291 | }
292 | 
293 | .user-img{
294 |   height: 38px;
295 |   width: 38px;
296 |   border-radius: 50%;
297 |   object-fit: cover;
298 |   background-color: #050505;
299 | }
300 | 
301 | .name-container{
302 |   display: flex;
303 |   justify-content: center;
304 |   align-items: flex-start;
305 |   flex-direction: column;
306 | 
307 | }
308 | 
309 | .user-fullname{
310 |   color: white;
311 |   font-size: 10px;
312 |   font-weight: 500;
313 | }
314 | 
315 | .user-username{
316 |   color: #c7bcbc;
317 |   font-size: 8px;
318 |   font-weight: 300;
319 | }
320 | 
321 | .user-username:hover{
322 |   color: #d88b2a;
323 |   cursor: pointer ;
324 | }
325 | 
326 | 
327 | .card-footer{
328 |   display: flex;
329 |   justify-content: space-between;
330 |   align-items: center;
331 |   width: 100%;
332 | }
333 | 
334 | .card-footer-text{
335 |   margin-top: 8px;
336 |   color: #c7bcbc;
337 |   font-size: 14px;
338 |   font-weight: 300;
339 | }
340 | 
341 | 
342 | .card-footer-btn{
343 |   background-color: #d88b2a;
344 |   border: none;
345 |   outline: none;
346 |   padding: 5px 10px;
347 |   border-radius: 10px;
348 |   color: #fff;
349 |   font-size: 14px;
350 |   font-weight: 400;
351 |   cursor: pointer;
352 |   transition: all 0.3s ease;
353 | 
354 | }
355 | 
356 | /* *About Section Css */
357 | .about{
358 |   padding: 50px;
359 | }
360 | 
361 | .about-container{
362 |   display:flex;
363 |   justify-content: center;
364 |   align-items: center;
365 |   flex-direction: column;
366 | 
367 | }
368 | 
369 | .about-title{
370 |   color: white;
371 |   text-transform: capitalize;
372 |   font-size: 1rem;
373 | }
374 | 
375 | .about-content{
376 |   display: flex;
377 |   justify-content: space-between;
378 |   align-items: center;
379 |   gap: 25px;
380 |   margin-top: 30px;
381 | }
382 | 
383 | .about-items-list{
384 |   list-style: none;
385 |   background-color: #1c1c1c;
386 |   border-radius: 4px;
387 |   padding: 20px;
388 | 
389 | }
390 | 
391 | .about-item{
392 |   position: relative;
393 |   padding: 30px 10px 20px;
394 |   border: 1px solid #3d3d3d;
395 |   border-radius: 4px;
396 |   text-align: center;
397 | }
398 | 
399 | .about-item::before,
400 | .about-item::after{
401 |   content: "";
402 |   position: absolute;
403 |   bottom:-2px;
404 |   right: -2px;
405 |   background-color: #c7bcbc;
406 |   border-radius: 10px;
407 | }
408 | 
409 | 
410 | .about-item::before{
411 |   height:100px;
412 |   width:3px;
413 | }
414 | 
415 | .about-item::after{
416 |   height:3px;
417 |   width:100px;
418 | }
419 | 
420 | 
421 | .card-number{
422 |   background-color: #262626;
423 |   color:#3d3d3d;
424 |   padding: 5px 15px;
425 |   position: absolute;
426 |   top:-15px;
427 |   left:-15px;
428 |   border-top-left-radius: 10px;
429 |   border:15px solid #1c1c1c;
430 |   font-size: 28px;
431 |   font-weight: 600;
432 | 
433 | 
434 | }
435 | 
436 | 
437 | .image-container{
438 |   display: flex;
439 |   align-items: center;
440 |   justify-content: center;
441 |   margin:30px;
442 | }
443 | 
444 | .about-desc{
445 |   font-size: 15px;
446 |   color: #c7bcbc; 
447 |   font-weight: 400;
448 |   text-align: center;
449 | 
450 | 
451 | }
452 | 
453 | 
454 | /* flex-box
455 | 
456 | .container{
457 | height:80vh;
458 | border:2px solid #fff;
459 | display:flex;
460 | justify-content: space-between;
461 | align-items: center;
462 | width: 100%;
463 | }
464 | 
465 | .item{
466 |     height:60px;
467 |     width:60px;
468 |     background-color: #d88b2a;
469 |     border:1px solid #fff;
470 | } */
471 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Nft-marketplace</title>
  8 |   <link rel="stylesheet" href="style.css">
  9 |   
 10 | </head>
 11 | 
 12 | <body>
 13 | 
 14 |   <!-- Navbar -->
 15 |   <header>
 16 |     <div class="nav-container">
 17 |       <!-- logo -->
 18 |       <div class="logo-container">
 19 |         <a href="#">
 20 |           <img src="assets/images/logo.png" alt="logo" class="logo">
 21 |         </a>
 22 |       </div>
 23 |       <!-- nav-links -->
 24 |       <div class="nav-links-container">
 25 |         <ul class="nav-links">
 26 |           <li>
 27 |             <a href="#" class="navbar-link">Home</a>
 28 |           </li>
 29 | 
 30 |           <li>
 31 |             <a href="#" class="navbar-link">About</a>
 32 |           </li>
 33 | 
 34 |           <li>
 35 |             <a href="#" class="navbar-link">Explore</a>
 36 |           </li>
 37 | 
 38 |           <li>
 39 |             <a href="#" class="navbar-link">Creators</a>
 40 |           </li>
 41 | 
 42 |           <li>
 43 |             <a href="#" class="navbar-link">Collections</a>
 44 |           </li>
 45 | 
 46 |           <li>
 47 |             <a href="#" class="navbar-link">Blog</a>
 48 |           </li>
 49 | 
 50 |           <li>
 51 |             <a href="#" class="navbar-link">Contact</a>
 52 |           </li>
 53 | 
 54 |         </ul>
 55 |       </div>
 56 |       <!-- search-bar -->
 57 | 
 58 |       <div class="nav-action">
 59 |         <input type="text" placeholder="Search" class="search-bar">
 60 |         <button type="submit" class="btn-primary">
 61 |           Sign-in
 62 |         </button>
 63 |       </div>
 64 |     </div>
 65 |   </header>
 66 | 
 67 | 
 68 | 
 69 |   <main>
 70 | 
 71 |     <!--*hero-section -->
 72 |     <section class="hero-section">
 73 |       <!-- left  -->
 74 | 
 75 |       <div class="left-sub-section">
 76 | 
 77 |         <!-- heading -->
 78 |         <h1 class="left-hero-title">
 79 |           Discover Digital Art Sell Your Specific <span>NFT</span>
 80 |         </h1>
 81 | 
 82 |         <!-- desc -->
 83 | 
 84 |         <p class="left-hero-desc">
 85 |           Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi pariatur, explicabo eaque qui dolorum a vel
 86 |           molestias dolor voluptates cum consequatur magni odio quia, hic beatae asperiores veniam ab laudantium dolorem
 87 |           blanditiis. Sapiente minus optio qui, earum dolorum recusandae corporis.
 88 |         </p>
 89 | 
 90 |         <!-- buttons -->
 91 |         <div class="btn-group">
 92 |           <!-- btn1-->
 93 |           <button class="btn-primary">
 94 |             Explore More
 95 |           </button>
 96 | 
 97 |           <button class="btn-secondary">
 98 |             Create Now
 99 |           </button>
100 | 
101 | 
102 | 
103 |           <!-- btn-2 -->
104 |         </div>
105 | 
106 | 
107 | 
108 |       </div>
109 |       <!-- right -->
110 |       <div class="right-sub-section">
111 |         <div class="img-container">
112 | 
113 |           <img src="/assets/images/hero-banner.jpg" alt="hero-banner" class="hero-banner-img" height="450" width="450">
114 |         </div>
115 |       </div>
116 |     </section>
117 | 
118 | 
119 |     <!--* Newest Items -->
120 |     <section class="newest-section">
121 |       <!-- upper -->
122 |       <div class="upper-section">
123 |         <h1 class="upper-section-title">
124 |           Newest Items
125 |         </h1>
126 | 
127 |         <button class="btn-primary">
128 |           View All
129 |         </button>
130 | 
131 | 
132 | 
133 |       </div>
134 |       <!-- lower -->
135 |       <div class="lower-section">
136 | 
137 |         <ul class="lower-section-ul">
138 | 
139 |           <li class="card-item">
140 | 
141 |             <div class="card-container">
142 |               <!-- image -->
143 |               <figure class="card-banner-container">
144 | 
145 |                 <img src="/assets/images/item-bg-1.jpg" alt="card1" class="card-banner-img">
146 | 
147 |                 <div class="card-banner-action">
148 |                   <!-- menu-bar -->
149 |                   <button class="btn-menu-bar">
150 |                     <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
151 |                   </button>
152 | 
153 |                   <!-- heart -->
154 |                   <button class="btn-heart " >
155 |                     <ion-icon name="heart"></ion-icon>
156 |                   </button>
157 | 
158 |                 </div>
159 | 
160 |               </figure>
161 | 
162 |               <!-- card-content -->
163 |               <div class="card-content">
164 |                 <!-- card-title -->
165 |                 <h3 class="card-title">
166 |                   Dimond riding a blue body art
167 |                 </h3>
168 | 
169 |                 <!-- user-meta-data -->
170 |                 <div class="user-data-container">
171 |                   <!-- div-left -->
172 | 
173 |                   <div class="left-container">
174 |                     <!-- img -->
175 |                     <img src="/assets/images/bidding-user.png" alt="user-img" class="user-img">
176 |                     <div class="name-container">
177 |                       <h6 class="user-fullname">USERNAME</h6>
178 |                       <span class="user-username">@username</span>
179 |                     </div>
180 |                     <!-- user-fullname -->
181 |                     <!-- @username -->
182 |                   </div>
183 | 
184 |                   <!-- div-right -->
185 |                   <div class="right-container">
186 |                     <div class="name-container">
187 |                       <h6 class="user-fullname">00.333ETH</h6>
188 |                       <span class="user-username">Current Bid</span>
189 |                     </div>
190 |                   </div>
191 |                 </div>
192 | 
193 | 
194 |                 <!-- card-footer -->
195 |                 <div class="card-footer">
196 |                   <!-- text -->
197 |                   <p class="card-footer-text">
198 |                     12+ Place Bid.
199 |                   </p>
200 | 
201 |                   <button class="card-footer-btn">
202 |                     New
203 |                   </button>
204 |                   <!-- button -->
205 |                 </div>
206 | 
207 |               </div>
208 | 
209 | 
210 | 
211 |             </div>
212 |           </li>
213 | 
214 |           <li class="card-item">
215 | 
216 |             <div class="card-container">
217 |               <!-- image -->
218 |               <figure class="card-banner-container">
219 | 
220 |                 <img src="/assets/images/item-bg-1.jpg" alt="card1" class="card-banner-img">
221 | 
222 |                 <div class="card-banner-action">
223 |                   <!-- menu-bar -->
224 |                   <button class="btn-menu-bar">
225 |                     <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
226 |                   </button>
227 | 
228 |                   <!-- heart -->
229 |                   <button class="btn-heart" data-whishlist-btn>
230 |                     <ion-icon name="heart"></ion-icon>
231 |                   </button>
232 | 
233 |                 </div>
234 | 
235 |               </figure>
236 | 
237 |               <!-- card-content -->
238 |               <div class="card-content">
239 |                 <!-- card-title -->
240 |                 <h3 class="card-title">
241 |                   Dimond riding a blue body art
242 |                 </h3>
243 | 
244 |                 <!-- user-meta-data -->
245 |                 <div class="user-data-container">
246 |                   <!-- div-left -->
247 | 
248 |                   <div class="left-container">
249 |                     <!-- img -->
250 |                     <img src="/assets/images/bidding-user.png" alt="user-img" class="user-img">
251 |                     <div class="name-container">
252 |                       <h6 class="user-fullname">USERNAME</h6>
253 |                       <span class="user-username">@username</span>
254 |                     </div>
255 |                     <!-- user-fullname -->
256 |                     <!-- @username -->
257 |                   </div>
258 | 
259 |                   <!-- div-right -->
260 |                   <div class="right-container">
261 |                     <div class="name-container">
262 |                       <h6 class="user-fullname">00.333ETH</h6>
263 |                       <span class="user-username">Current Bid</span>
264 |                     </div>
265 |                   </div>
266 |                 </div>
267 | 
268 | 
269 |                 <!-- card-footer -->
270 |                 <div class="card-footer">
271 |                   <!-- text -->
272 |                   <p class="card-footer-text">
273 |                     12+ Place Bid.
274 |                   </p>
275 | 
276 |                   <button class="card-footer-btn">
277 |                     New
278 |                   </button>
279 |                   <!-- button -->
280 |                 </div>
281 | 
282 |               </div>
283 | 
284 | 
285 | 
286 |             </div>
287 |           </li>
288 | 
289 |           <li class="card-item">
290 | 
291 |             <div class="card-container">
292 |               <!-- image -->
293 |               <figure class="card-banner-container">
294 | 
295 |                 <img src="/assets/images/item-bg-1.jpg" alt="card1" class="card-banner-img">
296 | 
297 |                 <div class="card-banner-action">
298 |                   <!-- menu-bar -->
299 |                   <button class="btn-menu-bar">
300 |                     <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
301 |                   </button>
302 | 
303 |                   <!-- heart -->
304 |                   <button class="btn-heart">
305 |                     <ion-icon name="heart"></ion-icon>
306 |                   </button>
307 | 
308 |                 </div>
309 | 
310 |               </figure>
311 | 
312 |               <!-- card-content -->
313 |               <div class="card-content">
314 |                 <!-- card-title -->
315 |                 <h3 class="card-title">
316 |                   Dimond riding a blue body art
317 |                 </h3>
318 | 
319 |                 <!-- user-meta-data -->
320 |                 <div class="user-data-container">
321 |                   <!-- div-left -->
322 | 
323 |                   <div class="left-container">
324 |                     <!-- img -->
325 |                     <img src="/assets/images/bidding-user.png" alt="user-img" class="user-img">
326 |                     <div class="name-container">
327 |                       <h6 class="user-fullname">USERNAME</h6>
328 |                       <span class="user-username">@username</span>
329 |                     </div>
330 |                     <!-- user-fullname -->
331 |                     <!-- @username -->
332 |                   </div>
333 | 
334 |                   <!-- div-right -->
335 |                   <div class="right-container">
336 |                     <div class="name-container">
337 |                       <h6 class="user-fullname">00.333ETH</h6>
338 |                       <span class="user-username">Current Bid</span>
339 |                     </div>
340 |                   </div>
341 |                 </div>
342 | 
343 | 
344 |                 <!-- card-footer -->
345 |                 <div class="card-footer">
346 |                   <!-- text -->
347 |                   <p class="card-footer-text">
348 |                     12+ Place Bid.
349 |                   </p>
350 | 
351 |                   <button class="card-footer-btn">
352 |                     New
353 |                   </button>
354 |                   <!-- button -->
355 |                 </div>
356 | 
357 |               </div>
358 | 
359 | 
360 | 
361 |             </div>
362 |           </li>
363 | 
364 | 
365 |           <li class="card-item">
366 | 
367 |             <div class="card-container">
368 |               <!-- image -->
369 |               <figure class="card-banner-container">
370 | 
371 |                 <img src="/assets/images/item-bg-1.jpg" alt="card1" class="card-banner-img">
372 | 
373 |                 <div class="card-banner-action">
374 |                   <!-- menu-bar -->
375 |                   <button class="btn-menu-bar">
376 |                     <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
377 |                   </button>
378 | 
379 |                   <!-- heart -->
380 |                   <button class="btn-heart">
381 |                     <ion-icon name="heart"></ion-icon>
382 |                   </button>
383 | 
384 |                 </div>
385 | 
386 |               </figure>
387 | 
388 |               <!-- card-content -->
389 |               <div class="card-content">
390 |                 <!-- card-title -->
391 |                 <h3 class="card-title">
392 |                   Dimond riding a blue body art
393 |                 </h3>
394 | 
395 |                 <!-- user-meta-data -->
396 |                 <div class="user-data-container">
397 |                   <!-- div-left -->
398 | 
399 |                   <div class="left-container">
400 |                     <!-- img -->
401 |                     <img src="/assets/images/bidding-user.png" alt="user-img" class="user-img">
402 |                     <div class="name-container">
403 |                       <h6 class="user-fullname">USERNAME</h6>
404 |                       <span class="user-username">@username</span>
405 |                     </div>
406 |                     <!-- user-fullname -->
407 |                     <!-- @username -->
408 |                   </div>
409 | 
410 |                   <!-- div-right -->
411 |                   <div class="right-container">
412 |                     <div class="name-container">
413 |                       <h6 class="user-fullname">00.333ETH</h6>
414 |                       <span class="user-username">Current Bid</span>
415 |                     </div>
416 |                   </div>
417 |                 </div>
418 | 
419 | 
420 |                 <!-- card-footer -->
421 |                 <div class="card-footer">
422 |                   <!-- text -->
423 |                   <p class="card-footer-text">
424 |                     12+ Place Bid.
425 |                   </p>
426 | 
427 |                   <button class="card-footer-btn">
428 |                     New
429 |                   </button>
430 |                   <!-- button -->
431 |                 </div>
432 | 
433 |               </div>
434 | 
435 | 
436 | 
437 |             </div>
438 |           </li>
439 | 
440 | 
441 |           <li class="card-item">
442 | 
443 |             <div class="card-container">
444 |               <!-- image -->
445 |               <figure class="card-banner-container">
446 | 
447 |                 <img src="/assets/images/item-bg-1.jpg" alt="card1" class="card-banner-img">
448 | 
449 |                 <div class="card-banner-action">
450 |                   <!-- menu-bar -->
451 |                   <button class="btn-menu-bar">
452 |                     <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
453 |                   </button>
454 | 
455 |                   <!-- heart -->
456 |                   <button class="btn-heart">
457 |                     <ion-icon name="heart"></ion-icon>
458 |                   </button>
459 | 
460 |                 </div>
461 | 
462 |               </figure>
463 | 
464 |               <!-- card-content -->
465 |               <div class="card-content">
466 |                 <!-- card-title -->
467 |                 <h3 class="card-title">
468 |                   Dimond riding a blue body art
469 |                 </h3>
470 | 
471 |                 <!-- user-meta-data -->
472 |                 <div class="user-data-container">
473 |                   <!-- div-left -->
474 | 
475 |                   <div class="left-container">
476 |                     <!-- img -->
477 |                     <img src="/assets/images/bidding-user.png" alt="user-img" class="user-img">
478 |                     <div class="name-container">
479 |                       <h6 class="user-fullname">USERNAME</h6>
480 |                       <span class="user-username">@username</span>
481 |                     </div>
482 |                     <!-- user-fullname -->
483 |                     <!-- @username -->
484 |                   </div>
485 | 
486 |                   <!-- div-right -->
487 |                   <div class="right-container">
488 |                     <div class="name-container">
489 |                       <h6 class="user-fullname">00.333ETH</h6>
490 |                       <span class="user-username">Current Bid</span>
491 |                     </div>
492 |                   </div>
493 |                 </div>
494 | 
495 | 
496 |                 <!-- card-footer -->
497 |                 <div class="card-footer">
498 |                   <!-- text -->
499 |                   <p class="card-footer-text">
500 |                     12+ Place Bid.
501 |                   </p>
502 | 
503 |                   <button class="card-footer-btn">
504 |                     New
505 |                   </button>
506 |                   <!-- button -->
507 |                 </div>
508 | 
509 |               </div>
510 | 
511 | 
512 | 
513 |             </div>
514 |           </li>
515 | 
516 | 
517 |         </ul>
518 | 
519 |       </div>
520 | 
521 |     </section>
522 | 
523 |     <!--*About Section -->
524 |     <section class="about">
525 |       <div class="about-container">
526 |         <!-- header -->
527 |         <h1 class="about-title">
528 |           Create and sell your NFTs
529 |         </h1>
530 | 
531 |         <!--  -->
532 |         <ol class="about-content">
533 | 
534 |           <li class="about-items-list">
535 |             <div class="about-item">
536 |               <div class="card-number">
537 |                 01
538 |               </div>
539 |               <div class="image-container">
540 |                 <img src="./assets/images/single-create-sell-item-1.png" alt="wallet icon">
541 |               </div>
542 | 
543 |               <h3 class="about-title">
544 |                 Create your NFTs
545 |               </h3>
546 | 
547 |               <p class="about-desc">
548 |                 There are many variations of passagi Ipsum available but the majorty have eration in some form, by injected
549 |               </p>
550 | 
551 |             </div>
552 |           </li>
553 | 
554 |           <li class="about-items-list">
555 |             <div class="about-item">
556 |               <div class="card-number">
557 |                 01
558 |               </div>
559 |               <div class="image-container">
560 |                 <img src="./assets/images/single-create-sell-item-1.png" alt="wallet icon">
561 |               </div>
562 | 
563 |               <h3 class="about-title">
564 |                 Create your NFTs
565 |               </h3>
566 | 
567 |               <p class="about-desc">
568 |                 There are many variations of passagi Ipsum available but the majorty have eration in some form, by injected
569 |               </p>
570 | 
571 |             </div>
572 |           </li>
573 | 
574 |           <li class="about-items-list">
575 |             <div class="about-item">
576 |               <div class="card-number">
577 |                 01
578 |               </div>
579 |               <div class="image-container">
580 |                 <img src="./assets/images/single-create-sell-item-1.png" alt="wallet icon">
581 |               </div>
582 | 
583 |               <h3 class="about-title">
584 |                 Create your NFTs
585 |               </h3>
586 | 
587 |               <p class="about-desc">
588 |                 There are many variations of passagi Ipsum available but the majorty have eration in some form, by injected
589 |               </p>
590 | 
591 |             </div>
592 |           </li>
593 | 
594 |           <li class="about-items-list">
595 |             <div class="about-item">
596 |               <div class="card-number">
597 |                 01
598 |               </div>
599 |               <div class="image-container">
600 |                 <img src="./assets/images/single-create-sell-item-1.png" alt="wallet icon">
601 |               </div>
602 | 
603 |               <h3 class="about-title">
604 |                 Create your NFTs
605 |               </h3>
606 | 
607 |               <p class="about-desc">
608 |                 There are many variations of passagi Ipsum available but the majorty have eration in some form, by injected
609 |               </p>
610 | 
611 |             </div>
612 |           </li>
613 | 
614 |         </ol>
615 | 
616 | 
617 |       </div>
618 |       <!-- upper -->
619 |       <!-- header -->
620 | 
621 |       <!-- card-containers -->
622 |       <!-- lower -->
623 |     </section>
624 | 
625 |     
626 | 
627 | 
628 |   </main>
629 | 
630 |   <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
631 |   <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
632 | <script src="script.js">
633 | </script>
634 | </body>
635 | 
636 | </html>


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