JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="navbar navbar-default">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  </div>
<div class="first-screen"> 
    <div class="about">
        <h1>Motto</h1>
        <a href="#" class="btn btn-primary btn-block">Click here</a>
    </div>
</div>

<div class="second-screen"> 
    <p>second screen</p>
</div>

CSS

.first-screen {
	position: absolute;
  	top: 55px;
  	right: 0;
  	bottom: 0;
  	left: 0;
  	background: url('http://placehold.it/1000x1000&text=first screen') transparent no-repeat;
  	background-size: 100% 100%;
  	padding: 0;
    margin: 0;      
}
.about {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
.second-screen {
  	background: #22ad1e;
    min-height: 1000px;
}