2
The Hover I want is this : http://prntscr.com/i4vr9n
My Hover is like this: http://prntscr.com/i4vrsk
My css and html
html{
font-family: sans-serif;
}
header{
width:100%;
height:58px;
background-color: #693;
border-bottom: 6px solid #487f1e;
}
header #logotipo{
margin-left: 50px;
margin-top: -50px;
position:absolute;
}
body{
display: block;
width: 100vw;
height: 100vh;
background:url(../img/Testing-banner2.jpg) no-repeat;
background-size:cover;
background-attachment: fixed;
font-size:16px;
overflow-x:hidden;
margin:0;
padding:0;
}
.div_centralizar{
text-align:center;
}
.logo {
text-align:center;
padding: 20px 0px 0px 0px;
}
nav#menu {
display:inline;
}
#menu ul {
padding:12px;
margin-left: 240px;
background-color:#693;
list-style:none;
position:relative;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color:#fff;
padding: 2px 10px;
display: inline-block;
text-decoration: none;
background:#693;
}
#menu li a:hover {
background-color:#487F1E;
}
header #logotipo:hover {
background-color:#487F1E;
}
#entrar:hover{
background-color:#487F1E;
border-bottom: 4px solid #2c4d12;
}
.intro{
text-align:center;
}
.container_pagina_inicial{
text-align:center;
color:#fff;
font-weight: bold;
}
.form-control {
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
#entrar {
font-size:18px;
width: 368px;
height: 42px;
border-radius: 0;
border-bottom: 4px solid #487f1e;
background-color: #693;
color: #fff;
margin: 0 auto;
}
#email {
width:368px;
border-radius:0;
margin: 0 auto;
}
#password {
width:368px;
border-radius:0;
margin: 0 auto;
}
#rodape {
margin-top: 250px;
}
p.copyright{
color:#666;
text-align:center;
margin:0 auto;
margin-top:10px;
}
#subtitulo {
font-weight:normal;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ensintech</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style-mobile.css">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-md-12">
<nav id="menu">
<ul>
<li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
<li><a class="aluno" href="#">Área do Aluno</a></li>
</ul>
</nav>
</div>
</div>
</div>
<img id="logotipo" src="img/ensintech.png" alt="Logotipo">
</header>
<div class="container_pagina_inicial">
<div class="intro">
<div class="div_centralizar">
<div class="logo"><img src="img/Egrande.png"></div>
</div>
<p style="font-size:32px">
Acesso Aluno
</p>
<p id="subtitulo">
Digite seus dados de login para acessar o sistema
</p>
<form id="form_login_pagina_inicial" action="act_login.cfm" method="post" enctype="multipart/form-data" name="form_login_pagina_inicial" target="escondido">
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="E-mail">
</div>
<div class="form-group">
<input type="password" class="form-control" id="password" placeholder="Senha">
</div>
</form>
<button id="entrar" type="submit" class="form-control">Entrar </button>
<br>
<p><a href="#">Esqueci a senha</a></p>
</div>
</div>
<div class="div_centralizar">
<p class="copyright">© 2018 - Ensintech - Todos os direitos reservados</p>
</div>
<div id="rodape"></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Hugo thanks again, but I have a doubt that is the same so I will do it here, this seeing that logo of the Ensintech on the left side, I wanted to do the same kind of Hover in it (http://prntscr.com/i4wuyd) I thought with this information I would get, but I’m not succeeding, would you have any idea how to do ? Better I open another question or not?
– Francisco Carlos Carvalho Jr
@Franciscocarloscarvalhojo I will answer you right here, just a minute.
– hugocsl
@Franciscocarloscarto go without the Logo file it is difficult to get the figures right, but I’ll explain here on commente Same: In class
.header #logotipo {}put aline-height: 50px;and adjusts themargin-top: -50px;until PX values are right to be perfect. I don’t like using PX values, but the way you put it all together now I think it’s the best option. So you adjust these two PX values in the logo that will work.– hugocsl