body,td,th { font-family: Arial; font-size: 100%; color: #51b2bd; } body { font-family: Palatino Linotype; background-color: #1febad; } a:visited { text-decoration: none; color: #6A0F1B; } a:hover { text-decoration: underline; color: #2323D9; } a:active { text-decoration: none; color: #2323D9; } a[class="link"] { text-align: left; color: yellow; } #encabezado { background-color: blue; font-size: 125%; background-color: #4eb6a7; text-align: center; //border: 1px solid red; width: 100%; height: 25%; } h1 { text-decoration: underline; text-align: center; font-size: 190%; color: black; } .foto0 { padding: 1%; margin: 10px; float: left; width: 35%; } .foto01 { top:0px; right:0px; padding: 1%; margin: 10px; float: right; width: 150px; } #menu { float: left; background-color: #4eb6a7; font-size: 160%; color: white; text-align: left; width: 20%; height: 965%; } #contenido { float: center; font-size: 120%; color: #090963; text-align: left; width: 95%; height: auto; } table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 70%; margin-left:auto; margin-right:auto; width: 30%; text-align: center; border-collapse: collapse; } th { font-size: 150%; font-weight: normal; padding: 3%; background: #f9ff46; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #93948d; } td { padding: 10px; background: #6ee1da; border-bottom: 1px solid #fff; color: #394e4f; border-top: 5px solid transparent; } table#cabecera{ border: 0px; width: 10%; height: auto; background-color: #000000; } .azul{ background-color:#4eb6a7; } table#final{ border: 0px; width: 80%; height: 99%; background-color: #4eb6a7; } .rojo{ padding: 5px; background: #6ee1da; border-bottom: 1px solid #fff; color: #394e4f; border-top: 5px solid transparent; } h2 { text-align: center; font-size: 200%; color: #F33910; } h3 { text-align: left; font-size: 135%; color: #525117; } h4 { text-align: center; font-size: 150%; color: #082657; } h5 { margin: 10px; text-align: left; font-size: 150%; color: #581845 ; } h6 { margin: 10px; text-align: center; font-size: 150%; color: #581845 ; } #video { margin-left: 45px; width: 75%; height: auto; text-align: center; } .foto1 { padding: 0%; margin: 4%; border: 3px solid black; float: center; width: 70%; } .foto2 { margin-left: 200px; border: 2px solid black; float: center; width: 45%; height: auto; } .foto3 { margin-left: 300px; border: 2px solid black; float: center; width: 30%; } .foto4 { margin-left: 300px; margin-top: 20px; border: 2px solid black; float: center; width: 30%; } .foto5 { margin: 50px; border: 2px solid black; float: left; width: 500px; } .foto6 { margin: 50px; border: 2px solid black; float: right; width: 450px; } .foto7 { margin-left: 50px; border: 2px solid black; float: center; width: 250px; height: auto; } .foto8 { margin-left: 200px; border: 2px solid black; float: center; width: 50%; height: auto; } .foto9 { margin-left: 400px; border: 2px solid black; float: center; width: 30%; height: auto; } .foto10 { margin-left: 400px; border: 2px solid black; float: center; width: 20%; height: auto; } form { margin: 0 auto; width: 25%; padding: 1em; border: 1px solid #CCC; border-radius: 1em; } div + div { margin-top: 1em; } label { display: inline-block; width: 90%; text-align: right; } input, textarea { font: 1em sans-serif; width: 75%; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } #boton { background-color:#4C316D; border-radius: 10%; box-shadow: none; border: 0; color: #fff; cursor: pointer; font-size: 100%; font-weight: 600; line-height: 1.612; display: inline-block; outline: 0; text-align: center; text-decoration: none; width: auto; white-space: nowrap; } #boton1 { background-color: #4C316D; border-radius: 10%; box-shadow: none; border: 0; color: #fff; cursor: pointer; font-size: 100%; font-weight: 600; line-height: 1.612; display: inline-block; outline: 0; padding:0 7 0 7; text-align: center; text-decoration: none; width: auto; white-space: nowrap; } #pie { background-color: blue; font-size: 150%; background-color: #295056; text-align: left; //border: 1px solid red; margin-top: 10%; width: 100%; height: 40%; }
<html> <head><title>GYMBODYFIT</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link rel="stylesheet" type="text/css" href="primera.css"> <link rel="icon" href="favicon.ico"> </head> <body> <div id="encabezado"> <table id="encabezado"> <tr> <<td class="azul"><img class="foto0" src="imagen0.gif" alt="foto 0"></td><td class="azul"><h1>GYMBODYFIT</h1></td><td class="azul"><img class="foto01" src="imagen01.jpg" alt="foto 01"></td> </tr> </table> </div> <div id="menu"> <ul> <li><a href="Inicio.html">Inicio </a></li> </ul> <ul> <li><a href="Como funciona tu cuerpo.html">Como funciona tu cuerpo</a></li> </ul> <ul> <li><a href="Alimentacion.html">Alimentacion</a></li> </ul> <ul> <li><a href="Ejercicio.html">Ejercicios</a></li> </ul> <ul> <li><a href="Experiencias propias y consejos.html">Experiencias propias y consejos</a></li> </ul> </div> <div id="contenido"> <h2>Inicio </h2> <p>En esta pagina web voy a dar consejos para la gente que empieza de nuevo o va un poco perdida me centrare en diferentes aspectos que lleva el ejercicio fisico como puede ser la alimentacion ,los ejercicios .... lo que explicare y pondre esta puesto de mi punto de vista y lo que e aprendido has ahora .</p> <p>Este es tu turno para transformarte en lo que quieres ser no lo abandones y sigue que nada en este mundo es imposible, si te duele y te cuesta te hace mas fuerte </p> <p><img class="foto1" src="imagen1.jpg" alt="foto 1"></p> </div> <div id="pie"> <table id="final"> <tr> <td class="rojo">Para mas informacion os dejo el link de unos youtubers muy buenos que te ayudara</td><td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCb1TOrjCWjxnAomfr6n_bpQ" target="blank">THE FITNESS BOY</a></td><td class="rojo"><a class="link" href="https://www.youtube.com/channel/UCm9MSDgaj9fg9q-zMqZ01Ow" target="blank">UlissesWorld</a></td><td class="rojo"><a class="link" href="https://www.youtube.com/user/OfficialJeffSeid" target="blank">Jeff Seid</a></td> </tr> <tr> <td class="rojo">Aqui os dejo mis redes sociales para que no te pierdas nada </td><td class="rojo"><a href="https://es-es.facebook.com/"><img class="foto10" src="imagen10.png" alt="foto 10" /></a></td><td class="rojo"><a href="https://www.instagram.com/"><img class="foto10" src="imagen101.jpg" alt="foto 10" /></a></td><td class="rojo"><a href="https://twitter.com/"><img class="foto10" src="imagen102.png" alt="foto 10" /></a></td> </tr> </table> </div> </body> </html>