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

Jump to bottom

🌟 Proyecto #VeranoFrontend | Ramiro Cabrera V2 #133

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🌟 Proyecto #VeranoFrontend | Ramiro Cabrera V2 #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
165 changes: 165 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
<!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="icon" type="image/vnd.microsoft.icon" href="./public/images/cody.ico">
<link rel="stylesheet" href="./public/css/styles.css">
<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=Playfair+Display:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<main>
<header class="hero">
<div class="nav__container">
<nav class="nav">
<a class="nav__link active" href="./index.html">Inicio</a>
<a class="nav__link" href="./public/fotos.html">Fotos</a>
<a class="nav__link" href="./public/codyGame.html">Cody_404</a>
</nav>
</div>
<section class="hero__main container">
<div class="hero__texts">
<h1>Estas son mis Vacaciones .<span>&#160</span></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>
<a href="./public/codyGame.html" class="cta">Jugar a Cody_404!</a>
</div>
<img src="./public/images/cody-hi.png" alt="Cody saltando y sonriendo">
</section>
</header>
<div class="wave-svg" style="height: 160px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C134.59,135.69 288.09,-44.89 500.00,49.98 L500.00,0.00 L0.00,0.00 Z" style="stroke: none; fill: #18191a;"></path></svg></div>

<section class="container animate">
<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> Estos son los cursos que estuve tomando </p>
<div class="courses-container">
<div class="course-item">
<a href="https://codigofacilito.com/cursos/frontend-profesional" target="_blank"><p>Curso profesional de Desarrollo Web</p></a>
</div>
<div class="course-item">
<a href="https://codigofacilito.com/cursos/primera-pagina-2019" target="_blank"><p>Curso para crear mi primera página web</p></a>
</div>
</div>
</section>

<section class="container animate">
<header>
<h2>Ruta de aprendizaje 2021</h2>
<p> También me propuse aprender nuevas tecnologías durante 2021</p>
</header>
<div class="card-container">
<div class="card-item">
<p>🚀Flexbox, y Grid</p>
</div>
<div class="card-item">
<p>🚀Animaciones con CSS y JavaScript</p>
</div>
<div class="card-item">
<p>🚀AJAX</p>
</div>
<div class="card-item">
<p>🚀HTML semántico</p>
</div>
<div class="card-item item5">
<p>🚀Entre otros</p>
</div>
</div>
</section>
<section class="container animate">
<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="https://codigofacilito.com/verano/concurso" target="_blank" >Ir al tutorial</a>

</p>
</section>
<section class="container animate">
<header>
<h2>Aquí te comparto algunas fotos de mis vacaciones</h2>
<p>¡Bien! Sé que estás aquí por mis vacaciones, aquí te comparto algunas fotos que tomé:</p>
</header>
<div class="slider">
<div class="slider-container">
<img src="./public/images/1.jpg" alt="Cody dando un paseo en bicicleta en la playa">
<img src="./public/images/2.jpg" alt="Cody acampando en la orilla de una playa">
<img src="./public/images/3.jpg" alt="Cody relajandose en una alberca con un refresco y un flotador">
</div>
<div class="controls">
<ul>

</ul>
</div>
</div>
<p class="black-text">
Puedes ver más, en la galería de fotos de mi página
<a href="./public/fotos.html">Ir a la galería</a>
</p>
</section>

<section class="container animate">
<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>
<div class="card-container">
<div class="card-item">
<p>Mejora la salud mental</p>
</div>
<div class="card-item">
<p>Incrementa la motivación</p>
</div>
<div class="card-item">
<p>Reduce el burnout</p>
</div>
<div class="card-item">
<p>Mejora tu productividad y creatividad</p>
</div>
</div>
</header>

</section>

<section class="container">
<header>
<h2>Noticia de Última Hora</h2>
</header>
<p> Todo eran risas y diversión en las vacaciones de Cody, hasta que se dió cuenta de que en donde se estaba quedando no había conexión a internet. Ayuda a Cody a divertirse jugando con él a <a href="./public/codyGame.html">Cody_404</a>. ¿Aceptas el desafio de llegar a los 404 puntos para ganar el juego? Cody y yo confíamos en que lo harás...</p>
</section>
<div class="wave-svg" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-1.97,112.98 C148.69,69.56 400.96,165.28 500.00,49.98 L501.41,159.38 L0.00,150.00 Z" style="stroke: none; fill: #18191a;"></path></svg></div>
<footer class="footer">
<address>
<div class="footer__container">
<div class="box__footer">
<div class="terms">
<p>Esta es mi página para el concurso de #VeranoFrontend de códigofacilito.</p>
</div>
</div>
</div>
<div class="box__copyright">
<hr>
<p>Desarrollado con el ❤ por <b>Ramiro Cabrera</b></p>
</div>
</address>
</footer>

</main>
<script src="./src/javascript/Slider.js"></script>
<script src="./src/javascript/animate.js"></script>
</body>
</html>
35 changes: 35 additions & 0 deletions public/codyGame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!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>Cody_404</title>
<link rel="icon" type="image/vnd.microsoft.icon" href="./images/cody.ico">
<link rel="stylesheet" href="css/codyGame.css">
<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=Noto+Sans+JP:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap" rel="stylesheet">
</head>
</head>

<body>
<div class="actions">
<a href="../index.html" class="actions__btn" >X</a>
<a href="./codyGame.html" class="actions__btn">↺</a>
</div>
<div class="contenedor">
<div class="suelo"></div>
<div class="cody cody-corriendo"></div>
<div class="score">0</div>
</div>

<div class="game-over">GAME OVER</div>
<div class="you-win">Ganaste, y salvaste a <br/> Cody de aburrirse. Felicidades!</div>

<script src='../src/javascript/codyGame.js'></script>
</body>

</html>
147 changes: 147 additions & 0 deletions public/css/codyGame.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
* {
padding: 0;
margin: 0;
}

body{
height: 100vh;
background: #242526;
display: flex;
align-items: center;
}

.actions {
position: absolute;
top: 0;
margin: 2rem;
}

.actions__btn {
margin: 0 1rem 0 0;
text-decoration: none;
padding: .5rem .75rem;
font-size: 20px;
border-radius: 5px;
background-color: #5bcc85;
color: #fff;
}

.contenedor {
width: 920px;
height: 280px;
margin: 0 auto;
position: relative;
border: solid 3px #5bcc85;
background: linear-gradient(#b7d6c7, transparent) #ffe2d1;
transition: background-color 1s linear;
overflow: hidden;
}

.mediodia {
background-color: #ffdcf3;
}

.tarde {
background-color: #ffadad;
}

.noche {
background-color: #aca8c7;
}

.cody {
width: 84px;
height: 84px;

position: absolute;
bottom: 22px;
left: 42px;
z-index: 2;

background: url(../images/codyGame.png) repeat-x 0px 0px;
background-size: 84px 84px;
background-position-x: 0px;

}

.suelo {
width: 200%;
height: 42px;

position: absolute;
bottom: 0;
left: 0;

background: url(../images/suelo.png) repeat-x 0px 0px;
background-size: 50% 42px;

}

.cactus{
width: 46px;
height: 96px;

position: absolute;
bottom: 16px;
left: 600px;
z-index: 1;

background: url(../images/cactus1.png) no-repeat;
}
.cactus2{
width: 98px;
height: 66px;

background: url(../images/cactus2.png) no-repeat;
}

.nube{
width: 92px;
height: 26px;

position: absolute;
z-index: 0;

background: url(../images/nube.png) no-repeat;
background-size: 92px 26px;
}

.score{
width: 100px;
height: 30px;

position: absolute;
top: 5px;
right: 15px;
z-index: 10;

color: #5bcc85;
font-family: Verdana;
font-size: 30px;
font-weight: bold;
text-align: right;
}

.game-over{
display: none;
position: absolute;
width: 100%;
z-index: 10;
text-align: center;
color: #5bcc85;
font-size: 30px;
font-family: Verdana;
font-weight: 700;
}

.you-win{
display: none;
position: absolute;
width: 100%;
z-index: 10;
text-align: center;
color: #5bcc85;
font-size: 30px;
font-family: Verdana;
font-weight: 700;
}
Loading