iogbole/devise_layout_html.erb

## devise_layout_html.erb

<%# views/layouts/external_pages.html.erb %>

<!DOCTYPE html>
<html>
<head>
  <title>GentelellaOnRails</title>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

  <style>

    /*Devise flash*/
    .alert-error {
      background-color: #f2dede;
      border-color: #eed3d7;
      color: #b94a48;
      text-align: center;
    }

    .alert-alert {
      background-color: #f2dede;
      border-color: #eed3d7;
      color: #b94a48;
      text-align: center;
    }

    .alert-notice {
      background-color: #dff0d8;
      border-color: #d6e9c6;
      color: #468847;
      text-align: left;
    }
  </style>
  <%= csrf_meta_tags %>

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

</head>

<body style="background:#F7F7F7;">

<div class="container body">

  <% flash.each do |key, value| %>
      <div align="center" id="flash" class="alert alert-<%= key %>">
        <a href="#" data-dismiss="alert" class="close">×</a>
        <ul style="text-align: center">
          <l>
          <b> <%= value %>  </b>
          </l>
        </ul>
      </div>
  <% end %>


  <%= yield %>

</body>

## devise_session_new.html.erb
<%# views/devise/sessions/new.html.erb %>

<div class="">
  <a class="hiddenanchor" id="toregister"></a>
  <a class="hiddenanchor" id="tologin"></a>

  <div id="wrapper">
    <div id="login" class="animate form">
      <section class="login_content">
        <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
      <h1>Login Form</h1>
          <div>
            <%= f.email_field :email, autofocus: true, :class => "form-control", :placeholder =>"Username",  :required => ""  %>

          </div>
          <div>

            <%= f.password_field :password, autofocus: true, :class => "form-control", :placeholder =>"Password",  :required => ""  %>

          </div>


            <% if devise_mapping.rememberable? -%>
                <div class="checkbox-inline">
                  <%= f.check_box :remember_me %>
                  <%= f.label :remember_me %>
                </div>
            <% end -%>


            <div>

            <%= f.submit "Log in", :class => "btn btn-default submit"%>

            <a class="reset_pass" href="#">Lost your password?</a>
          </div>
          <div class="clearfix"></div>
          <div class="separator">

            <p class="change_link">New to site?
              <a href="#toregister" class="to_register"> Create Account </a>
            </p>
            <div class="clearfix"></div>
            <br />
            <div>
              <h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>

              <p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
            </div>
          </div>
        <% end %>
        <!-- form -->
      </section>
      <!-- content -->
    </div>
    <div id="register" class="animate form">
      <section class="login_content">
        <form>
          <h1>Create Account</h1>
          <div>
            <input type="text" class="form-control" placeholder="Username" required="" />
          </div>
          <div>
            <input type="email" class="form-control" placeholder="Email" required="" />
          </div>
          <div>
            <input type="password" class="form-control" placeholder="Password" required="" />
          </div>
          <div>
            <a class="btn btn-default submit" href="index.html">Submit</a>
          </div>
          <div class="clearfix"></div>
          <div class="separator">

            <p class="change_link">Already a member ?
              <a href="#tologin" class="to_register"> Log in </a>
            </p>
            <div class="clearfix"></div>
            <br />
            <div>
              <h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>

              <p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
            </div>
          </div>
        </form>
        <!-- form -->
      </section>
      <!-- content -->
    </div>
  </div>
</div>

	<%# views/layouts/external_pages.html.erb %>

	<!DOCTYPE html>
	<html>
	<head>
	<title>GentelellaOnRails</title>
	<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

	<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

	<style>

	/Devise flash/
	.alert-error {
	background-color: #f2dede;
	border-color: #eed3d7;
	color: #b94a48;
	text-align: center;
	}

	.alert-alert {
	background-color: #f2dede;
	border-color: #eed3d7;
	color: #b94a48;
	text-align: center;
	}

	.alert-notice {
	background-color: #dff0d8;
	border-color: #d6e9c6;
	color: #468847;
	text-align: left;
	}
	</style>
	<%= csrf_meta_tags %>

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

	</head>

	<body style="background:#F7F7F7;">

	<div class="container body">

	<% flash.each do \|key, value\| %>
	<div align="center" id="flash" class="alert alert-<%= key %>">
	<a href="#" data-dismiss="alert" class="close">×</a>
	<ul style="text-align: center">
	<l>
	<b> <%= value %> </b>
	</l>
	</ul>
	</div>
	<% end %>


	<%= yield %>

	</body>
	<%# views/devise/sessions/new.html.erb %>

	<div class="">
	<a class="hiddenanchor" id="toregister"></a>
	<a class="hiddenanchor" id="tologin"></a>

	<div id="wrapper">
	<div id="login" class="animate form">
	<section class="login_content">
	<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do \|f\| %>
	<h1>Login Form</h1>
	<div>
	<%= f.email_field :email, autofocus: true, :class => "form-control", :placeholder =>"Username", :required => "" %>

	</div>
	<div>

	<%= f.password_field :password, autofocus: true, :class => "form-control", :placeholder =>"Password", :required => "" %>

	</div>


	<% if devise_mapping.rememberable? -%>
	<div class="checkbox-inline">
	<%= f.check_box :remember_me %>
	<%= f.label :remember_me %>
	</div>
	<% end -%>


	<div>

	<%= f.submit "Log in", :class => "btn btn-default submit"%>

	<a class="reset_pass" href="#">Lost your password?</a>
	</div>
	<div class="clearfix"></div>
	<div class="separator">

	<p class="change_link">New to site?
	<a href="#toregister" class="to_register"> Create Account </a>
	</p>
	<div class="clearfix"></div>
	<br />
	<div>
	<h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>

	<p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
	</div>
	</div>
	<% end %>
	<!-- form -->
	</section>
	<!-- content -->
	</div>
	<div id="register" class="animate form">
	<section class="login_content">
	<form>
	<h1>Create Account</h1>
	<div>
	<input type="text" class="form-control" placeholder="Username" required="" />
	</div>
	<div>
	<input type="email" class="form-control" placeholder="Email" required="" />
	</div>
	<div>
	<input type="password" class="form-control" placeholder="Password" required="" />
	</div>
	<div>
	<a class="btn btn-default submit" href="index.html">Submit</a>
	</div>
	<div class="clearfix"></div>
	<div class="separator">

	<p class="change_link">Already a member ?
	<a href="#tologin" class="to_register"> Log in </a>
	</p>
	<div class="clearfix"></div>
	<br />
	<div>
	<h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!</h1>

	<p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template. Privacy and Terms</p>
	</div>
	</div>
	</form>
	<!-- form -->
	</section>
	<!-- content -->
	</div>
	</div>
	</div>