Login page with snake highlight animation

Forms Bootstrap 5Free+ CSS+ JS

Free Bootstrap 5 form snippet — Login page with snake highlight animation. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.

3.0k views91 downloads3 years ago

gosnippets.com/preview/login-page-with-snake-highlight-animation

Source Code

1<div class="page">
2  <div class="container">
3    <div class="left">
4      <div class="login">Login</div>
5    </div>
6    <div class="right">
7      <svg viewBox="0 0 320 300">
8        <defs>
9          <linearGradient
10                          inkscape:collect="always"
11                          id="linearGradient"
12                          x1="13"
13                          y1="193.49992"
14                          x2="307"
15                          y2="193.49992"
16                          gradientUnits="userSpaceOnUse">
17            <stop
18                  style="stop-color:#ff00ff;"
19                  offset="0"
20                  id="stop876" />
21            <stop
22                  style="stop-color:#ff0000;"
23                  offset="1"
24                  id="stop878" />
25          </linearGradient>
26        </defs>
27        <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" />
28      </svg>
29      <div class="form">
30        <label for="email">Email</label>
31        <input type="email" id="email">
32        <label for="password">Password</label>
33        <input type="password" id="password">
34        <input type="submit" id="submit" value="Submit">
35      </div>
36    </div>
37  </div>
38</div>
39<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>

More Forms snippets

Bootstrap 5 simple login form with social login

Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Bootstrap 5 Login Form UI Design snippets

Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

FormsView →

Bootstrap 5 Fancy user login form snippets

Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="page"> 2 <div class="container"> 3 <div class="left"> 4 <div class="login">Login</div> 5 </div> 6 <div class="right"> 7 <svg viewBox="0 0 320 300"> 8 <defs> 9 <linearGradient 10 inkscape:collect="always" 11 id="linearGradient" 12 x1="13" 13 y1="193.49992" 14 x2="307" 15 y2="193.49992" 16 gradientUnits="userSpaceOnUse"> 17 <stop 18 style="stop-color:#ff00ff;" 19 offset="0" 20 id="stop876" /> 21 <stop 22 style="stop-color:#ff0000;" 23 offset="1" 24 id="stop878" /> 25 </linearGradient> 26 </defs> 27 <path d="m 40,120.00016 239.99984,-3.2e-4 c 0,0 24.99263,0.79932 25.00016,35.00016 0.008,34.20084 -25.00016,35 -25.00016,35 h -239.99984 c 0,-0.0205 -25,4.01348 -25,38.5 0,34.48652 25,38.5 25,38.5 h 215 c 0,0 20,-0.99604 20,-25 0,-24.00396 -20,-25 -20,-25 h -190 c 0,0 -20,1.71033 -20,25 0,24.00396 20,25 20,25 h 168.57143" /> 28 </svg> 29 <div class="form"> 30 <label for="email">Email</label> 31 <input type="email" id="email"> 32 <label for="password">Password</label> 33 <input type="password" id="password"> 34 <input type="submit" id="submit" value="Submit"> 35 </div> 36 </div> 37 </div> 38</div> 39<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>