Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2
Authentication - All Examples
Discover 10 Authentication examples available in Loopple
Sign Up Illustration
Sign Up Card
Soft Ui Design System
Authentication Section With Card In The Left And Text
Authentication With Card In The Left And Background Image In The Right
Sign In Illustration
<section class="draggable">
<div class="page-header min-vh-100">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
<div class="card card-plain">
<div class="card-header pb-0 text-left bg-transparent">
<h4 class="font-weight-bolder">Sign In</h4>
<p class="mb-0">Enter your email and password to sign in</p>
</div>
<div class="card-body">
<form role="form">
<div class="mb-3">
<input type="email" class="form-control form-control-lg" placeholder="Email" aria-label="Email" aria-describedby="email-addon">
</div>
<div class="mb-3">
<input type="email" class="form-control form-control-lg" placeholder="Password" aria-label="Password" aria-describedby="password-addon">
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rememberMe">
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign in</button>
</div>
</form>
</div>
<div class="card-footer text-center pt-0 px-lg-2 px-1">
<p class="mb-4 text-sm mx-auto">
Don't have an account?
<a href="javascript:;" class="text-primary text-gradient font-weight-bold">Sign up</a>
</p>
</div>
</div>
</div>
<div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
<div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center">
<img src="https://demos.creative-tim.com/soft-ui-design-system/assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute opacity-4 start-0">
<div class="position-relative">
<img class="max-width-500 w-100 position-relative z-index-2" src="https://demos.creative-tim.com/soft-ui-design-system/assets/img/illustrations/chat.png">
</div>
<h4 class="mt-5 text-white font-weight-bolder">"Attention is the new currency"</h4>
<p class="text-white">The more effortless the writing looks, the more effort the writer actually put into the process.</p>
</div>
</div>
</div>
</div>
</div>
</section><section class="draggable">
<div class="page-header min-vh-100">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
<div class="card card-plain">
<div class="card-header pb-0 text-left bg-transparent">
<h4 class="font-weight-bolder">Sign In</h4>
<p class="mb-0">Enter your email and password to sign in</p>
</div>
<div class="card-body">
<form role="form">
<div class="mb-3">
<input type="email" class="form-control form-control-lg" placeholder="Email" aria-label="Email" aria-describedby="email-addon">
</div>
<div class="mb-3">
<input type="email" class="form-control form-control-lg" placeholder="Password" aria-label="Password" aria-describedby="password-addon">
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="rememberMe">
<label class="form-check-label" for="rememberMe">Remember me</label>
</div>
<div class="text-center">
<button type="button" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign in</button>
</div>
</form>
</div>
<div class="card-footer text-center pt-0 px-lg-2 px-1">
<p class="mb-4 text-sm mx-auto">
Don't have an account?
<a href="javascript:;" class="text-primary text-gradient font-weight-bold">Sign up</a>
</p>
</div>
</div>
</div>
<div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
<div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center">
<img src="https://demos.creative-tim.com/soft-ui-design-system/assets/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute opacity-4 start-0">
<div class="position-relative">
<img class="max-width-500 w-100 position-relative z-index-2" src="https://demos.creative-tim.com/soft-ui-design-system/assets/img/illustrations/chat.png">
</div>
<h4 class="mt-5 text-white font-weight-bolder">"Attention is the new currency"</h4>
<p class="text-white">The more effortless the writing looks, the more effort the writer actually put into the process.</p>
</div>
</div>
</div>
</div>
</div>
</section>
