diff --git a/package.json b/package.json index 6d7cf5f..e82e514 100644 --- a/package.json +++ b/package.json @@ -13,4 +13,4 @@ "nib": "^1.1.2", "stylus": "^0.54.7" } -} \ No newline at end of file +} diff --git a/public/index.html b/public/index.html index cc00314..07ea477 100644 --- a/public/index.html +++ b/public/index.html @@ -1,17 +1,162 @@ + + + + Fundamentos de JavaScript + + + - - - - Hola Stylus - - - - -
-

¡Hola Stylus!

-
- - - \ No newline at end of file + +
+
+ +

Fundamentos de Javascript

+

+ 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. +

+ +
+
+ + + + +
+
+
+ +
+

Variables

+

+ 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. +

+ Aprender más +
+
+
+
+

Funciones

+

+ 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. +

+ Aprender más +
+ +
+
+ +
+

Objetos

+

+ 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. +

+ Aprender más +
+
+
+
+
+

Tips&Tricks

+
+
+ +

Conoce los Shortcuts

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

+
+
+ +

Debes conocer esto

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

+
+
+ +

Lo mejor de Vanilla

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

+
+
+
+
+

Aprende más rápido

+

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

+ Pruebalo ahora + +
+
+
+
+

Precios

+
+
+

Novato

+
$19
+
    +
  • 3 sesiones
    • +
+ +
+
+

Profesional

+
$39
+
    +
  • 6 sesiones
    • +
+ +
+
+

Master

+
$59
+
    +
  • 9 sesiones
    • +
+ +
+
+
+
+

+ "Aquellos que tienen el privilegio de saber tienen la obligación de + actuar" +

+
- Albert Einstein
+
+ + + diff --git a/public/main.css b/public/main.css index 4d91605..55144bd 100644 --- a/public/main.css +++ b/public/main.css @@ -1 +1 @@ -body{background-color:#a3a4ff;margin:0;padding:0;font-size:16px}div{background-color:#51527f;color:#fff;padding:1em;margin:15px;border-radius:15px;border:1px solid #fff} \ No newline at end of file +h1{font-family:'Montserrat',sans-serif;font-weight:800;font-size:65px;line-height:1em}@media (max-width:1199px){h1{font-size:44px}}@media (max-width:599px){h1{font-size:34px}}h2{font-family:'Montserrat',sans-serif;font-weight:800;font-size:44px;line-height:1em}@media (max-width:1199px){h2{font-size:34px}}@media (max-width:599px){h2{font-size:24px}}h3{font-family:'Montserrat',sans-serif;font-weight:800;font-size:34px;line-height:1em}@media (max-width:1199px){h3{font-size:24px}}@media (max-width:599px){h3{font-size:18px}}h4{font-family:'Montserrat',sans-serif;font-weight:800;font-size:24px;line-height:1em}@media (max-width:1199px){h4{font-size:18px}}@media (max-width:599px){h4{font-size:18px}}p{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:400}a{color:#f7d31e;font-size:16px;transition:all .5s;cursor:pointer}a:hover{color:#ebebeb}*{margin:0;padding:0}body{background-color:#2d334a}.hero{display:grid;grid-template-columns:25% 1fr 25%;min-height:70vh;padding-bottom:80px;background:#f7d31e}@media (max-width:1199px){.hero{grid-template-columns:5% 1fr 5%}}.hero__info{grid-column-start:2;display:flex;flex-direction:column;justify-content:center;align-items:center}.hero__info h1,.hero__info p{text-align:center;color:#2d334a;text-align:center;margin-bottom:16px}.hero__info .logo{width:120px;margin-bottom:-8px}button{margin-top:16px;padding:16px 48px;border-radius:8px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;background-color:#2d334a;color:#f7d31e;border:none;cursor:pointer;transition:all .5s}button:hover{background-color:#ebebeb;color:#2d334a;transform:scale(1.1)}svg{position:absolute}@media (max-width:599px){svg{display:none}}.cover{position:relative;width:60%;margin-top:-128px;margin-left:20%;margin-right:20%;border-radius:16px}.body{display:grid;grid-template-columns:15% 1fr 15%;padding:64px 0}@media (max-width:1199px){.body{grid-template-columns:16px 1fr 16px;padding:32px 0}}.body__wrapper{display:flex;flex-direction:column;grid-column-start:2}.body__theme{margin-top:32px;display:flex;flex-direction:row;align-items:center;justify-content:center}@media (max-width:599px){.body__theme{flex-direction:column}}.body__theme h3,.body__theme p{margin-bottom:16px}.body__theme img{width:45%;height:auto;padding:16px;border-radius:16px}@media (max-width:599px){.body__theme img{width:90%}}.body__info{width:55%;padding:16px;color:#ebebeb}@media (max-width:599px){.body__info{width:90%}}.tips{padding:32px 0}@media (max-width:599px){.tips{padding:16px 0}}.tips h2{margin-bottom:32px;text-align:center;color:#ebebeb}.tips__wrapper{margin:0 12%;display:flex;flex-direction:row}@media (max-width:1199px){.tips__wrapper{margin:0 5%}}@media (max-width:599px){.tips__wrapper{flex-direction:column}}.tips .trick{width:25%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px}@media (max-width:599px){.tips .trick{width:90%;padding:16px}}.tips .trick h4,.tips .trick p{color:#ebebeb;text-align:center}.tips .cta{width:60%;margin:32px auto;background-color:#f7d31e;border-radius:16px;padding:32px 0}@media (max-width:1199px){.tips .cta{margin:32px 10%;padding:16px/2}}@media (max-width:599px){.tips .cta{width:90%;margin:0}}.tips .cta h3,.tips .cta p{color:#2d334a;margin-bottom:32px;text-align:center}@media (max-width:599px){.tips .cta h3,.tips .cta p{margin:16px}}.tips .cta button{text-align:center}.tips .cta__info{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.icon{margin:16px;width:40px;color:#2d334a;transition:all .5s;cursor:pointer}.icon:hover{transform:scale(1.2)}.prices{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:64px 0}.prices h2{color:#ebebeb}.prices__article{display:flex;flex-direction:row;justify-content:space-between}@media (max-width:599px){.prices__article{flex-direction:column}}.prices__item{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#ebebeb;margin:16px;padding:32px;border-radius:16px;transition:all .5s}.prices__item:hover{transform:scale(1.2)}.prices h4{color:#2d334a}.prices h5{color:#2d334a;font-family:'Montserrat',sans-serif;font-size:64px;font-weight:400}.prices li{color:#2d334a}.quote{width:60%;margin:0 auto;color:#f7d31e;padding:32px 16px;text-align:left}@media (max-width:599px){.quote{width:80%;padding:0 16px;margin-bottom:32px}}.quote h2{margin-bottom:16px;font-style:italic;font-weight:800}.quote h5{font-family:'Montserrat',sans-serif;font-size:32px;font-weight:400}@media (max-width:599px){.quote h5{font-size:16px}}footer{display:flex;flex-direction:row;flex-wrap:nowrap;background-color:#f7d31e;padding:64px 20%}@media (max-width:1199px){footer{flex-wrap:wrap;padding:32px 5%}}footer h4,footer p,footer a{color:#2d334a}footer h4 img,footer p img,footer a img{width:220px}footer .footer_info{width:70%;padding:16px}@media (max-width:1199px){footer .footer_info{width:100%}}footer .footer_social{width:30%;padding:16px}@media (max-width:1199px){footer .footer_social{width:100%}}footer .footer_social .social__wrapper{display:flex;flex-direction:row;justify-content:space-around;padding-top:32px}@media (max-width:599px){footer .footer_social .social__wrapper{padding-top:16px}} \ No newline at end of file diff --git a/src/img/behance.svg b/src/img/behance.svg new file mode 100644 index 0000000..dbfd8c5 --- /dev/null +++ b/src/img/behance.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/cover.png b/src/img/cover.png new file mode 100644 index 0000000..20da3f4 Binary files /dev/null and b/src/img/cover.png differ diff --git a/src/img/funciones.png b/src/img/funciones.png new file mode 100644 index 0000000..69d078f Binary files /dev/null and b/src/img/funciones.png differ diff --git a/src/img/github.svg b/src/img/github.svg new file mode 100644 index 0000000..06f8b68 --- /dev/null +++ b/src/img/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/instagram.svg b/src/img/instagram.svg new file mode 100644 index 0000000..25f7d9d --- /dev/null +++ b/src/img/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 0000000..f4781c0 Binary files /dev/null and b/src/img/logo.png differ diff --git a/src/img/objetos.png b/src/img/objetos.png new file mode 100644 index 0000000..69d078f Binary files /dev/null and b/src/img/objetos.png differ diff --git a/src/img/twitter.svg b/src/img/twitter.svg new file mode 100644 index 0000000..4220273 --- /dev/null +++ b/src/img/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/variables.png b/src/img/variables.png new file mode 100644 index 0000000..2d10277 Binary files /dev/null and b/src/img/variables.png differ diff --git a/src/styles/main.styl b/src/styles/main.styl index 9f79dfc..7512ae5 100644 --- a/src/styles/main.styl +++ b/src/styles/main.styl @@ -1,22 +1,312 @@ -$primary-color = #A3A4FF; -$seconday-color = #51527F; +$yellow = #F7D31E +$black = #2D334A +$white = #EBEBEB -border-radius(n) - border-radius n - border 1px solid white +$bold = 800 +$regular = 400 -sum(a, b) - a + b +$font = 'Montserrat', sans-serif; +$space = 16px -body - background-color $primary-color +$phone = 599px +$tablet = 1199px + +mixin-titles($size) + font-family $font + font-weight $bold + font-size $size + line-height 1em + +h1 + mixin-titles(65px) + @media (max-width $tablet) + font-size: (44px) + @media (max-width $phone) + font-size: (34px) + +h2 + mixin-titles(44px) + @media (max-width $tablet) + font-size: (34px) + @media (max-width $phone) + font-size: (24px) + +h3 + mixin-titles(34px) + @media (max-width $tablet) + font-size: (24px) + @media (max-width $phone) + font-size: (18px) + +h4 + mixin-titles(24px) + @media (max-width $tablet) + font-size: (18px) + @media (max-width $phone) + font-size: (18px) + +p + font-family $font + font-size $space + font-weight $regular + +a + color $yellow + font-size $space + transition all 0.5s + cursor pointer + &:hover + color $white + +* margin 0 padding 0 - font-size 16px - -div - background-color $seconday-color - color white - padding 1em - margin sum(10px, 5) - border-radius(15px) + +body + background-color $black + +.hero + display grid + grid-template-columns 25% 1fr 25% + min-height 70%vh + padding-bottom $space * 5 + background $yellow + @media (max-width $tablet) + grid-template-columns 5% 1fr 5% + &__info + grid-column-start 2 + display flex + flex-direction column + justify-content center + align-items center + h1, p + text-align center + color $black + text-align center + margin-bottom $space + .logo + width 120px + margin-bottom -($space / 2) + +button + margin-top $space + padding ($space) ($space * 3) + border-radius ($space / 2) + font-family $font + font-weight $bold + font-size $space + background-color $black + color $yellow + border none + cursor pointer + transition: all 0.5s + &:hover + background-color $white + color $black + transform: scale(1.1) + +svg + position absolute + @media (max-width $phone) + display none + +.cover + position relative + width 60% + margin-top -($space * 8) + margin-left 20% + margin-right 20% + border-radius $space + @media (max-width $tablet) + m + +.body + display grid + grid-template-columns 15% 1fr 15% + padding ($space * 4) 0 + @media (max-width $tablet) + grid-template-columns 16px 1fr 16px + padding ($space * 2) 0 + + &__wrapper + display flex + flex-direction column + grid-column-start 2 + &__theme + margin-top $space * 2 + display flex + flex-direction row + align-items center + justify-content center + @media (max-width $phone) + flex-direction column + h3, p + margin-bottom $space + img + width 45% + height auto + padding $space + border-radius $space + @media (max-width $phone) + width 90% + &__info + width 55% + padding $space + color $white + @media (max-width $phone) + width 90% + +.tips + padding ($space * 2) 0 + @media (max-width $phone) + padding $space 0 + h2 + margin-bottom $space*2 + text-align center + color $white + &__wrapper + margin 0px 12% + display flex + flex-direction row + @media(max-width $tablet) + margin 0px 5% + @media (max-width $phone) + flex-direction column + + .trick + width 25% + display flex + flex-direction column + justify-content center + align-items center + padding $space * 2 + @media (max-width $phone) + width 90% + padding $space + h4, p + color $white + text-align center + .cta + width 60% + margin ($space * 2) auto + background-color $yellow + border-radius $space + padding ($space * 2) 0px + @media (max-width $tablet) + margin ($space * 2) 10% + padding $space / 2 + @media (max-width $phone) + width 90% + margin 0 + h3, p + color $black + margin-bottom $space * 2 + text-align center + @media (max-width $phone) + margin $space + button + text-align center + &__info + display flex + flex-direction column + justify-content center + align-items center + width 100% + +.icon + margin $space + width 40px + color $black + transition all .5s + cursor pointer + &:hover + transform scale(1.2) + +.prices + display flex + flex-direction column + justify-content center + align-items center + padding ($space * 4) 0 + h2 + color $white + &__article + display flex + flex-direction row + justify-content space-between + @media (max-width $phone) + flex-direction column + &__item + display flex + flex-direction column + justify-content center + align-items center + background-color $white + margin $space + padding $space * 2 + border-radius $space + transition all .5s + &:hover + transform scale(1.2) + h4 + color $black + h5 + color $black + font-family $font + font-size $space * 4 + font-weight $regular + li + color $black + +.quote + width 60% + margin 0 auto + color $yellow + padding ($space * 2) ($space) + text-align left + @media (max-width $phone) + width 80% + padding 0 16px + margin-bottom $space * 2 + h2 + margin-bottom $space + font-style italic + font-weight $bold + h5 + font-family $font + font-size $space * 2 + font-weight $regular + @media (max-width $phone) + font-size $space + + +footer + display flex + flex-direction row + flex-wrap nowrap + background-color $yellow + padding ($space * 4) 20% + @media (max-width $tablet) + flex-wrap wrap + padding ($space * 2) 5% + h4, p, a + color $black + img + width 220px + .footer_info + width 70% + padding $space + @media (max-width $tablet) + width 100% + .footer_social + width 30% + padding $space + @media (max-width $tablet) + width 100% + .social__wrapper + display flex + flex-direction row + justify-content space-around + padding-top $space * 2 + @media (max-width $phone) + padding-top $space \ No newline at end of file