Farez - Wilmer - Actividad Interactiva 2

Nombre: Wilmer Farez
Curso: Pac Mayo-Septiembre 2021

Fecha: 17/07/2021
Asignatura: Desarrollo de aplicaciones web
ACTIVIDAD INTERACTIVA 2
PRACTICA HTML
Inicio
Código
<html>
<head>
<title>ACTIVIDAD_2</title>
<link rel="stylesheet" href="style.css">
<meta charset="utf-8">
</head>
<body>
<section class="form-Login ">
<h5>Formulario Login</h5>
<input class="controls" type="text" name="usuario" value=""
placeholder="Usuario">
<input class="controls" type="password" name="contraseña" value=""
placeholder="Contraseña">
<center>
<a href="file:///C:/Users/WILMER/Desktop/DEBER_WEB/PAG_1_html">
<img src="acceso.png" width="30%" height="20%"> </a>
</center>
</section>
</body>
</html>
STYLE
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: arial;
background-image: url('IMAGEN1.jpg');
<a href="pag_2.html"> Ingresar </a>
.form-Login{ width: 400px; height: 340px;

background: #4e4d4d; margin:auto;
margin-top: 180px;
box-shadow: 7px 13px 37px #000; padding: 20px 30px;
border-top: 4px solid #017bab; color: white;
}
.form-Login h5{
margin: 0;
text-align: center; height: 40px;
margin-bottom: 30px; border-bottom: 1px solid; font-size: 20px;
}
.controls{ width: 100%;

border: 1px solid #017bab; margin-bottom: 15px; padding: 11px 10px; background: #56B8DF;
font-size: 14px;
font-weight: bold;
Página 2
Código
<html lang="es">
<head>
<meta name="viewport" content="with=device=with, user-scalable=no, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0">
<title>GALERIA</title>
<center> <h1> BIENVENIDO A GALERIA </h1> </center>
<center> <h2> CLIC AQUÍ PARA REGISTRARTE </h2> </center>

<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">
<img src="IMAGENES/IMG1.jpg" alt="" class="item-img">
<div class="item-text">
<h3> CASCADAS</h3>
</div>
</div>
</div>
<div class="item">
<img src="paisajes.jpg" alt="" class="item-img">
<h3> RIOS </h3>
</div>
</div>
</div>
<div class="item">
<h3> PAISAJES </h3>
</div>
</div>
</div>
<div class="item">
<h3> ECUADOR </h3>
</div>
</div>
</div>
<div class="item">
<h3> RIOS </h3>
</div>
</div>
</div>
<center>
<a href="file:///C:/Users/WILMER/Desktop/PAG_3/pag_2.html"> <img src="REGISTRO.png"
width="10%" height="20%"> </a>
</center>
</body>
</html> STYLE
}
body{
background-color: #E8D321;
font-family: 'Open Sans', sans-serif;

}
.container{ width: 90%;
margin-left: auto; margin-right: auto; margin-top: 3em; display: grid;
grid-template-columns: repeat(1, 1fr)
.item-img{
max-width: 100%; display: block;
}
@media screen and (min-width:590px){
.container{
grid-template-columns: repeat(2, 2fr);
}
}
Registro
CODIGO
<html>
<head>
<title>ACTIVIDAD_2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="form-Login ">
<h5>Registro nuevo usuario</h5>
<input class="controls" type="text" name="nombre" value="" placeholder="Nombre">
<input class="controls" type="password" name="contraseña" value=""
placeholder="Contraseña">
<input class="controls" type="password" name="repetir contraseña" value=""
placeholder="Repetir Contraseña">
<center>
<a href="file:///C:/Users/WILMER/Desktop/PAG_4/buscar.html"> <img src="rojo.png"
width="20%" height="10%"> </a>
</center>
</section>
</body>
STYLE
{
margin: 0;
padding: 0;
}
body{
font-family: arial;
background-image: url('caratula.jpg');
}
.form-Login{
width: 400px;
height: 340px;
background: #E4E446;
margin:auto;
margin-top: 180px;
box-shadow: 7px 13px 37px #000;
padding: 20px 30px;
border-top: 4px solid #58F24E;
color: white;
}
.form-Login h5{
margin: 0;
text-align: center;
height: 40px;
margin-bottom: 30px;
border-bottom: 1px solid;
font-size: 20px;
}
.controls{
width: 100%;
border: 1px solid #017bab;
margin-bottom: 15px;
padding: 11px 10px;
background: #A8DB21;
font-size: 14px;
font-weight: bold;
}
Menú
Código
<html>
<head>
<title>Menu de imagenes</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#header{
margin: auto;
width: 600px;
font-family: Arial, Helvetica, sans-serif;
}
ul, ol{
list-style: none;
}
.nav li a {
background-color: red;
color: #fff;
text-decoration:none;
padding: 10px 15px;
display: block;
}
.nav li a:hover {
background-color: orange;
}
.nav > li {
float: left;
}
.nav li ul{
display:;
position: absolute;
min-width: 70px;
}
.nav li hover > ul {
display: block;
}
</style>
</head>
<body background="fondo3.jpg">
<div id="header">
<ul class="nav">
<li><a href="">REGIONES</a>
<ul>
<li><a href="">COSTA</a></li>
<li><a href="file:///C:/Users/JEFF/Documents/progrmas/QUITO.HTML"> QUITO</a></li>
<li><a href="">SIERRA</a></li>
</ul>
</li>
<div id="header">
<ul class="nav">
<li><a href="">ORIENTE</a>
<ul>
<li><a href="">CASCADAS</a></li>
</ul>
</li>
</ul>
</div>
<div id="header">
<ul class="nav">
<li><a href="">VOLCANES</a>
<ul>
<li><a href="">Cotopaxi</a></li>
</ul>
</li>
</ul>
</div>
<div id="header">
<ul class="nav">
<li><a href="">GASTRONOMIA</a>
<ul>
<li><a href="">COTOPAXI</a></li>
</ul>
</li>
</ul>
</div>
<div id="header">
<ul class="nav">
<li><a href="">RIOS</a>
<ul>
<li><a href="">RIO NAPO</a></li>
</ul>
</li>
</ul>
</div>
</body>
Pagina Sierra
Código
<html lang="es">
<head>
<meta name="viewport" content="with=device=with, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>SIERRA</title>
<center> <h1> REGION SIERRA </h1> </center>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<body style="background-color: orange">
</body>
<div class="item">
<img src="SIERRA1.jpg" alt="" class="item-img">
</div>
</div>
</div>
<div class="item">
<img src="SIERRA1" alt="" class="item-img">
</div>
</div>
</div>
<div class="item">
<img src="SIERRA1.jpg" alt="" class="item-img">
</div>
</div>
</div>
</body>
</html>
<style media="screen">
}
body{
background-color:blue;
font-family: 'Open Sans', sans-serif;
}
.container{
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
display: grid;
grid-template-columns: repeat(1, 1fr)
}
.item-img{
max-width: 100%;
display: block;
}
@media screen and (min-width:590px){
.container{
grid-template-columns: repeat(2, 2fr);
}
}
</style>

Farez - Wilmer - Actividad Interactiva 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Farez - Wilmer - Actividad Interactiva 2

Cargado por

Copyright:

Formatos disponibles

Nombre: Wilmer Farez

Curso: Pac Mayo-Septiembre 2021

.form-Login{ width: 400px; height: 340px;

.controls{ width: 100%;

<center> <h1> BIENVENIDO A GALERIA </h1> </center>

<center> <h2> CLIC AQUÍ PARA REGISTRARTE </h2> </center>

font-family: 'Open Sans', sans-serif;

También podría gustarte