How to Create a Landing Page in HTML and CSS in Hindi.
Html and Css mein landing page bana bhaut easy hai but agar app starting a shik rha ho to apko samajne mein mushikal hogi kyuki apko pta he nahi lagega ki kya cheez kesa work karti hai, So app ke liya acha hoga ki app html and css basic samj lo phela.
Landing Page Kya Hai :
Jab bhi apko broswer mein kisi website par jate ho yha koi bhi website jissa app broswer mein open karte ho apne notice kiya hoga vha ek front page phela open hota hai jissa uss website ka logo , header section , navs etc lika hota, or fir uske necha jab app scroll karte ho to necha ussa website ka content lika hua atta hai , but jo upper portion hota hai jha apko logo menu etc show hota hai jo open krte wakq dikta hai apko usko landing page bolte hai.
Landing page examples :
Chalo mein apko kuch landing pages ka design dikata ho phela jissa app acha sa samj jaoge ki landinging page kisi bolte hai.
Examples:
 |
| How to Create a Landing Page in HTML and CSS in Hindi |
 |
| How to Create a Landing Page in HTML and CSS in Hindi |
Chalo apko pta lag gaya hoga landing page ke bare mein acha sa ki kisa landing page bolte hai.
Mein apko app source code deta hai html or css ka app usko usse karna :
Html Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="header.css">
</head>
<body>
<header>
<nav class="header">
<div class="logo">
<h4>Rakshak</h4>
</div>
<div class="headermenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Course</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="headerright">
<button>Sign in</button>
<button>Sign up</button>
</div>
</nav>
<div class="content">
<div>
<h1>Web Developer</h1>
<h2>Programmer</h2>
<h3>Blogger</h3>
</div>
<div>
<button>Get Course</button>
<button>Get a Demo</button>
</div>
</div>
</header>
</body>
</html>
Note : Ek baat ka dyan rkna jo app css file ka naam rkoge usko html mein add style baad yaad sa karna jesa mena kiya hai fir jake apka code sahi sa run hoga.
CSS Source Code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
background-color: black;
width: 100%;
height: 100vh;
background-size: cover;
}
.header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 30px;
background-color: rgba(21, 177, 146, 0.356);
height: 30px;
}
.logo{
padding: 0px 40px;
}
.logo h4{
border-bottom: 2px solid white;
color: white;
font-weight: bold;
text-transform: uppercase;
font-size: 20px;
cursor: pointer;
}
.logo h4:hover{
border-bottom: 2px solid purple;
}
.headermenu ul{
list-style: none;
}
.headermenu ul li{
display: inline-block;
padding: 10px 40px;
}
.headermenu ul li a{
text-decoration: none;
font-weight: lighter;
color: white;
border-bottom: 2px solid white;
}
.headermenu ul li a:hover{
border: 2px solid white;
background-color:black;
color: white;
}
.headerright{
padding: 10px 20px;
word-spacing: 20px;
}
.headerright button{
cursor: pointer;
font-weight: bold;
padding:2px 10px;
}
.headerright button:hover{
border: 2px solid white;
background-color: black;
color: white;
}
.content{
position:absolute;
top: 20%;
width: 100%;
text-align: center;
color: white;
}
.content h1{
font-size: 120px;
color: rgba(6, 248, 248, 0.822);
}
.content h2{
font-size: 100px;
color: white;
}
.content h3{
font-size: 100px;
color: rgb(204, 250, 2);
padding-bottom: 40px;
}
.content div{
word-spacing: 30px;
}
.content button{
cursor: pointer;
font-weight: bold;
font-size: 20px;
text-transform: uppercase;
padding: 10px 20px;
}
.content button:hover{
border: 2px solid white;
background-color: black;
color: white;
}
Output :
 |
| How to Create a Landing Page in HTML and CSS in Hindi |