AP6-AA3-Ev2-Construcción de La Interfaz Web para El Proyecto de Formación

AP6-AA1-Ev2-Construir la base de datos para su proyecto de formación
Luis Alexander Rodríguez Gámez

Juan Camilo Guarin
Jesus Leonardo Rueda
Servicio Nacional de Aprendizaje Sena

Centro de Servicio Financieros
Análisis y Desarrollo de Sistemas de Información
Ficha 1565035
Bogotá Colombia
2019
*Camilo Andrés Gutiérrez
La agencia de VIAJES TOUR S.A por el oriente de Antioquia ofrece al
público una gran variedad de productos, que podrán disfrutar a su gusto, en
nuestra página encontraras más información acerca de lo que ofrece TOUR
por el oriente de Antioquia, ingresa y disfruta de un experiencia inolvidable.
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximun-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../HTML 5/tour.css">
<title>TOUR ORIENTE</title>
</head>
<body>
<div class="contenedor">
<div class="caja_padre">
<header>
<div class="logo">
<img
src="imagenes/Logo_Tour_Delius_Klasing_Verlag.svg.png" width="250" alt="">
</div>
<div class="titulo_uno">
<h1>TOUR ORIENTE ANTIOQUEÑO</h1>
</div>
</header>
</div>
<nav class="nav">
<ul class="menu">
<li><a href="#">INICIO</a></li>
<li><a href="#">SERVICIOS</a>
<ul class="submenu">
<li><a href="../HTML
5/guatape.html">Guatapé</a></li>
<li><a href="../HTML 5/San Rafael.html">San
Rafael</a></li>
<li><a href="../HTML 5/San Carlos.html">San
Carlos</a></li>
</ul>
</li>
<li><a href="../HTML 5/nosotros.html">NOSOTROS</a></li>

</ul>
</nav>
<main>
<div class="bus">
<img src="imagenes/bus.png" width="550" alt="">
</div>
<article>
<h2>Bienvenido a la region de antioquia, un lugar
que enamora</h2>
<section>
<p>
Dejate sorprender de una experiencia nunca
antes vista, nosotros te llevaremos a esos lugares soñados,
podras recorrer lugares iconicos de
antioquia, viviras momentos inolvidables, ven y disfruta de la region de
antioquia.
</p>
</section>
</article>
</main>
<div class="lugares">
<div class="guatape">
<h3>TOUR GUATAPE</h3>
<a title="GUATAPE" href="guatape.html"><img
src="imagenes/los-recuerdos-guatape-temporada-baja.jpg" width="333"
height="345" alt="" /></a>
</div>
<div class="san_rafael">
<h3>TOUR SAN RAFAEL</h3>
<a title="SAN RAFAEL" href="San Rafael.html"><img
src="imagenes/765293679_7fe3356c67_z.jpg" width="333" height="345" alt=""
/></a>
</div>
<div class="san_carlos">
<h3>TOUR SAN CARLOS</h3>
<a title="SAN CARLOS" href="San Carlos.html"><img
src="imagenes/Parque-de-Caucasia.jpg" width="333" height="345" alt=""
/></a>
</div>
</div>
<div id="copyright">
<p>
CONTACTENOS
</p>
<p>
Oficina: calle 15 # 42-22
GUATAPE ANTIOQUIA
</p>
<p>
Liena Telefónica:315500125-3809146
</p>
<p>
Correo:tour-oriente@hotmail.com
</p>
</div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.contenedor {
width: 80%;
max-width:1000px;
margin: 0px auto;
overflow: hidden;
}
body{
background: #1CA5C7 ;
}
.caja_padre{
width: 100%;
height: 142px;
background: rgb(58, 69, 71);
color:#fff;
top:0;
left:0;
.titulo_uno {
font-family: Arial, Helvetica, sans-serif;
position: relative;
width: 20%;
text-align: center;
bottom:174px;
left:430px;
}
.logo{
position: relative;
bottom:30px;
width: 80%;
left:100px;
}
.nav{
background: #495153 ;
overflow: hidden;
width: 100%;
.nav .menu{
list-style:none;
.nav .menu>li{
float: left;
}
.nav .menu>li a{
padding:5px 130px;
display:block;
color:#fff;
text-decoration:none;
}
nav ul li a:hover{
background: #9FA6A7 ;
cursor: pointer;
}
.nav .menu>li>.submenu{
position:absolute;
background: #495153;
color:rgb(36, 32, 32);
list-style:none;
display: none;
}
.nav .menu>li:hover>.submenu{
display: block;
}
.nav .menu>li>.submenu>li{
padding: 2px;
}
.nav .menu>li>.submenu>li>a{
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
main
{
overflow: hidden;
}
main .bus{
float: left;
}
main article{
position: relative;
top: 120px;
overflow: hidden;
}
main article section p{

overflow: hidden;
}
.guatape {
float:left;
}
.san_rafael{
float:left;
}
.san_carlos{
float:left;
}
.lugares{
overflow: hidden;
}
.guatape h3{
color:#fff ;
display: block;
position:relative;
bottom: -310px;
text-align: center;
}
.san_rafael h3{
color:#fff ;
display: block;
position:relative;
bottom: -310px;
text-align: center;
}
.san_carlos h3{
color:#fff ;
display: block;
position:relative;
bottom: -310px;
text-align: center;
}
.guatape a img{
border-radius:50%;
}
.san_carlos a img{
border-radius:50%;
}
.san_rafael a img{
border-radius:50%;
}
#copyright p {
position: relative;
text-align: center;
}
HTML5
<!DOCTYPE html>
<html lang="en">
<head>
maximun-scale=1">
<link rel="stylesheet" href="san carlos.css">
<title>Guatpé</title>
</head>
<body>
<header>
<div class="logo">
<img
</div>
</div>
</header>
</div>
<nav class="nav">
<ul class="menu">
<li><a href="../tour.html">INICIO</a></li>
<li><a href="guatape.html">Guatapé</a></li>
<li><a href="San Rafael.html">San Rafael</a></li>
<li><a href="San Carlos.html">San Carlos</a></li>
</ul>
</li>
<li><a href="nosotros.html">NOSOTROS</a></li>
</ul>
</nav>
<main>
<div class="panoramica">
<img
src="imagenes/3494661031_6de3abb2e8_b.jpg"width="1000" height="300"
alt="">
</div>
<div class="article">
<article>
<h2>Tour Guatapé</h2>
<br>
<section>
<p>El municipio de Guatapé se localiza a 79 km. de la
ciudad de Medellín en el oriente Antioqueño, destino turístico con sus
atractivos: Peñón de Guatapé, mole de piedra con 220 m. De altura que para
ascenderla se requiere superar más de 700 escalas; Embalse Peñol Guatapé,
con 2.262 hectáreas de tierra inundadas para dar paso a una de las
hidroeléctricas más importantes del país; Grabados en los Zócalos de las
fachadas de las residencias y demás edificaciones representando
tradiciones y colorido. Viva esta experiencia con TOUR ORIENTE.</p>
</section>
<br>
<div class="contenido">
<div class="incluye">
<h2>INCLUYE</h2>
<br>
<section>
<p>Seguro, transporte ida y regreso, guia
acompañante, desayuno,almuerzo.</p>
<br>
<h3>Nota</h3>
<p>-No incluye otros gastos especificados en el
programa.</p>
<p>-Programación de las salidas sujetas a cambio.</p>
</section>
</div>
<br>
<div class="recorrido">
<h2>RECORRIDO</h2>
<br>
<section>
<p>Principales actractivos del municipio de guatapé,
ingreso a la piedra del peñol, recorrido por las calles de guatapé, visita
a la replica del peñol, recorrido por el embalse de guatapé.</p>
</section>
</div>
<br>
<div class="tarifas">
<h2>TARIFAS</h2>
<br>
<section>
<p>$110.00 COP - USD 39.</p>
<p>Precio por persona.</p>
</section>
</div>
<br>
<div class="abordaje">
<h2>SITIOS DE ABORDAJE</h2>
<br>
<section>
<p>Salidad: 7:00 a.m. / Regreso:7:00 p.m.</p>
<p>Por favor estar 15 minutos antes de la hora de
salida.</p>
</section>
</div>
</div>
</article>
</div>
<form>
<h1>ADQUIERE TU PAQUETE</h1>
<input type="text" max-length="20"
placeholder="Nombre">
placeholder="Apellido">
placeholder="Correo">
placeholder="Telefono">
placeholder="Dirección">
<button type="submit">Comprar Paquete</button>
<button type="reset">Cancelar</button>
</form>
</main>
<div class="imagenes">
<div class="imagen_uno">
<img src="imagenes/900x600.jpg"width="250" height="156"
alt="">
</div>
<div class="imagen_dos">
<img
src="imagenes/o_1533701403_9a25d07f995096847ef5bb4947d8fe05.jpg"width="250
" height="156" alt="">
</div>
<div class="imagen_cuatro">
<img src="imagenes/Guatape-02948.jpg"width="250"
height="156" alt="">
</div>
<div class="imagen_cinco">
<img
src="imagenes/guatape_mototaxi_antioquia_colombia_travel.jpg"width="250"
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
.contenedor {
width: 80%;
max-width:1000px;
margin: 0px auto;
overflow: hidden;
}
body{
}
.caja_padre{
width: 100%;
height: 142px;
color:#fff;
top:0;
left:0;
.titulo_uno {
position: relative;
width: 20%;
text-align: center;
bottom:174px;
left:430px;
}
.logo{
position: relative;
bottom:30px;
width: 80%;
left:100px;
}
.nav{
overflow: hidden;
width: 100%;
.nav .menu{
list-style:none;
.nav .menu>li{
float: left;
}
.nav .menu>li a{
padding:5px 130px;
display:block;
color:#fff;
}
nav ul li a:hover{
cursor: pointer;
}
position:absolute;
color:rgb(36, 32, 32);
list-style:none;
display: none;
}
display: block;
}
padding: 2px;
}
font-size: 18px;
font-weight: bold;
}
main{
overflow: hidden;
}
.article{
float: left;
width:70%;
overflow: hidden;
form{
float: right;
background: #9FA6A7;
width: 30%;
border: 1px solid rgb(17, 16, 16);
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow:inset 0 0 10px #000;
}
form h1{
text-align:center;
color:#fff;
font-weight:normal;
font-size:40p;
margin:10px 0px;
}
form input{
width:280px;
height:35px;
padding: 0px 10px;
margin: 2px 5px 2px 10px;
text-align: center;
color: #0e0d0ded;
border-radius: 15px;
}
form button{
width: 100px;
margin:20px;
height:50px;
border:1px solid #232323;
color: #fff;
box-shadow:0px 2px 0px #000;
-moz-box-shadow:0px 2px 0px #000;
-webkit-box-shadow:0px 2px 0px #000;
border-radius: 3px;
}
form button:hover{
background:#3a3a3a;
}
form button:active{
}
form button[type=reset]{
position: relative;
top: 7.5px;
left:8px;
}
form button[type=submit]{
position: relative;
left:10px;
}
.article h2{
text-align: center;
}
.contenido{
overflow: hidden;
}
.incluye{
float: left;
width: 48%;
}
.tarifas{
width: 48%;
float:right;
margin: 3px 0px;
.recorrido{
float: right;
top: ;
bottom:190px ;
left:360px;
right: ;
width: 48%;
.abordaje{
width: 48%;
float: left;
margin: 3px 0px;
}
.imagenes img {
float: left;
HTML5<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximun-scale=1">
<link rel="stylesheet" href="san rafael.css">
<title>San Rafael</title>
</head>
<body>
<header>
<div class="logo">
<img
</div>
</div>
</header>
</div>
<nav class="nav">
<ul class="menu">
<ul class="submenu"
<li><a href="San Rafael.html">San
Rafael</a></li>
<li><a href="San Carlos.html">San
Carlos</a></li>
</ul>
</li>
</ul>
</nav>
<main>
<img
src="imagenes/5305489236_f456d0a2b0_b.jpg"width="1000" height="300"
alt="">
</div>
<article>
<h2>Tour San Rafael</h2>
<br>
<section>
<p>El municipio de San Rafael en el oriente
Antioqueño, destino turístico con sus atractivos: Conoce su cabecera
municipal, donde su parque conserva una historia bella, visita los bellos
rios, donde podras bañarte, acampar, y disfrutar de sus bellos paisajes,
visita los entables paneleros, y el embalse de playas. Viva esta
experiencia con TOUR ORIENTE.</p>
</section>
<br>
<h2>INCLUYE</h2>
<br>
<section>
<br>
<h3>Nota</h3>
programa.</p>
<p>-Programación de las salidas sujetas a
cambio.</p>
</section>
</div>
<br>
<h2>RECORRIDO</h2>
<br>
<section>
<p>Principales actractivos del municipio de San
Rafael, recorrido por un sendero ecologico hacia los bellos rios de este
municipio, visita al parque de San Rafael y su bella historia, visita a un
entable panelero donde se fabrica la panela, recorrido por el embalse de
playas.</p>
</section>
</div>
<br>
<h2>TARIFAS</h2>
<br>
<section>
<p>$130.00 COP - USD 45.</p>
</section>
</div>
<br>
<br>
<section>
salida.</p>
</section>
</div>
</div>
</article>
</div>
<form>
</form>
</main>
<img src="imagenes/FACHADA-QUE-CONOCER-IGLESIA-DE-
SAN-RAFAEL-ACANGEL-ANTIOQUIA--700x467.jpg"width="250" height="156" alt="">
</div>
<img
src="imagenes/42711063_152768162329937_1980689061211275264_n.jpg"width="25
0" height="156" alt="">
</div>
<img
src="imagenes/765293679_7fe3356c67_z.jpg"width="250" height="156" alt="">
</div>
<img
" height="156" alt="">
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
.contenedor {
width: 80%;
max-width:1000px;
margin: 0px auto;
overflow: hidden;
}
body{
}
.caja_padre{
width: 100%;
height: 142px;
color:#fff;
top:0;
left:0;
.titulo_uno {
position: relative;
width: 20%;
text-align: center;
bottom:174px;
left:430px;
}
.logo{
position: relative;
bottom:30px;
width: 80%;
left:100px;
}
.nav{
overflow: hidden;
width: 100%;
.nav .menu{
list-style:none;
.nav .menu>li{
float: left;
.nav .menu>li a{
padding:5px 130px;
display:block;
color:#fff;
}
nav ul li a:hover{
cursor: pointer;
}
position:absolute;
color:rgb(36, 32, 32);
list-style:none;
display: none;
}
display: block;
}
padding: 2px;
}
font-size: 18px;
font-weight: bold;
}
main{
overflow: hidden;
}
.article{
float: left;
width:70%;
overflow: hidden;
form{
float: right;
width: 30%;
border-radius: 3px;
}
form h1{
text-align:center;
color:#fff;
font-weight:normal;
font-size:40p;
margin:10px 0px;
}
form input{
width:280px;
height:35px;
padding: 0px 10px;
text-align: center;
color: #0e0d0ded;
}
form button{
width: 100px;
margin:20px;
height:50px;
color: #fff;
border-radius: 3px;
}
form button:hover{
background:#3a3a3a;
}
form button:active{
}
position: relative;
top: 7.5px;
left:8px;
}
position: relative;
left:10px;
}
.article h2{
text-align: center;
}
.contenido{
overflow: hidden;
}
.incluye{
float: left;
width: 48%;
}
.tarifas{
width: 48%;
float:right;
margin: 3px 0px;
.recorrido{
float: right;
top: ;
bottom:190px ;
left:360px;
right: ;
width: 48%;
.abordaje{
width: 48%;
float: left;
margin: 3px 0px;
.imagenes img {
float: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximun-scale=1">
<link rel="stylesheet" href="guatape.css">
<title>San Carlos</title>
</head>
<body>
<header>
<div class="logo">
<img
</div>
</div>
</header>
</div>
<nav class="nav">
<ul class="menu">
<li><a href="San Rafael.html">San
Rafael</a></li>
<li><a href="San Carlos.html">San
Carlos</a></li>
</ul>
</li>
</ul>
</nav>
<main>
<img src="imagenes/Peñol-y-Guatapé-2.jpg"width="1000"
</div>
<article>
<h2>Tour San Carlos</h2>
<br>
<section>
<p>Si lo que estás buscando es un destino de
tierra caliente con muchos ríos para bañarse, senderos ecológicos donde
hacer caminatas y una topografía quebrada para practicar deportes
extremos, ese es San Carlos, Antioquia.. Viva esta experiencia con TOUR
ORIENTE.</p>
</section>
<br>
<h2>INCLUYE</h2>
<br>
<section>
<br>
<h3>Nota</h3>
programa.</p>
<p>-Programación de las salidas sujetas a
cambio.</p>
</section>
</div>
<br>
<h2>RECORRIDO</h2>
<br>
<section>
<p>Principales actractivos del municipio de San
Carlos, recorrido por un sendero ecologico hacia los bellos rios de este
municipio y espectacular cascada, visita al parque de San Carlos y sus
calles y su bella historia de superacion, recorrido en moto-carro por
sitios emblematicos del municipio.</p>
</section>
</div>
<br>
<h2>TARIFAS</h2>
<br>
<section>
<p>$150.00 COP - USD 65.</p>
</section>
</div>
<br>
<br>
<section>
salida.</p>
</section>
</div>
</div>
</article>
</div>
<form>
</form>
</main>
<img
0" height="156" alt="">
</div>
<img
0" height="156" alt="">
</div>
<img
0" height="156" alt="">
</div>
<img
0" height="156" alt="">
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
.contenedor {
width: 80%;
max-width:1000px;
margin: 0px auto;
overflow: hidden;
}
body{
}
.caja_padre{
width: 100%;
height: 142px;
color:#fff;
top:0;
left:0;
.titulo_uno {
position: relative;
width: 20%;
text-align: center;
bottom:174px;
left:430px;
}
.logo{
position: relative;
bottom:30px;
width: 80%;
left:100px;
}
.nav{
overflow: hidden;
width: 100%;
.nav .menu{
list-style:none;
.nav .menu>li{
float: left;
.nav .menu>li a{
padding:5px 130px;
display:block;
color:#fff;
}
nav ul li a:hover{
cursor: pointer;
}
position:absolute;
color:rgb(36, 32, 32);
list-style:none;
display: none;
}
display: block;
}
padding: 2px;
}
font-size: 18px;
font-weight: bold;
}
main{
overflow: hidden;
}
.article{
float: left;
width:70%;
overflow: hidden;
form{
float: right;
width: 30%;
border-radius: 3px;
}
form h1{
text-align:center;
color:#fff;
font-weight:normal;
font-size:40p;
margin:10px 0px;
}
form input{
width:280px;
height:35px;
padding: 0px 10px;
text-align: center;
color: #0e0d0ded;
}
form button{
width: 100px;
margin:20px;
height:50px;
color: #fff;
border-radius: 3px;
}
form button:hover{
background:#3a3a3a;
}
form button:active{
}
position: relative;
top: 7.5px;
left:8px;
}
position: relative;
left:10px;
}
.article h2{
text-align: center;
}
.contenido{
overflow: hidden;
}
.incluye{
float: left;
width: 48%;
}
.tarifas{
width: 48%;
float:right;
margin: 3px 0px;
.recorrido{
float: right;
top: ;
bottom:190px ;
left:360px;
right: ;
width: 48%;
.abordaje{
width: 48%;
float: left;
margin: 3px 0px;
.imagenes img {
float: left;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
maximun-scale=1">
<link rel="stylesheet" href="nosotros.css">
<title>TOUR ORIENTE</title>
</head>
<body>
<header>
<div class="logo">
<img
</div>
</div>
</header>
</div>
<nav class="nav">
<ul class="menu">
<li><a href="San Rafael.html">San Rafael</a></li>
<li><a href="San Carlos.html">San Carlos</a></li>
</ul>
</li>
</ul>
</nav>
<h2>QUIENES SOMOS</h2>
<br>
<section>
<p>Somos un grupo de personas apacionas por el desarrollo
de nuestra region, enfocada en mostrar nuestros
bellos municipios, desarrollando y promocionando el
turimo, gracias a esto muchas personas que jamas
sabian del oriente de Antioquia, ahora tienen una
experiencia nueva que contar y que compartiran con
sus allegados.
</p>
<br>
<div class="mision">
<h2>Mision</h2>
<p>Somos una organización social integrada por
prestadores turísticos y personas que valoran el buen turismo, promovemos
en el oriente la articulación entre la sociedad y la Institucionalidad
para el desarrollo del municipio como destino de naturaleza, enmarcados en
principios de solidaridad, equidad y cualificación permanente.</p>
</div>
<br>
<div class="vision">
<h2>Vision</h2>
<p>Para el 2020 TOUR ORIENTE está posicionada como
ejemplo de organización, sostenibilidad y protección del entorno
ambiental. Los actores del turismo del oriente estamos cualificados,
articulados, y viabilizados económicamente. Producto de ello, el oriente
es un destino turístico de naturaleza altamente fortalecido y reconocido
en el ámbito regional, nacional e internacional.</p>
</div>
</section>
</div>
<div id="copyright">
<p>
CONTACTENOS
</p>
<p>
Oficina: calle 15 # 42-22
GUATAPE ANTIOQUIA
</p>
<p>
Liena Telefónica:315500125-3809146
</p>
<p>
Correo:tour-oriente@hotmail.com
</p>
</div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
.contenedor {
width: 80%;
max-width:1000px;
margin: 0px auto;
overflow: hidden;
}
body{
}
.caja_padre{
width: 100%;
height: 142px;
color:#fff;
top:0;
left:0;
.titulo_uno {
position: relative;
width: 20%;
text-align: center;
bottom:174px;
left:430px;
}
.logo{
position: relative;
bottom:30px;
width: 80%;
left:100px;
}
.nav{
overflow: hidden;
width: 100%;
.nav .menu{
list-style:none;
.nav .menu>li{
float: left;
.nav .menu>li a{
padding:5px 130px;
display:block;
color:#fff;
}
nav ul li a:hover{
cursor: pointer;
}
position:absolute;
color:rgb(36, 32, 32);
list-style:none;
display: none;
}
display: block;
}
padding: 2px;
}
font-size: 18px;
font-weight: bold;
}
.article h2{
text-align: center;
}
.article{
overflow: hidden;
}
.mision{
float: right;
width: 49%;
}
.vision{
float: left;
width: 50%;
}
#copyright p {
top: 20px;
position: relative;
text-align: center;
}

AP6-AA3-Ev2-Construcción de La Interfaz Web para El Proyecto de Formación

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

AP6-AA3-Ev2-Construcción de La Interfaz Web para El Proyecto de Formación

Загружено:

Авторское право:

Доступные форматы

AP6-AA1-Ev2-Construir la base de datos para su proyecto de formación

Luis Alexander Rodríguez Gámez

Servicio Nacional de Aprendizaje Sena

<li><a href="../HTML 5/nosotros.html">NOSOTROS</a></li>

main article section p{

Вам также может понравиться