diff --git a/dist/css/home.css b/dist/css/home.css index b66441d..6725212 100644 --- a/dist/css/home.css +++ b/dist/css/home.css @@ -1 +1 @@ -body{font-family:Karla,Helvetica,Arial,sans-serif;font-size:16px;color:rgba(0,0,0,.86);font-weight:400}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#4990e2;text-decoration:none}strong{font-weight:700}.homepage .main-header{background-color:#fff;box-shadow:0 2px 2px rgba(0,0,0,.05);height:80px;z-index:1}.homepage .main-header .main-header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;height:100%}.homepage .main-header .logo{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row}.homepage .main-header .logo .logo-image{margin-right:10px;width:36px;height:36px;border-radius:10px}.homepage .main-header .logo .logo-text{margin:0;font-size:16px;font-weight:400}.homepage .main-header .logo .logo-text .title{display:inline-block;margin-bottom:4px}.homepage .main-header .logo .logo-text .subtitle{color:rgba(0,0,0,.54)}.homepage .main-header .main-navigation{display:inline-block}.homepage .main-header .main-navigation-list{display:-ms-flexbox;display:flex;padding:10px;list-style-type:none}.homepage .main-header .main-navigation-item{padding:6px;margin:0 14px}.homepage .main-header .main-navigation-item a{color:rgba(0,0,0,.54);transition:color .2s}.homepage .main-header .main-navigation-item a.active,.homepage .main-header .main-navigation-item a:hover{color:rgba(0,0,0,.86)}.homepage .hero{color:#fff;text-align:center;position:relative;min-height:420px;padding-top:90px;background-color:#53acdc}.homepage .hero .diagonal-divider{width:0;height:0;border-right:100vw solid #fff;border-top:100px solid #53acdc}.homepage .hero .hero-title{font-size:32px;font-weight:400}.homepage .hero .hero-description{font-weight:400;font-size:18px;line-height:1.75em}.homepage .hero .video-launcher{position:relative;margin:60px auto -160px;width:600px;height:320px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/4/6/a/3/highres_453138083.jpeg);background-size:cover;border-radius:3px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.homepage .hero .video-launcher .video-launcher-btn{text-transform:uppercase;font-size:14px;padding:14px 28px;border-radius:3px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);border:none;cursor:pointer;transition:transform .2s}.homepage .hero .video-launcher .video-launcher-btn:hover{transform:scale(1.025)}.homepage .about-us{margin-top:200px}.homepage .about-us .section-description{font-size:18px;line-height:1.5em;color:rgba(0,0,0,.86)}.homepage .section-title{text-align:center;font-size:32px;font-weight:400;margin-bottom:40px} \ No newline at end of file +body{font-family:Karla,Helvetica,Arial,sans-serif;font-size:16px;color:rgba(0,0,0,.86);font-weight:400}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#4990e2;text-decoration:none}strong{font-weight:700}.homepage .main-header{background-color:#fff;box-shadow:0 2px 2px rgba(0,0,0,.05);height:80px;z-index:1}.homepage .main-header .main-header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;height:100%}.homepage .main-header .logo{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row}.homepage .main-header .logo .logo-image{margin-right:10px;width:36px;height:36px;border-radius:10px}.homepage .main-header .logo .logo-text{margin:0;font-size:16px;font-weight:400}.homepage .main-header .logo .logo-text .title{display:inline-block;margin-bottom:4px}.homepage .main-header .logo .logo-text .subtitle{color:rgba(0,0,0,.54)}.homepage .main-header .main-navigation{display:inline-block}.homepage .main-header .main-navigation-list{display:-ms-flexbox;display:flex;padding:10px;list-style-type:none}.homepage .main-header .main-navigation-item{padding:6px;margin:0 14px}.homepage .main-header .main-navigation-item a{color:rgba(0,0,0,.54);transition:color .2s}.homepage .main-header .main-navigation-item a.active,.homepage .main-header .main-navigation-item a:hover{color:rgba(0,0,0,.86)}.homepage .hero{color:#fff;text-align:center;position:relative;min-height:420px;padding-top:90px;background-color:#53acdc}.homepage .hero .diagonal-divider{width:0;height:0;border-right:100vw solid #fff;border-top:100px solid #53acdc}.homepage .hero .hero-title{font-size:32px;font-weight:400}.homepage .hero .hero-description{font-weight:400;font-size:18px;line-height:1.75em}.homepage .hero .video-launcher{position:relative;margin:60px auto -160px;width:600px;height:320px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/4/6/a/3/highres_453138083.jpeg);background-size:cover;border-radius:3px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.homepage .hero .video-launcher .video-launcher-btn{text-transform:uppercase;font-size:14px;padding:14px 28px;border-radius:3px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);border:none;cursor:pointer;transition:transform .2s}.homepage .hero .video-launcher .video-launcher-btn:hover{transform:scale(1.025)}.homepage .about-us{margin-top:200px}.homepage .about-us .section-description{font-size:18px;line-height:1.5em;color:rgba(0,0,0,.86)}.homepage .section-title{text-align:center;font-size:32px;font-weight:400;margin-bottom:40px}.homepage .meetups{color:#fff;position:relative;background-color:#000;padding-bottom:160px}.homepage .meetups .diagonal-divider{width:0;height:0;border-left:100vw solid #fff;border-bottom:100px solid #000}.homepage .meetups .title{margin-top:160px;font-weight:400;text-align:center}.homepage .meetups .meetup-card{background-color:rgba(255,255,255,.9);border-radius:3px;margin:auto;width:560px;height:335px}.homepage .meetups .meetup-card .content{padding-top:19px;padding-left:30px}.homepage .meetups .meetup-card .content h3{color:#000}.homepage .meetups .meetup-card .content .meetup-btn{text-transform:uppercase;background-color:#53acdc;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.1);border:none;cursor:pointer;transition:transform .2s;padding:13px 78px;color:#fff}.homepage .meetups .meetup-card .content .meetup-btn:hover{transform:scale(1.025)}.homepage .meetups .meetup-card .content .meetup-info .info-label{color:rgba(0,0,0,.54);text-transform:uppercase}.homepage .meetups .meetup-card .content .meetup-info .info-text{color:rgba(0,0,0,.86)} \ No newline at end of file diff --git a/src/styles/_general.scss b/src/styles/_general.scss index 1dbbfd1..9603a2f 100644 --- a/src/styles/_general.scss +++ b/src/styles/_general.scss @@ -2,6 +2,7 @@ $color-text-black: rgba(#000, .86); $color-text: $color-text-black; $color-text-light: rgba(#000, .54); $color-text-lighter: rgba(#000, .26); +$background-light-blue: #53ACDC; $text-color: $color-text-black; $link-color: #4990E2; @@ -51,4 +52,4 @@ a { strong { font-weight: $font-weight-bold; -} \ No newline at end of file +} diff --git a/src/styles/_hero.scss b/src/styles/_hero.scss index f07f725..e5fe11d 100644 --- a/src/styles/_hero.scss +++ b/src/styles/_hero.scss @@ -4,13 +4,13 @@ position: relative; min-height: 420px; padding-top: 90px; - background-color: #53ACDC; + background-color: $background-light-blue; .diagonal-divider { width: 0; height: 0; border-right: 100vw solid white; - border-top: 100px solid #53ACDC; + border-top: 100px solid $background-light-blue; } .hero-title { @@ -52,4 +52,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/styles/_meetups.scss b/src/styles/_meetups.scss new file mode 100644 index 0000000..088f2ce --- /dev/null +++ b/src/styles/_meetups.scss @@ -0,0 +1,75 @@ +.meetups { + color: white; + position: relative; + background-color: #000000; + padding-bottom: 160px; + + .diagonal-divider { + width: 0; + height: 0; + border-left: 100vw solid white; + border-bottom: 100px solid #000000; + } + + .title { + margin-top: 160px; + font-weight: $font-weight-normal; + text-align: center; + margin-bottom: 40px; + } + + + .meetup-card { + background-color: rgba(255, 255, 255, 0.9); + border-radius: $border-radius-base; + margin: auto; + width: 560px; + height: 335px; + + .content { + padding-top: 19px; + padding-left: 30px; + + h3 { + color: #000000; + } + + .meetup-btn { + text-transform: uppercase; + background-color: $background-light-blue; + border-radius: 3px; + box-shadow: 0 2px 4px rgba(black, 0.1); + border: none; + cursor: pointer; + transition: transform 0.2s; + padding: 13px 78px; + color: #FFF; + display: inline-block; + margin-top: 16px; + + &:hover { + transform: scale(1.025); + } + } + + .meetup-info { + .info-text { + margin-bottom: 20px; + } + + span { + display: block; + } + + .info-label { + color: $color-text-light; + text-transform: uppercase; + } + + .info-text { + color: $color-text-black; + } + } + } + } +} diff --git a/src/styles/home.scss b/src/styles/home.scss index 0aa8e5b..87aade4 100644 --- a/src/styles/home.scss +++ b/src/styles/home.scss @@ -4,4 +4,5 @@ @import 'header'; @import 'hero'; @import 'about-us'; -} \ No newline at end of file + @import 'meetups'; +} diff --git a/src/templates/includes/meetups.pug b/src/templates/includes/meetups.pug index 7acdf90..05db91e 100644 --- a/src/templates/includes/meetups.pug +++ b/src/templates/includes/meetups.pug @@ -1,29 +1,18 @@ section.meetups + .diagonal-divider .container - h2 Proximos encuentros + h2.title Proximo encuentro article.meetup-card .content - h3.meetup-title freeCodeCamp BA S02E01 + h3#nombre freeCodeCamp BA S02E01 .meetup-info - span.info-label Fecha: - span.info-text Domingo 12/17 - span.info-label Horario: - span.info-text 16:00 a 20:00 - span.info-label Lugar: - span.info-text Area Tres (El Salvador 5000) - button Inscribite + span.info-label Fecha: + span.info-text#fecha Domingo 12/17 + span.info-label Horario: + span.info-text#horario 16:00 a 20:00 + span.info-label Lugar: + span.info-text#lugar Area Tres (El Salvador 5000) + + a(href="" target="_blank" rel="noopener noreferrer").meetup-btn Inscribite .image img(src="", alt="") - article.meetup-card - .content - h3.meetup-title freeCodeCamp BA S02E01 - .meetup-info - span.info-label Fecha: - span.info-text Domingo 12/17 - span.info-label Horario: - span.info-text 16:00 a 20:00 - span.info-label Lugar: - span.info-text Area Tres (El Salvador 5000) - button Inscribite - .image - img(src="", alt="") \ No newline at end of file diff --git a/src/templates/index.pug b/src/templates/index.pug index 928f14e..22727c6 100644 --- a/src/templates/index.pug +++ b/src/templates/index.pug @@ -12,7 +12,6 @@ html include includes/hero.pug include includes/about-us.pug include includes/meetups.pug - include includes/supporters.pug include includes/footer.pug script(src="./dist/js/index.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js")