├── .github
    ├── PULL_REQUEST_TEMPLATE.md
    └── workflows
    │   └── push.yml
├── README.md
└── public
    ├── css
        └── style.css
    ├── fotos.html
    ├── images
        ├── 1.jpg
        ├── 2.jpg
        ├── 3.jpg
        ├── 4.jpg
        ├── 5.jpg
        └── 6.jpg
    └── index.html


/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | Antes de enviar el pull request, lee estos detalles y completa tu información 🚨🚨🚨🚨
 2 | 
 3 | ¡Hola! 👋 Este es un repositorio especial, hecho para el concurso #VeranoFrontend de Código Facilito, consideramos cada pull request una entrada para participar en el concurso.
 4 | 
 5 | ✅ Haz finalizado todos los cambios que deseas hacer a la página, para participar en el concurso
 6 | ✅ Activaste GitHub Actions y GitHub pages en tu repositorio, esto nos permitirá visualizar tu página funcionando en el navegador.
 7 | 
 8 | 
 9 | ======================
10 | 
11 | Además, completa tu información para poder contactarte, en caso de que necesitemos información adicional, o debamos informarte que has ganado alguno de los premios, coloca debajo tu:
12 | 
13 | Nombre de usuario en codigofacilito.com:
14 | 
15 | Finalmente, aquí debajo, cuéntanos un poco sobre tu proyecto, qué es lo más interesante en tu código, o que destacarías de tu implementación: 👇
16 | 
17 | 
18 | Eso es todo, al crear el pull request, ya estás participando en el concurso, (cuentan todos los PRs enviados antes del 5 de Agosto)


--------------------------------------------------------------------------------
/.github/workflows/push.yml:
--------------------------------------------------------------------------------
 1 | name: Build and Deploy
 2 | on: 
 3 |   push:
 4 |     branches:
 5 |       - main
 6 | jobs:
 7 |   build-and-deploy:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - name: Checkout 🛎️
11 |         uses: actions/checkout@v2.3.1
12 | 
13 |       - name: Deploy 🚀
14 |         uses: JamesIves/github-pages-deploy-action@4.1.4
15 |         with:
16 |           branch: gh-pages # The branch the action should deploy to.
17 |           folder: public # The folder the action should deploy.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Las Vacaciones de Cody
 2 | Cody está aprendiendo desarrollo Frontend, hizo su primer página, y ahora necesita de tu ayuda para mejorarla.
 3 | 
 4 | Envía un pull request rediseñando por completo la página de este repo y participa en el concurso #VeranoFrontend de Código Facilito, las personas en los 5 primeros lugares ganan:
 5 | 
 6 | ✅ Un año Premium
 7 | ✅ CSS Secrets, de Lea Verou
 8 | ✅ Pack de stickers hasta la puerta de tu casa
 9 | ✅ Diploma
10 | ✅ Asesoría personalizada para mejorar tu CV, con un reclutador de TI
11 | 
12 | Para más detalles del concurso, reglas, y consideraciones, visita: https://codigofacilito.com/verano/concurso
13 | 
14 | 
15 | # Pasos para participar
16 | 
17 | 1. Haz un fork de este repo
18 | 2. Implementa tus cambios
19 | 3. Haz un pull request con tus cambios
20 | 
21 | Es muy importante que al participar, habilites GitHub Actions y GitHub Pages en tu repositorio, así podremos ver tu página online, puedes consultar este vídeo para ver cómo participar: https://vimeo.com/577246176
22 | 
23 | # Fechas importantes
24 | La fecha límite para enviar tu pull request es el 4 de Agosto, 11:59pm
25 | 
26 | # Solución de problemas
27 | 
28 | **Mi página no se ve en GitHub Pages**
29 | Asegúrate de haber habilitado GitHub Actions y GitHub Pages, y que la rama de GitHub Pages sea gh-pages
30 | 


--------------------------------------------------------------------------------
/public/css/style.css:
--------------------------------------------------------------------------------
 1 | nav{
 2 |   background-color: aliceblue;
 3 |   padding: 15px;
 4 |   display: flex;
 5 |   gap:1em;
 6 | }
 7 | 
 8 | main{
 9 |   text-align: center;
10 |   max-width: 960px;
11 |   margin:0 auto;
12 | }
13 | 
14 | section{
15 |   margin-top: 3rem;
16 | }
17 | 
18 | .cursos div{
19 |   background-color: black;
20 |   color: white;
21 |   max-width: 200px;
22 |   display: inline-block;
23 |   box-shadow: 5px 5px 10px black;
24 | }
25 | .fotos img{
26 |   max-width: 450px;
27 |   display: inline-block;
28 | }
29 | ul li{
30 |   text-align: left;
31 | }
32 | ul li::marker {
33 |   content: "🚀";
34 | }
35 | 
36 | ol li{
37 |   text-align: left;
38 | }


--------------------------------------------------------------------------------
/public/fotos.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Mis vacaciones</title>
 9 |   <link rel="stylesheet" href="css/style.css">
10 | </head>
11 | 
12 | <body>
13 |   <main>
14 |     <header>
15 |       <nav>
16 |         <a href="/">Inicio</a>
17 |         <a href="fotos.html">Fotos</a>
18 |       </nav>
19 |       <h2>Galería completa de mis vacaciones</h2>
20 |     </header>
21 |     <div class="fotos">
22 |       <img src="images/1.jpg" alt="Cody en la playa">
23 |       <img src="images/2.jpg" alt="Cody acampando">
24 |       <img src="images/3.jpg" alt="Cody en una alberca">
25 |       <img src="images/4.jpg" alt="Cody en una alberca">
26 |       <img src="images/5.jpg" alt="Cody en una alberca">
27 |       <img src="images/6.jpg" alt="Cody en una alberca">
28 |       
29 |     </div>
30 | 
31 |   </main>
32 | </body>
33 | 
34 | </html>


--------------------------------------------------------------------------------
/public/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codigofacilito/vacaciones-cody/5281c7a7a3252f9b352f467e20dcd7e050880c74/public/images/1.jpg


--------------------------------------------------------------------------------
/public/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codigofacilito/vacaciones-cody/5281c7a7a3252f9b352f467e20dcd7e050880c74/public/images/2.jpg


--------------------------------------------------------------------------------
/public/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codigofacilito/vacaciones-cody/5281c7a7a3252f9b352f467e20dcd7e050880c74/public/images/3.jpg


--------------------------------------------------------------------------------
/public/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codigofacilito/vacaciones-cody/5281c7a7a3252f9b352f467e20dcd7e050880c74/public/images/4.jpg


--------------------------------------------------------------------------------
/public/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codigofacilito/vacaciones-cody/5281c7a7a3252f9b352f467e20dcd7e050880c74/public/images/5.jpg


--------------------------------------------------------------------------------
/public/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codigofacilito/vacaciones-cody/5281c7a7a3252f9b352f467e20dcd7e050880c74/public/images/6.jpg


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>Mis vacaciones</title>
  8 |   <link rel="stylesheet" href="css/style.css">
  9 | </head>
 10 | <body>
 11 |   <main>
 12 |     <header>
 13 |       <nav>
 14 |         <a href="/">Inicio</a>
 15 |         <a href="fotos.html">Fotos</a>
 16 |       </nav>
 17 |       <h1>Estas son mis Vacaciones</h1>
 18 |       <p>Soy Cody, un aspirante a Dev, en 2019, organicé un viaje para desestresarme del código, y en esta página quiero compartirlo contigo.</p>
 19 |     </header>
 20 | 
 21 |     <section>
 22 |       <header>
 23 |         <h2>Mis vacaciones Frontend</h2>
 24 |       </header>
 25 |       <p> Durante el verano de 2019, decidí comenzar a aprender desarrollo frontend, por lo que durante mi viaje, estuve aprendiendo HTML, CSS, y JavaScript </p>
 26 |       <p> Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías frontend, construyendo esta página </p>
 27 |       <p> Estos son los cursos que estuve tomando </p>
 28 |       <div class="cursos">
 29 |         <div>
 30 |           <p>Curso profesional de Desarrollo Web</p>
 31 |         </div>
 32 |         <div>
 33 |           <p>Curso para crear mi primera página web</p>
 34 |         </div>
 35 |       </div>
 36 |     </section>
 37 | 
 38 |     <section>
 39 |       <header>
 40 |         <h2>Ruta de aprendizaje 2021</h2>
 41 |         <p> También me propuse aprender nuevas tecnologías durante 2021</p>
 42 |       </header>
 43 |       <ul>
 44 |         <li> Flexbox, y Grid </li>
 45 |         <li> Animaciones con CSS y JavaScript </li>
 46 |         <li> AJAX </li>
 47 |         <li> HTML semántico </li>
 48 |         <li> Entre otros </li>
 49 |       </ul>
 50 |     </section>
 51 |     <section>
 52 |       <header>
 53 |         <h2>Colabora en mi página</h2>
 54 |       </header>
 55 |       <p>
 56 |         Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub
 57 |       </p>
 58 |       <p>
 59 |         Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request.
 60 |       </p>
 61 |       <p>
 62 |         Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica
 63 |         <a href="" target="_blank" >Ir al tutorial</a>
 64 | 
 65 |       </p>
 66 |     </section>
 67 |     <section>
 68 |       <header>
 69 |         <h2>Aquí te comparto algunas fotos de mis vacaciones</h2>
 70 |         <p>¡Bien! Sé que estás aquí por mis vacaciones, aquí te comparto algunas fotos que tomé:</p>
 71 |       </header>
 72 |       <div class="fotos">
 73 |         <img src="images/1.jpg" alt="Cody en la playa">
 74 |         <img src="images/2.jpg" alt="Cody acampando">
 75 |         <img src="images/3.jpg" alt="Cody en una alberca">
 76 |         <p>
 77 |           Puedes ver más, en la galería de fotos de mi página
 78 |           <a href="fotos.html">Ir a la galería</a>
 79 |         </p>
 80 |       </div>
 81 |     </section>
 82 | 
 83 |     <section>
 84 |       <header>
 85 |         <h2>La importancia de las vacaciones</h2>
 86 |         <p>Aprender a programar y escribir código, puede ser estresante, por eso es muy importante que periódicamente nos desconectemos y descansemos apropiadamente</p>
 87 |         <p>Durante mis vacaciones aprendí que existen distintos beneficios de descansar:</p>
 88 |         <ol>
 89 |           <li>Mejora la salud mental</li>
 90 |           <li>Incrementa la motivación</li>
 91 |           <li>Reduce el burnout</li>
 92 |           <li>Mejora tu productividad y creatividad</li>
 93 |         </ol>
 94 |       </header>
 95 |       
 96 |     </section>
 97 |     
 98 |   </main>
 99 | </body>
100 | </html>


--------------------------------------------------------------------------------