HTML for the empty state div. When a user has no favorites, this appears on the home page.

gistfile1.txt

HTML:

<div class="row">
  <div class="col-xs-6">
    <div class="portlet-div empty-state">
      <div class="portlet-content">
          <div class="fake-apps-div">
            <ul class="fake-app-list">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
      </div>
    </div>
  </div>
  <div class="col-xs-6">
    <div class="portlet-div empty-state">
      <div class="portlet-content">
          <div class="fake-apps-div">
            <ul class="fake-app-list">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
      </div>
    </div>
  </div>
  <div id="floating-div">
    <h1 class="center">My UW is better with favorites</h1>
    <p class="center"><a href="#">What are favorites?</a></p>
    <div class="button-group-empty">
      <div class="button-div">
        <button class="btn btn-primary" id="btn-left">Give Me Recommended Apps</button>
      </div>
      <div class="button-div">
        <button class="btn btn-primary" id="btn-right">Browse and Choose Apps</button>
      </div>
    </div>
  </div>
</div>




CSS: 

.empty-state {
  border:none;
  z-index:3;
}
#floating-div {
  border-radius:6px;
  box-shadow:0px 0px 50px #ADADAD;
  width:70%;
  height:300px;
  margin:120px auto;
  position:absolute;
  left:15%;
  z-index:40;
  padding-top:40px;
  background-color:#F7F5E8;
  h1 {
    font-size:3em;
    font-weight:200;
  }
}
.button-group-empty {
  width:100%;
  margin:30px auto;
  display:block;

}
.button-div {
  width:49%;
  display:inline-block;
}
.button-group-empty .btn-primary {
  display:inline;
  float:none;
  padding:15px 30px;
  font-size:1.3em;
  font-weight:200;
}
#floating-div #btn-left {
  float:right;
}
#floating-div #btn-right {
  float:left;
}
.fake-app-list {
  margin:0px 0px 0px 0px;
  padding:0px;
}
.fake-app-list li {
  font-size:1.1em;
  color:#555;
  background-color:#E7D9C1;
  border-radius:4px;
  margin:8px 0px;
  padding:8px 10px 8px 10px;
  height:120px;
  opacity:0.5;
}
#floating-div .button-group {
  display:inline-block;
  width:100%;
}
#floating-div .btn {
  float:right;
  border:1px solid #660000;
  background-color:#F7F5E8;
  color:#660000;
  margin:4px;
}
#floating-div .btn-default:hover {
  color:#F7F5E8;
  background-color:#660000;
  border:1px solid #660000;
}
#floating-div .btn-primary {
  background-color:#F7F5E8;
  color:#b70101;
  border:1px solid #b70101;
}
#floating-div .btn:focus {
  outline:none;
}
#floating-div .btn-primary:hover {
  background-color:#b70101;
  border:1px solid #b70101;
  color:#F7F5E8;
}

.center {
  text-align:center;
}
ul {
  list-style-type:none;
}