UI mockup

by Glen Keane

HTML

<link rel="stylesheet" href="https://rawgit.com/designmodo/Flat-UI/master/dist/css/flat-ui.min.css">
<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-inner">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#"><img src="http://imgur.com/9ldLgLI.png" width="191px" height="20px"/></a> 
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                
                
                <li><a type="button" class="btn btn-info btn-responsive">Create A Room</a>

                </li>
                <li class="dropdown"> <a class="dropdown-toggle" role="button" data-toggle="dropdown">Find A Room <span class="caret"></span></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Find A Room</a>

                        </li>
                        <li><a href="#">Popular In Your Area</a>

                        </li>
                    </ul>
                </li>
                <li class=""> <a href="#" id="popover">SignIn/SignUp</a>

                </li>
            </ul>
        </div>
    </div>
</div>
<div id="popover-head" class="hide">SignIn/SignUp</div>
<div id="popover-content" class="hide">
    <ul class="nav nav-tabs">
        <li class="active"> <a href="#signin">Sign In</a></li>
        <li><a href="#signup">Sign Up</a></li>
    </ul>
    <div class="tab-content">
        <div id="signin" class="tab-pane fade in active">sign in form</div>
        <div id="signup" class="tab-pane fade">sign up form</div>
    </div>
</div>
<div class="container-fluid contentwrap"></div>

CSS

body {
    background-image: url("http://img02.deviantart.net/ac66/i/2012/157/0/6/stock_background_aqua_by_cdooginz-d52iwm8.jpg");
    background-size:cover;
    background-color: #0000cc;
}
.navbar {
    border-radius: 0px;
    margin-bottom: 0px;
}
.fill {
    min-height: 100%;
    height: 100%;
}
.content {
    margin-top: 70px;
}
.list-group-submenu {
    margin-left:20px;
}
.panel-group .panel, .panel {
    border-radius: 0px;
}
.panel-group .panel + .panel {
    margin-top: 0px;
}
.dropdown-menu, .navbar-nav > li > .dropdown-menu {
    margin-top: 0px;
    border-radius: 0px;
}
.table-responsive {
    overflow-x: scroll;
}
.sidebar .panel-body {
    padding: 0px;
}
#sidebarMobileAccordion, #mainContentAccordion {
    margin-bottom: 0px;
}
.col-sm-8, .col-sm-4 {
    padding-left: 0px;
    padding-right: 0px;
}

JavaScript

$(document).ready(function () {
    $('.contentwrap').css({
        'margin-top': (($('.navbar-fixed-top').height())) + 'px'
    });
    $(window).resize(function () {
        $('.contentwrap').css({
            'margin-top': (($('.navbar-fixed-top').height())) + 'px'
        });
    });

    $('#mainContentAccordion .panel-heading a').on('click', function (e) {
        if ($(this).parents('.panel').children('.panel-collapse').hasClass('in')) {
            e.stopPropagation();
            e.preventDefault();
        }
    });

    $(".nav-tabs a").click(function (e) {
        $(this).tab('show');
        e.preventDefault();
    });

    $('#popover').popover({
        html: true,
        title: function () {
            return $("#popover-head").html();
        },
        content: function () {
            return $("#popover-content").html();
        },
        placement: 'bottom'
    });
});

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'modestbranding': 1
        },
        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

function onPlayerStateChange(event) {
    var data = player.getVideoData();
    $('#video-details').text(data.title);
}