diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..a3a16fcd Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 947ae319..6ed59c54 100644 --- a/README.md +++ b/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* diff --git a/public/.DS_Store b/public/.DS_Store new file mode 100644 index 00000000..163fb69b Binary files /dev/null and b/public/.DS_Store differ diff --git a/public/css/style.css b/public/css/style.css index 8beed2d4..2e31485f 100644 --- a/public/css/style.css +++ b/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; } \ No newline at end of file diff --git a/public/fotos.html b/public/fotos.html index 643ad2a7..95b6ee25 100644 --- a/public/fotos.html +++ b/public/fotos.html @@ -16,7 +16,8 @@ Inicio Fotos -
diff --git a/public/images/.DS_Store b/public/images/.DS_Store
new file mode 100644
index 00000000..f5dd283b
Binary files /dev/null and b/public/images/.DS_Store differ
diff --git a/public/images/bg.jpg b/public/images/bg.jpg
new file mode 100644
index 00000000..a03651b8
Binary files /dev/null and b/public/images/bg.jpg differ
diff --git a/public/index.html b/public/index.html
index 40da9c9d..5275cd66 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,16 +14,22 @@
Inicio
Fotos
- Soy Cody, un aspirante a Dev, en 2019, organicé un viaje para desestresarme del código, y en esta página quiero compartirlo contigo.
+Soy Cody, un aspirante a Dev, en 2019, organicé un viaje para desestresarme del código, y en esta página quiero compartirlo contigo.
+Durante el verano de 2019, decidí comenzar a aprender desarrollo frontend, por lo que durante mi viaje, estuve aprendiendo HTML, CSS, y JavaScript
+Durante el verano de 2019, decidí comenzar a aprender desarrollo frontend, por lo que durante mi viaje, estuve aprendiendo HTML, CSS, y JavaScript
Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías frontend, construyendo esta página
+Estos son los cursos que estuve tomando
También me propuse aprender nuevas tecnologías durante 2021
-- Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub -
-- Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request. -
-- Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica - Ir al tutorial - -
++ Como parte de mi formación Frontend, aprendí acerca de Git y GitHub, por lo que decidí subir mi código a GitHub +
++ Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request. +
++ Si nunca antes has colaborado con un repositorio, en Código Facilito hay un tutorial que lo explica +
+
- - Puedes ver más, en la galería de fotos de mi página - Ir a la galería -
++ Puedes ver más, en la galería de fotos de mi página +
+ Ir a la galeríaAprender a programar y escribir código, puede ser estresante, por eso es muy importante que periódicamente nos desconectemos y descansemos apropiadamente
-Durante mis vacaciones aprendí que existen distintos beneficios de descansar:
-Aprender a programar y escribir código, puede ser estresante, por eso es muy importante que periódicamente nos desconectemos y descansemos apropiadamente
+Durante mis vacaciones aprendí que existen distintos beneficios de descansar:
+