DOCTYPE htm1 completo.docx

HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Veterinaria</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<a href="banco.html">Pagina banco</a>
<main id="contenedor">
<header><img src="imagenes/veterinaria.png"></header>
<nav>
<ul class="navega"><h3><center>
<li>.Servicios.</li>
<li>.Productos.</li>
<li>.Guarderia.</li>
<li>.Promociones.</li></center></h3>
</ul>
</nav>
<section>
<article class="articulo"><h4><center>Cuidados y educacion para su
perro</center></h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum.</p><img class="imagen1" src="imagenes/perro.png"></article>

HTML
<article class="articulo"><h4><center>Salir de viaje con su
mascota</center></h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum.</p><img class="imagen1" src="imagenes/perro1.png"></article>
</section>
<aside><center>
<header><label>Solicitar cita medica</label></header>
<table>
<tr>
<td><label>Mascota:</label></td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td><label>Edad:</label></td>
<td><input type="age" name=""></td>
</tr>
<tr>
<td><label>Raza:</label></td>
</tr>
<tr>
<td><label>Fecha:</label></td>
<td><input type="date" name=""></td>
</tr>
<tr>

HTML
<td><label>Hora:</label></td>
<td><input type="time" name=""></td>
</tr>
<tr>
<td><label>Amo:</label></td>
</tr>
</table>
<button><h3>VALIDAR CITA</h3></button>
</center></aside>
<footer><h5><center>Contactenos <br>Linea gratuita 018000-0001 <br>Correo:
preguntas@caninosyfelinos.com</center></h5></footer>
</main>
</body>
</html>
CSS
*{
margin: 0px
}
h2{
margin: 5px;
}
#contenedor{

HTML
height: 600px;
margin: auto;
width: 800px;
margin-top: 10px;
}
header{
height: 120px;
width: 800px;
}
nav{
background-color: #1C4A48;
height: 50px;
width: 800px;
margin-bottom: 10px;
border-radius: 0px 0px 15px 15px;
}
section{
float: left;
height: 323px;
width: 480px;
margin-right: 15px;
}

HTML
.articulo{
height: 155px;
width: 480px;
background-color: #FBF5BA;
border-radius: 15px;
}
aside{
float: right;
height: 326px;
width: 290px;
}
footer{
background-color: #1C4A48;
color: #97A5A4;
clear: both;
height: 80px;
width: 800px;
}
footer h5{
padding-top: 15px;
}

HTML
header img{
height: 100%;
width: 800px;
}
aside header{
width: 100%;
height: 30px;
color: #FFFFFF;
padding-top: 5px;
background-color: #0B2826;
font-size: 22px;
}
aside{
background-color: #496E6D;
}
p{
text-align: justify;
height: 130px;
float: left;
margin-left: 10px;
display: inline;

HTML
width: 325px;
}
ul{
padding-top: 12px;
}
li{
list-style: none;
display: inline;
color: #FFFFFF;
padding-right: 90px;
}
.imagen1{
float: right;
margin-right: 20px;
}
td{
padding-top: 10px;
color: #FFFFFF;
font-size: 21px;
}

HTML
button{
padding-top: 5px;
margin-top: 15px;
}
BANCO
<!DOCTYPE html>
<html lang="es">
<head>
<title>Banco</title>
<link rel="stylesheet" type="text/css" href="estilos_banco.css">
</head>
<body>
<a href="index.html">Pagina veterinaria</a>
<main id="contenedor">
<header><img src="imagenes/banco.png"; id="encabezado"></header>
<nav>
<ul id="menu"><h2>
<li class="navega">.Creditos.</li>
<li class="navega">.Leasing.</li>
<li class="navega">.Ahorros.</li>
<li class="navega">.Servicio al cliente.</li></h2>
</ul>
</nav>

HTML
<aside>
<article class="aparte"><center><header class="titulo" style="border-radius:
15px 15px 0px 0px"><label>INGRESA A TU CUENTA</label></header>
<table>
<tr>
<td class="datos"><label>Cuenta:</label></td>
<td class="datos"><input type="text" name=""></td>
</tr>
<tr>
<td class="datos"><label>Tipo:</label></td>
</tr>
<tr>
<td class="datos"><label>Clave:</label></td>
</tr>
</table><button>Ingresar</button></center>
</article>
<article class="aparte1"><center>
<header class="titulo"; style="color:
#C39115">TRANSACCIONES</header>
<table>
<tr>
<td class="textos">Banca personal <hr></td>
<td class="textos">Banca empresarial <hr></td>
<td class="textos">Banca seguros <hr></td>
<td class="textos">Pago de facturas</td>
</tr>

HTML
</table>
<header class="titulo"; style="color: #C39115">TARJETAS DE
CREDITO</header>
<table>
<tr>
<td class="textos">Credi Visa <hr></td>
<td class="textos">Credi Mastercard</td>
</tr>
</table>
</center></article>
</aside>
<section><center>
<article class="seccion"><header class="titulo" style="border-radius: 15px 0px
0px 0px">Solicita nuestros productos</header><img src="imagenes/tarjeta.png"><p
class="letra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.</p></article>
<article class="seccion1"><header class="titulo" style="border-radius: 0px
15px 0px 0px">Ahorro estudiantil</header><img src="imagenes/libro.png"><p
class="letra">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco.</p></article>
<article class="seccion2"><header class="titulo">Credito
vehiculos</header><img src="imagenes/llaves.png"><p class="letra">Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></article>
<article class="seccion3"><header class="titulo">Credito
hipotecario</header><img src="imagenes/hogar.png"><p class="letra">Lorem ipsum dolor sit
amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p></article>
</center></section>
<footer><p id="contactos"><center><h4>Contactenos <br>Linea gratuita 018000-
00001 <br>Banco entidad finaciera-Todos los derechos
reservados.</h4></p></center></footer>

HTML
</main>
</body>
</html>
CSS *{
margin: 0px;
}
#contenedor{
margin: auto;
height: 780px;
width: 850px;
margin-top: 20px;
}
header{
height: 120px;
width: 850px;
}
nav{
background-color: #FFBD16;
height: 60px;
width: 850px;
}

HTML
#menu{
padding-top: 15px;
}
.navega{
display: inline;
padding-right: 77px;
}
aside{
height: 490px;
width: 283px;
float: left;
}
#menu{
list-style: none;
}
section{
height: 490px;
width: 545px;
margin-left: 15px;
float: right;

HTML
}
footer{
background-color: #232323;
color: #716F70;
height: 80px;
width: 850px;
clear: both;
}
#encabezado{
height: 100%;
width: 100%;
}
p{
padding-top: 12px;
}
#contactos{
margin-top: 15px
}
.seccion{

HTML
background-color: #E9E7E8;
float: left;
height: 235px;
width: 262px;
}
.seccion1{
float: right;
height: 235px;
width: 262px;
}
.seccion2{
float: left;
height: 236px;
width: 262px;
margin-top: 15px;
}
.seccion3{
float: right;

HTML
height: 236px;
width: 262px;
margin-top: 15px;
}
.aparte{
background-color: #B2B2B2;
height: 230px;
width: 100%;
}
.aparte1{
height: 241px;
width: 100%;
display: block;
}
.titulo{
color: white;
padding-top: 10px;
width: 100%;
height: 30px;

HTML
}
.lista{
color: #B1B1B1;
list-style: none;
margin-left: 16px;
}
.datos{
padding-top: 18px;
}
.textos{
display: block;
color: #B1B1B1;
margin-top: 3px;
}
button{
background-color: #FFBD16;
margin-top: 18px;
}
article img{
margin-top: 10px;
height: 110px;
width: 70px:;

HTML
}
.letra{
padding: 0px 10px 10px 10px;
font-size: 12px;
text-align: justify;
}
hr{
}
<!DOCTYPE html>
<html>
<head>
<title>pagina inicial</title>
<link rel="stylesheet"type="text/css" href="./css/estilos.css">
</head>
<body>
<main>
<header>
<img src="images/logoveterinario.jpg">
<div id="principal">
<div id="cabecera">
<nav>
<ul class="navega">
<center>
<li><a href="index.htm">Inicio</a></li>

HTML
<li><a href="servicios.htm">Servicios</a></li>
<li><a href="productos.htm">Productos</a></li>
<li><a href="guarderia.htm">Guardería</a></li>
<li><a href="promociones.htm">Promociones</a></li>
</center>
</ul>
</nav>
</header>
<section>
<article>
<h3>caninos</h3>
</article>
<article>
<h3>felinos</h3>
</article>
</section>
<aside></aside>
<footer></footer>
</main>
</body>
</html>
header {
border: 1px solid red;
height: 150px;
}

HTML
nav {
border: 1px solid blue;
height: 50px;
}
section {
height: 300px;
width: 50%;
float: left;
}
aside{
height: 300px;
width: 49%;
float: right;
}

DOCTYPE htm1 completo.docx

Recommended

Recommended

More Related Content

Featured

Featured (20)

DOCTYPE htm1 completo.docx