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