One of the most common designs you will see is a login form that floats over the top of a background image or solid background color. In this video I will show you how to create exactly that as well as how to show error and success states for the various inputs on the login form.

Materials/References:

GitHub Code: https://github.com/WebDevSimplified/transparent-login-form
Original Transparent Login Form Video: https://youtu.be/nLxA9froMOs
CSS Variables Video: https://youtu.be/oZPR_78wCnY
CSS Variables Article: https://blog.webdevsimplified.com/2020-02/css-custom-properties
HSL Video: https://youtu.be/EJtmfkKulNA
HSL Article: https://blog.webdevsimplified.com/2021-06/hsl-color-format


Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:48 - HTML
03:13 - Background CSS
05:25 - Card CSS
11:53 - Form CSS


#LoginForm #WDS #CSS