Tarde pero sin sueño

README.md

@@ -1,29 +1,15 @@
 # Las Vacaciones de Cody
-Cody está aprendiendo desarrollo Frontend, hizo su primer página, y ahora necesita de tu ayuda para mejorarla.
+Concurso de Código Facilito. Checar el deploy acá:
 
-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:
+https://shelvaldes.github.io/vacaciones-cody/
 
-✅ Un año Premium
-✅ CSS Secrets, de Lea Verou
-✅ Pack de stickers hasta la puerta de tu casa
-✅ Diploma
-✅ Asesoría personalizada para mejorar tu CV, con un reclutador de TI
+Este reto consistió en vestir una sencilla página proporcionada como base. Se hizo fork y se le agregaron estilos CSS.
 
-Para más detalles del concurso, reglas, y consideraciones, visita: https://codigofacilito.com/verano/concurso
+## Puntos destacables:
 
+* Desarrollo realizado en 4 horas. 
+* Implementación de control de versiones de Git desde terminal en local, conexión a repositorio remoto.
+* Este proyecto usa CSS puro, no contiene ninguna dependencia.
 
-# Pasos para participar
 
-1. Haz un fork de este repo
-2. Implementa tus cambios
-3. Haz un pull request con tus cambios
-
-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
-
-# Fechas importantes
-La fecha límite para enviar tu pull request es el 4 de Agosto, 11:59pm
-
-# Solución de problemas
-
-**Mi página no se ve en GitHub Pages**
-Asegúrate de haber habilitado GitHub Actions y GitHub Pages, y que la rama de GitHub Pages sea gh-pages
+*Come frutas y verduras*

public/css/style.css

@@ -1,30 +1,159 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+*{
+  margin: 0;
+  padding: 0;
+}
+:root{
+  --corners: 10px;
+}
+
+body{
+  background-image: url("../images/bg.jpg");
+  background-position: center; /* Center the image */
+  /* filter: blur(8px);
+  -webkit-filter: blur(8px) */
+  background-attachment: fixed;
+  font-family: "Montserrat";
+}
+
+.hero{
+  height: calc(100vh - 90px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hero--child{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+h1, h2{
+  font-family: "Poppins";
+  font-weight: 800;
+  font-size: 2em;
+  text-transform: uppercase;
+}
+
+h1{
+  color: whitesmoke;
+  font-size: 6em;
+  line-height: 0.8em;
+  text-transform: uppercase;
+}
+
+h2, p{
+  margin-bottom: 30px;
+}
+.button{
+  background-color: rgb(23, 90, 83);
+  color: whitesmoke;
+  padding: 20px;
+  min-width: 300px;
+  font-size: 1.2em;
+  text-transform: uppercase;
+  font-kerning: 4;
+  border-style: none;
+  align-self: center;
+  border-radius: var(--corners);
+  text-decoration: none;
+}
+.button:hover{
+  background-color: rgb(20, 63, 59);
+}
+.subheader{
+  font-family: "Poppins";
+  color: rgb(16, 40, 54);
+  margin-top: 20px;
+  /* background-color: rgba(68, 119, 108, 0.623); */
+  max-width: 500px;
+  /* text-transform: uppercase; */
+}
+
 nav{
-  background-color: aliceblue;
+  /* background-color: rgb(207, 245, 235); */
+
+  border-radius: var(--corners);
   padding: 15px;
   display: flex;
   gap:1em;
+  margin-top: 40px;
+  display: flex;
+  justify-content: flex-end;
+}
+nav a{
+  color: aquamarine;
+  text-decoration: none;
 }
 
 main{
   text-align: center;
   max-width: 960px;
   margin:0 auto;
+
 }
 
+
+
 section{
-  margin-top: 3rem;
+  background-color: rgba(189, 231, 229, 0.904);
+  border-radius: var(--corners);
+  background: rgba(255, 255, 255, 0.596);
+  box-shadow: 0 8px 32px 0 rgba(5, 48, 44, 0.452);
+  backdrop-filter: blur( 4px );
+  -webkit-backdrop-filter: blur( 4px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
+  padding: 80px 40px 70px;
+  margin: 0px 20px 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.parent-structure{
+  display: flex;
+  justify-content: center;
+}
+.child-structure{
+  align-self: center;
+  max-width: 400px;
 }
 
 .cursos div{
-  background-color: black;
-  color: white;
+  background-color: rgb(255, 255, 255);
+  color: rgb(49, 49, 49);
   max-width: 200px;
   display: inline-block;
-  box-shadow: 5px 5px 10px black;
+
+  border-radius: var(--corners);
+  padding: 30px 30px 0px;
+}
+
+.cursos div:first-child{
+  margin-right: 10px;
 }
+.fotos{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+}
+
 .fotos img{
-  max-width: 450px;
-  display: inline-block;
+  max-width: 250px;
+  display: flex;
+  margin: 10px;
+  border-style: solid;
+  border-color: white;
+  border-width: 6px;
+  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.445);
+
 }
 ul li{
   text-align: left;
@@ -33,6 +162,25 @@ ul li::marker {
   content: "🚀";
 }
 
+ol{
+ margin-left: 60px;
+}
+
 ol li{
   text-align: left;
+}
+
+footer{
+  padding: 30px;
+}
+
+.gallery {
+  font-size: 3.5em;
+  color: rgb(242, 255, 251);
+}
+
+h3{
+  margin-top: -50px;
+  font-size: 2em;
+  padding-bottom: 50px;
 }

public/fotos.html

@@ -16,7 +16,8 @@
         <a href="/">Inicio</a>
         <a href="fotos.html">Fotos</a>
       </nav>
-      <h2>Galería completa de mis vacaciones</h2>
+      <h2 class="gallery">Galería completa</h2>
+      <h3>de mis vacaciones</h3>
     </header>
     <div class="fotos">
       <img src="images/1.jpg" alt="Cody en la playa">

public/index.html

@@ -14,16 +14,22 @@
         <a href="/">Inicio</a>
         <a href="fotos.html">Fotos</a>
       </nav>
-      <h1>Estas son mis Vacaciones</h1>
-      <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>
+      <div class="hero">
+        <div class="hero--child">
+          <h1>Estas son mis Vacaciones</h1>
+          <p class="subheader">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>
+        </div>
+      </div>
     </header>
 
-    <section>
+    <section class="odd">
       <header>
         <h2>Mis vacaciones Frontend</h2>
       </header>
-      <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>
+      <div class="child-structure">
+        <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>
       <p> Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías frontend, construyendo esta página </p>
+      </div>
       <p> Estos son los cursos que estuve tomando </p>
       <div class="cursos">
         <div>
@@ -40,7 +46,7 @@ <h2>Mis vacaciones Frontend</h2>
         <h2>Ruta de aprendizaje 2021</h2>
         <p> También me propuse aprender nuevas tecnologías durante 2021</p>
       </header>
-      <ul>
+      <ul class="child-structure">
         <li> Flexbox, y Grid </li>
         <li> Animaciones con CSS y JavaScript </li>
         <li> AJAX </li>
@@ -52,17 +58,18 @@ <h2>Ruta de aprendizaje 2021</h2>
       <header>
         <h2>Colabora en mi página</h2>
       </header>
-      <p>
-        Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub
-      </p>
-      <p>
-        Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request.
-      </p>
-      <p>
-        Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica
-        <a href="" target="_blank" >Ir al tutorial</a>
-
-      </p>
+      <div class="child-structure">
+        <p>
+          Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub
+        </p>
+        <p>
+          Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request.
+        </p>
+        <p>
+          Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica
+        </p>
+      </div>
+      <a class="button" href="" target="_blank" >Ir al tutorial</a>
     </section>
     <section>
       <header>
@@ -73,27 +80,32 @@ <h2>Aquí te comparto algunas fotos de mis vacaciones</h2>
         <img src="images/1.jpg" alt="Cody en la playa">
         <img src="images/2.jpg" alt="Cody acampando">
         <img src="images/3.jpg" alt="Cody en una alberca">
-        <p>
-          Puedes ver más, en la galería de fotos de mi página
-          <a href="fotos.html">Ir a la galería</a>
-        </p>
+
       </div>
+      <br><br>
+      <p>
+        Puedes ver más, en la galería de fotos de mi página
+      </p>
+      <a class="button" href="fotos.html">Ir a la galería</a>
     </section>
 
     <section>
       <header>
         <h2>La importancia de las vacaciones</h2>
-        <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>
-        <p>Durante mis vacaciones aprendí que existen distintos beneficios de descansar:</p>
-        <ol>
-          <li>Mejora la salud mental</li>
-          <li>Incrementa la motivación</li>
-          <li>Reduce el burnout</li>
-          <li>Mejora tu productividad y creatividad</li>
-        </ol>
+
       </header>
-
+      <div class="child-structure">
+        <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>
+      <p>Durante mis vacaciones aprendí que existen distintos beneficios de descansar:</p>
+      <ol>
+        <li>Mejora la salud mental</li>
+        <li>Incrementa la motivación</li>
+        <li>Reduce el burnout</li>
+        <li>Mejora tu productividad y creatividad</li>
+      </ol>
+      </div>
     </section>
+    <footer>Foto de Brady Knoll en Pexels</footer>
 
   </main>
 </body>