DocsAllOver Minimalistic Login Page with CSS and Social Icons Snippets

Minimalistic Login Page with CSS and Social Icons

Oct. 25, 2024

HTML, CSS, Responsive, Card, Login Page, Form, Login Form, Ecommerce

Full Screen

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minimalistic Login Page</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600,700,800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
</head>

<body>
  <div class="container">
    <div class="form">
      <div class="sign-in-section">
        <h1>Log in</h1>
        <ul>
          <li><i class="fab fa-facebook-f"></i></li>
          <li><i class="fab fa-linkedin-in"></i></li>
          <li><i class="fab fa-twitter"></i></li>
        </ul>
        <p>or use your email</p>
        <form>
          <div class="form-field">
            <label for="email">Email</label>
            <input id="email" type="email" placeholder="Email" />
          </div>
          <div class="form-field">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password" />
          </div>
          <div class="form-options">
            <div class="checkbox-field">
              <input id="rememberMe" type="checkbox" class="checkbox" />
              <label for="rememberMe">Remember Me</label>
            </div>
            <a href="#">Forgot Password?</a>
          </div>
          <div class="form-field">
            <input type="submit" class="btn btn-signin" value="Submit" />
          </div>
        </form>
        <div class="links">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms & Conditions</a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

body {
    background: #f9f9f9;
    /* fallback for old browsers */
    font-family: "Raleway", sans-serif;
    color: #151515;
}

a {
    color: black;
    font-weight: 600;
    font-size: 0.85em;
    text-decoration: none;
}

label {
    color: black;
    font-weight: 600;
    font-size: 0.85em;
}

input:focus {
    outline: none;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.form {
    display: flex;
    width: auto;
    background: #fff;
    margin: 15px;
    padding: 25px;
    border-radius: 25px;
    box-shadow: 0px 10px 25px 5px #0000000f;
}

.sign-in-section {
    padding: 30px;
}

.sign-in-section h6 {
    margin-top: 0px;
    font-size: 0.75em;
}

.sign-in-section h1 {
    text-align: center;
    font-weight: 700;
    position: relative;
}

.sign-in-section h1:after {
    position: absolute;
    content: "";
    height: 5px;
    bottom: -15px;
    margin: 0 auto;
    left: 0;
    right: 0;
    width: 40px;
    background: #5271ff;
    -o-transition: 0.25s;
    -ms-transition: 0.25s;
    -moz-transition: 0.25s;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}

.sign-in-section h1:hover:after {
    width: 100px;
}

.sign-in-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.sign-in-section ul>li {
    display: inline-block;
    padding: 10px;
    font-size: 15px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
    box-shadow: 0px 3px 1px #0000000f;
    border: 1px solid #e2e2e2;
}

.sign-in-section p {
    text-align: center;
    font-size: 0.85em;
}

.form-field {
    display: block;
    width: 300px;
    margin: 10px auto;
}

.form-field label {
    display: block;
    margin-bottom: 10px;
}

.form-field input[type="email"],
input[type="password"] {
    width: -webkit-fill-available;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #e8e8e8;
}

.form-field input::placeholder {
    color: #e8e8e8;
}

.form-field input:focus {
    border: 1px solid #AE00FF;
}

.form-field input[type="checkbox"] {
    display: inline-block;
}

.form-options {
    display: block;
    margin: auto;
    width: 300px;
}

.checkbox-field {
    display: inline-block;
    float: left;
}

.form-options a {
    float: right;
    text-decoration: none;
}

.btn {
    padding: 15px;
    font-size: 1em;
    width: 100%;
    border-radius: 25px;
    border: none;
    margin: 20px 0px;
}

.btn-signin {
    cursor: pointer;
    background: #5271ff;
    color: #fff;
}

.links a:nth-child(1) {
    float: left;
}

.links a:nth-child(2) {
    float: right;
}

//Doesn't require any JS.

This snippet showcases a clean and minimalist login page design with social media integration. It offers a simple and intuitive user experience, allowing users to log in with their preferred method.

Key Features:

Responsive Design: The login page adapts seamlessly to different screen sizes, ensuring a consistent user experience across devices.
Customizable Styling: Easily modify the appearance of the page using CSS to match your website's design and branding.
Social Media Integration: Users can log in using their existing social media accounts, providing a convenient and quick authentication process.
Clear Input Fields: The email and password input fields are clearly labeled and easy to use.
Forgot Password Link: A link to the forgot password page is provided for added convenience.

Implementation:

Create the HTML Structure: Set up the basic HTML structure for the login page, including the container, form elements, and social media icons.
Apply CSS Styles: Use CSS to style the page elements, including the background, fonts, colors, and spacing. Customize the appearance to match your website's design.
Add JavaScript Functionality: Implement JavaScript to handle the form submission, social media authentication, and any other required interactions. You can use libraries like jQuery or native JavaScript for this purpose.

By following these steps, you can create a visually appealing and user-friendly login page that enhances the overall user experience of your website.

Latest Snippets

View All