<!DOCTYPE html>
<html>
<head>
<title>Menu|Nike</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/css/style.css">
<script type="text/javascript" src="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/js/javascript.js"></script>
</head>
<body>
<div id="header">
<div id="logo"><img src="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/ResponsiveNavigationBar/nike%20(1).png"/ width="90" border="0"></div>
<div id="res_btn" onclick="show_hide_nav('navbar')" ><img src="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/ResponsiveNavigationBar/button.png"/></div>
<ul id="navbar">
<li><a href="#">Inicio</a></li>
<li><a href="#">Productos</a></li>
<li><a href="menu/proyecto.html" target="_blank">Proyectos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<section class="align-self-md-center">
<div class="navbar-divider">
<h2 id="bienvenidos">Bienvenidos a nuestro sitio web</h2>
<p class="pagination"><strong class="navbar-end">Bienvenidos</strong>, cachorrosdelaweb , es un sitio , que ofrece Servicios de sitios web</p>
</div>
<img src="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/gif/open-source.gif" alt="hack">
<img src="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/gif/N8WBW63fEYrs5gKs5aqQAQ.webp" alt="hackeandote">
<img src="https://www.cachorrosdelaweb.com/dowloand/demo/proyectos-3.0/menu-nike/gif/2ex9g03.gif" alt="te hackee">
</section>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
background: skyblue;
}
.align-self-md-center{
border-radius: 50px;
}
#bienvenidos{text-align: center; color: #000000; font-family: 'Franklin Gothic Medium', Arial, sans-serif;
font-size: 19px; padding: 16px}
#header{
width: 100%;
height: 80px;
background: #333;
box-shadow: 0px 2px 4px gray;
}
#logo{
width:200px;
height: 80px;
float: left;
padding-left:40px;
}
#navbar{
width:1000px;
height: 80px;
margin: 0px auto;
float: right;
}
#navbar>li{
float: left;
list-style: none;
width: 190px;height: 80px;
border-right:1px solid #534444;
border-left: 1px solid #534444;
}
li>a{
text-decoration: none;
color: white;
font-family: cursive;
font-size: 20px;
line-height: 80px;
display: block;
text-align: center;
}
li>a:hover,
li>a:focus{
background: skyblue;
color: #333;
}
#res_btn{
width: 50px;
height: 50px;
float: right;
display: none;
}
@media screen and (max-width:1260px){
#logo>img{
width:150px;
height: 60px;
float: left;
padding-left:20px;
padding-top: 10px;
}
#navbar{
width:800px;
height: 80px;
margin: 0px auto;
float: right;
}
#navbar>li{
float: left;
list-style: none;
width: 150px;
height: 80px;
border-right:1px solid #534444;
border-left: 1px solid #534444;
}
li>a{
text-decoration: none;
color: white;
font-family: cursive;
font-size: 20px;
line-height: 80px;
display: block;
text-align: center;
}
}
@media screen and (max-width:1060px){
#header{
width: 100%;
height: 80px;
background: #333;
box-shadow: 0px 2px 4px gray;
position:relative;top:80px;
}
#logo{
width:100%;
height: 90px;
float: left;
padding-left:20px;
padding-top: 10px;
position: absolute;
top:-90px;
background: white;
}
#navbar{
width:100%;
height: 60px;
margin: 0px auto;
}
#navbar>li{
width: 18%;
}
li>a{
font-size: 16px;
}
}
@media screen and (max-width:768px){
#header{
height: 50px;
}
#navbar{
width:100%;
height: 50px;
margin: 0px auto;
}
#navbar>li{
width: 19%;
height: 50px;
}
li>a{
font-size: 16px;
line-height: 50px;
}
}
@media screen and (max-width: 480px){
#header{
height: 0px;
}
#navbar{
width:100%;
height: 50px;
margin: 0px auto;
margin-top:-40px;
display: none;
}
#navbar>li{
float: none;
list-style: none;
width: 100%;
height: 50px;
background: #333;
border-bottom: 1px solid skyblue;
}
li>a{
font-size: 16px;
line-height: 50px;
}
#res_btn{
display: block;
position: relative;
top:-80px;
cursor: pointer;
}
}
.pagination{color: blue; font-size: 30px; margin: 38px;}
.navbar-end{color: #000; font-size: 40px;}
<script type="text/javascript">
var nav = false;
function show_hide_nav(id){
var navbar = document.getElementById(id);
if(nav == false){
navbar.style.display = "block";
nav = true;
}else{
navbar.style.display = "none";
nav = false;
}
}
</script>
 |
| Ver demo |
Hola mi nombre es Agustin ,soy informático desde los 15 años, soy apasionado ala informatica. 
No hay comentarios.:
Publicar un comentario