Create a Website in HTML and CSS in Hindi
Yeh front page hai website ka jiska code mena apko necha diya hua hai or sath he mena apko image bhi di hai so app easily issa bana sakte hai. isme mena sirf html or css code use kiya hai html sa mena iska structure banaya hai or css sa mena isko style kiya hai.
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.
Source Code:
Image :
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>Photography</title>
<link rel="stylesheet" href="web4.css">
</head>
<body>
<header>
<div class="mainheader">
<div class="logo">
<h1>Photographer</h1>
</div>
<nav class="headermenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Plans</a></li>
</ul>
</nav>
<div class="headerbuttons">
<button>Sign in</button>
<button>Sign up</button>
</div>
</div>
<div class="imagetext">
<div>
<h4>I'm a</h4>
<h2>Photographer</h2>
<p>Photography is a way of feeling, of touching, of loving.
What you have caught on film is captured forever… It remembers
little things, long after you have forgotten everything.</p>
</div>
<div class="imagebutton">
<button>Click Here</button>
<button>Get a Demo</button>
</div>
</div>
</header>
</body>
</html>
Css Source Code :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
background-image: url(/web4/pexels-samad-ismayilov-764873.jpg);
width: 100%;
height: 100vh;
background-size: cover;
}
.mainheader{
background-color: rgba(7, 215, 252, 0.185);
height: 10px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
}
.logo{
padding-left: 30px;
}
.logo h1{
color: rgb(5, 223, 252);
border-bottom: 4px solid white;
cursor: pointer;
text-transform: uppercase;
font-size: 20px;
}
.headermenu ul{
list-style: none;
padding: 10px 10px 10px 100px;
}
.headermenu ul li{
display: inline-block;
padding: 10px 40px 10px 10px;
}
.headermenu ul li a{
text-decoration: none;
text-transform: uppercase;
color: white;
cursor: pointer;
text-transform: uppercase;
}
.headermenu ul li a:hover{
color: rgb(6, 235, 252);
border-bottom: 2px solid white;
}
.headerbuttons {
padding: 10px 30px;
word-spacing: 30px;
}
.headerbuttons button{
border: 2px solid rgb(5, 226, 255);
background-color: black;
text-transform: uppercase;
color: white;
border-radius: 20px;
font-weight: bold;
padding: 5px 20px;
cursor: pointer;
}
.headerbuttons button:hover{
background-color: rgb(250, 255, 255);
color: black;
}
.imagetext{
position: absolute;
top: 30%;
left: 5%;
width: 50%;
height: auto;
/* text-align: center; */
}
.imagetext h4{
font-size: 90px;
color: rgb(6, 221, 250);
font-weight: 400;
font-weight: bold;
}
.imagetext h2{
font-size: 80px;
color: rgb(239, 243, 237);
font-weight: bold;
text-transform: uppercase;
padding-bottom: 10px;
}
.imagetext p{
/* font-weight: 10px; */
word-spacing: 4px;
font-size: 17px;
color: rgba(247, 254, 255, 0.966);
padding-bottom:40px;
font-weight: 500;
}
.imagebutton{
word-spacing:20px;
}
.imagebutton button{
font-weight: bold;
padding: 10px 30px;
font-size: 20px;
background-color: black;
color: white;
border: 2px solid rgb(5, 221, 250);
border-radius: 20px;
cursor: pointer;
}
.imagebutton button:hover{
background-color: white;
color: black;
}
Note : Mena apko image or source code de diya hai bas ek ek baat ka dyan rkna jab app HTML mein css file ko link kroga to dyan rkna app apni file name ko link kre an ki meri file name jo.
