resposive disgn
Código
<html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/main.css"/> <link rel="stylesheet" href="css/fonts/style.css"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body id="fade4"> <div class="container"> <nav class="main_menu"> <ul> <ul class="sub-menu"> </ul> </li> </ul> </nav> <div class="sideright"> <ul> </ul> </div> </div> </html>
Código
/*Universal*/ *{ margin:0px; padding:0px; font-family: helvetica Neue; font-weight: lighter; } html,body{ background: #16A085; } div#applicationform{ position: absolute; top:50%; left: 50%; margin-left: -15%; margin-top: -13%; width:30%; min-height: 30%; background: #dcdcdc; overflow: hidden; border-radius: 4%; } .sub-menu { display:none; position:absolute; } .main_menu li ul { display:none; } .main_menu li:hover > ul { display: inline-block; margin-left: -4%; width: 10%; padding: 0; background: #0D5488; } .main_menu { text-align:left; line-height: 290%; padding-left: 66%; background-color: #0D5488; } .main_menu li { display: inline-block; padding: 0 10px 0; font-family:arial; font-size: 100%; color:white; } .sideright { background-color: #e5e4d7; margin:3%; margin-left:1%; padding: 2%; font-size: 82%; float: left; max-width: 18%; } p#title{ font-size: 1.6em; text-align: center; margin-top: 20px; } input[type="text"], input[type="password"], input[type="mail"]{ width: 69%; height: 2.1em; margin-left: 15%; margin-top: 3%; padding-left: 3%; font-size: 1.1em; outline: none; border:0px; background-color: #ECF0F1; border-radius: 5px; } .login{ margin:4%; margin-left: 15%; margin-bottom: 10%; width:71%; height: 2.1em; outline: none; border: 0em; background-color: #16A085; color: white; font-size: 1.2em; border-radius: 5px; -webkit-box-shadow:0em 0em 0em; } .login:hover { background-color: #1abc9c; } .separator { } ol , ul { list-style: none; } .main_menu li:hover { background-color: #3498DB; } body,html#fade4 { background-color: white; } .container { width: 100%; margin: 0px auto; max-width: 100%; min-height: 20px; overflow: hidden; } i { padding:1%; }