<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<header id="header" class="clearHeader">
<div class="container">
<nav class="navbar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3">
<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="images/logo.png" class="img-responsive"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="" class="menu-wrap">
<div class="menu-sidebar pull-right">
<ul class="nav navbar-nav">
<li><a class="dash-button" href="#">login</a></li>
<li class="dropdown">
<a class="dash-button" href="#">Register</a>
</li>
</ul>
<!-- <a href="" class="dash-button">Login</a>
<a href="" class="dash-button">Register</a> -->
</div>
<div id="navbar-collapse-3" class="collapse navbar-collapse main-navigation " role="navigation" aria-label="Primary Menu">
<ul id="menu-main-menu" class="primary-menu nav navbar-nav ">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">store</a></li>
<li><a href="">news & resources</a></li>
</ul>
</div><!-- .main-navigation -->
</div><!-- /.navbar-collapse -->
</nav><!-- /.navbar -->
</div>
</header>
<section id="home-banner">
<div class="container-fluid">
<div class="slider-wrap">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x700" class="img-responsive"/>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x700" class="img-responsive"/>
</div>
</div>
<div class="item">
<div class="slide-1">
<img src="http://via.placeholder.com/1500x700" class="img-responsive"/>
</div>
</div>
</div>
<div class="text-wrap animated d06 t24 fadeInUp">
<p>CONNECTING CLASSROOM LEARNING WITH REAL-WORLD EXPERIENCES.</p>
<form action="" method="" id="contactFrm" name="">
<fieldset>
<div class="loc">
<input class="form-control" placeholder="Location..." type="text">
</div>
<div class="cat">
<input class="form-control" placeholder="Category..." type="text">
</div>
<div class="srch">
<button name="submit" class="border-button txt2"><i class="fa fa-search" aria-hidden="true"></i><span>Search</span></button>
</div>
</fieldset>
</form>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div>
</div>
</div>
</section>
/*****Reset css********/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; color:#101010; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
p,label{ font-family: 'GT-Walsheim', sans-serif; color: #101010; }
a{ text-decoration:none; font-family: 'GT-Walsheim', sans-serif; }
h1,h2,h3,h4,h5,h6,h7,strong{ font-family: 'GT-Walsheim', serif; }
input,select,textarea,span{ font-family: 'GT-Walsheim', sans-serif; }
.section {
padding: 4% 0;
}
.section-head {
text-align: center;
margin: 0 0 2rem auto;
}
.section-head h2 {
font: 600 30px/40px GT-Walsheim;
margin: 0 0 1rem auto;
}
.section-head p {
font: 500 17px/21px GT-Walsheim;
}
#header {
display: block;
padding: 20px 0 20px 0;
background-size: 100% 100%;
z-index: 99;
width: 100%;
transition: 500ms;
background-color: #009add;
}
#header.shortHeader,#header.innnershortHeader {
padding: 10px 0 15px 0;
}
#header .navbar {
margin: 0;
height: auto;
min-height: auto;
border: none;
display: block;
}
#header .navbar .navbar-header {
}
#header .menu-wrap {
color: #fff;
}
#header .menu-wrap .menu-sidebar {
color: inherit;
}
#header .menu-wrap .menu-sidebar > ul > li > a,#header.inner-head .menu-wrap .menu-sidebar a ,#header.innnershortHeader .menu-wrap .menu-sidebar a {
font: 500 18px/28px GT-Walsheim;
padding: 15px 20px;
display: inline-block;
text-decoration: none;
background: transparent;
color: #fff;
}
#header .menu-wrap .menu-sidebar ul.dropdown-menu {
padding: 0;
right: 0;
left: unset;
}
#header .menu-wrap .menu-sidebar a b {
color: #fff;
}
#header .menu-wrap #menu-main-menu {
margin: 0 30px 0 0rem;
color: #fff;
float: right;
}
#header .menu-wrap #menu-main-menu li a {
font: 500 18px/28px GT-Walsheim;
color: #fff;
padding: 15px 20px;
display: inline-block;
text-decoration: none;
background: transparent;
}
#header.shortHeader .menu-wrap #menu-main-menu li a,#header.innnershortHeader .menu-wrap #menu-main-menu li a {
padding: 10px 20px;
}
#header.shortHeader .menu-wrap .menu-sidebar a,#header.innnershortHeader .menu-wrap .menu-sidebar a{
padding: 10px 20px;
}
#header .navbar .navbar-header .navbar-brand {
padding: 0;
height: auto;
}
#header .navbar .navbar-header .navbar-brand img {
width:130px;
}
#home-banner {
position: relative;
overflow: hidden;
}
#home-banner #carousel-example-generic {
height: auto;
}
#home-banner .container-fluid {
padding: 0;
}
#home-banner #carousel-example-generic .text-wrap {
position: absolute;
bottom: 37%;
text-align: center;
margin: 0 auto;
width: 75%;
left: 0;
right: 0;
}
#home-banner .item img {
width: 100%;
}
#home-banner #carousel-example-generic .text-wrap p {
font: 600 30px/37px GT-Walsheim;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.56);
width: 80%;
margin: 0 auto 1rem;
}
#home-banner #carousel-example-generic .text-wrap fieldset div.loc {
width: 45%;
}
#home-banner #carousel-example-generic .text-wrap fieldset div {
display: inline-block;
float: left;
}
#home-banner #carousel-example-generic .text-wrap fieldset {
border-radius: 0px;
overflow: hidden;
width: 84%;
margin: 0 auto;
}
#home-banner #carousel-example-generic .text-wrap fieldset div.loc .form-control {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
#home-banner #carousel-example-generic .text-wrap fieldset input {
height: auto;
font: 500 20px/22px GT-Walsheim;
padding: 15px 22px;
border-radius: 0;
box-shadow: none;
}
#home-banner #carousel-example-generic .text-wrap fieldset .cat {
width: 35%;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch {
width: 20%;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button {
height: auto;
font: 700 24px/22px GT-Walsheim;
padding: 15px 0px;
box-shadow: none;
width: 100%;
border: none;
background: #46c5fd;
color: #fff;
text-transform: lowercase;
border-radius: 5px;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button span {
color: #fff;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button i {
margin: 0 10px 0 0;
color: #fff;
}
#home-banner #carousel-example-generic .carousel-control span {
top: 47%;
position: absolute;
font-size: 42px;
}
@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) and (orientation : portrait){
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){
#header .navbar .navbar-header .navbar-brand img {
width: 100px;
}
#header .menu-wrap #menu-main-menu li a {
font: 500 16px/21px GT-Walsheim;
padding: 10px 10px;
}
#header .menu-wrap .menu-sidebar a {
font: 500 16px/21px GT-Walsheim;
padding: 10px 10px;
}
#home-banner #carousel-example-generic {
height: auto;
}
#header.shortHeader .menu-wrap #menu-main-menu li a {
padding: 10px 10px;
}
#header.shortHeader .menu-wrap .menu-sidebar a,,#header.shortHeader .menu-wrap .menu-sidebar > ul > li > a {
padding: 10px 10px;
font: 500 16px/21px GT-Walsheim;
}
#header .menu-wrap .menu-sidebar a,#header .menu-wrap .menu-sidebar > ul > li > a {
padding: 10px 10px;
font: 500 16px/21px GT-Walsheim;
}
#header .menu-wrap #menu-main-menu {
margin: 0 0 0 11rem;
}
#header.innnershortHeader .menu-wrap #menu-main-menu li a, #header.inner-head .menu-wrap #menu-main-menu li a {
padding: 10px 20px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){
#header.innnershortHeader .menu-wrap #menu-main-menu li a, #header.inner-head .menu-wrap #menu-main-menu li a {
padding: 10px 20px;
}
#header .navbar .navbar-header .navbar-brand img {
width: 100px;
}
#header .menu-wrap #menu-main-menu {
margin: 0 0 0 7rem;
}
#header .menu-wrap #menu-main-menu li a{
font: 500 16px/21px GT-Walsheim;
padding: 10px 10px;
}
#header.innnershortHeader .menu-wrap #menu-main-menu li a,#header.inner-head .menu-wrap #menu-main-menu li a {
padding: 10px 20px
}
#home-banner #carousel-example-generic {
height: auto;
}
#home-banner #carousel-example-generic .text-wrap {
bottom: 15%;
width: 100%;
}
#home-banner #carousel-example-generic .text-wrap p {
font: 600 25px/31px GT-Walsheim;
width: 80%;
margin: 0 auto 1rem;
}
#home-banner #carousel-example-generic .text-wrap fieldset input {
font: 500 16px/22px GT-Walsheim;
padding: 15px 15px;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button {
font: 700 16px/21px GT-Walsheim;
}
.section-head h2 {
font: 600 25px/33px GT-Walsheim;
margin: 0 0 .5rem auto;
}
.section-head p {
font: 500 16px/21px GT-Walsheim;
}
.section-head {
margin: 0 0 1rem auto;
}
}
@media screen and (width:1024px){
#header .menu-wrap #menu-main-menu {
margin: 0 0 0 11rem;
}
#header.innnershortHeader .menu-wrap #menu-main-menu li a, #header.inner-head .menu-wrap #menu-main-menu li a {
padding: 10px 20px;
}
}
@media screen and (max-width:767px){
#header.clearHeader, #header.shortHeader {
background-size: 100% 200%;
}
#header {
padding: 10px 0 10px 0;
background-size: 100% 200%;
position: unset;
}
#header .navbar .navbar-header .navbar-toggle {
background: #46c5fd;
margin-right: 0;
}
#header .navbar .navbar-header .navbar-toggle .icon-bar {
background: #fff;
}
#header .navbar .navbar-header .navbar-brand img {
width: 100px;
}
#header .menu-wrap .menu-sidebar > ul > li > a,#header.inner-head .menu-wrap .menu-sidebar a {
font: 500 14px/20px GT-Walsheim;
padding: 5px 5px;
}
#header .menu-wrap #navbar-collapse-3 {
padding: 0;
width: 100%;
}
#header .menu-wrap #menu-main-menu {
margin: 0;
color: #fff;
}
#header .menu-wrap #menu-main-menu li a {
font: 500 14px/20px GT-Walsheim;
padding: 6px 0px;
}
#header .menu-wrap .menu-sidebar {
position: absolute;
right: 45px;
top: 10px;
}
#header .menu-wrap .menu-sidebar ul {
margin: 0;
}
#header .menu-wrap .menu-sidebar ul li {
display: inline-block;
}
#header .menu-wrap .menu-sidebar ul.dropdown-menu li {
display: block;
}
#header .menu-wrap .menu-sidebar ul.dropdown-menu li a {
display: block;
padding: 5px 15px;
}
#header .menu-wrap .menu-sidebar ul.dropdown-menu {
position: absolute;
width: 110px;
min-width: 110px;
background:#fff;
}
#home-banner #carousel-example-generic {
height: auto;
}
#home-banner #carousel-example-generic .text-wrap {
bottom: 22%;
margin: 0 auto;
width: 100%;
}
#home-banner #carousel-example-generic .text-wrap p {
display: none;
}
#home-banner #carousel-example-generic .text-wrap fieldset {
width: 96%;
}
#home-banner #carousel-example-generic .text-wrap fieldset input {
height: auto;
font: 400 14px/21px GT-Walsheim;
padding: 8px 10px;
border-radius: 0;
box-shadow: none;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button span {
color: #fff;
display: none;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button i {
margin: 0;
font-size: 15px;
}
#home-banner #carousel-example-generic .carousel-control span {
top: 31%;
font-size: 22px;
}
#home-banner #carousel-example-generic .text-wrap fieldset .srch .border-button {
font: 700 24px/22px GT-Walsheim;
padding: 8px 0px;
}
}
