<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 ---------->
<div class="container-fluid">
<div class="row pre-head">
<div class="col-md-4 text-center"><span class="text-lowercase">andrescondo17@gmail.com </span></div>
<div class="col-md-4 text-center"><span>0992792599-/-0979262364 </span></div>
<div class="col-md-4 text-center"><span>Tecnologia , Diseño Web y mucho mas</span></div>
</div>
</div>
<div>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<div id="flipkart-navbar">
<div class="container">
<div class="row row1">
<ul class="largenav pull-right">
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Inicio</a></li>
<li class="upper-links"><a class="links" href="https://campusbox.org/">Portafolio</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Servicios</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Nosotros</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Contacto</a></li>
<li class="upper-links">
<a class="links" href="http://clashhacks.in/">
<svg width="16px" height="12px" style="overflow: visible;"></svg>
</a>
</li>
<li class="upper-links dropdown"><a class="links" href="http://clashhacks.in/">Dropdown</a>
<ul class="dropdown-menu">
<li class="profile-li"><a class="profile-links" href="http://yazilife.com/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://hacksociety.tech/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
</ul>
</li>
</ul>
</div>
<div class="row row2">
<div class="col-sm-2">
<h2 style="margin:0px;"><span class="smallnav menu">☰ Brand</span></h2>
<h1 style="margin:0px;"><span class="largenav">Brand</span></h1></div>
<div class="navbar-search smallsearch col-sm-8 col-xs-11">
<div class="row">
<input class="flipkart-navbar-input col-xs-11" type placeholder="Search for Products, Brands and more" name />
<button class="flipkart-navbar-button col-xs-1">
<svg width="15px" height="15px"></svg>
</button>
</div>
</div>
<div class="cart largenav col-sm-2">
<a class="cart-button">
<svg class="cart-svg " width="16 " height="16 "></svg>Link<span class="item-number ">0</span></a>
</div>
</div>
</div>
</div>
<div id="mySidenav" class="sidenav">
<div class="container" style="background-color: #2874f0; padding-top: 10px;"><span class="sidenav-heading">Home</span><a class="closebtn">×</a></div><a href="http://clashhacks.in/">Link</a><a href="http://clashhacks.in/">Link</a><a href="http://clashhacks.in/">Link</a><a href="http://clashhacks.in/">Link</a></div>
</div>
div.row.row1{
}
div.row.pre-head{
background-color:#86C8D2;
}
#flipkart-navbar{
background-color:#B5E5EA;
color:#FFFFFF;
}
.row1{
padding-top:10px;
}
.row2{
padding-bottom:20px;
}
.flipkart-navbar-input{
padding:11px 16px;
border-radius:2px 0 0 2px;
border:0 none;
outline:0 none;
font-size:15px;
color:#D6D9DD;
}
.flipkart-navbar-button{
background-color:#86C8D2;
border:0px solid #86C8D2;
border-radius:0 2px 2px 0;
color:#565656;
padding:10px 0;
height:43px;
cursor:pointer;
}
.cart-button{
background-color:#B5E5EA;
box-shadow:0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
padding:10px 0;
text-align:center;
height:41px;
border-radius:2px;
font-weight:500;
width:120px;
display:inline-block;
color:#FFFFFF;
text-decoration:none;
color:inherit;
border:none;
outline:none;
}
.cart-button:hover{
text-decoration:none;
color:#fff;
cursor:pointer;
}
.cart-svg{
display:inline-block;
width:16px;
height:16px;
vertical-align:middle;
margin-right:8px;
}
.item-number{
border-radius:3px;
background-color:rgba(0, 0, 0, .1);
height:20px;
padding:3px 6px;
font-weight:500;
display:inline-block;
color:#fff;
line-height:12px;
margin-left:10px;
}
.upper-links{
display:inline-block;
padding:0 11px;
line-height:23px;
font-family:'Roboto', sans-serif;
letter-spacing:0;
color:inherit;
border:none;
outline:none;
font-size:12px;
}
.dropdown{
position:relative;
display:inline-block;
margin-bottom:0px;
}
.dropdown:hover{
background-color:#fff;
}
.dropdown:hover .links{
color:#000;
}
.dropdown:hover .dropdown-menu{
display:block;
}
.dropdown .dropdown-menu{
position:absolute;
top:100%;
display:none;
background-color:#fff;
color:#333;
left:0px;
border:0;
border-radius:0;
box-shadow:0 4px 8px -3px #555454;
margin:0;
padding:0px;
}
.links{
color:#fff;
text-decoration:none;
}
.links:hover{
color:#fff;
text-decoration:none;
}
.profile-links{
font-size:12px;
font-family:'Roboto', sans-serif;
border-bottom:1px solid #e9e9e9;
box-sizing:border-box;
display:block;
padding:0 11px;
line-height:23px;
}
.profile-li{
padding-top:2px;
}
.largenav{
display:none;
}
.smallnav{
display:block;
}
.smallsearch{
margin-left:15px;
margin-top:15px;
}
.menu{
cursor:pointer;
}
@media screen and (min-width: 768px) {
.largenav{
display:block;
}
}
@media screen and (min-width: 768px) {
.smallnav{
display:none;
}
}
@media screen and (min-width: 768px) {
.smallsearch{
margin:0px;
}
}
.sidenav{
height:100%;
width:0;
position:fixed;
z-index:1;
top:0;
left:0;
background-color:#fff;
overflow-x:hidden;
transition:0.5s;
box-shadow:0 4px 8px -3px #555454;
padding-top:0px;
}
.sidenav a{
padding:8px 8px 8px 32px;
text-decoration:none;
font-size:25px;
color:#818181;
display:block;
transition:0.3s;
}
.sidenav .closebtn{
position:absolute;
top:0;
right:25px;
font-size:36px;
margin-left:50px;
color:#fff;
}
@media screen and (max-height: 450px) {
.sidenav a{
font-size:18px;
}
}
.sidenav-heading{
font-size:36px;
color:#fff;
}
function openNav() {
document.getElementById("mySidenav").style.width = "70%";
// document.getElementById("flipkart-navbar").style.width = "50%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
