Registration Form : Create an attractive Registration Page using HTML and CSS

Hello friends how are you, today in this blog i will teach you how you can create an attractive Registration page using HTML and CSS. This tutorial will help you definitely if you wan to create or design a website. Now i am going to describe everything step by step so just go through this post to get complete knowledge.

Follow step by step  

1.First create a folder HtmlPage in your system in any drive .
2.Create a folder image inside folder HtmlPage.
3.I am using a single image in this page so store a single jpg or jpeg images inside image folder[user image size 1100x350 for better view].
4.Name of images should be reg.jpg, i am telling you by keeping in my mind that you have no pre knowledge of HTML and CSS but if you know how to apply images in HTML then forget this step.
5.Now open Notepad and paste the below code in it.


padding:5px 15px 5px 15px;
display: block;
width: 120px;

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

<body style="background-color:rgb(6,23,58)">
<table border="0" width="100%" height="10%" bgcolor="#000000" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;border-bottom:1px dotted white;">

<td style="color:#ffffff;font-size:50px;text-shadow:2px 2px 2px red">Project Title</td>
<td width="10%" align="center"> <a href="index.html">Home</a></td>
<td width="10%" align="center"> <a href="about.html">About</a></td>
<td width="10%" align="center"> <a href="reg.html">Registration</a></td>
<td width="10%" align="center"> <a href="login.html">Login</a></td>

<table border="0" style="box-shadow:1px 1px 10px white" width="70%" height="70%" align="center" background="image/reg.jpg">
<tr style="background-color:black;color:white;height:25px">
<td colspan="2"><marquee behavior="alternate">
Welcome of You in my Project.
<td align="center"  width="50%">

<td style="background-position:center center" align="center">
 <div class="login-dark">
        <form method="post">
            <h2 class="sr-only" style="color:#0066FF">Project Registration</h2>
            <div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
            <div class="form-group" style="padding:10px">
			<input class="form-control" style="padding:5px" type="text" name="proname" placeholder="Project Name">
            <div class="form-group" style="padding:10px">
			<input class="form-control" style="padding:5px" type="text" name="tech" placeholder="Technology Used"></div>
			 <div class="form-group" style="padding:10px;">
			<textarea style="width:240px;margin-left:58px" placeholder="Brief Description" rows="5" name="desc"></textarea>
			 <div class="form-group" style="padding:10px;">
			<textarea style="width:240px;margin-left:58px" placeholder="Group Members" rows="5" name="gname"></textarea>
            <div class="form-group" style="padding:10px">
			<button class="btn btn-primary btn-block" style="background-color:rgb(33,74,128);width:169px;border:none;color:white;padding:5px 10px 5px 10px;border-radius:2px;" type="submit">Submit</button></div>

Now save the Notepad file with name reg.html, here html is the extension of HTML file never forget to add .html after file name.
After doing these your directory will look like below

After that right click on reg file go to open with Google Chrome [or you can choose any browser]

After click on Google Chrome or any browser you will get output of your HTML page that will look like below

I hope now you can create and run HTML file. If you have any doubt regarding this post  or you want something more in this post then let me know by comment below i will work on it definitely.

If you like my post then share it with your friends. Thanks😊

Post a Comment


  1. This is very useful for me Thank you 😊

  2. You understand your projects stand out of the crowd. There is something unique about them. It seems to me all of them are brilliant. dark0de market url