Meetups frontend issue

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;
-}
+}

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 @@
       }
     }
   }
-}
+}

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;
+        }
+      }
+    }
+  }
+}

src/styles/home.scss

@@ -4,4 +4,5 @@
   @import 'header';
   @import 'hero';
   @import 'about-us';
-}
+  @import 'meetups';
+}

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="")

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")