Constructor web

Usar este código en la página (ignora las pestañas visuales)

Ctrl+S guarda · enlaces: view.php?p=slug

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inicio</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,sans-serif;color:#1f2937;line-height:1.5}
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0}
  nav{max-width:1100px;margin:auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
  nav img{height:40px;width:auto}
  nav div:last-child{display:flex;gap:22px;flex-wrap:wrap}
  nav div:last-child a:hover{color:#2563eb}
  main{max-width:1100px;margin:auto;padding:0 24px}
  .banner{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;padding:64px 0}
  .banner h2{font-size:3rem;line-height:1.1;margin-bottom:12px}
  .banner p{font-size:1.15rem;color:#4b5563;margin-bottom:24px}
  .banner button{background:#2563eb;color:#fff;border:0;padding:12px 26px;border-radius:8px;font-size:1rem;cursor:pointer}
  .banner button:hover{background:#1d4ed8}
  .banner .btn-wrap{grid-column:1}
  .banner .hero{grid-column:2;grid-row:1 / span 2}
  .banner img{border-radius:12px;width:100%}
  .desarrollo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;padding:32px 0 64px}
  .desarrollo div{background:#f3f4f6;border-radius:12px;padding:24px}
  .desarrollo h3{margin-bottom:8px}
  footer{background:#111827;color:#d1d5db;margin-top:32px}
  .footer-in{max-width:1100px;margin:auto;padding:36px 24px;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
  footer h3{color:#fff;margin-bottom:8px}
  footer img{height:36px;width:auto;margin-bottom:10px}
  footer a{display:block;margin-bottom:4px}
  footer a:hover{color:#fff}
  @media(max-width:700px){.banner{grid-template-columns:1fr}.banner .hero{grid-column:1;grid-row:auto}.banner h2{font-size:2.2rem}}
</style>
</head>
<body>
  
  <header>
    <nav>
      <div><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e5e7eb%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%239ca3af%22%20font-family%3D%22sans-serif%22%20font-size%3D%2224%22%20text-anchor%3D%22middle%22%3Eimagen%3C%2Ftext%3E%3C%2Fsvg%3E" alt="logo"></div>
      <div>
                  <a href="view.php?p=inicio">inicio</a>
                  <a href="view.php?p=nosotros">nosotros</a>
                  <a href="view.php?p=servicio">servicio</a>
                  <a href="view.php?p=contacto">contacto</a>
              </div>
    </nav>
  </header>

<main>
        
    <section class="banner">
      <div>
        <h2>Cua</h2>
        <p>Mundo patico lo mejor del mundo</p>
      </div>
      <div class="btn-wrap">
                  <a href="#"><button>Hola paticos entra aqui</button></a>
              </div>
      <div class="hero"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e5e7eb%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%239ca3af%22%20font-family%3D%22sans-serif%22%20font-size%3D%2224%22%20text-anchor%3D%22middle%22%3Eimagen%3C%2Ftext%3E%3C%2Fsvg%3E" alt="hero"></div>
    </section>
    
        
    <section class="desarrollo">
              <div>
          <h3>Primer bloque</h3>
          <p>Escribe aquí el contenido.</p>
        </div>
              <div>
          <h3>Segundo bloque</h3>
          <p>Escribe aquí el contenido.</p>
        </div>
          </section>
      </main>

<footer>
    <div class="footer-in">
      <div>
        <img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23e5e7eb%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%239ca3af%22%20font-family%3D%22sans-serif%22%20font-size%3D%2224%22%20text-anchor%3D%22middle%22%3Eimagen%3C%2Ftext%3E%3C%2Fsvg%3E" alt="logo">
        <h3>Mi sitio</h3>
        <p>Descripción corta del sitio.</p>
      </div>
      <div>
        <h3>enlaces</h3>
                  <a href="#">terminos y condiciones</a>
                  <a href="#">politicas de privacidad</a>
              </div>
    </div>
  </footer>
  </body>
</html>