<div class="jumbotron" style="background-color:white">
      <div class="container">
        <div class="col-sm-6">
          <h1>Hello, world!</h1>
          <p>Use it as a starting point to create something more unique.</p>
          <p><a class="btn btn-default btn-lg  btn-block" href="#signup" role="button">Be First &raquo;</a></p>
        </div>
        <div class="col-sm-6">
          <img src = "{% static 'img/iphone.png' %}" class = "img-responsive" />
        </div>
      </div>
    </div>

<div class='container' style='text-align:center; color:#E47541;' id="signup" >
  <i class="fa fa-unlock fa-5x"></i>
  <h1>Unlock First</h1>
    <form class='form-horizontal' method="POST" action=""> {% csrf_token %}
      <div class='form-group form-group-lg'>
        {% if form.email.errors %}
        {% for err in form.email.errors %}
          <div class="alert alert-danger" role="alert">{{ err }}</div>
          <div class="alert alert-danger" role="alert">Your Email is required</div>
        {% endfor %}
        {% endif %}
...         
        <div class="input-group">
          <input class='form-control' type="email" name="email" placeholder="Your email..." />
          <span class='input-group-btn'>
            <input type='submit' value='Join' class='btn btn-primary btn-lg' />
          </span>
        </div>
      </div>
    </form>
    <p class='lead'>Sign up here. <br/> Get First News on Content</p></div>
  </div>
</div>

  .jumbotron h1 {
    font-weight: 100;
  }

  .jumbotron p {
    font-weight: 100;
    font-size: 30px;
  }