JSFiddle - React, Tailwind, and code Playground

Single Page responsive splash page.

by Andrew Pougher

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="boApp" ng-controller="boCtrl">
  <div class="navbar navbar-default navbar-fixed-top navouter">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" id="msg"></a>
      </div>
      <div class="collapse navbar-collapse andrewsnav">
        <ul class="nav navbar-nav">
          <li><a href="{{accnt.URL}}">Home</a></li>
          <li><a href="#about">About</a></li>
          <li class="mylogo">
            <a href="#"><img src=" http://placehold.it/100x100/5f71b4/ffffff/&text={{accnt.bname}}" alt="apougher" class="img-responsive img-circle"></a>
          </li>
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>

  <hr>

  <div class="container-fluid" id="contentbox">
    <div class="row headspace text-center">

      <div class="col-xs-6">
        <p id="welcome_txt"></p>
      </div>
      <div class="col-xs-6">.col-xs-6</div>


    </div>
  </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Oxygen:400,300,700");
body {
  font-family: 'Oxygen', sans-serif;
  background: rgba(226, 226, 226, 1);
  background: -moz-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 18%, rgba(254, 254, 254, 1) 42%, rgba(254, 254, 254, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(226, 226, 226, 1)), color-stop(18%, rgba(219, 219, 219, 1)), color-stop(42%, rgba(254, 254, 254, 1)), color-stop(100%, rgba(254, 254, 254, 1)));
  background: -webkit-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 18%, rgba(254, 254, 254, 1) 42%, rgba(254, 254, 254, 1) 100%);
  background: -o-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 18%, rgba(254, 254, 254, 1) 42%, rgba(254, 254, 254, 1) 100%);
  background: -ms-linear-gradient(top, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 18%, rgba(254, 254, 254, 1) 42%, rgba(254, 254, 254, 1) 100%);
  background: linear-gradient(to bottom, rgba(226, 226, 226, 1) 0%, rgba(219, 219, 219, 1) 18%, rgba(254, 254, 254, 1) 42%, rgba(254, 254, 254, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=0);
}

h1 {
  margin: 0;
  padding: 0;
  font-family: 'Oxygen', sans-serif;
}

p {
  font-family: 'Oxygen', sans-serif;
  font-size: 14px;
}

.headspace {
  margin-top: 20px;
}

#contentbox {
  margin-top: 55px;
  min-height: 100vh;
}

.mylogo img {
  border: 10px solid #ffffff;
}

.andrewsnav .nav li a {
  border-top: 1px #fff;
  color: #fff;
  transition: all 0.3s ease 0s;
}

.andrewsnav .nav li a:hover {
  border-top: 1px #5f71b4;
  color: #5f71b4;
}

.andrewsnav .nav li.mylogo a:hover {
  background: none;
}

@media screen and (max-width:768px) {
  .navbar-brand {
    display: inline
  }
  li.mylogo {
    display: none
  }
  .andrewsnav .nav li {
    text-align: center
  }
  .andrewsnav .nav li a {
    border-radius: 0;
   ...

JavaScript

angular.module('boApp', [])
  .controller('boCtrl', function($scope, $http) {
    angular.element(document).ready(function() {
      document.getElementById('msg').innerHTML = 'Andrew Pougher';
      document.getElementById('welcome_txt').innerHTML = 'Stuff from DB';
    });
    $scope.accnt = {
      bname: "LOTUS",
      URL: "http://www.-.com"
    };
    /*burger*/
    $(".navbar-toggle").on("click", function() {
      $(this).toggleClass("active");
    });
  });