FIT login, forgot password, and register page in that order along with devise.css

app-views-devise-passwords-new.html.erb

<div class="forgotpage">
	<div class="bar"></div>
  	<div class="logintitle">
    	<p class="fit">FIT</p>    
    	<p class="trainer">TRAINER</p>
 	</div>

	<div class="forgotbox">
		<h3 class="forgotboxhead">Forgot your Password?</h3>
		<p class="forgotboxhead">Please provide the email address you used when you signed up.</p>
		<p class="forgotboxhead">We will send you and email that will allow you to reset your password.</p>
		<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
		  <%= devise_error_messages! %>

		  <div class="forgotfield">    
		    <%= f.email_field :email, autofocus: true, class: 'textbox', placeholder: 'Email' %>
		  </div>

		  <div class="reset">
		    <%= f.submit "Reset Password", class: 'signinbtn' %>
		  </div>
		<% end %>

		<%#= render "devise/shared/links" %>
	</div>

	<div class="footer">
    <div class="footercontent">
      <h3>FIT</h3>
      <p>&copy FIT app. All rights reserved</p>
    </div>

  	</div>

</div>

app-views-devise-registrations-new.html.erb

<div class="registerpage">
  <div class="bar"></div>

  <div class="registerbox">

    <div class="regboxhead">
      <h3>Register</h3>
      <%= devise_error_messages! %>
    </div>

    <div class="registerboxleft">

      <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
        
        <div class="regfieldtop">
          <%= f.text_field :name, autofocus: true, class: 'regtextboxtop', placeholder: 'Name' %>
        </div>

        <div class="regfield">
          <%= f.email_field :email, autocomplete: "off", class: 'regtextbox', placeholder: 'Email' %>
        </div>

        <div class="regfield">
          <%= f.text_field :username, autocomplete: "off", class: 'regtextbox', placeholder: 'Username' %>
        </div>
        <div class="regfield">
          <%= f.text_field :phone, autocomplete: "off", class: 'regtextbox', placeholder: 'Phone Number' %>
        </div>
        <div class="regfield">
          <%= f.password_field :password, autocomplete: "off", class: 'regtextbox', placeholder: 'Password' %>
        </div>
        <div class="regfield">
          <%= f.password_field :password_confirmation, autocomplete: "off", class: 'regtextbox', placeholder: 'Confirm Password' %>
        </div>
      <% end %>
    </div>
      
    <div class="registerboxright">
      <div class="boxrightcontent">
        <div class="regboxrighthead">
          <h1>FIT</h1>
          <p>TRAINER</p>
        </div>
        <div class="regboxrightcontent">
          <p>Join the leading trainers in the industry.  Build your business, build your clients and receive analytics on your project.</p>
          <br>
          <p>Sign up today for free!</p>
        </div>
      </div>  
    <%#= render "devise/shared/links" %>
      <div class="regbtnbox">
        <div class="signupbtn">
          Sign Up
        </div>
      </div> 
      <div class="regboxrightfooter">
        <p>
          Already have an account?  
          <%= link_to "Sign in", new_trainer_session_path %>
        </p>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="footercontent">
      <h3>FIT</h3>
      <p>&copy FIT app. All rights reserved</p>
    </div>
  </div>
</div>

app-views-devise-sessions-new.html.erb

<div class="loginpage">
  <div class="bar"></div>
  <div class="logintitle">
    <p class="fit">FIT</p>    
    <p class="trainer">TRAINER</p>
  </div>
  
  <div class="loginbox">
    <h4 class="loginboxhead text-left">Sign in</h4>
    <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
          
      <div class="loginfield">
        <%= f.text_field :username, autofocus: true, placeholder: 'Username', class: 'textbox' %>
      </div>

      <div class="loginfield">
        <%= f.password_field :password, autocomplete: "off", placeholder: 'Password', class: 'textbox' %>
      </div>

      <div class="signin">
        <%= f.submit "Sign in", class: 'signinbtn' %>
      </div>
    
    <% end %>
  
    <%= render "devise/shared/links" %>
  </div>

  <div class="downloadapp">
    <p>Don't have an account yet? Download the app</p>
    <%= link_to "#", class: 'empty' do %>
      <%= image_tag "app store.png", class: 'apple'  %>
    <% end %>
    <%= link_to "#", class: 'empty' do %>
      <%= image_tag "google play.png", class: 'google'  %>
    <% end %>
  </div>

  <div class="footer">
    <div class="footercontent">
      <h3>FIT</h3>
      <p>&copy FIT app. All rights reserved</p>
    </div>

  </div>
</div>
  

devise.css

.loginpage, .forgotpage, .registerpage {
  background-size: cover !important;
  height: 100vh;
  width: 100%; }

.loginpage {
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("/assets/login.jpg") no-repeat center center fixed; }

.forgotpage {
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("/assets/forgot.jpg") no-repeat center center fixed; }

.registerpage {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("/assets/register.jpg") no-repeat center center fixed; }

.bar {
  width: 100%;
  height: 20px;
  background-color: black; }

.logintitle {
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 75px;
  padding-top: 3%; }

.fit {
  font-size: 40px;
  color: black; }

.trainer {
  color: gray; }

.loginbox, .forgotbox, .registerbox {
  border: solid 1px #646464;
  border-radius: 8px;
  background-color: white;
  margin-left: auto;
  margin-right: auto; }

.loginbox {
  width: 500px;
  text-align: center;
  margin-top: 3%; }

.forgotbox {
  width: 500px;
  text-align: left;
  margin-top: 5%; }

.registerbox {
  width: 70%;
  margin: auto;
  display: flex;
  flex-flow: row wrap; }

.registerboxleft {
  width: calc(50% - 1px);
  display: inline-block;
  float: left; }

.regfield, .regfieldtop {
  padding-left: 35px;
  border-right: 1px solid #646464; }

.regfield {
  padding-top: 20px; }

.regfieldtop {
  margin-top: 0; }

.regtextboxtop, .regtextbox {
  height: 30px;
  width: 80%;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px; }

.registerboxright {
  width: 50%;
  float: right;
  display: inline-block; }

.regboxrighthead {
  padding-bottom: 40px; }
  .regboxrighthead h1 {
    font-size: 80px;
    color: #444;
    font-weight: normal;
    margin-top: 0px;
    margin-bottom: 0px; }
  .regboxrighthead p {
    font-size: 30px;
    color: #777;
    margin-bottom: 0px; }

.boxrightcontent {
  text-align: center; }

.regboxrightcontent {
  padding-right: 30px;
  padding-left: 30px;
  padding-bottom: 30px; }

.regboxrightfooter {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 30px; }

.loginboxhead {
  padding: 5% 5% 5% 5px;
  width: 100%;
  padding-left: 70px;
  padding-bottom: 5px;
  float: left;
  color: #646464;
  font-weight: normal; }

.forgotboxhead {
  width: 100%;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 15px;
  color: #646464;
  font-weight: normal; }

.regboxhead {
  width: 100%;
  height: 80px; }
  .regboxhead h3 {
    padding-left: 35px;
    padding-top: 20px;
    padding-bottom: 5px;
    float: left;
    color: #646464;
    margin-top: 0px;
    margin-bottom: 0px; }

.loginfield, .loginfieldtop {
  padding-left: 5%;
  padding-right: 5%; }

.loginfield {
  padding-top: 20px; }

.loginfieldtop {
  margin-top: 0; }

.forgotfield {
  padding-left: 60px;
  padding-top: 20px; }

.textbox, .textboxtop {
  height: 30px;
  width: 80%;
  padding-right: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px; }

.signin {
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 10px;
  width: 238px; }

.regbtnbox {
  margin-left: auto;
  margin-right: auto;
  width: 259px; }

.signinbtn, .signupbtn {
  color: white;
  background-color: black;
  padding: 15px 100px;
  border-radius: 20px;
  border: 1px solid black; }

.reset {
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
  padding-bottom: 30px;
  width: 282px; }

.signuplink {
  text-decoration: none;
  text-align: center;
  padding-bottom: 10px;
  line-height: 2; }

.forgotlink {
  text-decoration: none;
  text-align: center;
  padding-bottom: 10px;
  line-height: 2; }

.downloadapp {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 370px;
  padding-top: 2%; }
  .downloadapp p {
    padding-bottom: 20px; }
  .downloadapp .apple {
    float: left; }
  .downloadapp .google {
    float: right; }

.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0; }
  .footer p {
    font-size: .7em; }
  .footer h3 {
    color: gray;
    padding-left: 60px; }

.footercontent {
  width: 150px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: .5%; }
  .footercontent p {
    font-size: .7em; }
  .footercontent h3 {
    color: gray;
    padding-left: 60px; }

/*# sourceMappingURL=devise.css.map */

if you didn't add username, name, and phone to your database make those blank links in the login page