Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mi versión Jaky CF #129

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Mi versión Jaky CF #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
466d657
Update README.md
Jacqueline-cis Aug 6, 2021
59f827b
Versión Jaky de Verano Cody.html
Jacqueline-cis Aug 7, 2021
1c3cf4a
border vf
Jacqueline-cis Aug 7, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Las Vacaciones de Cody
# Las Vacaciones de Cody ✈️
Cody está aprendiendo desarrollo Frontend, hizo su primer página, y ahora necesita de tu ayuda para mejorarla.

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:
Expand All @@ -21,7 +21,7 @@ Para más detalles del concurso, reglas, y consideraciones, visita: https://codi
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
La fecha límite para enviar tu pull request es el 4 de Agosto, 11:59pm nueva fecha 6 de Agosto,11:59.

# Solución de problemas

Expand Down
86 changes: 72 additions & 14 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,96 @@
nav{
background-color: aliceblue;
padding: 15px;
background-color: rgb(154, 209, 143);
padding: 1rem;
display: flex;
justify-content: space-around;
flex-direction: ;
gap:1em;
background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco)100% );
}

main{
text-align: center;
max-width: 960px;
margin:0 auto;
font-family: 'Krub', sans-serif;
background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco)100% );
padding-inline-end: 2rem;
scroll-snap-type: y mandatory;
}

span {
font-size: 20px;
}
section{
margin-top: 3rem;
}
ul li{
text-align: left;
}
ul li::marker {
content: "🚀";
}

ol li{
text-align: left;
}
.border,
.contenedor,
.vacas,
.fotos,
.navegacion-principal{
scroll-snap-align: center;
scroll-snap-stop: always;
}


.contenedor {
width: 120rem;
margin: 0 auto;
}
.sombra {
box-shadow: 8px 19px 30px 0px rgba(131,116,116,0.75);
-webkit-box-shadow: 8px 19px 30px 0px rgba(131,116,116,0.75);
-moz-box-shadow: 8px 19px 30px 0px rgba(131,116,116,0.75);
}
.border {
border-radius: 10px 22px 10px 10px;
-webkit-border-radius: 10px 22px 10px 10px;
-moz-border-radius: 10px 22px 10px 10px;
border: 2px solid #8dc6a6;
}
@media (min-width: 768px){
.vacas {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: ;
}
}
.navegacion-principal {
background-color: var(--secundario);
background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco)100% );
background-color: var(--blanco);
padding: 2rem;

}
/*
.playa {
background-image: url(../img/playa.jpg);
background-repeat: no-repeat;
background-size: cover;
}
*/
.cursos div{
background-color: black;
color: white;
max-width: 200px;
display: inline-block;
box-shadow: 5px 5px 10px black;
margin-right: 2rem;
box-shadow: 5px 5px 10px rgb(34, 116, 52);
border-radius: 12px;
}
.fotos img{
max-width: 450px;
max-width: 300px;
display: inline-block;
border-radius: 2rem;
}
ul li{
text-align: left;
}
ul li::marker {
content: "🚀";
}

ol li{
text-align: left;
}
Binary file added public/images/playa.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 131 additions & 11 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,53 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mis vacaciones</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=Krub:wght@400;700&display=swap" rel="stylesheet">
<link rel="preload" href="css/style.css" as="style">
<link rel="stylesheet" href="css/style.css">
</head>

<body>
<main>

<main class="contenedor sombra border">


<header>
<h1>
"Codigo Facilito"
<span>Verano Facilito</span>
</h1>
<nav>
<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>

<section class=playa>

<div class="contenido-playa">
<h2>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>
</section>
</header>



<section>
<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>
<p> Cada tarde, después de conocer nuevos lugares en mis vacaciones, practicaba mis habilidades en tecnologías frontend, construyendo esta página </p>
<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>
<p> Estos son los cursos que estuve tomando </p>
<div class="cursos">
<div>
Expand Down Expand Up @@ -54,13 +78,31 @@ <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>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="88" height="88"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path
d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
</svg>
<p>
Puedes ayudarme a mejorar mi página, haciendo un fork de mi página, y enviando un pull request.
</p>
</p>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-fork" width="88" height="88"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="18" r="2" />
<circle cx="7" cy="6" r="2" />
<circle cx="17" cy="6" r="2" />
<path d="M7 8v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2 -2v-2" />
<line x1="12" y1="12" x2="12" y2="16" />
</svg>
<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>
<a href="" target="_blank">Ir al tutorial</a>

</p>
</section>
Expand All @@ -80,21 +122,99 @@ <h2>Aquí te comparto algunas fotos de mis vacaciones</h2>
</div>
</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>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>

</section>

<div class="vacas">
<section>
<ol>
<li>Mejora la salud mental</li>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-stethoscope" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M6 4h-1a2 2 0 0 0 -2 2v3.5h0a5.5 5.5 0 0 0 11 0v-3.5a2 2 0 0 0 -2 -2h-1" />
<path d="M8 15a6 6 0 1 0 12 0v-3" />
<path d="M11 3v2" />
<path d="M6 3v2" />
<circle cx="20" cy="10" r="2" />
</svg>
<li>Incrementa la motivación</li>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-battery-automotive" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<rect x="3" y="6" width="18" height="14" rx="2" />
<path d="M6 6v-2" />
<line x1="19" y1="4" x2="19" y2="6" />
<line x1="6.5" y1="13" x2="9.5" y2="13" />
<line x1="14.5" y1="13" x2="17.5" y2="13" />
<line x1="16" y1="11.5" x2="16" y2="14.5" />
</svg>
<li>Reduce el burnout</li>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mood-crazy-happy" width="88"
height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<circle cx="12" cy="12" r="9" />
<line x1="7" y1="8.5" x2="10" y2="11.5" />
<path d="M7 11.5l3 -3" />
<line x1="14" y1="8.5" x2="17" y2="11.5" />
<path d="M14 11.5l3 -3" />
<path d="M9.5 15a3.5 3.5 0 0 0 5 0" />
</svg>
<li>Mejora tu productividad y creatividad</li>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bulb" width="88" height="88"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#009988" fill="none" stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7" />
<path d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3" />
<line x1="9.7" y1="17" x2="14.3" y2="17" />
</svg>
</ol>
</header>

</header>
</div>
</section>

<section>
<form>
<fieldset>
<legend> Contactame si quieres saber ver mas de mis viajes</legend>

<div>
<label>Nombre</label>
<input type="text" placeholder="Tu Nombre">
</div>

<div>
<label>Telefono</label>
<input type="text" placeholder="Tu Telefono">
</div>
<div>
<label>Correo</label>
<input type="text" placeholder="Tu Email">
</div>
<div>
<label>Mensaje</label>
<textarea></textarea>
</div>
<div>
<input type="submit" value="Enviar">
</div>
</fieldset>
</form>

</section>

</main>
</body>

</html>