How to Create Modern Website Using HTML CSS in Hindi 2019
As we all know we are living in the 21st century. Where in each seconds updation is taking place, I mean in the technology world? And we are web developer If other fields of tech are getting updated then why not on Website. So here in this video, we will see How to use the modern approach to make the website with less code and use creativity to make it look cool and awesome.
![]() |
Modern Website |
We will use only HTML and CSS and with only these two we will make it happen. So here is the code and my work. Hope you are gonna love this and share with your friends too.
Index.html Page code is below
<!DOCTYPE html><html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>
<header class="site-header clearfix">
<nav>
<div class="logo">
<h1>Modern Website</h1>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Services</li>
<li>AboutUs</li>
<li>ContactUs</li>
</ul>
</div>
</nav>
<section>
<div class="leftside">
<img src="images/intro.png">
</div>
<div class="rightside">
<h1>Our Modern Website</h1>
<p> DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :) </p>
<button>Welcome</button>
</div>
</section>
</header>
</body>
</html>
Style.css Page code is here
*{margin: 0; padding:0; box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
.site-header {
width: 100%;
height: 100vh;
background: #0f8a9d;
background: linear-gradient(57deg, #00C6A7 , #1E4D92 );
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
nav{
width: 100%; height: 100px;
/*background-color: red;*/
display: flex; color: white;
}
.logo{
width: 50%;
height: 100px;
}
.logo h1{
line-height: 100px;
padding-left: 50px;
}
.menu{
width: 50%; height: 100px;
}
.menu ul{
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.menu ul li{
list-style: none;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
section{ display: flex; }
.leftside { width: 45%; height: auto; overflow: hidden; margin-top: 20px;}
.leftside img{ width: 600px; height: 500px; }
.rightside{ width: 55%; height: 300px; color: white; text-align: center; margin-top: 80px; padding: 40px;}
.rightside h1{ text-align: center;
color: #ffffff;
font-size: 50px;
font-weight: 900;
text-transform: uppercase; }
.rightside p {
font-size: 1.1rem; padding: 30px 0; }
.rightside button{ font-size: 17px;
font-weight: 600;
color: white;
text-transform: uppercase;
background: linear-gradient(57deg, #00C6A7 , #1E4D92 );
border-radius: 4px 4px 4px 4px;
padding: 20px 35px ;
}
.rightside button:hover{
background: linear-gradient(57deg, #1E4D92, #00C6A7 );
}
DONATION FOR SUPPORT: PhonePay = vinodbahadur@ybl GooglePay: vbthapa55@oksbi
Believe me all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
Very good work
ReplyDeleteNice N thnku
ReplyDeleteplease upload the intro image also.
ReplyDeleteplzz give the image also itechdivyanshu@gmail.com
Deletei want the entire file along with images
ReplyDeleteSir image kha se multi aishi..
ReplyDeleteSir. Please provide image descriptions .
ReplyDeletePata nai
DeleteThanku so much
ReplyDeleteplease upload the intro image also.
ReplyDeleteVery good job
ReplyDeleteبعؤن غخع
ReplyDeleteNice pro
ReplyDeleteintro image?
ReplyDeleteWhat is link for image
ReplyDeleteVery good Sir
ReplyDeleteCan I get img from this project?
ReplyDeletelink or mail?
I need it!!!
and yeah very nice good work ;)
GREAT
ReplyDeleteKAINT
OSM
ULTIMATE
ReplyDeleteKAINT
KAIM
OSM
ATT
ULTIMATE
KAIM
KAINT
Thank you Bro......
ReplyDeleteaoa sir give me plz its responsive line code only ?i need it for my project plz send me as soon as possible bcz its mbl view is not responsive tabs are disturbed when i set it in mbl view .thanks
ReplyDeletebro not working
ReplyDeletebro my notpad dose not work on "clip-path" plez help me
ReplyDeleteNice and really helpful
ReplyDeletebut sir matalab aishi photo ki png downlode karani ho toh kya likhana padaga
ReplyDeleteHow can i get this picture to complete my project? Bro can i have link or mail of something similar to it please.
ReplyDeletei want the image please mail me
ReplyDeletedid u got
Deleteimage ?
ReplyDelete