HTML AND CSS, YouTube

Glassmorphism Login Form using Html & CSS

Glassmorphism Login Form using Html & CSS 2021

Coding BD given here Glassmorphism Login Form using Html & CSS | 2021. We create glassmorphism login form step by step. It is the most important part Of latest glass effect. We created a login form. We have given more importance to CSS Glassmorphism. We have used css background animation because they need high effects. Thank you so much.

Glassmorphism Login Form using Html & CSS

➡️Responsive website html css javascript | part( 1 ): https://www.youtube.com/watch?v=g0ART2Jc3yw&t=3s

➡️ Responsive Services Section: https://www.youtube.com/watch?v=wvLkyrkoS_w&t=69s

➡️ CSS Clip Path Hover Circle Hover Effects: https://www.youtube.com/watch?v=cRSgoViJdR0

➡️ CSS Responsive CARD Hover Effects & Adding Stroke to Text | Html5 CSS3 2021: https://www.youtube.com/watch?v=QVMJ5PdX7Ag&t=14s

➡️ Neon Light Button Animation Effects on Hover | CSS Snake Border: https://www.youtube.com/watch?v=GtVSF-efdJQ&t=102s

➡️ Responsive Box Model Web Design Using CSS Flexbox: https://www.youtube.com/watch?v=03RuVB6B5KQ

➡️ Digital Clock with Animated Progress-bar | HTML CSS & Vanilla Javascript: https://www.youtube.com/watch?v=6A6HpxMmfX4

➡️ How to create a light to dark mode for HTML CSS & Vanilla Javascript 2021: https://www.youtube.com/watch?v=43FbR6ailIk&t=28s

➡️Scroll top button : https://www.youtube.com/watch?v=9fDEJkXQIIs&t=77s

➡️ Animated eid mubarak 2021 using Html CSS & Javascript: https://www.youtube.com/watch?v=60H2gt3klZU

Here is all Source code. You can follow this steps:

  1. Create 1 folder
  2. create 1 HTML file: index.html
  3. create 1 CSS file: style.css
  4. copy HTML code and pest HTML file, copy CSS code and past CSS file
  5. Now give a smile and jump out loud. 😍😍
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div class="main_content">
       <div class="box">
           <div class="img_box">
               <img src="./coffee_1.gif" alt="Coffee Cup">
           </div>
           <form action="">
               <div class="form-group">
                   <label for="example">Name</label>
                   <input type="text" id="example" placeholder="Enter your name" required>
               </div>
               <div class="form-group">
                <label for="example">Email</label>
                <input type="text" id="example" placeholder="Enter E-mail Address" required>
            </div>
            <div class="form-group">
                <label for="example">Password</label>
                <input type="text" id="example" placeholder="Enter your Password" required>
            </div>
            <div class="form-group">
                <label for="example">C-Password</label>
                <input type="text" id="example" placeholder="Enter your C-password" required>
            </div>
            <div class="form-group">
                <input type="checkbox" id="example" required>
                <label for="example">I agree to Terms</label>
                
            </div>
            <button type="submit">Login</button>
           </form>
       </div>
   </div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];400;500;600;800&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: linear-gradient(#2c47b53d, #2c47b5c7), url('https://images.unsplash.com/photo-1447933601403-0c6688de566e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y29mZmVlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    position: relative;
}

.main_content {
    width: 500px;
    height: 510px;
    position: absolute;
    padding: 35px 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(15px);
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.825);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.box .img_box {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: -12%;
    left: 36%;
    width: 150px;
    height: 150px;
}

.box .img_box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

form{
    width: 100%;
    height: 100%;
    margin-top: 50px;
}

.form-group{
    padding: 5px 0;
}

input[type="text"],
input[type="email"],
input[type="password"]{
    width: 100%;
    height: 42px;
    border: none;
    outline: none;
    padding: 5px 10px;
    background: #ddd;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

label{
    font-size: 14px;
    color: rgb(168, 145, 145);
}

button{
    width: 100%;
    height: 100%;
    background: #F0EADA;
    font-size: 16px;
    color: #000;
    letter-spacing: 2px;
    font-weight:  700;
    transition: .5s;
    cursor: pointer;
    padding: 13px 30px;
    border: none;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
}

button:hover{
    background: #BD9785;
}

You can download Free Image Here: Unsplash

Don’t Forget to Follow me on all Social Network

YouTube: https://www.youtube.com/channel/UCw9etYfx-25oKB_qt1fFNWw

Facebook Page: https://www.facebook.com/codingbd2021

LinkedIn: https://www.linkedin.com/in/sajjat-ho… 

GitHub: https://github.com/cgsaleh8383

You can see Image Hover Effect

#codingbd #eidmubarak #htmlcss

One thought on “Glassmorphism Login Form using Html & CSS

  1. Annabelle Rollie says:

    Thanks, I’ve been searching for info about this topic for ages and yours is the best I have found so far.

Leave a Reply

Your email address will not be published. Required fields are marked *