index.html

<!DOCTYPE html>
<html lang="en">

	<head>
<link rel="shortcut icon" href="img/11_th_logo_rev1-05.ico">
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">

		<title href="index.html">11th Hour</title>

		<!-- Bootstrap Core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">

		<!-- Custom CSS -->
		<link href="css/business-casual.css" rel="stylesheet">
		<!-- Fonts -->
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
		<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
       <link href="css/business-casual.css" rel="stylesheet">
       <link href="css/myStyle.css" rel="stylesheet">
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->

	</head>

	<body>
		<br><br>
		<nav class="navbar navbar-default" role="navigation" style="height: 150px; background-color: #FFFFFF">
			<div class="container">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
					<a class="navbar-brand" href="index.html">11th Hour</a>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav" style="padding: 0px">
						<li style="padding: 0px">
							<a href="bar.html" style="padding-top: 65px; padding-bottom: 50px">I am Looking for Staff</a>
						</li>
						<li style="padding: 0px">
							<a class="brand" href="index.html" style="focus:
							background-color: #FFFFFF;
							color: #FFFFFF; padding-top: 0px; padding-b: 0px" ><img src="img/11_th_logo.png" style="width: 170px; height: 150px;"></img> </a>
						</li>
						<li style="padding: 0px">
							<a href="bartender.html" style="padding-top: 65px; padding-bottom: 50px">I am Looking for Work</a>
						</li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container -->
		</nav>
		<div class="container">
			<div class="row">
				<div class="box"  style="background-color: #FFFFFF">
					<div class="col-lg-3"></div>
					<div class="col-lg-6">
						<form>
							<hr>
							<h2 class="intro-text text-center">Find Bar Staff <strong>at the 11th Hour</strong></h2>
							<hr>
							<hr class="visible-xs">
							<div class="row">

								<div class="dropdown">
									<button class="btn btn-default dropdown-toggle btn-group-justified" type="button" id="dropdownMenu1" data-toggle="dropdown" style="text-align: -webkit-left;">
										What type of staff are you looking for?
										<span class="caret"></span>
									</button>
									<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" style="width: 100%;">
										<li role="presentation">
											<a role="menuitem" tabindex="-1" href="#">Bartender</a>
										</li>
										<li role="presentation">
											<a role="menuitem" tabindex="-1" href="#">Floor Staff</a>
										</li>
										<li role="presentation">
											<a role="menuitem" tabindex="-1" href="#">Back Bar</a>
										</li>
										<li role="presentation">
											<a role="menuitem" tabindex="-1" href="#">Mixologist</a>
										</li>
									</ul>
								</div>
							</div>
							<br>
							<div class="row">
								<h2 class="intro-text"> What day do you need the staff? </h2>
								<input type="date" class="form-control" placeholder="What day do you need the staff">
							</div>
							<br>
							<div class="row">
								<h2 class="intro-text"> What Time do you need the staff? </h2>
								<input type="time" class="form-control" placeholder="What time do you need the staff">
								<br>
								<a type="button" class="btn btn-success btn-group-justified" href="results.html"> Search! </a>
							</div>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery -->
		<script src="js/jquery.js"></script>

		<!-- Bootstrap Core JavaScript -->
		<script src="js/bootstrap.min.js"></script>

		<!-- Script to Activate the Carousel -->
		<script>
			$('.carousel').carousel({
				interval : 5000 //changes the speed
			})
		</script>

	</body>

</html>