Skip to content

Challenge CSS 01 Complete #2

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
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Challenge CSS 01 Complete #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fcd60fc
First 140 lines
May 24, 2020
2e6cc96
First group of images
May 24, 2020
d6e9b68
Primeras 210 lineas, antes de incorporar animaciones
May 28, 2020
49f5698
Final del reto
May 31, 2020
69024ab
SVG de Redes Sociales
May 31, 2020
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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,4 @@
"nib": "^1.1.2",
"stylus": "^0.54.7"
}
}
}
173 changes: 159 additions & 14 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fundamentos de JavaScript</title>
<link rel="stylesheet" href="main.css" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap"
rel="stylesheet"
/>
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hola Stylus</title>
<link rel="stylesheet" href="main.css">
</head>

<body>
<div>
<h1>¡Hola Stylus!</h1>
</div>
</body>

</html>
<body>
<section class="hero">
<div class="hero__info">
<img class="logo" src="../src/img/logo.png" alt="" />
<h1>Fundamentos de Javascript</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<button>Comenzar ahora</button>
</div>
</section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#F7D31E"
fill-opacity="1"
d="M0,192L20,213.3C40,235,80,277,120,256C160,235,200,149,240,133.3C280,117,320,171,360,186.7C400,203,440,181,480,149.3C520,117,560,75,600,69.3C640,64,680,96,720,117.3C760,139,800,149,840,128C880,107,920,53,960,69.3C1000,85,1040,171,1080,202.7C1120,235,1160,213,1200,170.7C1240,128,1280,64,1320,48C1360,32,1400,64,1420,80L1440,96L1440,0L1420,0C1400,0,1360,0,1320,0C1280,0,1240,0,1200,0C1160,0,1120,0,1080,0C1040,0,1000,0,960,0C920,0,880,0,840,0C800,0,760,0,720,0C680,0,640,0,600,0C560,0,520,0,480,0C440,0,400,0,360,0C320,0,280,0,240,0C200,0,160,0,120,0C80,0,40,0,20,0L0,0Z"
></path>
</svg>
<img class="cover" src="../src/img/cover.png" alt="" />
<article class="body">
<div class="body__wrapper">
<div class="body__theme">
<img src="../src/img/variables.png" alt="" />
<div class="body__info">
<h3>Variables</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<a>Aprender más</a>
</div>
</div>
<div class="body__theme">
<div class="body__info">
<h3>Funciones</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<a>Aprender más</a>
</div>
<img src="../src/img/funciones.png" alt="" />
</div>
<div class="body__theme">
<img src="../src/img/objetos.png" alt="" />
<div class="body__info">
<h3>Objetos</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<a>Aprender más</a>
</div>
</div>
</div>
</article>
<article class="tips">
<h2>Tips&Tricks</h2>
<div class="tips__wrapper">
<div class="trick">
<i></i>
<h4>Conoce los Shortcuts</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="trick">
<i></i>
<h4>Debes conocer esto</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="trick">
<i></i>
<h4>Lo mejor de Vanilla</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</div>
<section class="cta">
<div class="cta__info">
<h3>Aprende más rápido</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<a href="#">Pruebalo ahora</a>
<button>Comienza ahora</button>
</div>
</section>
</article>
<article class="prices">
<h2>Precios</h2>
<section class="prices__article">
<div class="prices__item">
<h4>Novato</h4>
<h5>$19</h5>
<ul>
<li>3 sesiones</li>
</ul>
<button>¡Lo quiero!</button>
</div>
<div class="prices__item item-principal">
<h4>Profesional</h4>
<h5>$39</h5>
<ul>
<li>6 sesiones</li>
</ul>
<button>¡Lo quiero!</button>
</div>
<div class="prices__item">
<h4>Master</h4>
<h5>$59</h5>
<ul>
<li>9 sesiones</li>
</ul>
<button>¡Lo quiero!</button>
</div>
</section>
</article>
<section class="quote">
<h2>
"Aquellos que tienen el privilegio de saber tienen la obligación de
actuar"
</h2>
<h5>- Albert Einstein</h5>
</section>
</body>
<footer>
<div class="footer_info">
<h4>Creado por</h4>
<a href="https://twitter.com/HectorDevX" target="blank">
<img src="../src/img/logo.png" alt="" />
</a>
<p>
Trabajo duro y apasionadamente en todos los proyectos, ejerzo el
liderazgo con mis equipos y aporto creatividad en la experiencia de la
educación visual. Trabajemos juntos.
</p>
</div>
<div class="footer_social">
<h4>Sigueme en</h4>
<div class="social__wrapper">
<img class="icon" src="../src/img/behance.svg" alt="Behance" />
<img class="icon" src="../src/img/instagram.svg" alt="Instagram" />
<img class="icon" src="../src/img/twitter.svg" alt="Twitter" />
<img class="icon" src="../src/img/github.svg" alt="Github" />
</div>
</div>
</footer>
</html>
2 changes: 1 addition & 1 deletion public/main.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/img/behance.svg
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 src/img/cover.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 src/img/funciones.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.
1 change: 1 addition & 0 deletions src/img/github.svg
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.
Loading