Hello fellow developers !!!
Exciting update on our 7-day NFT Marketplace creation journey! Day 2 is all about the grand reveal of our Hero Section - a visual feast blending cutting-edge design and vibrant NFT showcases.
Feel free to adjust the text further to suit your preferences!!!
Preview
Click here to download images :- Download
HTML Code Structure :-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nft-marketplace</title> <link rel="stylesheet" href="style.css"> <link rel="shortcut icon" href="assets/images/favicon.ico" type="image/x-icon"> </head> <body> <!-- Navbar --> <header> <div class="nav-container"> <!-- logo --> <div class="logo-container"> <a href="#"> <img src="assets/images/logo.png" alt="logo" class="logo"> </a> </div> <!-- nav-links --> <div class="nav-links-container"> <ul class="nav-links"> <li> <a href="#" class="navbar-link">Home</a> </li> <li> <a href="#" class="navbar-link">About</a> </li> <li> <a href="#" class="navbar-link">Explore</a> </li> <li> <a href="#" class="navbar-link">Creators</a> </li> <li> <a href="#" class="navbar-link">Collections</a> </li> <li> <a href="#" class="navbar-link">Blog</a> </li> <li> <a href="#" class="navbar-link">Contact</a> </li> </ul> </div> <!-- search-bar --> <div class="nav-action"> <input type="text" placeholder="Search" class="search-bar"> <button type="submit" class="btn-primary"> Sign-in </button> </div> </div> </header> <!-- hero-section --> <main> <section class="hero-section"> <!-- left --> <div class="left-sub-section"> <!-- heading --> <h1 class="left-hero-title"> Discover Digital Art Sell Your Specific <span>NFT</span> </h1> <!-- desc --> <p class="left-hero-desc"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi pariatur, explicabo eaque qui dolorum a vel molestias dolor voluptates cum consequatur magni odio quia, hic beatae asperiores veniam ab laudantium dolorem blanditiis. Sapiente minus optio qui, earum dolorum recusandae corporis. </p> <!-- buttons --> <div class="btn-group"> <!-- btn1--> <button class="btn-primary"> Explore More </button> <button class="btn-secondary"> Create Now </button> <!-- btn-2 --> </div> </div> <!-- right --> <div class="right-sub-section"> <div class="img-container"> <img src="/assets/images/hero-banner.jpg" alt="hero-banner" class="hero-banner-img" height="450" width="450"> </div> </div> </section> </main> </body> </html>
CSS Code Structure :-
style.css
@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'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--rich-black-fogra-39); border-left: 1px solid var(--onyx-1); } ::-webkit-scrollbar-thumb { background: var(--golden-puppy); } ::-webkit-scrollbar-thumb:hover { --golden-puppy: hsl(47, 100%, 40%); } ::-webkit-scrollbar-button { height: 5px; } body{ background-color: #212121; } /* navbar */ header{ padding: 20px; border-bottom: 1px solid #3d3d3d; } .nav-container{ display: flex; justify-content: space-between; align-items: center; } .nav-links-container{ display: flex; justify-content: space-between; align-items: center; width:38rem; } .nav-links{ display: flex; justify-content: space-between; align-items: center; list-style: none; flex-direction: row; gap: 20px; } .navbar-link{ text-decoration: none; color: #fff; font-size: 1rem; font-weight: 500; transition: all 0.3s ease; } .nav-action{ display: flex; justify-content: space-between; align-items: center; gap: 20px; } .search-bar{ background-color: #3d3d3d; border: none; outline: none; padding:14px; width: 15rem; border-radius: 10px; color:#fff; font-size: 1rem; font-weight: 400; } .btn-primary{ background-color: #d88b2a; border: none; outline: none; padding: 14px 24px; border-radius: 10px; color: #fff; font-size: 1rem; font-weight: 400; cursor: pointer; transition: all 0.3s ease; } /* hero section */ .hero-section{ display: flex; justify-content: space-between; align-items: center; padding:50px; width:100%; height: 100vh; } .left-sub-section{ display:flex; /* for adding direction in flexbox */ flex-direction: column; justify-content: center; align-items: flex-start; } .left-hero-title{ color:white; font-size: 2.5rem; font-weight: 600; text-transform: capitalize; } .left-hero-desc{ color: #c7bcbc; font-size: 1rem; font-weight: 400; margin: 20px 0; } .btn-group{ display: flex; justify-content: center; align-items: center; gap:40px; } .btn-secondary{ background-color: #3d3d3d; border: 1px solid #d88b2a; outline: none; padding: 14px 24px; border-radius: 10px; color: #fff; font-size: 1rem; font-weight: 400; cursor: pointer; transition: all 0.3s ease; } .right-sub-section{ margin-left:40px ; } .img-container{ border-radius: 100%; overflow: hidden; border:25px solid #3d3d3d; }
Stay tuned for Day 3
Happy coding, explorers !!!
Follow Us