Sign Up Page कैसे बनाये। Sign Up Page Front End using HTML and CSS। How to Create Sign Up Page

Abhi Patel April 05, 2021 WEB DEVELOPMENT

आपका Technovichar.com में स्वागत है।   यह पोस्ट HTML और CSS का उपयोग करके Sign Up Page कैसे बनाते है उसके  बारे में है। यदि आप HTML और CSS का उपयोग करके Sign Up Page का Front End कैसे बनाते है यह नहीं जानते हैं तब यह पोस्ट आपके लिए है।  इस Article को पढ़ने के बाद आप निश्चित रूप से  Sign Up Page कैसे बनाते है यह सिख जायेंगे। 


Sign_Up_Page_Front_End_using_HTML_and_CSS_in_hindi



Page Content : 


Sign Up Page kya hai?? HTML Editors

HTML Code लिखे 

HTML में कुछ InputField जोड़ें

Full HTML Code 

CSS File बनाये

यह CSS Code लिखे

Ready!!



Sign Up Page kya hai?? HTML Editors Details??


Sign Up एक Page है जो किसी भी विशिष्ट Platform में Account बनाने में मदद करता है। कई वेबसाइटों में साइन अप पेज का उपयोग उनके उपयोगकर्ता डेटा को पंजीकृत करने के लिए किया जाता है। अधिकांश वेबसाइटें HTML और CSS प्लेट फॉर्म का उपयोग साइन अप पेज Front End Design बनाने के लिए करती हैं। इस  पोस्ट को पढ़ने के बाद अगर आप इसे Like करते हैं तो अपने दोस्तों को शेयर करें ......



किसी भी HTML और CSS Website बनाने के लिए पहली बात यह है कि Code लिखने के लिए प्लेटफॉर्म का चयन करना है। कई प्लेट फॉर्म लिंक Notepad , Notepad ++, Atom, Microsoft Visual Studio Code और कई और हैं। Codepen सबसे अच्छे Online HTML, CSS और Javascript Editor में से एक है। यह Free Editors है ताकि आप इसे Free Use कर सकें।उनमें से किसी एक को चुनें।



Code Editor Select करने के बाद .html Extension से File बनाकर यह Code लिखे। 




HTML Code लिखे :





<!doctype html>

<html>

  <head>

    <title>SIGN UP PAGE</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device  width, 

initial  scale=1.0">

 </head>



<body>

 

  </body>

</html>



HTML में कुछ InputField जोड़ें :





<div class="maincontainer">

      <div class="heading">

        <h4>SIGN UP</h4>

        <hr>

      </div>

      

      <div class="inputpart">

       

        <input type="text" id="name" name="namehere"

 

placeholder="Enter Your Name">



        <input type="email" id="email" name="namehere" 



placeholder="Enter Your Email">



        <input type="password" id="password" name="namehere" 



placeholder="Enter  Password">

            <input type="password" id="conpassword" name="namehere"



 placeholder="Enter Confim Password"><br>



        <button type="submit" id="button" value="submit">

          SUBMIT

        </button>

        

        

      </div>

      

      <div class="signupwithother">

        <button id="logingoogle"><i class="fa fa-google" aria-

hidden="true"></i> Login with Google</button>

        <br>

        <button id="loginfacebook"><i class="fa fa-facebook" aria-

hidden="true"></i> Login with Facebook</button>

        <br>

        <button id="logintwitter"><i class="fa fa-twitter" aria-

hidden="true" id="ticon"></i> Login With Twitter</button>

      </div>

    </div>


Full HTML Code : 





<!doctype html>

<html>

  <head>

    <title>SIGN UP PAGE</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-

scale=1.0">

 <link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?

family=Anton&family=Krona+One&display=swap" rel="stylesheet">



    <link rel="stylesheet" 

href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/4.7.0/css/font-awesome.min.css">

    <script 

src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">

</script>

<link rel="stylesheet" href="style.css">

 </head>



<body>



<div class="maincontainer">

      <div class="heading">

        <h4>SIGN UP</h4>

        <hr>

      </div>

      

      <div class="inputpart">

       

        <input type="text" id="name" name="namehere" 

placeholder="Enter Your Name">

        <input type="email" id="email" name="namehere" 

placeholder="Enter Your Email">

        <input type="password" id="password" name="namehere" 

placeholder="Enter  Password">

            <input type="password" id="conpassword" name="namehere"

 placeholder="Enter Confim Password"><br>

        <button type="submit" id="button" value="submit">

          SUBMIT

        </button>

        

        

      </div>

      

      <div class="signupwithother">

        <button id="logingoogle"><i class="fa fa-google" aria-

hidden="true"></i> Login with Google</button>

        <br>

        <button id="loginfacebook"><i class="fa fa-facebook" aria-

hidden="true"></i> Login with Facebook</button>

        <br>

        <button id="logintwitter"><i class="fa fa-twitter" aria-

hidden="true" id="ticon"></i> Login With Twitter</button>

      </div>

    </div>

 

  </body>

</html>





अब आपको Front End कुछ इस प्रकार दिख रहा होगा : 





Sign_up_Page_Front_End_Design



CSS File बनाये :


यह CSS Code लिखे : 





*{

margin:0px 0px;

  padding:0px 0px;

  box-sizing:border-box;

}

body{

  background-color:#F5DF4D;

}

.maincontainer{

  position:relative;

  width:500px;

  height:400px;

  border-radius:20px;

  background-color:#5B5EA6;



  margin:30px auto;

  box-shadow:2px 2px 5px 5px rgba(0,0,0,0.4)

}

.heading{

  text-align:center;

  font-size:28px;

  padding-top:20px;

  margin



}

.heading h4{

  color:white;

  text-shadow:2px 2px black;

  font-family: 'Krona One', sans-serif;



}

.heading hr{

  width:30px;

  margin:auto;

 margin-top:10px;

  height:3px;

  background-color:white;

}

.inputpart{

  width:45%;

  height:300px;



  margin-top:10px;

  margin-left:9px;

}

#name{

  background-color:transparent;

    border:none;

  color:white;

  border-bottom:2px solid white;



font-family: 'Krona One', sans-serif;

  outline:none;



  margin-top:40px;

  width:100%;

  font-size:13px;

}

#email{

  background-color:transparent;

    border:none;

  color:white;

   font-size:13px;

  border-bottom:2px solid white;



font-family: 'Krona One', sans-serif;

  outline:none;



  margin-top:40px;

  width:100%;

   font-size:13px;

}

#email::placeholder{

  color:white;

 

}

#name::selected{

  border:none;

  background:transparent;

}

#name::placeholder{

  color:white;

}

#password{

   background-color:transparent;

    border:none;

  width:100%;

   font-size:13px;

  color:white;

  border-bottom:2px solid white;



font-family: 'Krona One', sans-serif;

  outline:none;



  margin-top:40px;

  width:100%;

  

}

#password::placeholder{

  color:white;

}

#conpassword{

   font-size:13px;

   background-color:transparent;

    border:none;

  color:white;

  border-bottom:2px solid white;



font-family: 'Krona One', sans-serif;

  outline:none;



  margin-top:40px;

  width:100%;

  

}

#conpassword::placeholder{

  color:white;

}

input:focus::-webkit-input-placeholder {

  color:transparent;

}

#button{

  width:100%;

  margin-top:30px;

  cursor:pointer;

  height:35px;

  background-color:white;

  border-radius:10px;



  box-shadow:2px 2px 2px 2px rgba(0,0,0,0.6);

  font-family: 'Krona One', sans-serif;

  transition:0.5s;

}

#button:hover{

  background-color:black;

  color:white;

  

}

  

.signupwithother{

  position:absolute;

  width:50%;



  height:100px;

  top:100px;

  left:250px;

}

.signupwithother button{

  margin-left:30px;

  margin-top:30px;

  

}

#logingoogle{

  padding:10px 5px;

  cursor:pointer;

  background-color:#FFFFFF;

  border:none;

  font-family: 'Krona One', sans-serif;;

  box-shadow:2px 2px 2px 2px rgba(0,0,0,0.4);

  border-radius:10px;



    transition:0.8s;

  

}

#logingoogle:hover{

  background-color:#4285F4;

  color:white;

}



#loginfacebook{

  padding:10px 10px;

  cursor:pointer;

    background-color:#FFFFFF;

  border:none;

  font-family: 'Krona One', sans-serif;;

  box-shadow:2px 2px 2px 2px rgba(0,0,0,0.4);

  border-radius:10px;



    transition:0.8s;

}

#loginfacebook:hover{

  background-color:#000000;

  color:white

}

#logintwitter{

  padding:10px 10px;

  cursor:pointer;

    

  background-color:#FFFFFF;

  border:none;

  font-family: 'Krona One', sans-serif;;

  box-shadow:2px 2px 2px 2px rgba(0,0,0,0.4);

  border-radius:10px;



    transition:0.8s;

}

#ticon:hover{

  color:#1DA1F2;

  

}

#logintwitter:hover{

  background-color:gray;

  color:white;

}


अब Signup Page तैयार है !!!!


Signup Page कुछ ऐसा दिखेगा ->


How_to_Create_Sign_Up_Page_Front_End_Design_in_Hindi


Conclusion : 


हमें उम्मीद है की आपको आज का हमारा यह यानी Sign Up Page कैसे बनाये। Sign Up Page Front End using HTML and CSS। How to Create Sign Up Page पूरी तरह से समज में आया होगा और मुझे यकीन है की आपको इस Article को पढ़कर काफी जानकारी भी मिली होगी.



यदि आपको हमारा यह लेख Sign Up Page कैसे बनाये। Sign Up Page Front End using HTML and CSS। How to Create Sign Up Page पसंद आया है तो आप इसे अपने दोस्तों और अपने सोशल मीडिया पर शेयर जरुर करे. जिससे वह लोग भी इस जानकारी का फायदा उठा सके और यह जान सके.



मुझे यकीन है की अब तक आपने यह लेख  Sign Up Page कैसे बनाये। Sign Up Page Front End using HTML and CSS। How to Create Sign Up Page  शेयर भी कर दिया होगा. हमारी हंमेशा से ही यह कोशिश रहती है की हम हमारे Readers को एकदम सही और सटीक जानकरी प्रदान करे. ताकि आप लोगो को  इन्टरनेट पर कही और जा कर Search करने की जरुरत न पड़े और आपका समय भी बच सके.



अगर अभी भी आपके मन में Sign Up Page कैसे बनाये। Sign Up Page Front End using HTML and CSS। How to Create Sign Up Page इसके बारे में कोई सवाल या डाउट है तो आप हमें कमेंट बॉक्स में जरुर बताये. हम आपको जानकारी देने की पूरी कोशिश करेंगे ।






TAGS :HTML ,  css , make sign up page using html and css



About Author : 

Hello friends, I am Abhi Patel author & founder of Technovichar.com. I am a student of IT engineering. I like to research and write about new things even if it is from any field. You will continue to support us in this way, we will keep on bringing such interesting information for you.

Post a Comment

0 Comments