Register webpage coding

 register.html

<!DOCTYPE html>

<html lang="en">

<head>

<title>Page Title</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

* {

  box-sizing: border-box;

}


body {

  font-family: Arial, Helvetica, sans-serif;

  margin: 0;

text-align: center;

}


/* Style the header */

.header {

  padding: 80px;

  text-align: center;

  background: #1abc9c;

  color: white;

}


/* Increase the font size of the h1 element */

.header h1 {

  font-size: 40px;

}


/* Style the top navigation bar */

.navbar {

  overflow: hidden;

  background-color: #333;

}


/* Style the navigation bar links */

.navbar a {

  float: left;

  display: block;

  color: white;

  text-align: center;

  padding: 14px 20px;

  text-decoration: none;

}


/* Right-aligned link */

.navbar a.right {

  float: right;

}


/* Change color on hover */

.navbar a:hover {

  background-color: #ddd;

  color: black;

}


/* Column container */

.row {  

  display: flex;

  flex-wrap: wrap;

}


/* Create two unequal columns that sits next to each other */

/* Sidebar/left column */

.side {

  flex: 30%;

  background-color: #f1f1f1;

  padding: 20px;

}


/* Main column */

.main {   

  flex: 70%;

  background-color: white;

  padding: 20px;

}


/* Fake image, just for this example */

.fakeimg {

  background-color: #aaa;

  width: 100%;

  padding: 20px;

}


/* Bordered form */

form {

  border: 3px solid #f1f1f1;

}


/* Full-width inputs */

input[type=text], input[type=password] {

  width: 25%;

text-align: center;

  padding: 6px 10px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #ccc;

  box-sizing: border-box;

text-align: center;

}


/* Set a style for all buttons */

button {

  background-color: #04AA6D;

text-align: center;

  color: white;

  padding: 7px 10px;

  margin: 8px 0;

  border: none;

  cursor: pointer;

  width: 25%;

text-align: center;

}


/* Add a hover effect for buttons */

button:hover {

  opacity: 0.8;

}


/* Extra style for the cancel button (red) */

.cancelbtn {

  width: auto;

  padding: 10px 18px;

  background-color: #f44336;

}


/* Center the avatar image inside this container */

.imgcontainer {

  text-align: center;

  margin: 12px 0 6px 0;

}


/* Avatar image */

img.avatar {

  width: 20%;

  border-radius: 50%;

}


/* Add padding to containers */

.container {

  padding: 8px;

}


/* The "Forgot password" text */

span.psw {

  float: center;

  padding-top: 20px;

}


/* Change styles for span and cancel button on extra small screens */

@media screen and (max-width: 100px) {

  span.psw {

    display: block;

    float: none;

  }

  .cancelbtn {

    width: 100%;

  }

}

</style>

</head>

<body>


<div class="header">

  <h1>S3PROGRAMMINGTECH CHANNEL</h1>

  <p>A website created by me.</p>

</div>


<div class="navbar">

  <a href="E://webpage.html">Index</a>

  <a href="#">Programming</a>

  <a href="#">PHP</a>

  <a href="E://login.html" class="right">Login</a>

</div>

<h2> Register Form</h2>


<form action="/action_page.php" method="post">

  <div class="imgcontainer">

    <img src="E://img_avatar2.png" alt="Avatar" class="avatar">

  </div>


<div class="container">

    <label for="uname"><b>Username</b></label><br>

    <input type="text" placeholder="Enter Username" name="uname" required><br>


    <label for="psw"><b>Password</b></label><br>

    <input type="password" placeholder="Enter Password" name="psw" required><br>

    <label for="email"><b>Email</b></label><br>

    <input type="text" placeholder="Enter Email ID" name="email" required><br>


    <label for="phone"><b>Phone Number</b></label><br>

    <input type="text" placeholder="Enter Phone Number" name="phone" required><br>


    <button type="submit">Submit</button><br>

   </div>


  

</form>



</body>

</html>


Comments

Post a Comment

Popular posts from this blog

How to create Animated 3d chart with R.

  The rgl package is the best option to build 3d charts in R. Please see this post for an introduction to 3d scatterplots using it. It also provides the plot3d() and play3d() functions that allow to animate the 3d chart, and eventually to export the result at a .gif format. Here is an application to the famous iris dataset, with a nice animated 3d scatterplot chart. Arguments x, y, z vectors of points to be plotted. Any reasonable way of defining the coordinates is acceptable. See the function  xyz.coords  for details. xlab, ylab, zlab labels for the coordinates. type For the default method, a single character indicating the type of item to plot. Supported types are: 'p' for points, 's' for spheres, 'l' for lines, 'h' for line segments from z = 0, and 'n' for nothing. For the mesh3d method, one of 'shade', 'wire', or 'dots'. Partial matching is used. col the color to be used for plotted...
Read more

Linux/Unix Commands frequently used

  Linux/Unix Commands ls  --- lists your files ls -l  --- lists your files in 'long format', which contains lots of useful information, e.g. the exact size of the file, who owns the file and who has the right to look at it, and when it was last modified. ls -a  --- lists all files, including the ones whose filenames begin in a dot, which you do not always want to see. There are many more options, for example to list files by size, by date, recursively etc. more  filename  --- shows the first part of a file, just as much as will fit on one screen. Just hit the space bar to see more or  q  to quit. You can use  / pattern  to search for a pattern. gzip  filename  --- compresses files, so that they take up much less space. Usually text files compress to about half their original size, but it depends very much on the size of the file and the nature of the co...
Read more

R Programming Introduction

R Download Link- https://cran.r-project.org/bin/windows/base/old/3.4.0/ R Studio Download link- https://www.rstudio.com/products/rstudio/download/  R is a programming language and software environment for statistical analysis, graphics representation and reporting. R was created by Ross Ihaka and Robert Gentleman at the University of Auckland, New Zealand, and is currently developed by the R Development Core Team. The core of R is an interpreted computer language which allows branching and looping as well as modular programming using functions. R allows integration with the procedures written in the C, C++, .Net, Python or FORTRAN languages for efficiency. R is freely available under the GNU General Public License, and pre-compiled binary versions are provided for various operating systems like Linux, Windows and Mac. R is free software distributed under a GNU-style copy left, and an official part of the GNU project called  GNU S . Evolution of R R was initially writ...
Read more