Meu menu responsivo não funciona e não consigo alinhar a imagem a esquerda do menu
HTML
<!DOCTYPE hmtl>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DaHora Software</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#subirTopo").hide();
jQuery('a#subirTopo').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#subirTopo').fadeIn();
} else {
jQuery('#subirTopo').fadeOut();
}
});
});
</script>
</head>
<body>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu"><img src="img/menu_icon_verde.png" width="30" height="30"></label>
<div class="logo">
<a href="#"><img src="img/logo.png" width="250" height="150"></a>
</div>
<nav class="menu">
<ul>
<li><a href="#empresa">NOSSA EMPRESA</a></li>
<li><a href="#cursos">CURSOS</a></li>
<li><a href="#sites">SITES</a></li>
<li><a href="#sistemas">SISTEMAS</a></li>
<li><a href="#contato">FALE CONOSCO</a></li>
</ul>
</nav>
</header>
<div class="empresa">
<h1 id="empresa"> NOSSA EMPRESA </h1>
</div>
<div class="cursos">
<h1 id="cursos"> CURSOS </h1>
</div>
<div class="sites">
<h1 id="sites"> SITES </h1>
</div>
<div class="sistemas">
<h1 id="sistemas"> SISTEMAS </h1>
</div>
<div class="contato">
<h1 id="contato"> FALE CONOSCO </h1>
</div>
<footer>
<a id="subirTopo"> <img src="img/seta.png"” alt=”some text” width="100" height="100">
</a>
</footer>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Poppins', sans-serif;
}
header{
width: 100%;
height: 150px;
background-color: black;
}
#btn-menu{
display: none;
}
header label{
display: none;
width: 30px;
height: 30px;
padding: 10px;
border-right: 1px solid green;
}
header label:hover{
cursor: pointer;
background: rgba(0,0,0,0.3);
}
.menu ul{
margin: 0;
list-style: none;
padding: 0;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.titulo li a{
font-family: 'Alfa Slab One', cursive;
font-size: 50pt;
text-decoration: none;
color: darkgreen;
padding: 50px 50px;
}
.menu li{
border-right: 1px solid #fff;
}
.menu li a{
display: block;
padding: 15px 20px;
color: #fff;
text-decoration: none;
font-family: 'Alfa Slab One', cursive;
font-size: 12pt;
}
. menu li:hover{
background: rgba(0,0,0,0.3);
}
a img{
display: inline-flex;
}
@media (max-width:768px){
header label{
display: block;
}
.menu{
position: absolute;
background-color: #000;
width: 70%;
margin-left: -70%;
transition: all 0.5s;
}
.menu ul{
flex-direction: column;
}
.menu li{
border-top: 1px solid #fff;
}
.logo a{
justify-content: center;
align-items: center;
display: inline-flex;
}
header{
height: 50px;
background-color: black;
}
#btn-menu:checked - .menu {
margin-right: 70px;
}
}
/*
a{
margin: 20px;
color: #fff;
text-decoration:none;
font-family: font-family: 'Staatliches', sans-serif;
font-size: 18pt;
}
*/
.empresa{
background-color: #fff;
width: auto;
height: 500px;
display: flex;
padding: 0px 50px;
}
.cursos{
background-color: #8FBC8F;
width: auto;
height: 500px;
padding: 0px 50px;
}
.sites{
background-color: #fff;
width: auto;
height: 500px;
padding: 0px 50px;
}
.sistemas{
background-color: #8FBC8F;
width: auto;
height: 500px;
padding: 0px 50px;
}
.contato{
background-color: #fff;
width: auto;
height: 500px;
padding: 0px 50px;
}
footer{
background-color: #000000;
width: auto;
height: 200px;
padding: 0px 50px;
}
#subirTopo {
background-repeat: no-repeat;
bottom: 20px;
right: 20px;
cursor: pointer;
padding: 0px;
position: fixed;
}Discussão (0)
Carregando comentários...