<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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="#bs-megadropdown-tabs">
<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://d2r8jqmejizzox.cloudfront.net/361456-853098-65x38-logofinal.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse style= collapse in" id="bs-megadropdown-tabs" style="
padding-left: 0px;
">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-globe"></i> ALL</a></li>
<li><a href="#"><i class="fa fa-university"></i> POLITICS</a></li>
<li class="dropdown mega-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-space-shuttle"></i> CATEGORIES <span class="caret"></span></a>
<div id="filters" class="dropdown-menu mega-dropdown-menu">
<div class="container-fluid2">
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="kids">
<ul class="nav-list list-inline">
<li><a data-filter=".89" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Running.png"><span>BRICS</span></a></li>
<li><a data-filter=".97" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Latin America</span></a></li>
<li><a data-filter=".96" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>USA</span></a></li>
<li><a data-filter=".87" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Middle East</span></a></li>
<li><a data-filter=".85" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Asia</span></a></li>
<li><a data-filter=".90" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Africa</span></a></li>
</ul>
</div>
<div class="tab-pane" id="sports">
<ul class="nav-list list-inline">
<li><a data-filter=".38" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Basketball.png"><span>Technology</span></a></li>
<li><a data-filter=".41" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Football.png"><span>Music</span></a></li>
<li><a data-filter=".62" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_Soccer.png"><span>Startups</span></a></li>
<li><a data-filter=".82" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_MensTraining.png"><span>Celebrities</span></a></li>
<li><a data-filter=".93" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Entertainment</span></a></li>
<li><a data-filter=".94" href="#"><img src="http://content.nike.com/content/dam/one-nike/globalAssets/menu_header_images/OneNike_Global_Nav_Icons_WomensTraining.png"><span>Series</span></a></li>
</ul>
</div>
</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#kids" role="tab" data-toggle="tab">Countries</a></li>
<li><a href="#sports" role="tab" data-toggle="tab">Top Guess</a></li>
</ul>
</div>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>Nombre</strong>
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
<ul style="background-color:white;" class="dropdown-menu">
<li>
<div class="navbar-login">
<div class="row">
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Nombre Apellido</strong></p>
<p class="text-left small">correoElectronico@email.com</p>
<p class="text-left">
<a href="#" class="btn btn-primary btn-block btn-sm">Actualizar Datos</a>
</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-12">
<p>
<a href="#" class="btn btn-danger btn-block">Cerrar Sesion</a>
</p>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SIGN IN <span class="caret"></span></a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Login via
<div class="social-buttons">
<a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
<a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
</div>
or
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required="">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required="">
<div class="help-block text-right"><a href="">Forget the password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> keep me logged-in
</label>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <a href="#"><b>Join Us</b></a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="news_tricker">
<div class="news_cover">Updates</div>
<ul id="ticker">
<li><a href=''> Business heads back DTI bid for free mall space for MSMEs </a></li>
<li><a href=''> OECD-FAO Agricultural Outlook 2016-2025 </a></li>
<li><a href=''> President Mukherjee condoles passing away of A.C. Jose </a></li>
<li><a href=''> New International Standard to tackle Informal Economy </a></li>
<li><a href=''> Mandatory Energy Assessment by Dec 2015 </a></li>
<li><a href=''> South African Minister for Small Business Development Zulu's Maiden Budget Speech </a></li>
<li><a href=''> Small Businesses are the Big Deal not only for Economy but in Politics too </a></li>
<li><a href=''> AEC 2015 - Advantage SMEs </a></li>
<li><a href=''> Green Business Practice – Some Easy Steps for SMEs </a></li>
<li><a href=''> Small Business Impact Fund - Europe’s New Financial Plan for SMEs - Launched Recently </a></li>
<li><a href=''> New National Policy on MSMEs approved </a></li>
</ul>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="http://www.skoda-auto.co.in/models/new-skoda-rapid/PublishingImages/Overview/Top/overview-top_New2.jpg" alt="Chania" width="100%" height="100%">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x400/16a085/ffffff&text=About Us">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/e67e22/ffffff&text=Projects">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/2980b9/ffffff&text=Portfolio">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
<div class="item">
<img src="http://placehold.it/1200x400/8e44ad/ffffff&text=Services">
<div class="carousel-caption">
<h3>
Headline</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem
ipsum dolor sit amet, consetetur sadipscing elitr.</p>
</div>
</div>
<!-- End Item -->
</div>
<!-- End Carousel Inner -->
<ul class="nav nav-pills nav-justified">
<li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem
ipsum dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum
dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum
dolor sit</small></a></li>
<li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum
dolor sit</small></a></li>
</ul>
</div>
<!-- End Carousel -->
</div>
#ticker_container{margin-top:6px;}
#newscontent {margin-right: 10px; float: left;}
#newscontent a {color: #585858;}
#news {display: none;}
#controls { float: right; height: 16px;}
#news {display: none;}
.news_tricker{width:50%;}
/*
Credits:
Code snippet by @maridlcrmn (Follow me on Twitter)
Images by Nike.com (http://www.nike.com/us/en_us/)
Logo by Sneaker-mission.com (http://www.sneaker-mission.com/)
*/
.navbar-brand {
width: 70px;
height: 50px;
background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
background-size: 50px;
}
.nav-tabs {
display: inline-block;
border-bottom: none;
padding-top: 15px;
font-weight: bold;
}
.nav-tabs > li > a,
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
border: none;
border-radius: 0;
}
.nav-list { border-bottom: px solid #eee; }
.nav-list > li {
padding: 20px 15px 15px;
}
.nav-list > li:last-child { border-right: 0px solid #eee; }
.nav-list > li > a:hover { text-decoration: none; }
.nav-list > li > a > span {
display: block;
font-weight: bold;
text-transform: uppercase;
}
.mega-dropdown { position: static !important; }
.mega-dropdown-menu {
padding: 20px 15px 15px;
text-align: center;
width: 100%;
}
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
@media(max-width:768px){
#login-dp{
background-color: inherit;
color: #fff;
}
#login-dp .bottom{
background-color: inherit;
border-top:0 none;
}
}
.navbar-login
{
width: 305px;
padding: 10px;
padding-bottom: 0px;
}
.navbar-login-session
{
padding: 10px;
padding-bottom: 0px;
padding-top: 0px;
}
.icon-size
{
font-size: 87px;
}
.navbar-brand {
width: 70px;
height: 50px;
background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') no-repeat center center;
background-size: 50px;
padding-top: 7px;
}
.navbar-nav {
padding-left: 15px;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border-color: #00486c;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
background-color: rgb(51,79,111);
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
color: white;
background-color: #428bca;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0px;
margin: 2px 0px 0px;
font-size: 14px;
list-style: none;
background-color: white;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.14902);
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px;
}
.nav-list > li {
padding: 20px 15px 15px;
border-left:0px;
.nav-list {
border-bottom: 0px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: white;
cursor: default;
background-color: #428bca;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: black;
cursor: default;
background-color: rgb(255, 255, 255);
border: solid black 1px;
}
body
{
padding-top: 20px;
}
#myCarousel .nav a small
{
display: block;
}
#myCarousel .nav
{
background: #eee;
}
.nav-justified > li > a
{
border-radius: 0px;
}
.nav-pills>li[data-slide-to="0"].active a { background-color: #16a085; }
.nav-pills>li[data-slide-to="1"].active a { background-color: #e67e22; }
.nav-pills>li[data-slide-to="2"].active a { background-color: #2980b9; }
.nav-pills>li[data-slide-to="3"].active a { background-color: #8e44ad; }
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).stop( true, true ).slideDown("fast");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).stop( true, true ).slideUp("fast");
$(this).toggleClass('open');
}
);
});
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
jQuery(function(){
jQuery('#ticker').tickerme();
});
// js code for news ticker
(function(e){e.fn.tickerme=function(t){var n=e.extend({},e.fn.tickerme.defaults,t);return this.each(function(){function a(){e(t).hide();e("body").prepend(r).prepend(i);var n='<div id="ticker_container">';n+='<div id="newscontent"><div id="news"></div></div>';n+='<div id="controls">';n+='<a href="#" id="pause_trigger"><svg class="icon icon-pause" viewBox="0 0 32 32"><use xlink:href="#icon-pause"></use></svg></a>';n+='<a href="#" id="play_trigger" style="display:none"><svg class="icon icon-play" viewBox="0 0 32 32"><use xlink:href="#icon-play"></use></svg></a>';n+='<a href="#" id="prev_trigger"><svg class="icon icon-prev" viewBox="0 0 32 32"><use xlink:href="#icon-prev"></use></svg></a>';n+='<a href="#" id="next_trigger"><svg class="icon icon-next" viewBox="0 0 32 32"><use xlink:href="#icon-next"></use></svg></a>';n+="</div>";n+="</div>";e(n).insertAfter(t);e(t).children().each(function(t){s[t]=e(this).html()});f()}function f(){if(o==s.length-1){o=0}else{o++}if(n.type=="fade"){e("#news").fadeOut(n.fade_speed,function(){e("#newscontent").html('<div id="news">'+s[o]+"</div>");e("#news").fadeIn(n.fade_speed)})}u=setTimeout(f,n.duration)}var t=e(this);var r='<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="224" height="32" viewBox="0 0 224 32"><defs><g id="icon-play"><path class="path1" d="M6 4l20 12-20 12z"></path></g><g id="icon-pause"><path class="path1" d="M4 4h10v24h-10zM18 4h10v24h-10z"></path></g><g id="icon-prev"><path class="path1" d="M18 5v10l10-10v22l-10-10v10l-11-11z"></path></g><g id="icon-next"><path class="path1" d="M16 27v-10l-10 10v-22l10 10v-10l11 11z"></path></g></defs></svg>';var i='<style type="text/css">#ticker_container{width:100%}#newscontent{float:left}#news{display:none}#controls{float:right;height:16px}.icon{display:inline-block;width:16px;height:16px;fill:'+n.control_colour+"}.icon:hover{fill:"+n.control_rollover+"}</style>";var s=[];var o=-1;var u;a();e("a#pause_trigger").click(function(){clearTimeout(u);e(this).hide();e("#play_trigger").show();return false});e("a#play_trigger").click(function(){f();e(this).hide();e("#pause_trigger").show();return false});e("a#prev_trigger").click(function(){if(o==0){o=s.length-1}else{o--}e("#newscontent").html('<div id="news" style="display:block">'+s[o]+"</div>");if(n.auto_stop)e("a#pause_trigger").trigger("click");return false});e("a#next_trigger").click(function(){if(o==s.length-1){o=0}else{o++}e("#newscontent").html('<div id="news" style="display:block">'+s[o]+"</div>");if(n.auto_stop)e("a#pause_trigger").trigger("click");return false})})};e.fn.tickerme.defaults={fade_speed:500,duration:3e3,auto_stop:true,type:"fade",control_colour:"#333333",control_rollover:"#666666"}})(jQuery)
