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
DeletePlease give me the image
Deletehttps://www.freepik.com/free-photos-vectors/isometric
DeleteThanks You really good sir ji,
Deletehttps://theimagesofyoutubevideos.blogspot.com/2020/08/images-how-to-create-modern-website.html
Deletei want the entire file along with images
ReplyDeletehttps://www.freepik.com/free-photos-vectors/isometric
DeleteSir image kha se multi aishi..
ReplyDeleteSir. Please provide image descriptions .
ReplyDeletePata nai
Deletehttps://www.freepik.com/free-photos-vectors/isometric
DeleteThanku so much
ReplyDeleteHa yar
Deleteplease upload the intro image also.
ReplyDeleteVery good job
ReplyDeleteبعؤن غخع
ReplyDeleteNice pro
ReplyDeleteintro image?
ReplyDeletehttps://www.freepik.com/free-photos-vectors/isometric
DeleteDownload bro
DeleteWhat 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 ;)
https://www.freepik.com/free-photos-vectors/isometric
DeleteGREAT
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.
ReplyDeletehttps://www.freepik.com/free-photos-vectors/isometric
Deletei want the image please mail me
ReplyDeletedid u got
Deleteimage ?
ReplyDeleteplease give me that intro image also please`
ReplyDeletehttps://www.freepik.com/free-photos-vectors/isometric
Deletegreat job sir
ReplyDeletegreat job sir
ReplyDeleteThank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!! nisartech.com
ReplyDeletevisit this site for image ("https://www.freepik.com/free-photos-vectors/isometric")
ReplyDeletehttps://www.freepik.com/free-photos-vectors/isometric
ReplyDeleteplz tell us how to create footer of any website,with social media icons
ReplyDeletevery nice
ReplyDeleteThanks
ReplyDeletesie infimation web digine karwani hai so plz hpl me ... vg30741@gmail.com
ReplyDeleteWhen your website or blog goes live for the first time, it is exciting. That is until you realize no one but you and your. can you make a living trading forex
ReplyDeletesorry sir i did'n find that image in this link send me
ReplyDeletehttps://www.freepik.com/free-photos-vectors/isometric
give mE IMAGE PLZ
ReplyDeletenice my brother.
ReplyDeletesir please send me image also
ReplyDeleteSir can you send me the images
ReplyDeleteok
Deleteabe gadhe
ReplyDeletewhy i can't add a photo?
ReplyDeleteThe background of the image is always in white color only
ReplyDeleteplz send me this image my email shabeeh945@gmail.com
ReplyDeleteTechno Prokash Best Videoand helpfull tutorial.
ReplyDeleteBhai sendphone me whatsapp phonenumber
ReplyDeleteAwesome Sir ^_^
ReplyDeletesir can you send me the all images email muhammadarbaz05@gmail.com
ReplyDeletePlease give me the image pls pls pls jalalsk07860@gmail.com
ReplyDeleteVery helpfull bro.thnx u so much.
ReplyDeleteCan you send me the image
ReplyDeletePlease
Can you send me the image
ReplyDeletehey i loved your blog and i want you to see this blog and this website is helping me a lot
ReplyDeleteGood work !
ReplyDeletemy image background color is still white while i m using linear gradient
ReplyDeleteyoooooknsgs
ReplyDeletesir please give image
ReplyDelete