@charset "UTF-8"; /* CSS Document */ * { box-sizing: border-box; } { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ header { background-color: #04499A; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #ccc; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } article { margin-left: auto; margin-right: auto; margin-top: -100px; color: #135496; font-family: Arial, Helvetica, sans-serif; padding: 20px; width: 45%; background-color: #FFFFFF; border-radius: 15px; box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2); height: auto; /* only for demonstration, should be removed */ } .boton_registrarse{ text-decoration: none; padding: 10px; font-weight: 300; font-size: 14px; color: #ffffff; background-color: #39B39D; border-radius: 8px; width: 20em; height: 2em; } .boton_login{ text-decoration: none; padding: 10px; font-weight: 300; font-size: 14px; color: #ffffff; background-color: #135496; border-radius: 8px; } .input { border-width: 1px; border-style: solid; border-color: #AFC2CB; border-radius: 5px; height: 30px; color: #AFC2CB; } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #39B39D; padding: 8px; text-align: center; color: white; font-family: Arial, Helvetica, sans-serif; margin-top: 160px; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 90%; height: auto; } }