Website Programming: A Transparent Login Page Pure HTML and CSS in Responsive Way

 

     Bandung, Indonesia, October 15, 2020, 21:01PM - When it comes to a good login page design, you have to make it as easy for your users to gain access to your service. There're many types of login design, maybe you've seen many of them like Facebook, Instagram, PayPal, uber, amazon, and many other login designs. Some of the login design simple designs with only a white background and sign element. Users won't be on a sign-up page for a long time even if you design it well, but using illustration can give interest and a little life to an otherwise bland screen. 

    Every login form has the same format, the format of the signing page design ( in basics like username, password, and login button). When you put a design on your login page, the result is a beautiful contrast that keeps the login form from looking bland. We like social media login options and we love that they use a smart choice of design and words so users can differentiate between username and password. In HTML we're going to use a code called <form> as the main attribute to insert textbox for username and "password-box" for the password(this is one of the advantages to use <form>, password-box provide the textbox which has the unique, so whenever you type words on the password-box the output is presented as one-line plain text editor control like dit or asterisk).

HTML

The first section of HTML is Head, the place where you put the page's information and additional function. For <meta charset = "UTF-8"> means a Unicode-based encoding that can support many languages and can accommodate pages and forms in any mixture of those languages. Also, we can put a responsive coding circle in the head like row 5 <meta name = "viewport(Viewport means the user's visible area of a website. The viewport varies with any device with different screen size, and it's common for a website to put viewport for the responsive website)>

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1′ /> is a tag to choose what version of the internet explorer and we can put an external link, in the picture I put CSS external link.

An HTML form is a document that stores information of a user on a website using interactive controls like button, checkbox, radio-button, textbox, and many other interactive controls.  So, basically, the form is used to specify that the element can get information and through the trigger (button) we can store the information on the database.

CSS ( style.css ) external

    In CSS we'll start from the basic, first, we put basic settings to adjust the website to synchronize the website's element with each other. Also, I used CSS as the place to put the background picture(I suggest to use the desktop background-size when the website opened on the device the background will automatically crop)

In this part, we're focusing details on every component like the input box, the text, the box. We adjust the box so have 100% width so whenever the website opened in different screen size, the box's width will adjust to the 100% size, for example

This is the result of the website when the website opened on different screen size, the width has 100% size. It's called a responsive website.

This is the last part of the coding. In this part we focused on the box, our job is to make the box looks transparent and we have to adjust the text's size and color so whenever you put text on the login form, the username's text will move to the top and change the color and the size.

That's all for the lesson

Thank you for reading my blog and see you in the next article