HTML CSS Login Designs With Codes

HTML CSS Login Designs With Codes

Hello my dear friends. Today I am bringing up a whole new thing for you. That is today I am going to give you HTML CSS Login Designs With Codes. Most of people develop websites today. We all like to finish sites very quickly. But even for very experienced web developer sometimes it takes time to develop. Specially when we doing the responsive it takes some time. So we would like to keep our code and blocks in very organize way. We all mostly use components to build our sites. Because from that we can reduce time.

Today also I would like to give to login screen designs with source codes. The designs has made with by using bootstrap, HTML and CSS. If you like these designs all you have to do is just copy and paste the codes. For the images you can put your image URL. These components has build with bootstrap 4. Font awesome free library was also used. I really hope these designs will help you. When you using these things please give reference to our site.

User Login – Design 01

Login Design 01

HTML code – Design 01

<body>
    <div class="container-fluid">
        <div class="container container-style">
            <div class="text-center pb-4"><h1>Login Form</h1></div>
            <div class="text-center"><i class="fas fa-user-circle fa-5x" style="color: #7aa0c1; "></i></div>
            <form class="form-style">
                <div class="form-group col-lg-12">
                    <label for="" class="labeld1">Email address</label>
                    <input type="email" class="form-control input-style-d1" id="" name="" placeholder="Enter email">
                </div>
                <div class="form-group col-lg-12">
                    <label for="" class="labeld1">Password</label>
                    <input type="password" class="form-control input-style-d1" id="" name="" placeholder="Enter password">
                </div>
                <div class="text-center"><button class="btn btn-primary pl-4 pr-4">Login</button></div>
            </form>
        </div>
    </div>
  </body>

CSS code – Design 01

.container-style{
	background-color: #e3e4e4;
    width:32%;
    margin-top: 8rem;
    border-radius: 12px;
    padding: 1rem;
}
.form-style{
	justify-content: center;
}
.input-style-d1{
	border: 2px solid #00a1ff;
}
.labeld1{
	font-weight: 500;
}

User Login – Design 02

Login design 02

HTML code for – Design 02

<body style="background:linear-gradient(85deg, #281cd4, #ff00b1);">
    <div class="container-fluid" style="width: 60%;margin-top: 6rem; margin-bottom: 4rem;">
        <div class="row" style="border: 3px solid #80007c;">
            <div class="col-lg-6 p-5" style="background-color: #efefef;">
                <form>
                    <h1 class="text-center pb-4">Login Form</h1>
                    <div class="text-center"><i class="fas fa-user-circle fa-5x" style="color: #7aa0c1;"></i></div>
                    <div class="form-group col-lg-12">
                        <label for="" class="labeld1">Email address</label>
                        <input type="email" class="form-control input-style-d2" id="" name="" placeholder="Enter email">
                    </div>
                    <div class="form-group col-lg-12">
                        <label for="" class="labeld1">Password</label>
                        <input type="password" class="form-control input-style-d2" id="" name="" placeholder="Enter password">
                    </div>
                    <div class="text-center"><button class="btn btn-success pl-4 pr-4" id="" name="">Login</button></div>
                </form>
            </div>
            <div class="col-lg-6" style="background-color: #9c63e6;"></div>
        </div>
    </div>
  </body>

CSS codes – Design 02

.input-style-d1{
	border: 2px solid #00a1ff;
}
.labeld1{
	font-weight: 500;
}
.input-style-d2{
	border: 2px solid #9d00ff;
}

User Login – Design 03

User Login – Design 04

User Login – Design 05

Conclusion

Hope you have liked these awesome HTML CSS Login Designs With Codes. If you like and these were help for you, please don’t forget to comment and share. Please check how to create portfolio gallery also if you like. We will meet again with another nice tutorial. Until goodbye all.

Audy Ranathunga

Audy Ranathunga, Author of myexamnote is our most experienced author. She has been working as a blog post writer for 4 years. She joined with myexamnote before 1 year ago and she has contribute lots of valuable posts for readers.

This Post Has 5 Comments

  1. Avatar
    Senuli

    Nice design collection. So much helped.

  2. Avatar
    gralion torile

    I’m impressed, I need to say. Actually hardly ever do I encounter a weblog that’s both educative and entertaining, and let me inform you, you have got hit the nail on the head. Your thought is excellent; the issue is one thing that not sufficient persons are talking intelligently about. I’m very pleased that I stumbled throughout this in my search for one thing regarding this.

    1. Audy Ranathunga
      Audy Ranathunga

      Thank you for your sincere comment. Keep reading us.

  3. Avatar
    zoritoler imol

    Thank you for some other wonderful post. Where else may just anyone get that type of information in such a perfect means of writing? I’ve a presentation subsequent week, and I’m on the search for such information.

    1. Audy Ranathunga
      Audy Ranathunga

      Thank you so much.

Leave a Reply