Skip to content

#VeranoFrontend #145

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

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

#VeranoFrontend #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45f7867
Avance CSS
zuanruij Aug 6, 2021
b14bb3f
Vacaciones de Cody inspirado en Piet Mondrian
zuanruij 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
30 changes: 30 additions & 0 deletions public/css/fotos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.fotos {
background-color: #221527;
padding: .5em;;
}

figure .azul {
border: 1em solid #1091e5;
}

figure .amarillo {
border: 1em solid #ffe60d;
}

figure .rojo {
border: 1em solid #f55650;
}

figure img:hover {

}

.twitter-share-button {
color: White;
padding: .5em;
text-decoration: none;
}

.twitter-share-button:hover {
transform: rotate(2deg);
}
72 changes: 68 additions & 4 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,48 @@
@font-face {
font-family: Codystar-Regular;
src: url('../fonts/Codystar-Regular.ttf');
}

@font-face {
font-family: Spartan-Thin;
src: url('../fonts/Spartan-Thin.ttf');
}

* {
font-family: Spartan-Thin;
}

h1 {
font-family: Codystar-Regular;
}

body {
background-color: #1bbc9b;
background-image: url('../images/pattern.jpg');
background-repeat: repeat;
background-size: 80%;
}

nav{
background-color: aliceblue;
padding: 15px;
display: flex;
gap:1em;
vertical-align: middle;
}

nav a {
padding-top: .5em;
width: 50%;
vertical-align: middle;
height: 1.5em;
text-decoration: none;
font-size: 2em;
color: White;
background-color: #1091e5;
}

nav a.activo {
background-color: #f55650;
}

main{
Expand All @@ -11,16 +51,17 @@ main{
margin:0 auto;
}

section{
header, section, footer{
background-color: #221527;
padding: 3em;
color: White;
margin-top: 3rem;
}

.cursos div{
background-color: black;
color: white;
max-width: 200px;
display: inline-block;
box-shadow: 5px 5px 10px black;
}
.fotos img{
max-width: 450px;
Expand All @@ -35,4 +76,27 @@ ul li::marker {

ol li{
text-align: left;
}

.cursos a {
color: white;
border: #221527 20px solid;
text-decoration: none;
}

.fondo-azul {
background-color: #1091e5;
}

.fondo-amarillo {
background-color: #ffe60d;
color: #221527 !important;
}

.fondo-rojo {
background-color: #f55650;
}

#tutorial-youtube, #fotos {
color: white;
}
Binary file added public/fonts/Codystar-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file added public/fonts/Spartan-Thin.ttf
View file
Open in desktop
Binary file not shown.
72 changes: 57 additions & 15 deletions public/fotos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,76 @@
<!DOCTYPE html>
<html lang="en">

<html lang="es">
<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>
<title>Mis vacaciones | Fotos</title>
<meta name="description" content="Galería completa de mis vacaciones">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/fotos.css">
<link rel="shortcut icon" type="image/x-icon" href="images/cody.png" />
</head>

<body>
<main>
<header>
<h1>Estas son mis Vacaciones</h1>
<p>Estas son mis 6 fotografías favoritas de estas vacaciones. :)</p>
<nav>
<a href="/">Inicio</a>
<a href="fotos.html">Fotos</a>
<a href="index.html">Inicio</a>
<a href="fotos.html" class="activo">Fotos</a>
</nav>
<h2>Galería completa de mis vacaciones</h2>
</header>
<div class="fotos">
<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">
<img src="images/4.jpg" alt="Cody en una alberca">
<img src="images/5.jpg" alt="Cody en una alberca">
<img src="images/6.jpg" alt="Cody en una alberca">

<figure>
<img src="images/1.jpg" alt="Cody en la playa" class="rojo">
<figcaption>
<a class="twitter-share-button fondo-rojo" href="https://twitter.com/intent/tweet?text=La mejor foto de Cody en sus vacaciones fue: Cody en bicicleta. @codigofacilito VeranoFrontend">
Tweet a mejor foto
</a>
</figcaption>
</figure>
<figure>
<img src="images/2.jpg" alt="Cody acampando" class="rojo">
<figcaption>
<a class="twitter-share-button fondo-rojo" href="https://twitter.com/intent/tweet?text=La mejor foto de Cody en sus vacaciones fue: Cody acampando. @codigofacilito VeranoFrontend">
Tweet a mejor foto
</a>
</figcaption>
</figure>
<figure>
<img src="images/3.jpg" alt="Cody en una alberca" class="amarillo">
<figcaption>
<a class="twitter-share-button fondo-amarillo" href="https://twitter.com/intent/tweet?text=La mejor foto de Cody en sus vacaciones fue: Cody en una alberca. @codigofacilito VeranoFrontend">
Tweet a mejor foto
</a>
</figcaption>
</figure>
<figure>
<img src="images/4.jpg" alt="Cody bebiendo coco en la playa" class="rojo">
<figcaption>
<a class="twitter-share-button fondo-rojo" href="https://twitter.com/intent/tweet?text=La mejor foto de Cody en sus vacaciones fue: Cody bebiendo coco en la playa. @codigofacilito VeranoFrontend">
Tweet a mejor foto
</a>
</figcaption>
</figure>
<figure>
<img src="images/5.jpg" alt="Cody en Italia con su Vespa" class="azul">
<figcaption>
<a class="twitter-share-button fondo-azul" href="https://twitter.com/intent/tweet?text=La mejor foto de Cody en sus vacaciones fue: Cody en Italia con su Vespa. @codigofacilito VeranoFrontend">
Tweet a mejor foto
</a>
</figcaption>
</figure>
<figure>
<img src="images/6.jpg" alt="Cody en el Aeropuerto" class="amarillo">
<figcaption>
<a class="twitter-share-button fondo-amarillo" href="https://twitter.com/intent/tweet?text=La mejor foto de Cody en sus vacaciones fue: Cody en el Aeropuerto. @codigofacilito VeranoFrontend">
Tweet a mejor foto
</a>
</figcaption>
</figure>
</div>

</main>
</body>

</html>
Binary file added public/images/cody.png
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.
Binary file added public/images/pattern.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.
48 changes: 22 additions & 26 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
<!DOCTYPE html>
<html lang="en">
<html lang="es">
<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>
<title>Mis vacaciones | Inicio</title>
<meta name="description" content="Estas son mis Vacaciones por Cody">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="images/cody.png" />
</head>
<body>
<main>
<header>
<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>
<nav>
<a href="/">Inicio</a>
<a href="index.html" class="activo">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>
</header>

<section>
<header>
<h2>Mis vacaciones Frontend</h2>
</header>
<h2>Mis vacaciones Frontend</h2>
<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>
<p>Curso profesional de Desarrollo Web</p>
</div>
<div>
<a href="https://codigofacilito.com/cursos/frontend-profesional" target="_blank">
<div class="fondo-rojo">
<p>Curso profesional de Desarrollo Web</p>
</div>
</a>
<a href="https://codigofacilito.com/cursos/primera-pagina-2019" target="_blank">
<div class="fondo-azul">
<p>Curso para crear mi primera página web</p>
</div>
</div>
</a>
</div>
</section>

<section>
<header>
<h2>Ruta de aprendizaje 2021</h2>
Expand All @@ -60,8 +62,7 @@ <h2>Colabora en mi página</h2>
</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>

<a href="https://youtu.be/xdCl0Wut-IA" target="_blank" id="tutorial-youtube">Ir al tutorial</a>
</p>
</section>
<section>
Expand All @@ -75,13 +76,12 @@ <h2>Aquí te comparto algunas fotos de mis vacaciones</h2>
<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>
<a href="fotos.html" id="fotos">Ir a la galería</a>
</p>
</div>
</section>

<section>
<header>
</main>
<footer>
<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>
Expand All @@ -91,10 +91,6 @@ <h2>La importancia de las vacaciones</h2>
<li>Reduce el burnout</li>
<li>Mejora tu productividad y creatividad</li>
</ol>
</header>

</section>

</main>
</footer>
</body>
</html>