domingo, 11 de marzo de 2018

04 Web. Pagina de contacto con Mapa de direccion

Vemos como realizar nuestra pagina web de contacto insertando un mapa de Google marcando la direccion que necesitamos.



HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-secale=1.0">
<meta name="author" content="Jose Ojeda (ticoticotaa)">
<meta name="keywords" content="html,web,contacto">
<meta name="description" content="contacto web">
<link href="css/estiloContacto.css" rel="stylesheet" type="text/css">
<title>Contacto</title>
</head>
<body>
<section>
<article>
<header>
<h1>Contacta con nosotros</h1>
<address>C/ Calle, nยบ 25</address>
<a href="mailto:kjkdjkf@djkd.com">Enviar email</a>
</header>
<div id="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.161976248746!2d-5.995048934340552!3d37.3860015298321!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x9d4fd647e46b7247!2sLa+Giralda!5e0!3m2!1ses!2ses!4v1520802459105" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</article>
</section>
</body>
</html>

CSS

*{
    max-width:960px;
    margin:0 auto;
}
h1{
    font-size:3em;
    text-align:center;
    padding:10px;
}
a{
    color:blue;
    padding:4px;
    background-color:white;
    text-decoration:none;
    border-radius:15px;
    border: 5px solid #bbb;
    text-align:center;
    margin:20px;
}
address{
    text-align:center;
    padding:10px;
}
header{
    text-align:center;
    padding:10px;
    margin:15px;
}
#mapa{
margin:0 auto;
}

No hay comentarios:

Publicar un comentario