Crafting a Sleek and Modern Login Page : HTML and CSS Tutorial

September 05, 2024
0

Crafting a Sleek and Modern Login Page : HTML and CSS Tutorial

Welcome to today’s tutorial, where we’ll be creating a stylish and functional login page using HTML and CSS. Whether you’re building a new project or looking to enhance an existing one, this guide will help you design a clean and attractive login interface.

HTML Code Breakdown

First, let's look at the HTML structure (login.html) of our login page:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form | Apna Suhil</title>
  <link rel="stylesheet" href="styles.css">
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
  <div class="wrapper">
    <form action="">
      <h1>Login</h1>
      <div class="input-box">
        <input type="text" placeholder="Username" required>
        <i class='bx bxs-user'></i>
      </div>
      <div class="input-box">
        <input type="password" placeholder="Password" required>
        <i class='bx bxs-lock-alt' ></i>
      </div>
      <div class="remember-forgot">
        <label><input type="checkbox">Remember Me</label>
        <a href="#">Forgot Password</a>
      </div>
      <button type="submit" class="btn">Login</button>
      <div class="register-link">
        <p>Dont have an account? <a href="#">Register</a></p>
      </div>
    </form>
  </div>
</body>
</html>


HTML Elements Explained

  1. Document Setup:

    • The <!DOCTYPE html> declaration specifies the HTML5 doctype.
    • The <html lang="en"> tag sets the language to English.

  2. Head Section:

    • <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensure proper encoding and responsiveness.
    • The <title> tag sets the page title.
    • The link tags include the external CSS file and Boxicons for icons.

  3. Body Content:

    • The <div class="wrapper"> contains the login form.
    • Inside the form, <h1> provides a title.
    • The input-box class is used for styling input fields and their icons.
    • A remember-forgot section includes a checkbox and a link for password recovery.
    • A submit button and a registration link round out the form.

CSS Styling

Here’s the CSS that styles (styles.css) our login page:


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.wrapper{
  width: 420px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(9px);
  color: #fff;
  border-radius: 12px;
  padding: 30px 40px;
}
.wrapper h1{
  font-size: 36px;
  text-align: center;
}
.wrapper .input-box{
  position: relative;
  width: 100%;
  height: 50px;
  
  margin: 30px 0;
}
.input-box input{
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 40px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}
.input-box input::placeholder{
  color: #fff;
}
.input-box i{
  position: absolute;
  right: 20px;
  top: 30%;
  transform: translate(-50%);
  font-size: 20px;

}
.wrapper .remember-forgot{
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0 15px;
}
.remember-forgot label input{
  accent-color: #fff;
  margin-right: 3px;

}
.remember-forgot a{
  color: #fff;
  text-decoration: none;

}
.remember-forgot a:hover{
  text-decoration: underline;
}
.wrapper .btn{
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.wrapper .register-link{
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0 15px;

}
.register-link p a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.register-link p a:hover{
  text-decoration: underline;
}


CSS Styling Details

  1. Global Styles:

    • We use * to reset margin, padding, and set box-sizing to border-box for consistent sizing.
    • font-family is set to "Poppins" for a clean, modern look.

  2. Body:

    • Flexbox is used to center the .wrapper both horizontally and vertically.
    • The background image is set to cover the entire viewport with a centered position.

  3. Wrapper:

    • The .wrapper class styles the container with a semi-transparent border and a backdrop filter to create a frosted glass effect.

  4. Input Boxes:

    • The input-box class positions the input fields relative to the icons.
    • Input fields are styled to be transparent with rounded corners and a subtle border.

  5. Button and Links:

    • The submit button (.btn) is styled with a white background and a shadow for a lifted effect.
    • Links and text colors are adjusted for readability against the dark background.

Conclusion

By combining HTML and CSS, we've created a modern login page that is both functional and visually appealing. This page features a clean design with a frosted glass effect, stylish icons, and a user-friendly interface.

Feel free to adjust the styles and layout to better fit your specific needs. If you have any questions or would like to share your own enhancements, drop a comment below!

Happy coding!


--------------------------- H I N D I ( हिन्दी ) ---------------------------

आकर्षक और आधुनिक लॉगिन पेज कैसे बनाएं: HTML और CSS ट्यूटोरियल

नमस्ते और आज के ट्यूटोरियल में आपका स्वागत है। इस ब्लॉग पोस्ट में, हम एक आकर्षक और कार्यात्मक लॉगिन पेज बनाने का तरीका जानेंगे, जो HTML और CSS का उपयोग करके डिजाइन किया गया है। चाहे आप एक नया प्रोजेक्ट बना रहे हों या मौजूदा प्रोजेक्ट को सुधारना चाहते हों, यह गाइड आपकी मदद करेगी एक साफ-सुथरे और सुंदर लॉगिन इंटरफेस को डिज़ाइन करने में।

HTML कोड का विश्लेषण

पहले, हम अपने लॉगिन पेज की HTML संरचना पर (login.html) नज़र डालेंगे:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Form | Apna Suhil</title>
  <link rel="stylesheet" href="styles.css">
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
  <div class="wrapper">
    <form action="">
      <h1>Login</h1>
      <div class="input-box">
        <input type="text" placeholder="Username" required>
        <i class='bx bxs-user'></i>
      </div>
      <div class="input-box">
        <input type="password" placeholder="Password" required>
        <i class='bx bxs-lock-alt' ></i>
      </div>
      <div class="remember-forgot">
        <label><input type="checkbox">Remember Me</label>
        <a href="#">Forgot Password</a>
      </div>
      <button type="submit" class="btn">Login</button>
      <div class="register-link">
        <p>Dont have an account? <a href="#">Register</a></p>
      </div>
    </form>
  </div>
</body>
</html>

HTML तत्वों की व्याख्या

  1. डॉक्यूमेंट सेटअप:

    • <!DOCTYPE html> घोषणा HTML5 डॉकटाइप को निर्दिष्ट करती है।
    • <html lang="en"> टैग भाषा को अंग्रेजी के रूप में सेट करता है।

  2. हेड सेक्शन:

    • <meta charset="UTF-8"> और <meta name="viewport" content="width=device-width, initial-scale=1.0"> उचित एनकोडिंग और उत्तरदायित्व सुनिश्चित करते हैं।
    • <title> टैग पेज का शीर्षक सेट करता है।
    • link टैग बाहरी CSS फ़ाइल और बॉक्सआइकॉन को शामिल करते हैं।

  3. बॉडी कंटेंट:

    • <div class="wrapper"> लॉगिन फॉर्म को शामिल करता है।
    • फॉर्म के अंदर, <h1> शीर्षक प्रदान करता है।
    • input-box क्लास इनपुट फ़ील्ड और उनके आइकन के लिए स्टाइलिंग और पोजिशनिंग के लिए उपयोग की जाती है।
    • एक remember-forgot सेक्शन चेकबॉक्स और पासवर्ड रिकवरी के लिए लिंक को शामिल करता है।
    • सबमिट बटन और एक रजिस्ट्रेशन लिंक फॉर्म को पूरा करते हैं।

CSS स्टाइलिंग

अब हम CSS पर नज़र डालते हैं (styles.css) जो हमारे लॉगिन पेज को स्टाइल करता है:


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}
.wrapper{
  width: 420px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(9px);
  color: #fff;
  border-radius: 12px;
  padding: 30px 40px;
}
.wrapper h1{
  font-size: 36px;
  text-align: center;
}
.wrapper .input-box{
  position: relative;
  width: 100%;
  height: 50px;
  
  margin: 30px 0;
}
.input-box input{
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgba(255, 255, 255, .2);
  border-radius: 40px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}
.input-box input::placeholder{
  color: #fff;
}
.input-box i{
  position: absolute;
  right: 20px;
  top: 30%;
  transform: translate(-50%);
  font-size: 20px;

}
.wrapper .remember-forgot{
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0 15px;
}
.remember-forgot label input{
  accent-color: #fff;
  margin-right: 3px;

}
.remember-forgot a{
  color: #fff;
  text-decoration: none;

}
.remember-forgot a:hover{
  text-decoration: underline;
}
.wrapper .btn{
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 40px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .1);
  cursor: pointer;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.wrapper .register-link{
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0 15px;

}
.register-link p a{
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
.register-link p a:hover{
  text-decoration: underline;
}

CSS स्टाइलिंग विवरण

  1. ग्लोबल स्टाइल्स:

    • * का उपयोग मार्जिन, पैडिंग रीसेट करने और box-sizing को border-box पर सेट करने के लिए किया जाता है।
    • font-family को "Poppins" पर सेट किया गया है जिससे एक साफ और आधुनिक लुक मिलता है।

  2. बॉडी:

    • फ्लेक्सबॉक्स का उपयोग .wrapper को क्षैतिज और ऊर्ध्वाधर रूप से केंद्रित करने के लिए किया जाता है।
    • बैकग्राउंड इमेज को पूरे व्यूपोर्ट पर कवर के साथ सेट किया गया है और केंद्रित किया गया है।

  3. व्रैपर:

    • .wrapper क्लास कंटेनर को सेमी-ट्रांसपेरेंट बॉर्डर और बैकड्रॉप फिल्टर के साथ स्टाइल करती है, जो एक फ्रॉस्टेड ग्लास प्रभाव उत्पन्न करता है।

  4. इनपुट बॉक्स:

    • input-box क्लास इनपुट फ़ील्ड्स को आइकनों के सापेक्ष पोजिशन करती है।
    • इनपुट फ़ील्ड्स को ट्रांसपेरेंट बैकग्राउंड और गोल कोनों के साथ स्टाइल किया गया है।

  5. बटन और लिंक:

    • सबमिट बटन (.btn) को सफेद बैकग्राउंड और एक छाया के साथ स्टाइल किया गया है, जो एक उन्नत प्रभाव पैदा करता है।
    • लिंक और टेक्स्ट के रंग को डार्क बैकग्राउंड के खिलाफ पठनीयता के लिए समायोजित किया गया है।

निष्कर्ष


HTML और CSS का उपयोग करके, हमने एक आधुनिक लॉगिन पेज डिज़ाइन किया है जो दोनों कार्यात्मक और दृश्यात्मक रूप से आकर्षक है। यह पेज एक साफ डिज़ाइन के साथ एक फ्रॉस्टेड ग्लास प्रभाव को पेश करता है, स्टाइलिश आइकन और एक उपयोगकर्ता-अनुकूल इंटरफेस।

इस आधारभूत संरचना को आपकी विशिष्ट आवश्यकताओं के अनुसार समायोजित करें। यदि आपके पास कोई प्रश्न है या आप अपनी खुद की सुधारों को साझा करना चाहते हैं, तो कृपया नीचे एक टिप्पणी छोड़ें!

कोडिंग का आनंद लें!

Tags:

You Might Like

Show more
HTML and CSS Tutorial

Post a Comment

0Comments

Post a Comment (0)
Share to other apps
Copy Post link