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
DeleteThanks
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
DeleteBnnn
Deleteok
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
ReplyDeletePerfecto. Mirà muchos videos de Youtube en español. Nunca pinsé que alguno no que hablar español, puede ayudarme. Creame Tu video es muy bueno. Y tu pagÃna de web es muy bueno también. Me gustarÃa decir, Tengo una peticón pensaré haces. Por favor añade los subtitulos inglés o subtitulos españoles por los videos. porque los perasonas de Mexico, Colombia, Bolivia, España no pueden mirar los videos de ti. Lo siento por comntas en español, Por que no sé ingles. Vale! Hasta Pronto...
ReplyDeletearee brother website not found you float use not
ReplyDeleteI use only high quality materials - you can see them at: Hindi tips Guru
ReplyDeletethis is better -
ReplyDeletehttps://tech-tamal.blogspot.com/
hi
ReplyDeletemovierulz 2028 APK Download for Android Mobile, Free Download MovieRulz App Telugu, Tamil, English, Kannada for your Android TV, Android.
ReplyDeleteThanks for such a pleasant post. This post loaded with lots of useful information. Keep it up. If you are looking for the best information and suggestions related to Cyprus Website Design then visit eVenzia Technologies LTD.
ReplyDeleteThere are a few sites that are devoted in giving data with respect to natural items, just as their providers. LED swing
ReplyDeletethanks for score code
ReplyDeletekoi theam website ya blog par upload kaise karein
ReplyDeleteWebsite create ker ke blog per upload kaise kare
ReplyDelete*{
ReplyDeletemargin: 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 );
}
ok
Delete