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 form responsive.
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
31:04 - Adding a custom border to the input element when input has been filled or it isn’t empty.
Source Code: https://codepen.io/smashtheshell/pen/OJNKjeO
Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.
As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.
#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen
#registration form #login form #sign in form #responsive login #html login page
#responsive website using html5 and css3 #portfolio website #one page personal website html css #portfolio website design in html css #css responsive website design #responsive website html css