1#@!#!123s

: / home / ensad / ettien.ensad.edu.pe /
Filename : mains.html
back
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ETTIEN | Escuela Nacional Superior Autónoma</title>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&family=Montserrat:wght@300;400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-color: #121212;
      --accent-color: #b21f2d;
      --gold-color: #c8a45d;
      --bg-color: #fbfaf7;
      --text-color: #303030;
      --muted-color: #777;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Montserrat', sans-serif;
      background: var(--bg-color);
      color: var(--text-color);
      line-height: 1.7;
    }

    header {
      background: rgba(255,255,255,0.96);
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .topbar {
      background: var(--primary-color);
      color: #fff;
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-align: center;
      padding: 8px 16px;
    }

    .header-inner {
      max-width: 1120px;
      margin: 0 auto;
      padding: 22px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .logo {
      text-decoration: none;
      color: var(--primary-color);
    }

    .logo strong {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 2.1rem;
      letter-spacing: 3px;
      line-height: 1;
    }

    .logo span {
      display: block;
      margin-top: 6px;
      font-size: 0.72rem;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--muted-color);
    }

    nav a {
      margin-left: 18px;
      text-decoration: none;
      color: var(--text-color);
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      transition: color 0.25s;
    }

    nav a:hover {
      color: var(--accent-color);
    }

    .container {
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .hero {
      min-height: 620px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: center;
      gap: 52px;
      padding: 72px 0;
      border-bottom: 1px solid #eee;
    }

    .hero-visual {
      min-height: 470px;
      background:
        linear-gradient(rgba(18,18,18,0.2), rgba(18,18,18,0.35)),
        url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1200&auto=format&fit=crop');
      background-size: cover;
      background-position: center;
      box-shadow: 0 22px 45px rgba(0,0,0,0.16);
      position: relative;
    }

    .hero-visual::after {
      content: "Formación · Investigación · Cultura";
      position: absolute;
      left: 26px;
      bottom: 24px;
      background: rgba(255,255,255,0.92);
      color: var(--primary-color);
      padding: 12px 18px;
      font-size: 0.78rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
    }

    .eyebrow {
      color: var(--accent-color);
      font-size: 0.82rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 700;
      margin: 0 0 12px;
    }

    h1, h2, h3 {
      font-family: 'Playfair Display', serif;
      color: var(--primary-color);
      line-height: 1.15;
    }

    h1 {
      font-size: clamp(2.5rem, 5vw, 4.8rem);
      margin: 0 0 22px;
    }

    .hero p {
      font-size: 1.02rem;
      max-width: 560px;
      color: #444;
    }

    .actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 28px;
    }

    .btn {
      display: inline-block;
      padding: 13px 24px;
      text-decoration: none;
      font-size: 0.78rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 700;
      border: 1px solid var(--primary-color);
      transition: 0.25s;
    }

    .btn.primary {
      background: var(--primary-color);
      color: #fff;
    }

    .btn.secondary {
      color: var(--primary-color);
      background: transparent;
    }

    .btn:hover {
      background: var(--accent-color);
      border-color: var(--accent-color);
      color: #fff;
    }

    .section {
      padding: 74px 0;
      border-bottom: 1px solid #eee;
    }

    .section-title {
      text-align: center;
      font-size: 2.25rem;
      margin: 0 0 14px;
    }

    .section-subtitle {
      max-width: 650px;
      margin: 0 auto 42px;
      text-align: center;
      color: var(--muted-color);
    }

    .cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
    }

    .card {
      background: #fff;
      border: 1px solid #efefef;
      padding: 28px;
      min-height: 230px;
      transition: transform 0.25s, box-shadow 0.25s;
    }

    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 34px rgba(0,0,0,0.08);
    }

    .card .tag {
      color: var(--accent-color);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    .card h3 {
      margin: 12px 0;
      font-size: 1.35rem;
    }

    .split {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 48px;
      align-items: center;
    }

    .panel {
      background: #161616;
      color: #fff;
      padding: 44px;
    }

    .panel h2 {
      color: #fff;
      font-size: 2rem;
      margin-top: 0;
    }

    .panel p {
      color: #ddd;
    }

    .news-list {
      display: grid;
      gap: 18px;
    }

    .news-item {
      background: #fff;
      border-left: 4px solid var(--accent-color);
      padding: 20px 24px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    }

    .news-item time {
      color: var(--muted-color);
      font-size: 0.78rem;
      font-weight: 600;
      text-transform: uppercase;
    }

    .news-item h3 {
      margin: 8px 0 4px;
      font-size: 1.2rem;
    }

    footer {
      background: var(--primary-color);
      color: #fff;
      padding: 54px 0;
      text-align: center;
    }

    footer .brand {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      letter-spacing: 2px;
      margin-bottom: 8px;
    }

    .footer-links {
      margin-top: 22px;
    }

    .footer-links a {
      color: #ccc;
      text-decoration: none;
      margin: 0 10px;
      font-size: 0.8rem;
      text-transform: uppercase;
    }

    @media (max-width: 860px) {
      .header-inner {
        flex-direction: column;
        text-align: center;
      }

      nav a {
        display: inline-block;
        margin: 7px 9px;
      }

      .hero,
      .split {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 46px;
      }

      .hero-visual {
        min-height: 320px;
      }

      .cards {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <header>
    <div class="topbar">Escuela · Técnica · Investigación · Innovación</div>
    <div class="header-inner">
      <a href="#" class="logo">
        <strong>ETTIEN</strong>
        <span>Escuela Nacional Superior Autónoma</span>
      </a>
      <nav>
        <a href="#inicio">Inicio</a>
        <a href="#programas">Programas</a>
        <a href="#admision">Admisión</a>
        <a href="#noticias">Noticias</a>
        <a href="#contacto">Contacto</a>
      </nav>
    </div>
  </header>

  <main class="container">
    <section class="hero" id="inicio">
      <div class="hero-visual"></div>
      <div class="hero-content">
        <p class="eyebrow">Formación profesional</p>
        <h1>Educación técnica para el futuro.</h1>
        <p>
          Una propuesta académica orientada a la innovación, la investigación aplicada y el desarrollo de capacidades profesionales para nuevos contextos productivos.
        </p>
        <div class="actions">
          <a href="#programas" class="btn primary">Ver programas</a>
          <a href="#admision" class="btn secondary">Proceso de admisión</a>
        </div>
      </div>
    </section>

    <section class="section" id="programas">
      <h2 class="section-title">Programas académicos</h2>
      <p class="section-subtitle">
        Carreras y líneas formativas diseñadas para conectar aprendizaje, práctica y transformación social.
      </p>

      <div class="cards">
        <article class="card">
          <span class="tag">Carrera</span>
          <h3>Gestión e innovación tecnológica</h3>
          <p>Formación enfocada en soluciones digitales, procesos técnicos y liderazgo de proyectos.</p>
        </article>

        <article class="card">
          <span class="tag">Laboratorio</span>
          <h3>Investigación aplicada</h3>
          <p>Espacios de experimentación para desarrollar propuestas reales junto a docentes y estudiantes.</p>
        </article>

        <article class="card">
          <span class="tag">Extensión</span>
          <h3>Comunidad y desarrollo</h3>
          <p>Actividades, talleres y programas vinculados con el entorno académico y profesional.</p>
        </article>
      </div>
    </section>

    <section class="section split" id="admision">
      <div class="panel">
        <p class="eyebrow">Admisión 2026</p>
        <h2>Postula a ETTIEN</h2>
        <p>
          Conoce los requisitos, fechas importantes y pasos para iniciar tu proceso de inscripción.
        </p>
        <a href="#contacto" class="btn primary">Solicitar información</a>
      </div>

      <div class="news-list" id="noticias">
        <div class="news-item">
          <time>Comunicado</time>
          <h3>Convocatoria de admisión abierta</h3>
          <p>Revisa el cronograma institucional y prepara tus documentos de postulación.</p>
        </div>
        <div class="news-item">
          <time>Evento académico</time>
          <h3>Semana de orientación para nuevos estudiantes</h3>
          <p>Charlas informativas sobre programas, servicios y vida académica.</p>
        </div>
        <div class="news-item">
          <time>Institucional</time>
          <h3>Nuevos proyectos de innovación educativa</h3>
          <p>La escuela impulsa iniciativas para fortalecer la formación técnica superior.</p>
        </div>
      </div>
    </section>
  </main>

  <footer id="contacto">
    <div class="container">
      <div class="brand">ETTIEN</div>
      <p>Escuela Nacional Superior Autónoma</p>
      <div class="footer-links">
        <a href="#">Mesa de partes</a>
        <a href="#">Transparencia</a>
        <a href="#">Correo institucional</a>
      </div>
      <p style="font-size: 0.75rem; opacity: 0.55; margin-top: 28px;">© 2026 ETTIEN. Todos los derechos reservados.</p>
    </div>
  </footer>
</body>
</html>