Web Template Generator
Extensión para Visual Studio Code que genera una plantilla web básica
con HTML, CSS y JavaScript lista para usar.
✨ ¿Qué hace?
Al ejecutar un comando, crea automáticamente:
- Archivos HTML
- Archivos CSS
- Archivos JavaScript
con una estructura inicial editable.
🚀 Cómo usar
- Abre una carpeta en VS Code
- Presiona
Ctrl + Shift + P
- Ejecuta Crear plantilla web (HTML + CSS + JS)
Los archivos se generarán automáticamente en tu proyecto.
📂 Archivos generados
index.htmlabout.htmlstyle.cssabout.cssmain.js
(Los nombres pueden variar según la plantilla)
🛠 Ideal para
- Proyectos web pequeños
- Aprender HTML / CSS / JS
- Iniciar rápidamente una estructura base
📌 Autor
Yo
📦 ¿Qué contiene?
La extensión genera los siguientes archivos base.
Puedes desplegar cada uno para ver el código completo.
index.html
index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Landing Page - Título Genérico</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- MENÚ SUPERIOR -->
<nav class="top-header">
<a href="#" class="logo">
<img src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/Air.png" alt="Logo" />
</a>
<button class="menu-toggle" aria-label="Abrir menú">☰</button>
<ul class="menu-horizontal">
<li>
<a href="#">Sección</a>
<ul class="menu-vertical">
<li><a href="#resumen">Subsección 1</a></li>
<li><a href="#CEO">Subsección 2</a></li>
</ul>
</li>
<li><a href="#">Reservar</a></li>
<li><a href="#Contacto">Contáctanos</a></li>
<li><a href="login.html" class="login-btn">Iniciar Sesión</a></li>
</ul>
</nav>
<!-- SECCIÓN RESUMEN -->
<section class="seccion1" id="resumen">
<h2>Insertar título aquí</h2>
<div class="seccion1-contenido">
<div class="seccion1-imagen">
<img src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/Bnb.gif" alt="Imagen relacionada" />
</div>
<div class="seccion1-texto">
<p>Insertar texto descriptivo aquí.</p>
</div>
</div>
</section>
<!-- SECCIÓN CEO -->
<section class="seccion2" id="CEO">
<h2>Insertar título aquí</h2>
<div class="seccion2-contenido">
<div class="seccion2-texto">
<p><strong>Insertar nombre aquí</strong></p>
<p>Insertar texto descriptivo aquí.</p>
</div>
<div class="seccion2-video">
<iframe
src="https://www.youtube.com/embed/zN6a7oZnAos"
title="Video descriptivo"
loading="lazy"
allowfullscreen
></iframe>
</div>
</div>
</section>
<!-- SECCIÓN CONTÁCTANOS -->
<section class="contacto" id="Contacto">
<h2>Contáctanos</h2>
<div class="contacto-contenido">
<form class="formulario-contacto" id="formularioContacto">
<div class="form-grupo">
<label for="nombres">Nombres</label>
<input id="nombres" />
</div>
<div class="form-grupo">
<label for="apellidos">Apellidos</label>
<input id="apellidos" />
</div>
<div class="form-grupo">
<label for="tipoDoc">Tipo de Documento</label>
<select id="tipoDoc">
<option value="">Seleccionar</option>
<option value="dni">DNI</option>
<option value="carne_extranjeria">Carné de Extranjería</option>
</select>
</div>
<div class="form-grupo">
<label for="telefono">Teléfono</label>
<input type="tel" id="telefono" />
</div>
<div class="form-grupo">
<label for="pais">País</label>
<select id="pais">
<option value="">Seleccionar</option>
<option value="peru">Perú</option>
<option value="chile">Chile</option>
<option value="argentina">Argentina</option>
<option value="colombia">Colombia</option>
<option value="mexico">México</option>
</select>
</div>
<div class="form-grupo">
<label for="email">Correo electrónico</label>
<input id="email" />
</div>
<div class="form-grupo">
<label for="asunto">Asunto</label>
<textarea id="asunto" rows="3"></textarea>
</div>
<button type="submit">Enviar</button>
</form>
<div class="contacto-instrucciones">
<p>
Completa el formulario con tus datos. Nuestro equipo se pondrá en
contacto.
</p>
<div id="mensajeEnviado" class="mensaje-enviado" hidden>
Mensaje enviado correctamente.
</div>
</div>
</div>
</section>
<!-- PIE DE PÁGINA -->
<footer class="footer">
<div class="footer-container">
<div class="footer-brand">
<img src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/Air.png" alt="Logo" class="footer-logo" />
<p>Nombre del sitio</p>
<small>
© <span id="anio-actual"></span> Todos los derechos reservados
</small>
</div>
<div class="footer-links">
<h4>Legal</h4>
<a href="#">Política de Privacidad</a>
<a href="#">Términos y Condiciones</a>
</div>
<div class="footer-social">
<h4>Síguenos</h4>
<a href="#"
><img
src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/Logo_de_Facebook.png"
alt="Facebook"
class="social-icon"
/></a>
<a href="#"
><img
src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/Instagram-Icon.png"
alt="Instagram"
class="social-icon"
/></a>
<a href="#"
><img
src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/Youtube_logo.png"
alt="Youtube"
class="social-icon"
/></a>
<a href="#"
><img src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/X.webp" alt="Twitter" class="social-icon"
/></a>
</div>
</div>
</footer>
<script defer src="main.js"></script>
</body>
</html>
</details> ```
<details>
<summary><strong>login.html</strong></summary>
```html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Iniciar Sesión</title>
<link rel="stylesheet" href="login.css" />
</head>
<body>
<!-- Flecha para volver -->
<a href="index.html" class="volver">← Volver</a>
<section class="login-container">
<div class="login-avatar">
<img src="https://github.com/Franz2308/web-template-generator/raw/HEAD/Images/user-icon.png" alt="Avatar Usuario" />
</div>
<div class="login-form">
<h2>Iniciar Sesión</h2>
<!-- FORMULARIO -->
<form id="loginForm">
<label for="usuario">Ingresar Usuario</label>
<input
type="text"
id="usuario"
name="usuario"
placeholder="Usuario"
required
/>
<label for="clave">Ingresar Clave</label>
<input
type="password"
id="clave"
name="clave"
placeholder="Contraseña"
required
/>
<button type="submit">Ingresar</button>
</form>
</div>
</section>
<!-- JS -->
<script src="login.js"></script>
</body>
</html>
</details> ```
<details>
<summary><strong>style.css</strong></summary>
```css
/* ===== RESET ===== */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Segoe UI", sans-serif;
}
html {
scroll-behavior: smooth;
}
/* ===== HEADER ===== */
.top-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: white;
position: relative;
z-index: 10;
}
.logo img {
height: 50px;
}
/* ===== MENU ===== */
.menu-toggle {
display: none;
font-size: 2rem;
background: #ccc;
border: none;
border-radius: 0.3rem;
padding: 0.2rem 0.6rem;
cursor: pointer;
}
.menu-horizontal {
display: flex;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.menu-horizontal li {
position: relative;
}
.menu-horizontal a {
display: block;
padding: 1rem;
color: black;
text-decoration: none;
}
.menu-horizontal a:hover {
color: [#777](https://github.com/Franz2308/web-template-generator/issues/777);
}
/* Submenú */
.menu-vertical {
display: none;
position: absolute;
top: 100%;
background: #ddd;
list-style: none;
padding: 0.5rem 0;
width: 12rem;
border-radius: 0.5rem;
}
.menu-horizontal li:hover .menu-vertical {
display: block;
}
.menu-vertical a {
padding: 1rem;
}
/* Login */
.login-btn {
border: 2px solid black;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
}
.login-btn:hover {
background: [#444](https://github.com/Franz2308/web-template-generator/issues/444);
color: white;
}
/* ===== SECTIONS ===== */
section {
padding: 6rem 2rem 3rem;
}
.seccion1 {
background: #f9f9f9;
}
.seccion2 {
background: #ddd;
}
.contacto {
background: #f1f1f1;
}
section h2 {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
}
/* ===== CONTENT LAYOUT ===== */
.seccion1-contenido,
.seccion2-contenido,
.contacto-contenido {
display: flex;
gap: 2rem;
align-items: center;
}
/* ===== IMAGES & VIDEO ===== */
.seccion1-imagen {
flex: 1;
}
.seccion1-imagen img {
width: 100%;
height: auto;
border-radius: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.seccion1-texto {
flex: 1;
line-height: 1.6;
}
.seccion2-texto {
flex: 1;
font-size: 1.15rem;
line-height: 1.7;
}
.seccion2-texto strong {
font-size: 1.3rem;
}
.seccion2-video {
flex: 1;
}
.seccion2-video iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
border-radius: 0.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* ===== FORM ===== */
.formulario-contacto {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-grupo {
display: flex;
flex-direction: column;
}
input,
select,
textarea {
padding: 0.75rem;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
}
button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
border: none;
border-radius: 0.5rem;
background: [#999](https://github.com/Franz2308/web-template-generator/issues/999);
color: white;
cursor: pointer;
}
button:hover {
background: [#777](https://github.com/Franz2308/web-template-generator/issues/777);
}
.contacto-instrucciones {
flex: 1;
line-height: 1.6;
}
.mensaje-enviado {
margin-top: 1.5rem;
color: green;
font-weight: bold;
}
/* ===== FOOTER ===== */
.footer {
background: [#222](https://github.com/Franz2308/web-template-generator/issues/222);
color: white;
padding: 2rem 1rem;
}
.footer-container {
display: flex;
gap: 2rem;
max-width: 1200px;
margin: auto;
flex-wrap: wrap;
}
.footer-logo {
width: 60px;
margin-bottom: 0.5rem;
}
.footer a {
color: #ccc;
text-decoration: none;
display: block;
margin: 0.3rem 0;
}
.footer a:hover {
color: white;
}
/* Redes sociales */
.footer-social {
display: flex;
gap: 0.5rem;
align-items: center;
}
.social-icon {
width: 32px;
height: 32px;
transition: transform 0.2s;
}
.social-icon:hover {
transform: scale(1.2);
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.menu-horizontal {
display: none;
flex-direction: column;
position: absolute;
top: 5rem;
left: 0;
width: 100%;
background: white;
z-index: 100;
}
.menu-horizontal.active {
display: flex;
}
.seccion1-contenido,
.seccion2-contenido,
.contacto-contenido,
.footer-container {
flex-direction: column;
text-align: center;
}
.seccion1-imagen img {
width: 90%;
margin: auto;
display: block;
}
.footer-social {
justify-content: center;
}
}
</details> ```
<details> <summary><strong>login.css</strong></summary>
```css
body {
margin: 0;
padding: 2rem;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.volver {
text-decoration: none;
color: [#333](https://github.com/Franz2308/web-template-generator/issues/333);
font-size: 1rem;
margin-bottom: 2rem;
display: inline-block;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
max-width: 800px;
margin: auto;
background-color: white;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-avatar img {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #ccc;
padding: 1rem;
}
.login-form {
flex: 1;
}
.login-form h2 {
margin-bottom: 1rem;
}
.login-form label {
display: block;
margin: 0.5rem 0 0.2rem;
}
.login-form input {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 0.5rem;
border: 1px solid [#000](https://github.com/Franz2308/web-template-generator/issues/000);
}
.login-form button {
width: 100%;
padding: 0.7rem;
border: 2px solid [#000](https://github.com/Franz2308/web-template-generator/issues/000);
border-radius: 0.5rem;
background-color: transparent;
cursor: pointer;
transition: 0.3s;
}
.login-form button:hover {
background-color: [#333](https://github.com/Franz2308/web-template-generator/issues/333);
color: white;
}
/* Responsive */
@media (max-width: 768px) {
.login-container {
flex-direction: column;
text-align: center;
}
}
</details> ```
<details> <summary><strong>main.js</strong></summary>
```js
document.addEventListener("DOMContentLoaded", () => {
const form = document.forms["frm"];
const mensaje = document.getElementById("mensajeEnviado");
form.addEventListener("submit", function (e) {
e.preventDefault();
const nombre = form.elements["fname"].value.trim();
const apellido = form.elements["apellidos"].value.trim();
const email = form.elements["email"].value.trim();
const telefono = form.elements["telefono"].value.trim();
if (!nombre || !apellido || !email || !telefono) {
alert("Por favor, complete todos los campos obligatorios.");
return;
}
if (!validateEmail(email)) {
alert("Por favor, ingrese un correo válido.");
return;
}
if (!validateTelefono(telefono)) {
alert("Por favor, ingrese un teléfono válido (solo números).");
return;
}
const confirmar = confirm(
"Está a punto de enviar el formulario. ¿Desea continuar?"
);
if (!confirmar) return;
mensaje.style.display = "block";
form.reset();
setTimeout(() => {
mensaje.style.display = "none";
}, 5000);
});
function validateEmail(email) {
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z]+\.[a-zA-Z]{2,}$/;
return re.test(email.toLowerCase());
}
function validateTelefono(telefono) {
const re = /^[0-9]{7,15}$/; // solo dígitos, de 7 a 15 números (ajusta si quieres)
return re.test(telefono);
}
});
document.addEventListener("DOMContentLoaded", function () {
const menuToggle = document.querySelector(".menu-toggle");
const menuHorizontal = document.querySelector(".menu-horizontal");
menuToggle.addEventListener("click", function () {
menuHorizontal.classList.toggle("active");
});
});
document.addEventListener("DOMContentLoaded", function () {
const anio = new Date().getFullYear();
const span = document.getElementById("anio-actual");
if (span) {
span.textContent = anio;
}
});
</details> ```
<details> <summary><strong>login.js</strong></summary>
```js
document.addEventListener("DOMContentLoaded", () => {
const form = document.getElementById("loginForm");
form.addEventListener("submit", (e) => {
e.preventDefault(); // Evita recarga
const usuario = document.getElementById("usuario").value.trim();
const clave = document.getElementById("clave").value.trim();
// Credenciales de prueba
const USER = "admin";
const PASS = "1234";
if (usuario === USER && clave === PASS) {
alert("Inicio de sesión correcto");
// Guardar sesión (opcional)
localStorage.setItem("logueado", "true");
// Redirigir a la página principal
window.location.href = "index.html";
} else {
alert("Usuario o contraseña incorrectos");
}
});
});
</details> ```
| |
