<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/styles.css"/> </head> <body> <header> <h1>Tornillerías Martínez</h1> </header> <aside> <ul> <li>Inicio</li> <li>Productos</li> <li>Contacto</li> </ul> </aside> <main> <h2>Los mejores tornillos del mundo</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis temporibus exercitationem alias iure repellendus ad sed adipisci minus fuga voluptatibus sequi odit dolore, vel doloribus nobis recusandae quaerat iusto earum?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati voluptates placeat quaerat corporis at quos earum mollitia inventore debitis, consectetur repellat soluta similique provident harum assumenda eum amet iste consequuntur.</p> </main> <footer> <p>(C) The Corner</p> </footer> </body> </html>
.cabecera{ color: green; border-style:solid; border-right-color: blue; border-left-color: rgb(243, 132, 29); border-width: 10px; /* todos los bordes tienen 10px de ancho */ border-width: 10px 5px; /* arriba y abajo tienen 10 izq y derecha 5 */ border-width: 10px 5px 0; /* empezamos por arriba y seguimos las agujas del reloj */ } .azuloscuro{ color:#010157; /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-style: italic; /* lo pone en cursiva */ /*font-weight:lighter; /* para ponerlo en negrita */ /* font-size:1rem; /* 1 rem = 16px */ font: bold 1rem Arial; text-align: justify; } li{ color:#ff7272; } table{ width: 70%; margin: 20px auto; } th, td { border-style:dotted; } .contenedor{ background-color: bisque; width:70%; margin: auto; padding-bottom: 20px; position: relative; } .articulos{ width: 50%; background-color: aqua; margin: 20px auto; padding-left: 1em; text-align: center; position: absolute; top:50%; left:25%; width:50%; } header{ background-color: aquamarine; } aside{ background-color: gray; width: 33%; float: left; position: relative; bottom:-100px; right:40px; } main{ background-color: darkkhaki; width: 66%; float: right; } footer{ background-color: black; color: white; clear: both; }