Last active
May 3, 2025 00:33
-
-
Save roxsross/6b95cfaf4828952a8cc7c34da5deb7c3 to your computer and use it in GitHub Desktop.
index workshop terraform
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Workshop de Terraform</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #5C4EE5; | |
| --secondary-color: #7B42F6; | |
| --accent-color: #04E762; | |
| --background-color: #F0F2F5; | |
| --text-color: #333; | |
| --dark-background: #252A34; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background: linear-gradient(135deg, var(--background-color) 0%, #E3E8F3 100%); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| } | |
| .header { | |
| margin-bottom: 30px; | |
| text-align: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| } | |
| .logo-terraform, .logo-docker { | |
| height: 60px; | |
| margin: 0 15px; | |
| } | |
| h1 { | |
| color: var(--primary-color); | |
| font-size: 2.5rem; | |
| margin-bottom: 10px; | |
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .subtitle { | |
| color: var(--secondary-color); | |
| font-weight: 300; | |
| font-size: 1.2rem; | |
| } | |
| .container { | |
| max-width: 800px; | |
| width: 100%; | |
| background: white; | |
| border-radius: 12px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| transition: transform 0.3s ease; | |
| } | |
| .container:hover { | |
| transform: translateY(-5px); | |
| } | |
| .banner { | |
| background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); | |
| padding: 20px; | |
| color: white; | |
| font-size: 1.5rem; | |
| text-align: center; | |
| font-weight: 500; | |
| } | |
| .content { | |
| padding: 30px; | |
| } | |
| .section { | |
| margin-bottom: 35px; | |
| } | |
| .section-title { | |
| font-size: 1.3rem; | |
| color: var(--primary-color); | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .section-title::before { | |
| content: ''; | |
| display: inline-block; | |
| width: 15px; | |
| height: 15px; | |
| background-color: var(--accent-color); | |
| margin-right: 10px; | |
| border-radius: 50%; | |
| } | |
| p { | |
| margin-bottom: 15px; | |
| font-size: 1.05rem; | |
| } | |
| .skills-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .skill-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 12px 15px; | |
| background-color: rgba(92, 78, 229, 0.05); | |
| border-radius: 8px; | |
| border-left: 4px solid var(--accent-color); | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .skill-item:hover { | |
| transform: translateX(5px); | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); | |
| } | |
| .skill-icon { | |
| color: var(--accent-color); | |
| font-size: 1.4rem; | |
| font-weight: bold; | |
| margin-right: 15px; | |
| } | |
| .skill-text { | |
| font-size: 1.05rem; | |
| } | |
| .code-block-container { | |
| background-color: white; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); | |
| margin: 20px 0; | |
| } | |
| .code-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background-color: #f6f8fa; | |
| padding: 10px 15px; | |
| border-bottom: 1px solid #eaecef; | |
| } | |
| .code-title { | |
| font-family: monospace; | |
| font-weight: 500; | |
| color: #444; | |
| } | |
| .code-actions { | |
| font-size: 0.9rem; | |
| } | |
| .code-action { | |
| color: var(--primary-color); | |
| cursor: pointer; | |
| padding: 4px 8px; | |
| border-radius: 4px; | |
| transition: background-color 0.2s; | |
| } | |
| .code-action:hover { | |
| background-color: rgba(92, 78, 229, 0.1); | |
| } | |
| .code-block { | |
| background-color: var(--dark-background); | |
| color: #E5E9F0; | |
| padding: 20px; | |
| font-family: 'Fira Code', monospace; | |
| line-height: 1.5; | |
| font-size: 0.95rem; | |
| overflow-x: auto; | |
| margin: 0; | |
| white-space: pre; | |
| } | |
| .code-block code { | |
| font-family: 'Fira Code', monospace; | |
| } | |
| .code-keyword { | |
| color: #c586c0; /* Purple color - similar to Visual Studio Code */ | |
| } | |
| .code-property { | |
| color: #9cdcfe; /* Light blue color */ | |
| } | |
| .code-string { | |
| color: #ce9178; /* Orange-rust color */ | |
| } | |
| .code-name { | |
| color: #4ec9b0; /* Teal-green color */ | |
| } | |
| .highlight { | |
| background-color: rgba(92, 78, 229, 0.1); | |
| padding: 2px 5px; | |
| border-radius: 3px; | |
| color: var(--primary-color); | |
| font-weight: 500; | |
| } | |
| .next-steps { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); | |
| gap: 20px; | |
| margin-top: 15px; | |
| } | |
| .step-card { | |
| display: flex; | |
| background-color: white; | |
| border-radius: 8px; | |
| padding: 15px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| border: 1px solid #eee; | |
| overflow: hidden; | |
| } | |
| .step-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); | |
| border-color: rgba(92, 78, 229, 0.3); | |
| } | |
| .step-icon { | |
| font-size: 1.8rem; | |
| margin-right: 15px; | |
| color: var(--primary-color); | |
| } | |
| .step-content { | |
| flex: 1; | |
| } | |
| .step-title { | |
| font-weight: 500; | |
| margin-bottom: 5px; | |
| color: var(--primary-color); | |
| } | |
| .step-desc { | |
| font-size: 0.9rem; | |
| color: #666; | |
| } | |
| .footer { | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 0.9rem; | |
| color: #666; | |
| width: 100%; | |
| padding: 15px; | |
| border-top: 1px solid #eee; | |
| } | |
| .signature { | |
| font-style: italic; | |
| color: var(--secondary-color); | |
| font-weight: 500; | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2rem; | |
| } | |
| .content { | |
| padding: 20px; | |
| } | |
| .logo-terraform, .logo-docker { | |
| height: 40px; | |
| } | |
| .next-steps { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="logo"> | |
| <!-- Simulación de logos con divs coloreados --> | |
| <div class="logo-terraform" style="background-color: var(--primary-color); width: 60px; border-radius: 5px;"></div> | |
| <div style="margin: 0 10px; font-size: 24px; font-weight: bold;">+</div> | |
| <div class="logo-docker" style="background-color: #2496ED; width: 60px; border-radius: 5px;"></div> | |
| </div> | |
| <h1>Workshop de Terraform</h1> | |
| <div class="subtitle">Infraestructura como Código con Docker</div> | |
| </div> | |
| <div class="container"> | |
| <div class="banner"> | |
| Bienvenido al workshop de Terraform by roxs | |
| </div> | |
| <div class="content"> | |
| <div class="section"> | |
| <div class="section-title">Sobre este Workshop</div> | |
| <p>Esta página está siendo servida por un contenedor <span class="highlight">Nginx:Alpine</span> desplegado con Terraform usando el provider de Docker. La infraestructura completa ha sido definida como código y puede ser recreada fácilmente en cualquier entorno.</p> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Lo que has aprendido</div> | |
| <div class="skills-container"> | |
| <div class="skill-item"> | |
| <div class="skill-icon">✓</div> | |
| <div class="skill-text">Configurar Terraform con el provider de Docker</div> | |
| </div> | |
| <div class="skill-item"> | |
| <div class="skill-icon">✓</div> | |
| <div class="skill-text">Desplegar contenedores basados en Nginx:Alpine</div> | |
| </div> | |
| <div class="skill-item"> | |
| <div class="skill-icon">✓</div> | |
| <div class="skill-text">Gestionar infraestructura como código (IaC)</div> | |
| </div> | |
| <div class="skill-item"> | |
| <div class="skill-icon">✓</div> | |
| <div class="skill-text">Automatizar despliegues de manera consistente y reproducible</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <div class="section-title">Ejemplo de código</div> | |
| <div class="code-block-container"> | |
| <div class="code-header"> | |
| <div class="code-title">main.tf</div> | |
| <div class="code-actions"> | |
| <span class="code-action">copiar</span> | |
| </div> | |
| </div> | |
| <pre class="code-block"><code><span class="code-keyword">terraform</span> { | |
| <span class="code-property">required_providers</span> { | |
| <span class="code-name">docker</span> = { | |
| <span class="code-property">source</span> = <span class="code-string">"kreuzwerker/docker"</span> | |
| <span class="code-property">version</span> = <span class="code-string">"~> 3.0.1"</span> | |
| } | |
| } | |
| } | |
| <span class="code-keyword">resource</span> <span class="code-string">"docker_container"</span> <span class="code-string">"nginx"</span> { | |
| <span class="code-property">name</span> = <span class="code-string">"terraform-nginx-workshop"</span> | |
| <span class="code-property">image</span> = <span class="code-name">docker_image.nginx.image_id</span> | |
| }</code></pre> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>Workshop de Terraform © 2025</p> | |
| <p class="signature">Creado con ❤️ por roxs</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment