Login form with html and css, html css tutorial for beginners, html css full course

@# Create a Login Form with HTML and CSS #@

Creating a Login Form using HTML and CSS is a great way. Here's a step-by-step guide on how to make a Login Form.

HTML Code

<form> <p class="logo">Facebook</p> <input type="text" placeholder="Email" required=""> <input type="password" placeholder="Password" required=""> <button class="login">Log In</button> <a href="#">Forgot Password ?</a> <hr> <button class="create-account">Create New Account</button> </form>

यह HTML कोड एक सरल और आकर्षक लॉगिन फॉर्म को परिभाषित करता है। इसका विवरण निम्नलिखित है:

- `form`: यह फॉर्म टैग है, जो पूरे लॉगिन फॉर्म को समेटे हुए है।

- `p class="logo" Facebook: यह पैराग्राफ टैग है, जिसमें "Facebook" शब्द लोगो की तरह दिखाई देता है। इसमें क्लास "logo" लागू है, जो CSS द्वारा स्टाइल की गई है।

- `input type="text" placeholder="Email" required=""`: यह इनपुट फील्ड है, जहां उपयोगकर्ता अपना ईमेल दर्ज कर सकता है। `placeholder="Email"` यह बताता है कि इसमें ईमेल डालना है और `required` यह दर्शाता है कि यह फील्ड अनिवार्य है।

- `input type="password" placeholder="Password" required="": यह इनपुट फील्ड है, जहां उपयोगकर्ता अपना पासवर्ड दर्ज कर सकता है। `placeholder="Password"` यह बताता है कि इसमें पासवर्ड डालना है और `required` यह दर्शाता है कि यह फील्ड भी अनिवार्य है।

- `button class="login" Log In`: यह बटन है, जिसे दबाने पर उपयोगकर्ता लॉगिन कर सकता है। इसमें "login" क्लास लागू है, जो CSS द्वारा स्टाइल की गई है।

- `a href="#" Forgot Password ?`: यह एंकर टैग है, जो "Forgot Password?" लिंक प्रदान करता है। इसे क्लिक करने पर उपयोगकर्ता पासवर्ड भूल जाने की स्थिति में सहायता प्राप्त कर सकता है।

- `hr`: यह हॉरिजॉन्टल रूल टैग है, जो फॉर्म में एक क्षैतिज रेखा बनाता है।

- `button class="create-account" Create New Account`: यह बटन है, जिसे दबाने पर उपयोगकर्ता नया खाता बना सकता है। इसमें "create-account" क्लास लागू है, जो CSS द्वारा स्टाइल की गई है।

CSS Code

.logo { margin-bottom: 1rem; font-size: 1.2rem; text-align: center; color: #1877f2; font-weight: 700; } form { display: flex; flex-direction: column; background: #fff; padding: 1.5rem 1rem; width: 300px; border-radius: 0.5rem; box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%); } form input { outline: none; padding: 0.4rem 0.5rem; margin-bottom: 0.8rem; font-size: 0.9rem; } form input:focus { border: 1.8px solid #1877f2; } form .login { outline: none; border: none; background: #1877f2; padding: 0.8rem 1rem; border-radius: 0.4rem; font-size: 0.9rem; color: #fff; } form .login:hover { background: #0f71f1; cursor: pointer; } form a { text-decoration: none; text-align: center; font-size: 0.9rem; padding-top: 0.8rem; color: #1877f2; } form hr { background: #f7f7f7; margin: 0.5rem; } form .create-account { outline: none; border: none; background: #06b909; padding: 0.8rem 1rem; border-radius: 0.5rem; font-size: 0.9rem; color: #fff; width: 75%; margin: 0 auto; } form .create-account:hover { background: #03ad06; cursor: pointer; }

यह CSS कोड एक सरल और आकर्षक लॉगिन फॉर्म की स्टाइलिंग के लिए है। इसका विवरण निम्नलिखित है:

- `.logo`: यह क्लास एक लोगो के लिए है, जिसमें निचे की ओर 1rem का मार्जिन, 1.2rem का फॉन्ट साइज, केंद्रित टेक्स्ट, नीला रंग (#1877f2), और मोटा (700 वेट) फॉन्ट स्टाइल है।

- `form`: यह फॉर्म को स्टाइल करता है। फॉर्म में कॉलम दिशा में आइटम्स, सफेद पृष्ठभूमि (#fff), 1.5rem ऊपर और नीचे तथा 1rem किनारों की पैडिंग, 300px की चौड़ाई, 0.5rem की बॉर्डर-रेडियस, और हल्के काले रंग की छाया (शैडो) है।

- `form input`: इनपुट फील्ड्स के लिए स्टाइलिंग। इनमें कोई आउटलाइन नहीं, 0.4rem ऊपर और नीचे तथा 0.5rem किनारों की पैडिंग, 0.9rem का फॉन्ट साइज, और 0.8rem का निचला मार्जिन है।

- `form input:focus`: इनपुट फील्ड्स के फोकस पर बॉर्डर 1.8px नीला (#1877f2) होता है।

- `form .login`: लॉगिन बटन के लिए स्टाइलिंग। इसमें कोई आउटलाइन नहीं, कोई बॉर्डर नहीं, नीली पृष्ठभूमि (#1877f2), 0.8rem ऊपर और नीचे तथा 1rem किनारों की पैडिंग, 0.4rem की बॉर्डर-रेडियस, 0.9rem का फॉन्ट साइज, सफेद रंग (कलर #fff) है।

- `form .login:hover`: लॉगिन बटन के होवर होने पर पृष्ठभूमि हल्की नीली (#0f71f1) होती है और कर्सर पॉइंटर में बदलता है।

- `form a`: यह लिंक के लिए स्टाइलिंग है। इसमें कोई टेक्स्ट डेकोरेशन नहीं, केंद्रित टेक्स्ट, 0.9rem का फॉन्ट साइज, 0.8rem की टॉप पैडिंग, और नीला रंग (#1877f2) है।

- `form hr`: यह फॉर्म के भीतर की क्षैतिज रेखा के लिए है, जो हल्के ग्रे (#f7f7f7) रंग की है और 0.5rem का मार्जिन है।

- `form .create-account`: नया खाता बनाने के बटन के लिए स्टाइलिंग। इसमें कोई आउटलाइन नहीं, कोई बॉर्डर नहीं, हरी पृष्ठभूमि (#06b909), 0.8rem ऊपर और नीचे तथा 1rem किनारों की पैडिंग, 0.5rem की बॉर्डर-रेडियस, 0.9rem का फॉन्ट साइज, सफेद रंग (कलर #fff), 75% चौड़ाई, और स्वचालित मार्जिन (0 auto) है।

- `form .create-account:hover`: नया खाता बनाने के बटन के होवर होने पर पृष्ठभूमि गहरे हरे (#03ad06) रंग की होती है और कर्सर पॉइंटर में बदलता है।

JS Code

Output

Youtube whatsapp Facebook