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>