Responsive login form with animated input placeholder using html css & javascript

How to create a Responsive login form with animated input placeholder using html css & javascript without using media queries! Create a beautiful and responsive login form with an animated placeholder text or floating label animation using pure css. Without using media queries we can make our html form responsive. The main purpose of this video to teach you about creating a responsive login form design without using the media queries and leveraging the power of the css variables. Also, you will see how we can move the floating input placeholder text using only CSS and some javascript. We are going to use label as the placeholder text for the input elements and then we will associate the relevant label with its revelant input element. We are going to further animate these labels so that they work as the placeholder text for the input elements which can further be animated. You will also learn how you can create a button with animated gradient brackground using css only. You will see the power of viewport units like vmin, vw and vh to make this login form responsive. Timestamps: 00:00 - Intro - Responsive Login Form design 01:12 - Structure for Responsive Login Form with Animated Placeholder Text 03:01 - Creating Gradient Background using CSS for the page 04:02 - Centering the Form Vertically and Horizontally using CSS Flexbox 04:42 - Styling the form and its contents 06:55 - Styling the form input elements using CSS 08:15 - Centering the label placeholder text vertically inside input element 10:05 - Creating Custom Border to bottom of the input field with a Gradient Background 13:08 - Animating the gradient border on the input elements 15:56 - Styling html links and buttons 17:04 - Apply gradient background on the button 18:54 - Animate Gradient button background on hover 20:55 - Creating CSS Circular shapes for the form container background 24:11 - Floating animated placeholder text on focus state using javascript 28:32 - Adding Classes to HTML form container element using javascript dynamically for the focused and filled state 31:04 - Adding a custom border to the input element when input has been filled or it isn't empty. ============Awesome Videos on CSS3============= How to Apply Gradient Animation on button background in CSS https://youtu.be/UD-F3sWMk78 Clip image to text using CSS background-clip | CSS Text Knockout Effect https://youtu.be/QH8nZ5Ijsx4 CSS Sticky Header - Fixed Navigation Menu Bar on Scroll using HTML5 and CSS3 https://youtu.be/B4eISzWrcD4 Creating Automatic CSS Image slider with CSS3 animation & HTML5 | No Javascript or Jquery - Tutorial https://youtu.be/SYw3TTLtZLc Simple Responsive Navigation Menu Bar with Logo on Left Using HTML5 and CSS3 Flexbox - Tutorial https://youtu.be/SPQ17nosfyg How to Create Masonry Layout CSS3 & HTML5 - Material Design Card Based Pinterest Like Column Layout https://youtu.be/4fvRO7h70tg How to Create Download Link in HTML5 | Making Direct Downloadable Button for Any File Type https://youtu.be/7c4cNgD5KNA How to Create Simple HTML5 / CSS3 Preloader Animation | Circular Spinner Preloader - Youtube https://youtu.be/67_DXhS3_Hc How to add a Preloader in Website using HTML, CSS and Javascript https://youtu.be/Kb8PG8b-dek Source Code: https://codepen.io/smashtheshell/pen/OJNKjeO Find all the source codes here: https://codepen.io/smashtheshell Follow on Twitter https://twitter.com/amit4kp Add on Facebook https://www.facebook.com/kumaramit24chd Like Page on Facebook https://www.facebook.com/smashtheshell Share this video and Subscribe to this channel for latest updates and web design tips and techniques.