Login UI

Developer
Caio Cares
Size
4,958 Kb
Views
4,048
  1. Login UI Previews
  2. Login UI HTML Codes
  3. Login UI CSS Codes
  4. Login UI JS Codes

How do I make an login ui?

What is a login ui? How do you make a login ui? This script and codes were developed by Caio Cares on 20 January 2023, Friday.

Login UI Previews
IQ Test

Login UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login UI</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <header> <a class="back"><i class="fa fa-arrow-left" aria-hidden="true"></i></a> </header> <h1 class="brandName">Go!</h1> <div class="introduction"> <div class="overlay"> <div class="block"></div> <cite>Avoid surge & pay less for a Taxi driver</cite> </div> </div> <div class="register"> <form action="javascript:void(0)" method="post"> <label>Full name</label> <input type="text" /> <label>Password</label> <input type="password" /> <label>Email</label> <input type="text" /> <label>Country</label> <input type="text" /> <button>Sign-up</button> </form> </div> <div class="blue-bar"></div> <footer> <button>Create Account</button> <p>Already have an account? <a>Sign In</a></p> </footer>
</div>
<!-- <p> ref: https://dribbble.com/shots/3224977-Sign-in-Animation </p> --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Login UI - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
body { background: #202020; font-family: 'Droid Sans', sans-serif;
}
.container { width: 414px; height: 667px; border: 1px solid #000; position: relative; margin: 0 auto; background: #0e2b45; overflow: hidden; /* Name */
}
.container header { position: absolute; width: 100%; display: block; z-index: 3; opacity: 0; transition: opacity 0.2s ease-in-out 0.2s;
}
.container header.in { opacity: 1;
}
.container header.in a { transform: translateX(2vh);
}
.container header a { position: absolute; top: 20px; left: 0; color: white; font-size: 12px; margin: 3px 0 0 0; display: block; float: left; transform: translateX(-5vh); transition: transform 0.5s ease-in-out 0.7s;
}
.container .brandName { position: absolute; top: 31vh; left: 50%; width: 100px; margin: 0 0 20px -50px; color: #fff; font-size: 45px; font-family: 'Droid Sans'; font-weight: normal; text-align: center; text-shadow: 2px 2px 1px rgba(150, 150, 150, 0.5); z-index: 2; transition: font-size 0.8s, top 0.8s;
}
.container .brandName.in { font-size: 18px; top: 2vh;
}
.container .brandName.out { top: 31vh; font-size: 45px; transition: font-size 0.8s ease 0.5s, top 0.8s ease 0.3s;
}
.container .introduction { background-image: url(http://picjumbo.imgix.net/HNCK4003.jpg?q=80&h=840&sharp=0); width: 100%; height: 100%; background-size: cover; background-position: top center; opacity: 1; transition: opacity 0.4s ease-out 0.1s;
}
.container .introduction.out { opacity: 0;
}
.container .introduction.in { transition: opacity 0.4s ease-out 0.5s;
}
.container .overlay { position: relative; background: rgba(14, 43, 69, 0.8); float: left; margin: 0; padding: 0; width: 100%; height: 100%;
}
.container .overlay .block { position: relative; left: 50%; width: 50px; height: 50px; background: #000; border: 2px solid #fff; border-radius: 15px; background: url(https://logopond.com/logos/addce9173d683be69a8cbd3613729da8.png); background-size: cover; background-position: center center; margin: 15vh 0 0 -25px;
}
.container .overlay cite { color: #f4f4f4; text-align: center; width: 90%; position: relative; left: 50%; margin: 140px 0 0 -45%; display: block;
}
.container .blue-bar { position: absolute; margin: 0; padding: 0; width: 100%; height: 40px; background: #0c8fcc; z-index: 1; transition: background-color 0.3s ease;
}
.container footer { position: absolute; bottom: 0; left: 0; width: 100%; min-height: 70px; z-index: 2;
}
.container footer.in button { opacity: 0;
}
.container footer.out button { transition: opacity 0.3s ease-out 1s; opacity: 1;
}
.container footer button { width: 100%; height: 40px; background: transparent; border: 0; float: left; font-size: 12px; font-weight: bold; color: white; text-transform: uppercase; margin: 0; outline: none; transition: opacity 0.3s ease-out 0s;
}
.container footer button:focus { outline: none;
}
.container footer p { width: 100%; text-align: center; color: #969696; font-size: 10px; margin: 15px 0; float: left;
}
.container footer p a { color: white;
}
.container .register { position: absolute; top: 13vh; width: 90%; margin: 0 5%; opacity: 0;
}
.container .register.in { transition: opacity 0.9s ease-out 0.9s; opacity: 1;
}
.container .register.in input { transition: width 2s ease 0.5s; width: 100%;
}
.container .register.in button { transition: opacity 2.5s ease 0.9s; opacity: 1;
}
.container .register.out { transition: opacity 0.5s ease-out 0s; opacity: 0;
}
.container .register label { width: 100%; display: block; color: white; font-size: 12px;
}
.container .register input { width: 0%; background: transparent; border: 0; border-bottom: 1px solid #263644; margin: 10px 0 45px 0; display: block; padding: 5px 0; color: #ccc;
}
.container .register input:focus { outline: 0;
}
.container .register button { background: #26384b; border: 0; width: 100%; padding: 10px 0; color: #969696; text-transform: uppercase; opacity: 0;
}

Login UI - Script Codes JS Codes

var footer = $('footer').position();
var blueBar = $('.blue-bar').get(0);
var brandName = $('.brandName').get(0);
$('.blue-bar').css('top', footer.top);
$('footer button').on('click', function(){ var tl = new TimelineLite(); tl.to(blueBar, 0.8, {ease: Expo.easeInOut, height: "60px", top: 0}).to(blueBar, 0.3, {background: '#26384b'}); $(brandName).removeClass('out').addClass('in'); $('header').addClass('in'); $('footer').removeClass('out').addClass('in'); $('.introduction').removeClass('in').addClass('out'); $('.block').addClass('in'); $('.register').removeClass('out').addClass('in');
});
$('header a').on('click', function(){ $('header').removeClass('in'); $('footer').removeClass('in').addClass('out'); $('.introduction').removeClass('out').addClass('in'); $('.register').removeClass('in').addClass('out'); $(brandName).removeClass('in').addClass('out'); TweenLite.to(blueBar, 1, {ease: Expo.easeInOut, top: footer.top, height: '40px', background: '#0c8fcc'});
});
Login UI - Script Codes
Login UI - Script Codes
Home Page Home
Developer Caio Cares
Username caiocares
Uploaded January 20, 2023
Rating 3
Size 4,958 Kb
Views 4,048
Do you need developer help for Login UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Caio Cares (caiocares) Script Codes
Name
Gameboy - codevember 06 - 2016
Batman - codevember 01 - 2016
A Pen by Caio Cares
Mountains - codevember 04 - 2016
Motion Lines - codevember - 02 - 2016
BlendMode - codevember 05 - 2016
Vertical Menu - codevember 07 - 2016
Calculator - codevember 08 - 2016
Hover Button - codevember 03 - 2016
Travel App - codevember 09 - 2016
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!