FIRST Beta Header Style

FIRST Beta Header Style.markdown

FIRST Beta Header Style

A Pen by Techplex Engineer on CodePen.

License.

index.html

<nav class="navbar navbar-inverse navbar-fixed-top">
	<!-- Color Strip from beta site Start -->
	<div class="color-strip">
		<div class="fteal"></div>
		<div class="fred"></div>
		<div class="fyellow"></div>
		<div class="fblue"></div>
	</div>
	<!-- Color Strip from beta site End -->
	<div class="container">
		<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://beta.usfirst.org/sites/all/themes/first/assets/images/FIRST_logo.png" alt="FRC Logo"> FRC Q&amp;A
			</a>
		</div>
		<div id="navbar" class="navbar-collapse collapse">
			<ul class="nav navbar-nav">
			
			<!-- Nav Start -->

				<li class="active">
					<a href="#" title="Ask a Question">Ask a Question</a>
				</li>
				<li>
					<a href="#" title="List of Q&amp;A">Q&amp;A</a>
				</li>
				<li>
					<a href="#" title="Search the Q&amp;A">Search</a>
				</li>
				<li>
					<a href="#" title="View the Manual">Manual</a>
				</li>
				
				<!-- Nav End -->

			</ul>
			<!-- Login Dropdown -->
			<ul class="nav navbar-nav navbar-right">
				<li id="login-dropdown-list" class="dropdown">
					<a class="dropdown-toggle" data-toggle="dropdown">Login / Register <b class="caret"></b></a>
					<div class="dropdown-menu">
						<input id="login-email" type="email" placeholder="Email" class="form-control">
						<input id="login-password" type="password" placeholder="Password" class="form-control">
						<button class="btn btn-primary col-xs-12 col-sm-12" id="login-buttons-password" type="button">
							Sign in
						</button>
						<div id="login-other-options">
							<a id="forgot-password-link" class="pull-left">Forgot password?</a>
							<a id="signup-link" class="pull-right">Create account</a>
						</div>
					</div>
				</li>
			</ul>
			<!-- End Login Dropdown -->

		</div><!-- End #Navbar -->
	</div>
</nav>
<div class="flex">

	<!-- Main jumbotron for a primary marketing message or call to action -->
	<div class="jumbotron">
		<div class="container">
			<h2><em>FIRST</em> Robotics Competition ... </h2>
			<p></p>
			<div class="row">
				<form class="col-xs-11 col-sm-7 col-md-7 col-lg-7">
					<div class="input-group">
						<input type="text" class="form-control" name="search" placeholder="Search for...">
						<span class="input-group-btn">
							<button class="btn btn-success btn-search" type="button">Search »</button>
						</span>
					</div>
				</form>
				<div class="col-md-3">
					<a class="btn btn-primary" href="#" role="button">Button! »</a>
				</div>
			</div>
		</div>
	</div>
	<!-- Jumbotron End -->

	<!-- Main Content Begin -->
	<div class="container">
		<div class="row">
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
		 </div>
			<div class="col-md-4">
				<h2>Heading</h2>
				<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
				<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
			</div>
		</div>
	</div>
	<!-- Main Content End -->
</div>

<div class="container">
	<hr>
	<footer>
		<p>FRC Q&amp;A © <a href="http://www.usfirst.org/roboticsprograms/frc" target="_BLANK">FIRST</a> 2015</p>
	</footer>
</div>

script.js

$('.dropdown-toggle').dropdown()

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

.navbar-brand img {
		height: 35px;
		display: inline;
		margin-top: -5px;
}

.color-strip {
		height: 6px;
		width: 100%;
		margin: 0px;
		padding: 0px;
}

.color-strip div {
		display: block;
		height: 100%;
		width: 25%;
		float: left;
}

.navbar-inverse {
		background-color: #205886;
		border-color: #45657F;
		color: white;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
		color: #fff;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
		color: #fff;
		background-color: #1D4361;
}

.color-strip .fteal {
		background-color: #189f9b;
}

.color-strip .fred {
		background-color: #c71e21;
}

.color-strip .fyellow {
		background-color: #e5b500;
}

.color-strip .fblue {
		background-color: #1c3d73;
}
/* Neexed for the footer */

body {
		padding-top: 52px;
		display: flex;
		min-height: 100vh;
		flex-direction: column;
}

.flex {
		flex: 1;
}
/* Login / Register Dropdown */

#login-dropdown-list .dropdown-menu {
		min-width: 300px;
		padding: 15px;
}

#login-dropdown-list .dropdown-menu .or {
		margin: 5px 0;
		text-align: center;
}

#login-dropdown-list #forgot-password-link,
#login-dropdown-list #signup-link {
		margin-top: 10px;
}

#login-dropdown-list .btn {
		margin-top: 5px;
}

#login-dropdown-list input {
		margin: 0 0 -1px;
		border-radius: 0px;
		position: relative;
		z-index: 1;
}

#login-dropdown-list input:first-of-type {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
}

#login-dropdown-list input:last-of-type {
		margin-bottom: 5px;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
}

#login-dropdown-list input:focus {
		z-index: 2;
}

#login-dropdown-list label {
		padding-left: 5px;
}

.modal-backdrop {
		opacity: 0.75;
		filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=75);
}

.modal-footer .btn {
		margin: 0;
}

#login-buttons-reset-password-modal .modal-dialog,
#login-buttons-reset-password-modal-success .modal-dialog,
#login-buttons-enroll-account-modal .modal-dialog,
#login-buttons-email-address-verified-modal .modal-dialog {
		width: 400px;
}

#login-buttons-reset-password-modal .modal-dialog .modal-content,
#login-buttons-reset-password-modal-success .modal-dialog .modal-content,
#login-buttons-enroll-account-modal .modal-dialog .modal-content,
#login-buttons-email-address-verified-modal .modal-dialog .modal-content {
		margin-top: 30%;
}

.login-buttons-dropdown-align-left#login-buttons + li .dropdown-menu {
		float: left;
		left: 0;
		right: auto;
}

.login-buttons-dropdown-align-right#login-buttons + li .dropdown-menu {
		float: right;
		right: 0;
		left: auto;
}

#login-buttons {
		display: none;
}

#login-dropdown-list a {
		cursor: pointer;
}

.btn-Facebook {
		color: #fff;
		background-color: #3b5998;
}

.btn-Google {
		color: #fff;
		background-color: #d34836;
}

.btn-Twitter {
		color: #fff;
		background-color: #4099ff;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />