This content originally appeared on DEV Community and was authored by DEV Community
Hey guys so today will be giving you step by step how I created my first sign up page.
Please note I created this using HTML and CSS you can check my previous posts to learn about Html and CSS.
Firstly I created the HTML file and CSS using Vscode and saved them to a folder
I started writing he Html code using Html element
<html> </html> where all the header and body will be inserted.
Then I created my header using the Header tag
<header></header>.
The <header> HTML element represents introductory content, typically a group of introductory or navigational aids.
Under the header I have my title tag <title> </title>which shows the which shows the tittle of the page
Next step was to link my CSS to my HTML. CSS can be linked to HTML in 3 ways i.e inline, internal and external . External method links css to html using this code <link rel="stylesheet" href="name of css file">. The picture below shows pratical example
<html>
<head>
<title>MY Login Page </title>
<link rel="stylesheet" href="mainloginstyles.css">
</head>
The next step was to create the body of the Html file with the body tag<body> </body>. And create a<div >tag which contains the login page and another div tag which contains the form. As a "pure" container, the<div> element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes.
The input tags and place holder tags are used. The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).
The short hint is displayed in the input field before the user enters a value.
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder=" user name"/>
<input type="text" placeholder="password"/>
<input type="text" placeholder="email id"/>
<button>Create</button>
<p class="message">Forgot Password?</p>
</form>
</div>
</div>
</body>
</html>
Then I also created a button using the <button></button> tag
After writing the HTML code I moved on to the css to style the different elements I created using HTML
The class selector was used as I was styling group of elements used the type selector for body of the page
The body was styled as follows
body{
background-image: url(my\ new\ back);
height: 20vh;
background-size: cover ;
background-position:center;
background-repeat: no-repeat;
}
Image used was downloaded and saved to the html file folder , the height was specified to be 20vh, back ground size will be cover meaning the dimension of the image will cover the screen while back ground position is at the top
The next step I took was to style the login page element
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
The CSS padding properties are used to generate space around an element's content, inside of any defined borders
The next step was to style the form page
.form{
position: relative;
z-index: 1;
background: #ffffff;
max-width: 360px;
margin:0 auto 100px;
padding: 45px;
text-align: center;
}
This code describes the position of the form, background colour etc.
The z-index property determines the stack level of an HTML element. The “stack level” refers to the element's position on the Z axis (as opposed to the X axis or Y axis). A higher value means the element will be closer to the top of the stacking order.
The next step is styling button and form inputs. The font family, background color of the form was styled as shown below
.form input{
font-family:'Courier New', Courier, monospace;
outline: 1;
background: rgba(239, 243, 243, 0.952);
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: medium;
}
.form button{
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
text-transform: uppercase;
outline: 0%;
background: #4c56af;
width: 100%;
border: 0;
padding: 15Px;
color:#ffffff;
font-size: medium;
cursor: pointer;
}
The final page looks like this
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-15T20:58:30+00:00) How I Created My Sign Up Page From Start To Finish. Retrieved from https://www.scien.cx/2022/03/15/how-i-created-my-sign-up-page-from-start-to-finish/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.