├── .gitignore ├── logo.png ├── nft.jpg ├── screenshot.jpg ├── index.js ├── README.md ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/responsive-nft-landing-page/HEAD/logo.png -------------------------------------------------------------------------------- /nft.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/responsive-nft-landing-page/HEAD/nft.jpg -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AsmrProg-YT/responsive-nft-landing-page/HEAD/screenshot.jpg -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const toggler = document.querySelector(".toggler"); 2 | const navMenu = document.querySelector("#navMenu"); 3 | 4 | toggler.addEventListener('click', function () { 5 | navMenu.classList.toggle("active") 6 | }); 7 | 8 | const scroll = document.getElementById("scroll"); 9 | 10 | scroll.addEventListener('click', () => { 11 | document.querySelector(".get-started").scrollIntoView({ behavior: 'smooth' }); 12 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive NFT Landing Page 2 | 3 | In this tutorial ([Open in Youtube](https://youtu.be/0mPBAmgGkEs)), I'm going to show you how to use modern HTML, CSS, and JavaScript to create a completely responsive nft landing page. We'll be using CSS linear-gradient, CSS Grid, CSS Flexbox, Media queries for our responsive design, and CSS transitions and animations (keyframes) for some cool animation effects. 4 | 5 | # Screenshot 6 | Here we have project screenshot : 7 | 8 | ![screenshot](screenshot.jpg) -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Responsive NFT Landing Page | AsmrProg 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 | Home 20 | Get Started 21 |
22 | 26 | 27 | 30 |
31 | 32 | 33 | 34 |
35 |
36 |

37 | Discover, collect, and charity in extraordinary NFT marketplace 38 |

39 |

40 | Explore the best collections from hand-picked digital artists out there and find your gem here in 41 | AsmrProg 42 |

43 |
44 | 45 | 46 |
47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |

55 | Reza 56 |

57 |

58 | 0.27 Eth 59 |

60 |
61 |
62 | 68 |
69 |
70 |
71 | 72 | 73 | 74 |
75 |

Getting Started

76 |

Buy and Sell NFTs from the world's top artists

77 |
78 |
79 |
80 | 81 |
82 |

All transactions are safe

83 |
84 |
85 |
86 | 87 |
88 |

Connect your wallet

89 |
90 |
91 |
92 | 93 |
94 |

Always free of any charges

95 |
96 |
97 |
98 | 99 |
100 |

Very fast transactions

101 |
102 |
103 |
104 | 105 | 106 | 107 | 108 |
109 |
110 | If you want something to be truly and wholeheartedly yours, turn it into an NFT. 111 |
112 |
113 |
114 |
Marketplace
115 |

Home

116 |

Get Started

117 |

Discover

118 |

Learn More

119 |
120 |
121 |
Company
122 |

About Us

123 |

Services

124 |

Team Info

125 |
126 |
127 |
Contact
128 |

Github

129 |

Instagram

130 |

Twitter

131 |

Facebook

132 |
133 | 134 |
135 | 136 |
137 | 138 |
139 |

Copyright 2023, AsmrProg Youtube Channel.

140 |
141 | 142 |
143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Poppins', sans-serif; 8 | } 9 | 10 | body{ 11 | background-color: #252954; 12 | } 13 | 14 | .main{ 15 | padding: 0 88px; 16 | position: relative; 17 | overflow-x: hidden; 18 | background-color: #221f2f; 19 | } 20 | 21 | .main::before{ 22 | content: ""; 23 | position: absolute; 24 | width: 120px; 25 | height: 120px; 26 | left: 55%; 27 | top: 20%; 28 | background-color: #ed2ff0; 29 | filter: blur(90px); 30 | } 31 | 32 | .main::after{ 33 | content: ""; 34 | position: absolute; 35 | width: 120px; 36 | height: 120px; 37 | left: 80%; 38 | top: 44%; 39 | background-color: #22a8cd; 40 | filter: blur(90px); 41 | } 42 | 43 | .main .navbar{ 44 | display: flex; 45 | align-items: center; 46 | justify-content: space-between; 47 | padding: 20px 0; 48 | } 49 | 50 | .navbar .toggler{ 51 | font-size: 2rem; 52 | color: #c5c3c3; 53 | background-color: transparent; 54 | cursor: pointer; 55 | border: none; 56 | display: none; 57 | } 58 | 59 | .navbar .nav-btn{ 60 | cursor: pointer; 61 | background-color: transparent; 62 | border: none; 63 | width: 90px; 64 | height: 40px; 65 | color: #ccc; 66 | font-size: 12px; 67 | } 68 | 69 | .navbar .nav-btn.selected{ 70 | border: 1px solid #ccc; 71 | border-radius: 8px; 72 | } 73 | 74 | .navbar .logo{ 75 | background: linear-gradient(95deg, #7e22ce 3.2%, #3b82f6 99.5%); 76 | background-clip: text; 77 | -webkit-background-clip: text; 78 | -webkit-text-fill-color: transparent; 79 | font-weight: 700; 80 | font-size: 32px; 81 | } 82 | 83 | .navbar .item{ 84 | font-size: 13px; 85 | color: #ccc; 86 | cursor: pointer; 87 | } 88 | 89 | .navbar .item.selected{ 90 | background: linear-gradient(95deg, #7e22ce 3.2%, #3b82f6 99.5%); 91 | background-clip: text; 92 | -webkit-background-clip: text; 93 | -webkit-text-fill-color: transparent; 94 | border-bottom: 1px solid #7e22ce; 95 | } 96 | 97 | .navbar .item:not(:last-child){ 98 | margin-right: 20px; 99 | } 100 | 101 | .navbar .nav-buttons.active{ 102 | transition: all 0.3s ease; 103 | opacity: 1; 104 | } 105 | 106 | .main .top-container{ 107 | display: flex; 108 | align-items: center; 109 | justify-content: space-between; 110 | margin-top: 10rem; 111 | } 112 | 113 | .top-container .info-box{ 114 | max-width: 50%; 115 | animation: toRight 0.8s; 116 | } 117 | 118 | .top-container .header{ 119 | margin: 0; 120 | color: #fff; 121 | font-size: 2.4rem; 122 | font-weight: 600; 123 | line-height: 55px; 124 | } 125 | 126 | .top-container .info-text{ 127 | margin: 20px 0 32px; 128 | color: #fff; 129 | font-size: 16px; 130 | line-height: 20px; 131 | letter-spacing: 0.5px; 132 | } 133 | 134 | .top-container .info-buttons{ 135 | display: flex; 136 | } 137 | 138 | .top-container .info-btn{ 139 | cursor: pointer; 140 | padding: 8px 38px; 141 | border-radius: 16px; 142 | font-weight: 500; 143 | font-size: 13px; 144 | letter-spacing: -1px; 145 | color: #fff; 146 | } 147 | 148 | .top-container .info-btn.nav-btn{ 149 | margin-left: 20px; 150 | background-color: transparent; 151 | border: 1px solid #fff; 152 | } 153 | 154 | .top-container .info-btn.selected{ 155 | border: none; 156 | background: linear-gradient(95deg, #7e22ce 3.2%, #3b82f6 99.5%); 157 | } 158 | 159 | .top-container .nft-box{ 160 | padding: 16px; 161 | border: 1px solid #000; 162 | background: linear-gradient(170deg, rgba(52, 93, 129, 0.08) 1.85%, rgba(57, 46, 75, 0.08) 98%); 163 | border-radius: 2rem; 164 | animation: toLeft 0.8s; 165 | } 166 | 167 | .top-container .nft-pic{ 168 | object-fit: cover; 169 | width: 300px; 170 | height: 300px; 171 | border-radius: 1.6rem; 172 | } 173 | 174 | .top-container .nft-box .nft-content{ 175 | display: flex; 176 | align-items: center; 177 | justify-content: space-around; 178 | margin-top: 10px; 179 | } 180 | 181 | .top-container .nft-box .info, .top-container .nft-box .likes{ 182 | display: flex; 183 | align-items: center; 184 | color: #fff; 185 | font-weight: 600; 186 | font-size: 12px; 187 | } 188 | 189 | .top-container .nft-box .info-img{ 190 | object-fit: cover; 191 | flex-shrink: 0; 192 | width: 30px; 193 | height: 30px; 194 | border-radius: 50%; 195 | margin-right: 10px; 196 | } 197 | 198 | .top-container .nft-box .likes .icon-box{ 199 | display: flex; 200 | align-items: center; 201 | font-size: 15px; 202 | } 203 | 204 | .top-container .nft-box .likes .icon-box .bx{ 205 | font-size: 30px; 206 | margin-right: 8px; 207 | } 208 | 209 | .get-started{ 210 | margin-top: 10rem; 211 | display: flex; 212 | flex-direction: column; 213 | } 214 | 215 | .get-started .header{ 216 | align-self: center; 217 | color: #fff; 218 | font-weight: 500; 219 | font-size: 40px; 220 | line-height: 72px; 221 | } 222 | 223 | .get-started .info-text{ 224 | align-self: center; 225 | color: #ccc; 226 | font-weight: 400; 227 | font-size: 20px; 228 | line-height: 36px; 229 | letter-spacing: 0.5px; 230 | } 231 | 232 | .get-started .items-box{ 233 | padding: 60px 80px; 234 | position: relative; 235 | display: grid; 236 | grid-template-columns: auto auto auto auto; 237 | grid-column-gap: 25px; 238 | grid-row-gap: 50px; 239 | justify-content: space-around; 240 | } 241 | 242 | .get-started .items-box:before{ 243 | content: ""; 244 | position: absolute; 245 | width: 100%; 246 | height: 120px; 247 | top: 80px; 248 | background: linear-gradient(95deg, #7e22ce 3.2%, #3b82f6 99.5%); 249 | filter: blur(140px); 250 | } 251 | 252 | .get-started .items-box .item-container p{ 253 | width: 100px; 254 | margin-top: 12px; 255 | text-align: center; 256 | font-size: 12px; 257 | color: #fff; 258 | } 259 | 260 | .get-started .items-box .item-container .item{ 261 | display: flex; 262 | align-items: center; 263 | justify-content: center; 264 | width: 100px; 265 | height: 100px; 266 | border: 5px solid rgba(255, 255, 255, 0.3); 267 | border-radius: 2.6rem; 268 | box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); 269 | background: rgba(255, 255, 255, 0.2); 270 | backdrop-filter: blur(90px); 271 | } 272 | 273 | .get-started .items-box .item-container .item .bx{ 274 | font-size: 38px; 275 | color: #eee; 276 | } 277 | 278 | .main .footer{ 279 | margin: 50px 0; 280 | display: flex; 281 | align-items: center; 282 | justify-content: space-between; 283 | } 284 | 285 | .main .copyright{ 286 | padding-bottom: 25px; 287 | border-top: 1px solid #ccc; 288 | } 289 | 290 | .main .footer .footer-header{ 291 | max-width: 50%; 292 | font-weight: 500; 293 | font-size: 30px; 294 | line-height: 40px; 295 | color: #fff; 296 | } 297 | 298 | .main .footer .footer-links{ 299 | display: flex; 300 | } 301 | 302 | .main .footer .footer-links .link{ 303 | margin-left: 70px; 304 | } 305 | 306 | .main .footer .footer-links .link h5{ 307 | font-weight: 400; 308 | font-size: 20px; 309 | line-height: 40px; 310 | color: #fff; 311 | } 312 | 313 | .main .footer .footer-links .link p{ 314 | font-size: 12px; 315 | line-height: 18px; 316 | letter-spacing: 0.05em; 317 | color: #ccc; 318 | } 319 | 320 | .copyright p{ 321 | font-size: 12px; 322 | line-height: 36px; 323 | color: #afafaf; 324 | } 325 | 326 | @media screen and (max-width: 1040px) { 327 | .top-container{ 328 | flex-direction: column; 329 | } 330 | 331 | .top-container .info-box{ 332 | max-width: none; 333 | margin: 60px 0; 334 | } 335 | 336 | .top-container .nft-box{ 337 | display: none; 338 | } 339 | 340 | .main .footer{ 341 | flex-direction: column; 342 | } 343 | 344 | .main .footer .footer-header{ 345 | max-width: 80%; 346 | margin-bottom: 30px; 347 | text-align: center; 348 | } 349 | 350 | .main .footer .footer-links .link:first-child{ 351 | margin: 0; 352 | } 353 | } 354 | 355 | @media screen and (max-width: 925px) { 356 | .navbar .nav-links{ 357 | display: none; 358 | } 359 | 360 | .navbar .nav-buttons{ 361 | opacity: 0; 362 | } 363 | 364 | .navbar .toggler{ 365 | display: flex !important; 366 | align-items: center; 367 | } 368 | 369 | .get-started .info-text{ 370 | text-align: center; 371 | } 372 | 373 | .get-started .items-box{ 374 | display: grid; 375 | grid-template-columns: auto auto; 376 | justify-content: space-evenly; 377 | padding: 50px 0; 378 | } 379 | 380 | .get-started .items-box:before{ 381 | height: 200px; 382 | top: 90px; 383 | filter: blur(120px); 384 | } 385 | } 386 | 387 | @media screen and (max-width: 700px) { 388 | .top-container{ 389 | margin-top: 4rem !important; 390 | } 391 | 392 | .top-container .info-box{ 393 | max-height: none; 394 | max-width: none; 395 | margin-bottom: 4rem; 396 | } 397 | 398 | .top-container .nft-box{ 399 | display: block; 400 | max-width: none; 401 | max-height: none; 402 | } 403 | } 404 | 405 | @media screen and (max-width: 600px) { 406 | .main{ 407 | padding: 0 40px; 408 | } 409 | 410 | .footer .footer-header{ 411 | font-size: 20px; 412 | line-height: 30px; 413 | max-width: 100%; 414 | margin-bottom: 30px; 415 | text-align: center; 416 | } 417 | 418 | .footer .footer-links{ 419 | justify-content: space-between; 420 | width: 100%; 421 | } 422 | 423 | .footer .footer-links .link{ 424 | margin-left: 20px; 425 | } 426 | 427 | .footer .footer-links .link h5{ 428 | font-size: 15px; 429 | line-height: 35px; 430 | } 431 | 432 | .footer .footer-links .link p{ 433 | font-size: 11px; 434 | line-height: 18px; 435 | } 436 | } 437 | 438 | @keyframes toRight{ 439 | from{ 440 | transform: translateX(-700px); 441 | } 442 | to{ 443 | transform: translateX(0px); 444 | } 445 | } 446 | 447 | @keyframes toLeft{ 448 | from{ 449 | transform: translateX(550px); 450 | } 451 | to{ 452 | transform: translateX(0px); 453 | } 454 | } --------------------------------------------------------------------------------