How to Design LOG IN Form use HTML and CSS

HTML और  css  की  मदद  से  आज  मै  आपको  एक  पेज  डिज़ाइन  करना  बताऊंगा  मै  यह  आर्टिकल Hindi में दे रहा हूं उम्मीद है आपको पसंद आएगा HTML से Website या Web Application बनाये जाते है यदि आप अपनी खुद की Website बनाना चाहते है और पैसे कमाना चाहते है तो HTML से अच्छा और सरल कोई रास्ता नहीं है यदि आपएक सफल Web Designer या Web Developer बनाना चाहते है, तो HTML को बहुत अच्छे से सीखना आपके लिए जरुरी है, क्योंकि इसमें HTML जड़ का काम करेगा और जितना जड़ को पानी दोगे यानि जितना अच्छे से आप HTML सीखोगे आपका Web Developing का ज्ञान बढ़ता जायेगा लोग अक्सर सोचते है की एक Website बनाना बहुत मुश्किल काम है पर ऐसा नहीं है हर कोई एक Website बनाना सीख सकता है बस आप में लगन होनी चाहिए HTML बहुत सरल भाषा है इसको सीखना कोई बड़ी बात नहीं है HTML से Website बनाना बहुत सरल है और यह नि: शुल्क है इसमें किसी Software की भी जरुरत नहीं पड़ती. 
अगर आपको  ऐसा पेज  डिज़ाइन  करना हो  HTML  की  मदद से  तो AAP  हमारे  इस SOURCE  CODE  की मदद  ले सकते है।

Username
Password
                

               Forgot password?

WELCOME IN MY PAGE

<form action="vik.html">

<center><div class="imgcontainer">

    <img src="A.jpg" alt="Avatar" class="avatar">

  </div>

  <div class="container">

    <label><b>Username</b></label>

    <input type="text" placeholder="Enter Username" name="uname" required  name="mail" id="mail" onKeyUp="abc();"><span id="out"></span>

<br>

    <label><b> Password</b></label>

    <input type="password" placeholder="Enter Password" required name="pa" id="pa" size="20"  onKeyUp="pass();"><span id="pss"></span>

<br>

   &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <button type="submit">LOG IN</button>

&nbsp; <button type="submit">SIGN UP</button>

</div>

   &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;<span class="psw">Forgot <a href="#">password?</a></span>

</form</center>

<h1><marquee scrollamount="20" behavior="alternate">  WELCOME  IN   MY   PAGE</marquee></h1>

<style>

h1{font-family: Calibri; font-size:45pt; font-style: normal; font-weight: bold; color:SlateBlue;

  }

body{background-color: #234511;}

form {

    border: 1px solid #f1f1f1;

}

/* Full-width inputs */

input[type=text], input[type=password] {

    width: 25%;

    padding: 15px 10px;

    margin: 8px 0;

    display: inline-block;

    border: 1px solid #ccc;

    box-sizing: border-box;

}

/* Set a style for all buttons */

button {

    background-color: #gold;

    color: #765675;

    padding: 5px 10px;

    margin: 10px 0;

    cursor: pointer;

    width: 12%;

border: 1;

  border-bottom: 1px solid $primary;

  outline: 0;

    color: #yellow;

  font-size: 2rem;

  line-height: 2rem;

  transition: all .5s cubic-bezier(.4, .25, .8, .3);

  font-style: normal; font-weight: bold; color:SlateBlue;

}

/* Add a hover effect for buttons */

button:hover {

    opacity: 0.8;

}

/* Extra style for the cancel button (red) */

.cancelbtn {

    width: 7px;

    padding: 7px 12px;

}

/* Center the avatar image inside this container */

.imgcontainer {

    text-align: center;

    margin: 24px 0 12px 0;

}

/* Avatar image */

img.avatar {

    width: 18%;

    border-radius: 50%;

}

/* Add padding to containers */

.container {

    padding: 16px;

}

/* The "Forgot password" text */

span.psw {

    float: center;

    padding-top: 45px;

}

}

</style>

<b>आप जब यह पेज पर Browser पर रन कराये तो आपको हमारी pic न show करे इसके लिए आपको कोड में कुछ changes करना पड़ेगा।<h2> <img alt="plz give correct image location" class="avatar" src="A.jpg" /></h2 > इस लाइन में आपको इमेज का loction  देना पड़ेगा <b >

यदि आपके मन में कोई सवाल है तो हमसे  सम्पर्क

 करें. यदि आपको हमारा Blog पसंद आया तो Subscribe करना न भूले इससे आपको आगे  की नयी-नयी जानकारी आपके Email पर मिलती रहेगी.अगर ये पोस्ट आपको अच्छी लगी तो इसे अपने दोस्तों के साथ शेयर करना न भूलें. आप इसे FACEBOOK या TWITTER जैसे सोशल नेट्वर्किंग साइट्स पर शेयर करके इसे और लोगों तक पहुचाने में हमारी मदद करें. धन्यवाद !
आप हमसे  FACEBOOK पर मिल सकते है 

1. धन्यवाद