PUBLICAR UNA LANDING PAGE
Para publicar una landing page necesitamos una web para deployar es decir desplegar el proyecto como: netlify.com
ejemplo:
https://splendorous-jelly-cf005b.netlify.app/
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="estilos2.css">
</head>
<body>
<header>
<a href="#" class
="logo">imagina</a>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">nosotros</a></li>
<li><a href="#">Proyectos</a></li>
<li><a
href="#">clases</a></li>
<a
href="ingresa.html"><button>Ingresa</button></a>
<button
type="button">Ofertas</button>
</ul>
</header>
<div class="hero">
<h1>FORMULARIO</h1><br>
<form>
<p><label
for="nombre">Nombre:<input type="text"
id="nombre"></label></p>
<p><label for="apellido">apellido:<input
type="text" id="apellido"></label></p>
<p><label
for="edad">edad:<input type="text"
id="edad"></label></p>
<p><label
for="descripcion">descripcion:<textarea
id="descripcion"></textarea></p>
<p><label> nivel educativo:
<select id="educativo">
<option
value="primaria">primaria</option>
<option
value="secundaria">secundaria</option>
<option
value="instituto">instituto</option>
<option
value="universidad">universidad</option>
</select>
</label></p>
<p><b>Proyecto</b></p>
<input
type="radio" value="programacion">
<label>programacion</label><br>
<input type="radio"
value="clases">
<label>clases</label><br>
<input type="radio"
value="otro">
<label>otro</label><br>
<button class="btn"
type="submit">enviar</button>
</form>
</div>
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;}
*/
header{
background: rgb(59, 128, 219);
padding: 20px 9%;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
font-size:30px;
font-weight: 700;
text-transform: uppercase;
color:white;
}
li{
display: inline-block;
}
li a{
color:white;
font-size: 18px;
font-weight: 400px;
margin-right: 25px;
}
li a:hover{
color:rgb(72, 247, 159);
}
button{
width: 90px;
background-color: rgb(187, 34, 233);
color:white;
font-size: 17px;
font-weight: 400;
margin-left: 10px;
padding: 10px;
border: none;
border-radius: 10px;
cursor:pointer;
transition: background-color 0.4s ease-in;
}
button:hover{
background-color: rgb(169, 238, 112);
}
.hero {
position: absolute;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero::before
{
content: "";
background-image:
url(imagenes/pexels-pixabay-256381\ \(1\).jpg);
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
z-index: -1;
}
h1{
color:blue;
position: relative;
border-left: 5px;
}
#uno{
color:purple;
}
.dos{
background-color: aqua;
color:blue;
font-size: medium;
text-align: center;
}
.btn{
background-color: #007bff; /* Blue
background */
color: white; /* White text */
border: none; /* No border */
padding: 12px 24px; /* Padding around text
*/
border-radius: 5px; /* Rounded corners */
font-size: 16px;
cursor: pointer; /* Pointer cursor on hover
*/
transition: background-color 0.3s ease;
}
.btn:hover
{
background-color: #45c5e6; /* Darker blue on
hover */
}
.btn:active
{
background-color: #004085; /* Even darker
blue when clicked */
}
.di{
text-align: right;
float:right;
}