Follow the steps to create a responsive Login form using CSS. Step 1 : Adding HTML Add an image inside a container and add inputs with matching labels for each field. Wrap a “form” element around them to process the input.
Step 2 : Adding CSS
Add the required CSS to design the login page try to keep the design as simple as possible. Program: This code will guide you through comments that how to design design and which property is used for which design to create. filter_none edit play_arrow brightness_4 <!DOCTYPE html> <html> <style> /*set border to the form*/
form { border: 3px solid #f1f1f1; } /*assign full width inputs*/
input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; } /*set a style for the buttons*/
button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; cursor: pointer; width: 100%; } /* set a hover effect for the button*/
button:hover { opacity: 0.8; } /*set extra style for the cancel button*/
.cancelbtn { width: auto; padding: 10px 18px; background-color: #f44336; } /*centre the display image inside the container*/
</html> Follow the steps to create a responsive Modal Login form Step 1 : Adding HTML. Use a “form” element to process the input. Then add inputs with matching labels for each field. STEP 2 : Adding CSS Add the required CSS to design the login page try to keep the design as simple as possible. Program: filter_none edit play_arrow brightness_4 <!DOCTYPE html> <html> <style>