PROGRAMACION WEB
HTML:
<!DOCTYPE html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet"
href="estilos.css">
</head>
<body>
<table>
<!-- Fila de la cabecera -->
<tr>
<th>Título columna 1</th> <!-- Celda cabecera de la
columna 1 -->
<th>Título columna 2</th> <!-- Celda cabecera de la
columna 2 -->
<th>Título columna 3</th> <!-- Celda cabecera de la
columna 3 -->
</tr>
<!-- Primera fila -->
<tr>
<td>Celda 1x1</td> <!-- Primera celda de la primera fila
-->
<td>Celda 2x1</td> <!-- Segunda celda de la primera fila
-->
<td>Celda 3x1</td> <!-- Tercera celda de la primera fila
-->
</tr>
<!-- Segunda fila -->
<tr>
<td>Celda 1x2</td> <!-- Primera celda de la segunda fila
-->
<td>Celda 2x2</td> <!-- Segunda celda de la segunda fila
-->
<td>Celda 3x2</td> <!-- Tercera celda de la segunda fila
-->
</tr>
</table>
<div class="container">
<div class="wrapper">
<div
class="card_area">
<div
class="card">
<img
src="imagenes/seiya2.jpeg">
<div
class="overlay">
<h3>IMAGEN1</h3>
<P>SEIYA
ES UN CABALLERO DE BRONCE QUE AMA LA LIBERTAD Y LA JUSTICIA</P>
<a href="#">Book Now</a>
</div>
</div>
<div class="card">
<img
src="imagenes/seiya3.jpg">
<div class="overlay">
<h3>IMAGEN2</h3>
<P>SEIYA
ES UN CABALLERO DE BRONCE QUE AMA LA LIBERTAD Y LA JUSTICIA</P>
<a href="#"">Book
Now</a>
</div>
</div>
<div class="card">
<img
src="imagenes/seiya5.png">
<div class="overlay">
<h3>IMAGEN3</h3>
<P>SEIYA
ES UN CABALLERO DE BRONCE QUE AMA LA LIBERTAD Y LA JUSTICIA</P>
<a href="#">Book Now</a>
</div>
</div>
</div>
</div>
</div>
<form>
<label for="fname">First
name:</label><br>
<input type="text"
id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text"
id="lname" name="lname">
</form>
<div
class="mapouter"><div
class="gmap_canvas"><iframe width="820"
height="560" id="gmap_canvas"
src="https://maps.google.com/maps?q=636+5th+Ave%2C+New+York&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"></iframe><a
href="https://online-timer.me/">online
timer</a><br><a
href="https://www.alltopplaces.com"></a><br><style>.mapouter{position:
relative;text-align: right;height: 560px;width: 820px;}</style><a
href="https://www.embedmaps.co">create map in google</a><style>.gmap_canvas{overflow:
hidden;background: none !important;height: 560px;width:
820px;}</style></div></div>
<div
class="formulario">
<h2>¿Eres mayor de edad?</h2>
<form id="formEdad">
<label>Nombre:</label>
<input type="text" id="nombre"
placeholder="Ingresa tu nombre" required>
<label>Edad:</label>
<input type="number" id="edad" min="0"
max="120" placeholder="Ingresa tu edad" required>
<button
type="submit">Verificar</button>
</form>
<div
id="resultado"></div>
<script
src="script.js"></script>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
/*tipos de fondo para paginas web*/
/*body{
background: rgb(36, 6, 167);
color:white;}
*/
body{
height: 100vh;
background: linear-gradient(45deg,rgb(170,
48, 48),rgb(72, 169, 218),rgb(95, 219, 57),rgb(245, 40, 201));
background-size:400% 400%;
animation: gradient 12s ease-in-out;
}
@keyframes
gradient{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
table{
position: relative;
left: 40%;
border-collapse: collapse;
border: 2px solid #000000;
}
td,th {
border: 1px solid #000;
padding: 10px;
}
th {
background: #000;
color: #fff;
text-transform: uppercase;
}
td {
text-align: center;
border-bottom: 2px solid #111;
color: #f7f4f4;
font-size: 18px;
}
.container{
padding: 50px 0;
}
.wrapper{
padding: 10px 10%;
}
.card_area{
/*display: grid;
margin-top: 50px;
grid-column: 30px;
grid-template-columns:
repeat(autofit,minmax(300px,1fr));*/
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 3 columnas iguales */
gap: 30px; /* Espacio entre
imágenes */
margin-top: 20px;
}
.card{
position: relative;
border-radius: 10px;
box-shadow: 5px 5px 15px rgb(218, 128, 229);
overflow: hidden;
}
.card img{
height: 300px;
width: 100%;
display: block;
border-radius: 10px;
transition: transform 0.5s;
/*
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 8px;*/
}
.overlay{
height: 0;
width: 100%;
position: absolute;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
left:0;
bottom:0;
border-radius: 10px;
background:
linear-gradient(transparent,#8b3297 90%);
padding: 0 50px;
text-align: center;
font-size: 14px;
transition: height 0.5s;
}
.overlay h3{
margin-top: 45%;
font-size: 30 px;
font-weight: 500;
letter-spacing: 2px;
}
.overlay a{
margin-top: 10px;
position: relative;
margin-bottom: 5px;
font-size: 14px;
text-decoration: none;
font-weight: 500;
color: blue;
background: white;
border-radius: 50px;
text-align: center;
padding: 5px 15px;
}
.card:hover
img{
transform: scale(1.2);
}
.card:hover
.overlay{
height: 100%;
}
.mapouter{
position: relative;
left:25%
}
JAVASCRIPT:
document.getElementById('formEdad').addEventListener('submit',
function(e) {
e.preventDefault();
const nombre = document.getElementById('nombre').value.trim();
const edad = parseInt(document.getElementById('edad').value);
const resultado = document.getElementById('resultado');
if (!nombre || edad <= 0 || edad > 120) {
resultado.textContent = 'Por
favor, ingresa datos válidos.';
resultado.className = '';
return;
}
const esMayor = edad >= 18;
resultado.textContent
= `${nombre}, ${esMayor ? '¡Eres MAYOR de edad!' : 'Eres MENOR de edad.'}`;
resultado.className = esMayor ? 'mayor' : 'menor';
});
No hay comentarios.:
Publicar un comentario