THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

How To Create Modern Website Using HTML CSS in HINDI 2019


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 :)

66 comments:

  1. please upload the intro image also.

    ReplyDelete
    Replies
    1. plzz give the image also itechdivyanshu@gmail.com

      Delete
    2. https://www.freepik.com/free-photos-vectors/isometric

      Delete
    3. Thanks You really good sir ji,

      Delete
    4. https://theimagesofyoutubevideos.blogspot.com/2020/08/images-how-to-create-modern-website.html

      Delete
  2. i want the entire file along with images

    ReplyDelete
    Replies
    1. https://www.freepik.com/free-photos-vectors/isometric

      Delete
  3. Sir image kha se multi aishi..

    ReplyDelete
  4. Sir. Please provide image descriptions .

    ReplyDelete
  5. please upload the intro image also.

    ReplyDelete
  6. Can I get img from this project?
    link or mail?
    I need it!!!
    and yeah very nice good work ;)

    ReplyDelete
    Replies
    1. https://www.freepik.com/free-photos-vectors/isometric

      Delete
  7. ULTIMATE
    KAINT
    KAIM
    OSM
    ATT
    ULTIMATE
    KAIM
    KAINT

    ReplyDelete
  8. aoa 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

    ReplyDelete
  9. bro my notpad dose not work on "clip-path" plez help me


    ReplyDelete
  10. but sir matalab aishi photo ki png downlode karani ho toh kya likhana padaga

    ReplyDelete
  11. How can i get this picture to complete my project? Bro can i have link or mail of something similar to it please.

    ReplyDelete
    Replies
    1. https://www.freepik.com/free-photos-vectors/isometric

      Delete
  12. i want the image please mail me

    ReplyDelete
  13. please give me that intro image also please`

    ReplyDelete
    Replies
    1. https://www.freepik.com/free-photos-vectors/isometric

      Delete
  14. Thank you for helping people get the information they need. Great stuff as usual. Keep up the great work!!! nisartech.com

    ReplyDelete
  15. visit this site for image ("https://www.freepik.com/free-photos-vectors/isometric")

    ReplyDelete
  16. https://www.freepik.com/free-photos-vectors/isometric

    ReplyDelete
  17. plz tell us how to create footer of any website,with social media icons

    ReplyDelete
  18. sie infimation web digine karwani hai so plz hpl me ... vg30741@gmail.com

    ReplyDelete
  19. When 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

    ReplyDelete
  20. sorry sir i did'n find that image in this link send me
    https://www.freepik.com/free-photos-vectors/isometric

    ReplyDelete
  21. sir please send me image also

    ReplyDelete
  22. Sir can you send me the images

    ReplyDelete
  23. The background of the image is always in white color only

    ReplyDelete
  24. plz send me this image my email shabeeh945@gmail.com

    ReplyDelete
  25. Bhai sendphone me whatsapp phonenumber

    ReplyDelete
  26. sir can you send me the all images email muhammadarbaz05@gmail.com

    ReplyDelete