Can I use "Log In / Sign Up - pure css snippet" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Log In / Sign Up - pure css snippet — Free Forms Snippet (Bootstrap 5)

Loading…

1<div class="section"> 2 <div class="container"> 3 <div class="row full-height justify-content-center"> 4 <div class="col-12 text-center align-self-center py-5"> 5 <div class="section pb-5 pt-5 pt-sm-2 text-center"> 6 <h6 class="mb-0 pb-3"><span>Log In </span><span>Sign Up</span></h6> 7 <input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/> 8 <label for="reg-log"></label> 9 <div class="card-3d-wrap mx-auto"> 10 <div class="card-3d-wrapper"> 11 <div class="card-front"> 12 <div class="center-wrap"> 13 <div class="section text-center"> 14 <h4 class="mb-4 pb-3">Log In</h4> 15 <div class="mb-3"> 16 <input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off"> 17 <i class="input-icon uil uil-at"></i> 18 </div> 19 <div class="mb-3 mt-2"> 20 <input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off"> 21 <i class="input-icon uil uil-lock-alt"></i> 22 </div> 23 <a href="#" class="btn mt-4">submit</a> 24 <p class="mb-0 mt-4 text-center"><a href="#0" class="link">Forgot your password?</a></p> 25 </div> 26 </div> 27 </div> 28 <div class="card-back"> 29 <div class="center-wrap"> 30 <div class="section text-center"> 31 <h4 class="mb-4 pb-3">Sign Up</h4> 32 <div class="mb-3"> 33 <input type="text" name="logname" class="form-style" placeholder="Your Full Name" id="logname" autocomplete="off"> 34 <i class="input-icon uil uil-user"></i> 35 </div> 36 <div class="mb-3 mt-2"> 37 <input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off"> 38 <i class="input-icon uil uil-at"></i> 39 </div> 40 <div class="mb-3 mt-2"> 41 <input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off"> 42 <i class="input-icon uil uil-lock-alt"></i> 43 </div> 44 <a href="#" class="btn mt-4">submit</a> 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 </div> 51 </div> 52 </div> 53 </div> 54 </div>

Log In / Sign Up - pure css snippet

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Forms snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Deep Space API Key Manager with Dynamic Glow Effects

Aurora Mint Neumorphic Event Scheduler with Drag Selection