Building an e-Commerce website with Node – Part 17 – Styling the Sign up page

Our sign up page looks very ugly. It is time to make it look like a real sign up page. For that, we are going to create some custom CSS code. Go ahead and create the custom.css file in public/css folder.

In custom.css file we add a rule to the body element to have a padding to the top of 100 pixels.


body {
  padding-top: 100px;
}

Don’t forget to call the file in the layout.ejs by adding the following line of code to it just below the CDN style call.


<link rel="stylesheet" href="/css/custom.css">

Next, all the input tags from the signup.ejs we have to put inside div elements with bootstrap classes. Once you do that everything will look great.

Inside the form element we are going to have the following code:


<h1> Signup </h1>

      <div class="form-group">
        <label="name">Name: </label>
        <input type="text" class="form-control" name="name">
      </div>
      <div class="form-group">
        <label="name">Email: </label>
        <input type="email" class="form-control" name="email">
      </div>
      <div class="form-group">
        <label="name">Password: </label>
        <input type="password" class="form-control" name="password">
      </div>

      <button type="submit" class="btn btn-success">Submit</button>

The code is just HTML code, self explanatory, which you should understand it.

styling the sign up page

signup.ejs can be seen below:


<% layout('layout') -%>

<div class="row">
  <div class="col-lg-6 col-md-offset-3">

    <form method="post">

      <h1> Signup </h1>

            <div class="form-group">
              <label="name">Name: </label>
              <input type="text" class="form-control" name="name">
            </div>
            <div class="form-group">
              <label="name">Email: </label>
              <input type="email" class="form-control" name="email">
            </div>
            <div class="form-group">
              <label="name">Password: </label>
              <input type="password" class="form-control" name="password">
            </div>

            <button type="submit" class="btn btn-success">Submit</button>

    </form>
  </div>
</div>

Leave a Reply