myhtml
<!DOCTYPEhtml><html><head><metacharset="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">
<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>
<img id="logotipo" src="img/ensintech.png" alt="Logotipo">
</header>
<div class="container">
<div class="intro">
<img src="img/Egrande.png" id="centro">
<p style="font-size:32px">
Acesso Aluno
</p>
<p id="subtitulo">
Digite seus dados de login para acessar o sistema
</p>
<form action="act_login.cfm" method="post" 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>
</div>
</div>
<center><p class="copyright">© 2018 - Ensintech - Todos os direitos reservados</p></center>
<div id="rodape"></div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
My css
@media only screen and (max-device-width: 480px) {
*{
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
font-family: Arial, Tahoma, sans-serif;
}
body{
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
background:url(../img/Testing-banner2.jpg) no-repeat;
background-size:cover;
display:block;
font-size:16px;
margin:0;
padding:0;
}
header{
width:125%;
height:121px;
background-color: #693;
border-bottom: 6px solid #487f1e;
}
header #logotipo {
margin-left: 111px;
display:none;
margin-top: -95px;
position: absolute;
}
.row {
margin-right: -3px;
margin-left: -15px;
}
#centro {
position: absolute;
top: 25%;
left: 35%;
}
#menu ul{
width: 100%;
padding: 12px;
margin-left: 12px;
margin-top: 15px;
background-color: #693;
list-style: none;
position: relative;
}
#menu ul li a {
color: #fff;
padding: 2px 10px;
display:block;
text-decoration: none;
background: #693;
}
a.adm{
margin-bottom: 11px;
margin-top: -9px;
margin-left: 72px;
}
a.aluno{
margin-bottom: 11px;
margin-top: 22px;
margin-left: 130px;
}
.container p {
text-align: center;
margin-left: -595px;
color: #fff;
font-weight: bold;
}
form {
margin-left:-450px;
}
#email {
width: 300px;
border-radius: 0;
}
#password {
width: 300px;
border-radius: 0;
}
#entrar{
width: 300px;
margin-left: -450px;
}
p.copyright {
color: #666;
margin-left: 6px;
margin-top: 22px;
}
}