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 !!!