diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..27603d5
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,23 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.js]
+indent_style = space
+indent_size = 2
+
+[*.scss]
+indent_style = space
+indent_size = 2
+
+[Makefile]
+indent_style = tab
+
+[package.json]
+indent_style = space
+indent_size = 2
diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..849ddff
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+dist/
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..ec34d97
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  'extends': 'airbnb-base',
+  'globals': {
+    'window': true,
+  },
+};
diff --git a/.githooks/pre-push b/.githooks/pre-push
new file mode 100755
index 0000000..8e72366
--- /dev/null
+++ b/.githooks/pre-push
@@ -0,0 +1,14 @@
+#!/bin/bash
+
+ESLINT="$(git rev-parse --show-toplevel)/node_modules/.bin/eslint"
+STYLELINT="$(git rev-parse --show-toplevel)/node_modules/.bin/stylelint"
+
+# Check if dependencies are installed
+if [[ ! -x "$ESLINT" ]] || [[ ! -x "$STYLELINT" ]]; then
+  printf "\033[41mPlease install dependencies\033[0m (npm install)\n"
+  exit 1
+fi
+
+npm run lint
+
+exit $?
diff --git a/.stylelintrc b/.stylelintrc
new file mode 100644
index 0000000..40db42c
--- /dev/null
+++ b/.stylelintrc
@@ -0,0 +1,3 @@
+{
+  "extends": "stylelint-config-standard"
+}
diff --git a/README.md b/README.md
index 8c66981..e965fc8 100644
--- a/README.md
+++ b/README.md
@@ -27,19 +27,27 @@ Os arquivos devem ser organizados na pasta SRC ou na pasta padrão de conteúdo
 
 ## Instruções de como utilizar o projeto
 
-1 - Para baixar as dependências de frontend.:
+1 - Configurar caminho dos Git Hooks:
+
+Importante para que antes do push seu código passe por uma validação em nossos linters.
+
+```sh
+git config core.hooksPath .githooks
+```
+
+2 - Para baixar as dependências de frontend.:
 
 ```sh
 npm install
 ```
 
-2 - Para rodar o projeto em [http://localhost:8080](http://localhost:8080):
+3 - Para rodar o projeto em [http://localhost:8080](http://localhost:8080):
 
 ```sh
 npm start
 ```
 
-3 - Para rodar o projecto em um container [http://localhost:8080]
+4 - Para rodar o projecto em um container [http://localhost:8080]
 ```sh
 docker run --rm -dt -p 8080:80 --name afropython afropython/afropython-site:1.0.0
 ```
@@ -76,4 +84,4 @@ Leia a versão integral do nosso [Código de conduta](https://github.com/AfroPyt
 
 ---------------------------------------
 
-Abraços de toda equipe do AfroPython :yellow_heart:
\ No newline at end of file
+Abraços de toda equipe do AfroPython :yellow_heart:
diff --git a/gulpfile.js b/gulpfile.js
index 001b339..f100172 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,7 +1,7 @@
-var gulp            = require('gulp');
-var ghpages         = require('gh-pages');
-var path            = require('path');
+const gulp = require('gulp');
+const ghpages = require('gh-pages');
+const path = require('path');
 
-gulp.task('deploy', function (cb) {
-  ghpages.publish(path.join(process.cwd(), 'dist'), {message: 'Publicado em: ' + new Date()}, cb);
+gulp.task('deploy', (cb) => {
+  ghpages.publish(path.join(process.cwd(), 'dist'), { message: `Publicado em: ${new Date()}` }, cb);
 });
diff --git a/package.json b/package.json
index 2514957..156716a 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
   "scripts": {
     "start": "webpack-dev-server --open --mode development",
     "build": "webpack --mode production",
-    "deploy": "npm run build && gulp deploy"
+    "deploy": "npm run build && gulp deploy",
+    "lint": "eslint '**/*.js' && stylelint '**/*.scss'"
   },
   "license": "UNLICENSED",
   "dependencies": {},
@@ -17,6 +18,9 @@
     "autoprefixer": "^9.3.1",
     "cname-webpack-plugin": "^1.0.3",
     "css-loader": "^1.0.0",
+    "eslint": "^5.8.0",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.14.0",
     "expose-loader": "^0.7.5",
     "file-loader": "^2.0.0",
     "gh-pages": "^2.0.1",
@@ -32,6 +36,8 @@
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
+    "stylelint": "^9.7.1",
+    "stylelint-config-standard": "^18.2.0",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.16.5",
diff --git a/src/_scss/1.config/_variables.scss b/src/_scss/1.config/_variables.scss
index 7b56ba8..92e9ce1 100644
--- a/src/_scss/1.config/_variables.scss
+++ b/src/_scss/1.config/_variables.scss
@@ -2,36 +2,34 @@
 $brand-primary: #913a0d;
 $brand-secondary: #da691a;
 
-
 $gray-light: #f6f3f3;
-$gray-medium: #dddddd;
+$gray-medium: #ddd;
 $gray-dark: #5e5e5e;
 
-$black:                     #000;
-$white:                     #fff;
+$black: #000;
+$white: #fff;
 
 // Objects
-$text-color:                $gray-dark;
-$link-color:                $brand-primary;
-$link-hover-color:          $brand-secondary;
+$text-color: $gray-dark;
+$link-color: $brand-primary;
+$link-hover-color: $brand-secondary;
 
-$selection-bg-color:        $link-color;
+$selection-bg-color: $link-color;
 $selection-text-color:      $text-color;
 
-$border-radius:             10px;
+$border-radius: 10px;
 
 // Typography
-$font-family-base:          'Roboto', sans-serif;
-
-$font-weight-light:       300;
-$font-weight-default:     400;
-$font-weight-bold:        700;
+$font-family-base: 'Roboto', sans-serif;
 
+$font-weight-light: 300;
+$font-weight-default: 400;
+$font-weight-bold: 700;
 
 // Screen Sizes
 $screen-xs-max: 767px;
-$screen-sm:     768px;
+$screen-sm: 768px;
 $screen-sm-max: 940px;
-$screen-md:     941px;
+$screen-md: 941px;
 $screen-md-max: 1199px;
-$screen-lg:     1200px;
+$screen-lg: 1200px;
diff --git a/src/_scss/2.base/_links.scss b/src/_scss/2.base/_links.scss
index 5a72919..524c1c6 100644
--- a/src/_scss/2.base/_links.scss
+++ b/src/_scss/2.base/_links.scss
@@ -1,7 +1,7 @@
 a {
   color: $link-color;
   text-decoration: none;
-  transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
 
   &:hover,
   &:focus {
@@ -13,6 +13,7 @@ a {
   }
 
   &:visited {
+    /* stylelint-disable-line */
     // Filling this one is good UX.
   }
 }
diff --git a/src/_scss/2.base/_scaffold.scss b/src/_scss/2.base/_scaffold.scss
index 1958005..e7bc79d 100644
--- a/src/_scss/2.base/_scaffold.scss
+++ b/src/_scss/2.base/_scaffold.scss
@@ -5,10 +5,10 @@ html {
   box-sizing: border-box;
 }
 
-body{
-    margin: 0;
-    height: 100%;
-    background-color: $gray-light;
+body {
+  margin: 0;
+  height: 100%;
+  background-color: $gray-light;
 }
 
 *,
@@ -31,6 +31,6 @@ p {
   font-size: 1rem;
 }
 
-figure{
+figure {
   margin: 0;
 }
diff --git a/src/_scss/3.objects/_button.scss b/src/_scss/3.objects/_button.scss
index 3662dd2..e1364f7 100644
--- a/src/_scss/3.objects/_button.scss
+++ b/src/_scss/3.objects/_button.scss
@@ -4,7 +4,7 @@
   text-align: center;
   cursor: pointer;
   margin: 20px 0 25px 0;
-  transition: all .2s ease-out;
+  transition: all 0.2s ease-out;
   border-radius: $border-radius;
   padding: 1em;
   color: $white;
@@ -12,7 +12,7 @@
   font-size: 15px;
   text-transform: uppercase;
 
-  &.center-block{
+  &.center-block {
     margin: auto;
     display: block;
   }
@@ -24,5 +24,4 @@
     text-decoration: none;
     background-color: $brand-secondary;
   }
-
 }
diff --git a/src/_scss/3.objects/_content-block.scss b/src/_scss/3.objects/_content-block.scss
index fc7fe34..2ab26de 100644
--- a/src/_scss/3.objects/_content-block.scss
+++ b/src/_scss/3.objects/_content-block.scss
@@ -6,6 +6,4 @@
     padding-left: 5%;
     padding-right: 5%;
   }
-
-  
 }
diff --git a/src/_scss/3.objects/_grid.scss b/src/_scss/3.objects/_grid.scss
index bcb9e4e..3143e74 100644
--- a/src/_scss/3.objects/_grid.scss
+++ b/src/_scss/3.objects/_grid.scss
@@ -1,75 +1,76 @@
 @media (min-width: 48em) {
-	.o-row {
-		width: 100%;
-		display: table;
-		table-layout: fixed;
-	}
+  .o-row {
+    width: 100%;
+    display: table;
+    table-layout: fixed;
+  }
 
-	.o-col {
-		display: table-cell;
-		vertical-align: top;
+  .o-col {
+    display: table-cell;
+    vertical-align: top;
 
-		@media(max-width: $screen-sm){
-			width: 100%;
-			display: initial;
-		}
+    @media (max-width: $screen-sm) {
+      width: 100%;
+      display: initial;
+    }
 
-		&--middle {
-			vertical-align: middle;
-		}
+    &--middle {
+      vertical-align: middle;
+    }
 
-		&--bottom {
-			vertical-align: bottom;
-		}
+    &--bottom {
+      vertical-align: bottom;
+    }
 
-		&--45{
-			width: 45%;
-			float: left;
-		}
+    &--45 {
+      width: 45%;
+      float: left;
+    }
 
-		&-6{
-			width: calc(100% / 2);
-			float: left;
-			padding: 0 1%;
+    &-6 {
+      width: calc(100% / 2);
+      float: left;
+      padding: 0 1%;
 
-			@media(max-width: $screen-sm){
-				width: 100%;
-			}
-		}
+      @media (max-width: $screen-sm) {
+        width: 100%;
+      }
+    }
 
-		&-4{
-			width: calc(100% / 3);
-			float: left;
-			padding: 0 1%;
+    &-4 {
+      width: calc(100% / 3);
+      float: left;
+      padding: 0 1%;
 
-			@media(max-width: $screen-sm){
-				width: 100%;
-			}
-		}
+      @media (max-width: $screen-sm) {
+        width: 100%;
+      }
+    }
 
-		&-3{
-			width: calc(100% / 4);
-			float: left;
-			padding: 0 1%;
+    &-3 {
+      width: calc(100% / 4);
+      float: left;
+      padding: 0 1%;
 
-			@media(max-width: $screen-sm){
-				width: 50%;
-			}
-		}
+      @media (max-width: $screen-sm) {
+        width: 50%;
+      }
+    }
 
-		&--add-padding-right{
-			padding-right: 30px;
-		}
+    &--add-padding-right {
+      padding-right: 30px;
+    }
 
-		&--small{
-			width: 4%;
-		}
+    &--small {
+      width: 4%;
+    }
 
-		&--display-table{
-			display: table;
-		}
-	}
-	.o-row-inline-block{
-		display: inline-block;
-	}
+    &--display-table {
+      display: table;
+    }
+  }
+
+  .o-row-inline-block {
+    display: inline-block;
+  }
 }
diff --git a/src/_scss/3.objects/_type.scss b/src/_scss/3.objects/_type.scss
index e998fd9..80805a4 100644
--- a/src/_scss/3.objects/_type.scss
+++ b/src/_scss/3.objects/_type.scss
@@ -1,9 +1,9 @@
-.o-h3{
+.o-h3 {
   font-size: 20px;
   line-height: 1.2;
 }
 
-.o-h2{
+.o-h2 {
   font-size: 35px;
   line-height: 45px;
   margin-left: 25px;
diff --git a/src/_scss/4.components/_about-event.scss b/src/_scss/4.components/_about-event.scss
index 461dfe0..e6e843b 100644
--- a/src/_scss/4.components/_about-event.scss
+++ b/src/_scss/4.components/_about-event.scss
@@ -1,51 +1,51 @@
 .c-about-event {
-    padding-top: 1.5%;
+  padding-top: 1.5%;
 
-    .o-row{
-        display: flex;
-        margin: 1.5em 0;
+  .o-row {
+    display: flex;
+    margin: 1.5em 0;
 
-        @media(max-width: $screen-sm){
-            display: grid;
-            margin: 0 0;
-        }
+    @media (max-width: $screen-sm) {
+      display: grid;
+      margin: 0 0;
     }
-
-    [class*="o-col"]{
-        padding: 3% 1.5%;        
-        background-color: $gray-medium;
-        margin: 0px 1%;
-        vertical-align: middle;
-        align-items: center;
-        border-radius: 5px;        
-
-        @media(max-width: $screen-sm){
-            width: 94%;
-            margin: 3% auto 0;
-            display: block;
-        }
+  }
+
+  [class*="o-col"] {
+    padding: 3% 1.5%;
+    background-color: $gray-medium;
+    margin: 0 1%;
+    vertical-align: middle;
+    align-items: center;
+    border-radius: 5px;
+
+    @media (max-width: $screen-sm) {
+      width: 94%;
+      margin: 3% auto 0;
+      display: block;
     }
+  }
 
-    &__title {
-        color: $gray-dark;
-        font-weight: 600;
-        margin: 10px 0px 0px;     
-        text-align: center;
+  &__title {
+    color: $gray-dark;
+    font-weight: 600;
+    margin: 10px 0 0;
+    text-align: center;
 
-        @media(max-width: $screen-sm){
-            font-size: 1.3em;
-        }
+    @media (max-width: $screen-sm) {
+      font-size: 1.3em;
     }
+  }
 
-    &__text {
-        color: $gray-dark;
-        font-weight: 300;
-        margin-top: 10px;
-        text-align: center;
-        font-size: 1em;
+  &__text {
+    color: $gray-dark;
+    font-weight: 300;
+    margin-top: 10px;
+    text-align: center;
+    font-size: 1em;
 
-        @media(max-width: $screen-sm){
-            font-size: 1.12em;
-        }
+    @media (max-width: $screen-sm) {
+      font-size: 1.12em;
     }
+  }
 }
diff --git a/src/_scss/4.components/_code-conduct.scss b/src/_scss/4.components/_code-conduct.scss
index 8402039..d82f6e8 100644
--- a/src/_scss/4.components/_code-conduct.scss
+++ b/src/_scss/4.components/_code-conduct.scss
@@ -1,152 +1,149 @@
 .c-code-conduct {
+  &__title {
+    color: $brand-primary;
+    font-weight: 300;
+    margin: 50px 0;
 
-    &__title {
-        color: $brand-primary;
-        font-weight: 300;
-        margin: 50px 0;
-
-        @media(max-width: $screen-sm){
-            font-size: 2.5em;
-        }
-
-        @media(max-width: 450px){
-            font-size: 1.75em;
-            margin-bottom: 15px;
-        }
+    @media (max-width: $screen-sm) {
+      font-size: 2.5em;
     }
 
-    &__text {
-        color: $brand-primary;
-        font-weight: 300;
-        margin-top: 10px;
-        font-family: "Roboto",sans-serif;
-        font-weight: 300;
+    @media (max-width: 450px) {
+      font-size: 1.75em;
+      margin-bottom: 15px;
+    }
+  }
 
-        @media(max-width: $screen-sm){
-            font-size: 1.85em;
-        }
+  &__text {
+    color: $brand-primary;
+    font-weight: 300;
+    margin-top: 10px;
+    font-family: "Roboto", sans-serif;
 
-        @media(max-width: 450px){
-            font-size: 1.3em;
-            text-align: center;
-        }
+    @media (max-width: $screen-sm) {
+      font-size: 1.85em;
     }
 
-    &__modal{
-        background-color: $brand-secondary;
-        width: 10%;
-        height: 10%;
-        overflow: auto;
-        z-index: 99;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        visibility: hidden;
-        opacity: 0;
-        -webkit-transition: all linear 300ms;
-        -moz-transition: all linear 300ms;
-        -ms-transition: all linear 300ms;
-        -o-transition: all linear 300ms;
-        transition: all linear 300ms;
-
-        &.active{
-            width: 100%;
-            height: 100%;
-            top : 0%;
-            left: 0%;
-            visibility: visible;
-            opacity: 1;
-        }
+    @media (max-width: 450px) {
+      font-size: 1.3em;
+      text-align: center;
     }
+  }
+
+  &__modal {
+    background-color: $brand-secondary;
+    width: 10%;
+    height: 10%;
+    overflow: auto;
+    z-index: 99;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: all linear 300ms;
+    -moz-transition: all linear 300ms;
+    -ms-transition: all linear 300ms;
+    -o-transition: all linear 300ms;
+    transition: all linear 300ms;
+
+    &.active {
+      width: 100%;
+      height: 100%;
+      top: 0%;
+      left: 0%;
+      visibility: visible;
+      opacity: 1;
+    }
+  }
 
-    &__modal__text {
-        font-family: "Roboto",sans-serif;
-        font-weight: 300;
-        color: $white;
-        font-size: 1em;
+  &__modal__text {
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    color: $white;
+    font-size: 1em;
 
-        @media(max-width: 450px){
-            font-size: 0.85em;
-        }
+    @media (max-width: 450px) {
+      font-size: 0.85em;
     }
+  }
 
-    &__button {
-        max-width: 350px;
+  &__button {
+    max-width: 350px;
 
-        @media(max-width: $screen-sm){
-            font-size: 1.5em;
-        }
-
-        @media(max-width: $screen-xs-max){
-            font-size: 1em;
-        }
+    @media (max-width: $screen-sm) {
+      font-size: 1.5em;
     }
 
-    &__modal__close img{
-        margin-top: 10px;
-        transition: all 300ms linear;
-        opacity: 1;
-
-        &:hover{
-            -moz-transform: rotate(180deg);
-            -webkit-transform: rotate(180deg);
-            -ms-transform: rotate(180deg);
-            transform: rotate(180deg);
-            opacity: 0.6;
-        }
+    @media (max-width: $screen-xs-max) {
+      font-size: 1em;
     }
+  }
+
+  &__modal__close img {
+    margin-top: 10px;
+    transition: all 300ms linear;
+    opacity: 1;
+
+    &:hover {
+      -moz-transform: rotate(180deg);
+      -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+      transform: rotate(180deg);
+      opacity: 0.6;
+    }
+  }
 
-    &__modal-content{
-
-        &__ul-list, &__ol-list{
-            list-style: none;
+  &__modal-content {
+    &__ul-list,
+    &__ol-list {
+      list-style: none;
 
-            li{
-                color: $white;
-                font-weight: 300;
-                margin-bottom: 15px;
+      li {
+        color: $white;
+        font-weight: 300;
+        margin-bottom: 15px;
 
-                span{
-                    margin-right: 8px;
-                }
+        span {
+          margin-right: 8px;
+        }
 
-                @media(max-width: $screen-sm){
-                    font-size: 1.75em;
-                }
+        @media (max-width: $screen-sm) {
+          font-size: 1.75em;
+        }
 
-                @media(max-width: $screen-xs-max){
-                    font-size: 1.3em;
-                }
-            }
+        @media (max-width: $screen-xs-max) {
+          font-size: 1.3em;
         }
+      }
+    }
 
-        &__title{
-            color: $white;
-            font-weight: 300;
+    &__title {
+      color: $white;
+      font-weight: 300;
 
-            @media(max-width: $screen-sm){
-                font-size: 2.0em;
-            }
+      @media (max-width: $screen-sm) {
+        font-size: 2em;
+      }
 
-            @media(max-width: $screen-xs-max){
-                font-size: 1.75em;
-                text-align: center;
-            }
-        }
+      @media (max-width: $screen-xs-max) {
+        font-size: 1.75em;
+        text-align: center;
+      }
+    }
 
-        &__text{
-            color: $white;
-            font-weight: 300;
-            font-size: 1.0em;
+    &__text {
+      color: $white;
+      font-weight: 300;
+      font-size: 1em;
 
-            @media(max-width: $screen-sm){
-                font-size: 1.75em;
-            }
+      @media (max-width: $screen-sm) {
+        font-size: 1.75em;
+      }
 
-            @media(max-width: $screen-xs-max){
-                font-size: 1.3em;
-            }
-        }
+      @media (max-width: $screen-xs-max) {
+        font-size: 1.3em;
+      }
     }
+  }
 }
-
diff --git a/src/_scss/4.components/_endereco.scss b/src/_scss/4.components/_endereco.scss
index aef3be3..675ef6d 100644
--- a/src/_scss/4.components/_endereco.scss
+++ b/src/_scss/4.components/_endereco.scss
@@ -1,19 +1,17 @@
 .c-endereco {
-    padding-top: 35px;
+  padding-top: 35px;
 
-    &__title {
-        color: $brand-primary;
-        font-weight: 300;
-
-        @media(max-width: $screen-sm){
-            font-size: 2.5em;
-        }
-
-        @media(max-width: 450px){
-            font-size: 1.75em;
-            margin-bottom: 15px;
-        }
+  &__title {
+    color: $brand-primary;
+    font-weight: 300;
 
+    @media (max-width: $screen-sm) {
+      font-size: 2.5em;
+    }
 
+    @media (max-width: 450px) {
+      font-size: 1.75em;
+      margin-bottom: 15px;
     }
+  }
 }
diff --git a/src/_scss/4.components/_footer.scss b/src/_scss/4.components/_footer.scss
index 5e38db4..096b1f4 100644
--- a/src/_scss/4.components/_footer.scss
+++ b/src/_scss/4.components/_footer.scss
@@ -1,65 +1,63 @@
-footer{
-	position: relative;
-	margin-top: 20px; 
-	background-color: $brand-primary;
-	color: $white;
-
-	.c-footer{
-		width: 80%;
-		height: 100%;
-		padding: 25px 0px;
-		margin: auto;	
-		
-		&__text{
-			font-weight: 300;
-			margin-bottom: 0px;
-			margin-top: 2px;
-			font-size: 1.125rem;
-
-			@media(max-width: $screen-sm){
-				font-size: 1.3rem;	
-			}
-
-			&__link{
-				color: $white;
-				text-decoration: underline;
-			}
-		}
-
-		&__social-icons{
-			list-style: none;
-			position: absolute;
-			top: 7px;
-			right: 100px;
-
-			@media(max-width: $screen-sm){
-				right: 20px;
-			}
-
-			@media(max-width: $screen-xs-max){
-				position: static;
-			    width: 100%;
-			    padding: 0px;
-			    text-align: center;
-			    margin-bottom: 0px;
-			    padding-bottom: 0px;
-			}
-
-		
-      li{
-				a{
-					color: $white;
-					font-size: 35px;
-				}
-			}
-		}
-
-		.c-footer__social-icons {
-			li {
-				display: inline;
-				padding: 0.2rem;
-			}
-		}
-
-	}
-}
\ No newline at end of file
+footer {
+  position: relative;
+  margin-top: 20px;
+  background-color: $brand-primary;
+  color: $white;
+
+  .c-footer {
+    width: 80%;
+    height: 100%;
+    padding: 25px 0;
+    margin: auto;
+
+    &__text {
+      font-weight: 300;
+      margin-bottom: 0;
+      margin-top: 2px;
+      font-size: 1.125rem;
+
+      @media (max-width: $screen-sm) {
+        font-size: 1.3rem;
+      }
+
+      &__link {
+        color: $white;
+        text-decoration: underline;
+      }
+    }
+
+    &__social-icons {
+      list-style: none;
+      position: absolute;
+      top: 7px;
+      right: 100px;
+
+      @media (max-width: $screen-sm) {
+        right: 20px;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        position: static;
+        width: 100%;
+        padding: 0;
+        text-align: center;
+        margin-bottom: 0;
+        padding-bottom: 0;
+      }
+
+      li {
+        a {
+          color: $white;
+          font-size: 35px;
+        }
+      }
+    }
+
+    .c-footer__social-icons {
+      li {
+        display: inline;
+        padding: 0.2rem;
+      }
+    }
+  }
+}
diff --git a/src/_scss/4.components/_header.scss b/src/_scss/4.components/_header.scss
index 7e0c0b6..f12d327 100644
--- a/src/_scss/4.components/_header.scss
+++ b/src/_scss/4.components/_header.scss
@@ -9,12 +9,10 @@
   -ms-transition: heith 600ms linear, background-color 800ms linear;
   -o-transition: heith 600ms linear, background-color 800ms linear;
   transition: heith 600ms linear, background-color 800ms linear;
-  
-  &__brand {
 
+  &__brand {
     img {
       width: 120px;
-
       -webkit-transition: all 600ms linear;
       -moz-transition: all 600ms linear;
       -ms-transition: all 600ms linear;
@@ -23,19 +21,19 @@
     }
   }
 
-  @media(max-width: $screen-xs-max){
+  @media (max-width: $screen-xs-max) {
     padding-top: 15px;
     padding-left: 15px;
 
-    &__brand{
-      img{
+    &__brand {
+      img {
         width: 80px;
-      }   
+      }
     }
   }
 
-  &.min{
-    background-color: rgba(255,255,255,0.6);
+  &.min {
+    background-color: rgba(255, 255, 255, 0.6);
     height: 55px;
     overflow: hidden;
     padding-top: 8px;
@@ -46,5 +44,4 @@
       }
     }
   }
-  
 }
diff --git a/src/_scss/4.components/_intro.scss b/src/_scss/4.components/_intro.scss
index e89ec9d..b0871e8 100644
--- a/src/_scss/4.components/_intro.scss
+++ b/src/_scss/4.components/_intro.scss
@@ -1,46 +1,45 @@
 .c-intro {
-
-    height: 85vh;
-    background-image: url('../images/bg-image.png');
-    background-size: cover;
-    background-attachment: fixed;
-    width: 100%;
-    display: table;
-
-    &__title {
-        color: $white;
-        font-size: 70px;
-
-        @media(max-width: $screen-xs-max){
-            font-size: 35px;
-        }
-
-        &__h3{
-            @media(max-width: $screen-sm){
-                font-size: 2.5em;
-            }
-
-            @media(max-width: $screen-xs-max){
-                font-size: 2.0em;
-            }
-        }
+  height: 85vh;
+  background-image: url('../images/bg-image.png');
+  background-size: cover;
+  background-attachment: fixed;
+  width: 100%;
+  display: table;
+
+  &__title {
+    color: $white;
+    font-size: 70px;
+
+    @media (max-width: $screen-xs-max) {
+      font-size: 35px;
     }
 
-    &__article {
-        display: table-cell;
-        vertical-align: middle;
-        background-color: rgba(0, 0, 0, 0.35);
+    &__h3 {
+      @media (max-width: $screen-sm) {
+        font-size: 2.5em;
+      }
+
+      @media (max-width: $screen-xs-max) {
+        font-size: 2em;
+      }
     }
+  }
 
-    &__text {
-        color: $white;
-        @media(max-width: $screen-sm){
-            font-size: 2.0em;
-        }
+  &__article {
+    display: table-cell;
+    vertical-align: middle;
+    background-color: rgba(0, 0, 0, 0.35);
+  }
 
-        @media(max-width: $screen-xs-max){
-            font-size: 1.2em;
-        }
+  &__text {
+    color: $white;
+
+    @media (max-width: $screen-sm) {
+      font-size: 2em;
+    }
 
+    @media (max-width: $screen-xs-max) {
+      font-size: 1.2em;
     }
+  }
 }
diff --git a/src/_scss/4.components/_main-content.scss b/src/_scss/4.components/_main-content.scss
deleted file mode 100644
index aacb570..0000000
--- a/src/_scss/4.components/_main-content.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.c-main-content {
-
-}
diff --git a/src/_scss/4.components/_nav.scss b/src/_scss/4.components/_nav.scss
index c581dcd..f9f13c6 100644
--- a/src/_scss/4.components/_nav.scss
+++ b/src/_scss/4.components/_nav.scss
@@ -1,6 +1,6 @@
 .c-main-nav {
-    height: 75px;
-    text-align: center;
-    display: table-cell;
-    vertical-align: middle;
+  height: 75px;
+  text-align: center;
+  display: table-cell;
+  vertical-align: middle;
 }
diff --git a/src/_scss/4.components/_partners.scss b/src/_scss/4.components/_partners.scss
index a8c9b09..0e3f028 100644
--- a/src/_scss/4.components/_partners.scss
+++ b/src/_scss/4.components/_partners.scss
@@ -3,29 +3,25 @@
   float: left;
   width: 100%;
   background-color: $white;
-  margin: 20px 0px;
-
-  .o-row{
-
+  margin: 20px 0;
 
+  .o-row {
     .o-col {
       width: calc(100% / 5);
       display: block;
       float: left;
 
-      @media(max-width: $screen-md-max) {
+      @media (max-width: $screen-md-max) {
         width: calc(100% / 3);
         display: initial;
         float: left;
       }
 
-      @media(max-width: $screen-xs-max) {
+      @media (max-width: $screen-xs-max) {
         width: 100%;
       }
     }
-  }  
-
-    
+  }
 
   &__title {
     color: $brand-primary;
@@ -39,11 +35,10 @@
     height: 290px;
     width: 100%;
     background-color: $white;
-    border: 1px solid rgba(255, 255, 255, .15);
+    border: 1px solid rgba(255, 255, 255, 0.15);
     padding: 18px;
 
     &__content {
-      //background-color: $white;
       width: 100%;
       height: 100%;
       display: block;
@@ -60,8 +55,7 @@
       text-align: center;
       color: $white;
       font-size: 18px;
-      margin: 0px;
+      margin: 0;
     }
   }
-
 }
diff --git a/src/_scss/4.components/_section-forms.scss b/src/_scss/4.components/_section-forms.scss
index fc36eef..06c101d 100644
--- a/src/_scss/4.components/_section-forms.scss
+++ b/src/_scss/4.components/_section-forms.scss
@@ -1,15 +1,14 @@
 .c-section-forms {
-    &__title {
-        color: $brand-primary;
-    }
+  &__title {
+    color: $brand-primary;
+  }
 
-    &__text {
-        font-weight: $font-weight-light;
-        padding: 0 2em;
-    }
+  &__text {
+    font-weight: $font-weight-light;
+    padding: 0 2em;
+  }
 
-    &__featured
-    {
-        color: $brand-secondary;
-    }
+  &__featured {
+    color: $brand-secondary;
+  }
 }
diff --git a/src/_scss/4.components/_section.scss b/src/_scss/4.components/_section.scss
index cb64166..5d82da3 100644
--- a/src/_scss/4.components/_section.scss
+++ b/src/_scss/4.components/_section.scss
@@ -1,17 +1,13 @@
-.c-section{
-	padding: 30px 0;
-
-    &__box{
-
-        &--text{
-            background-color: $white;
-            padding: 50px 60px;
-            position: relative;
-            right: 100px;
-            top: 35px;
-        }
-
+.c-section {
+  padding: 30px 0;
+
+  &__box {
+    &--text {
+      background-color: $white;
+      padding: 50px 60px;
+      position: relative;
+      right: 100px;
+      top: 35px;
     }
-
-
+  }
 }
diff --git a/src/_scss/5.trumps/_utils.scss b/src/_scss/5.trumps/_utils.scss
index 08ede15..f8d4efb 100644
--- a/src/_scss/5.trumps/_utils.scss
+++ b/src/_scss/5.trumps/_utils.scss
@@ -1,42 +1,42 @@
 .u-sr {
-/*
-* Hide only visually, but have it available for screenreaders: h5bp.com/v
-*/
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    border: 0;
+  /*
+   * Hide only visually, but have it available for screenreaders: h5bp.com/v
+   */
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
 }
 
 .u-clearfix::after {
-    content: "";
-    display: table;
-    clear: both;
+  content: "";
+  display: table;
+  clear: both;
 }
 
 .u-text-center {
-    text-align: center;
+  text-align: center;
 }
 
 .u-text-right {
-    text-align: right;
+  text-align: right;
 }
 
 .u-margin-clear {
-    margin: 0;
+  margin: 0;
 }
 
 .u-uppercase {
-    text-transform: uppercase;
+  text-transform: uppercase;
 }
 
 .close-animatedModal {
-    width:100%;
-    text-align: center;
-    cursor:pointer;
-    color:#fff;
-}
\ No newline at end of file
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  color: #fff;
+}
diff --git a/src/_scss/6.icons/_icons.scss b/src/_scss/6.icons/_icons.scss
index 118cf2f..aab7c40 100644
--- a/src/_scss/6.icons/_icons.scss
+++ b/src/_scss/6.icons/_icons.scss
@@ -1,7 +1,8 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('../fonts/icomoon.eot?ul0g22');
-  src:  url('../fonts/icomoon.eot?ul0g22#iefix') format('embedded-opentype'),
+  src: url('../fonts/icomoon.eot?ul0g22');
+  src:
+    url('../fonts/icomoon.eot?ul0g22#iefix') format('embedded-opentype'),
     url('../fonts/icomoon.ttf?ul0g22') format('truetype'),
     url('../fonts/icomoon.woff?ul0g22') format('woff'),
     url('../fonts/icomoon.svg?ul0g22#icomoon') format('svg');
@@ -9,9 +10,10 @@
   font-style: normal;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
+  font-family: 'icomoon', sans-serif !important;
   speak: none;
   font-style: normal;
   font-weight: normal;
@@ -24,99 +26,130 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-picture:before {
+.icon-picture::before {
   content: "\e00f";
 }
-.icon-pictures:before {
+
+.icon-pictures::before {
   content: "\e010";
 }
-.icon-heart1:before {
+
+.icon-heart1::before {
   content: "\e04a";
 }
-.icon-facebook1:before {
+
+.icon-facebook1::before {
   content: "\e05d";
 }
-.icon-twitter1:before {
+
+.icon-twitter1::before {
   content: "\e05e";
 }
-.icon-googleplus:before {
+
+.icon-googleplus::before {
   content: "\e05f";
 }
-.icon-linkedin1:before {
+
+.icon-linkedin1::before {
   content: "\e062";
 }
-.icon-phone:before {
+
+.icon-phone::before {
   content: "\e942";
 }
-.icon-phone-hang-up:before {
+
+.icon-phone-hang-up::before {
   content: "\e943";
 }
-.icon-pushpin:before {
+
+.icon-pushpin::before {
   content: "\e946";
 }
-.icon-mobile:before {
+
+.icon-mobile::before {
   content: "\e958";
 }
-.icon-mobile2:before {
+
+.icon-mobile2::before {
   content: "\e959";
 }
-.icon-heart:before {
+
+.icon-heart::before {
   content: "\e9da";
 }
-.icon-heart-broken:before {
+
+.icon-heart-broken::before {
   content: "\e9db";
 }
-.icon-checkmark:before {
+
+.icon-checkmark::before {
   content: "\ea10";
 }
-.icon-checkmark2:before {
+
+.icon-checkmark2::before {
   content: "\ea11";
 }
-.icon-checkbox-checked:before {
+
+.icon-checkbox-checked::before {
   content: "\ea52";
 }
-.icon-google-plus:before {
+
+.icon-google-plus::before {
   content: "\ea8b";
 }
-.icon-google-plus2:before {
+
+.icon-google-plus2::before {
   content: "\ea8c";
 }
-.icon-google-plus3:before {
+
+.icon-google-plus3::before {
   content: "\ea8d";
 }
-.icon-facebook:before {
+
+.icon-facebook::before {
   content: "\ea90";
 }
-.icon-facebook2:before {
+
+.icon-facebook2::before {
   content: "\ea91";
 }
-.icon-instagram:before {
+
+.icon-instagram::before {
   content: "\ea92";
 }
-.icon-whatsapp:before {
+
+.icon-whatsapp::before {
   content: "\ea93";
 }
-.icon-twitter:before {
+
+.icon-twitter::before {
   content: "\ea96";
 }
-.icon-youtube:before {
+
+.icon-youtube::before {
   content: "\ea9d";
 }
-.icon-youtube2:before {
+
+.icon-youtube2::before {
   content: "\ea9e";
 }
-.icon-github:before {
+
+.icon-github::before {
   content: "\eab0";
 }
-.icon-tumblr:before {
+
+.icon-tumblr::before {
   content: "\eab9";
 }
-.icon-tumblr2:before {
+
+.icon-tumblr2::before {
   content: "\eaba";
 }
-.icon-linkedin:before {
+
+.icon-linkedin::before {
   content: "\eac9";
 }
-.icon-linkedin2:before {
+
+.icon-linkedin2::before {
   content: "\eaca";
 }
diff --git a/src/_scss/main.scss b/src/_scss/main.scss
index 33f114e..a419586 100644
--- a/src/_scss/main.scss
+++ b/src/_scss/main.scss
@@ -1,31 +1,29 @@
-
 @import
 
-"1.config/variables",
+  "1.config/variables",
 
-"2.base/default",
-"2.base/scaffold",
-"2.base/links",
-"2.base/images",
-"2.base/lists",
+  "2.base/default",
+  "2.base/scaffold",
+  "2.base/links",
+  "2.base/images",
+  "2.base/lists",
 
-"3.objects/grid",
-"3.objects/button",
-"3.objects/content-block",
-"3.objects/type",
+  "3.objects/grid",
+  "3.objects/button",
+  "3.objects/content-block",
+  "3.objects/type",
 
-"4.components/nav",
-"4.components/section",
-"4.components/header",
-"4.components/intro",
-"4.components/about-event",
-"4.components/code-conduct",
-"4.components/partners",
-"4.components/endereco",
-"4.components/main-content",
-"4.components/section-forms",
-"4.components/footer",
+  "4.components/nav",
+  "4.components/section",
+  "4.components/header",
+  "4.components/intro",
+  "4.components/about-event",
+  "4.components/code-conduct",
+  "4.components/partners",
+  "4.components/endereco",
+  "4.components/section-forms",
+  "4.components/footer",
 
-"5.trumps/utils",
+  "5.trumps/utils",
 
-"6.icons/icons";
\ No newline at end of file
+  "6.icons/icons";
diff --git a/src/_scss/postcss.config.js b/src/_scss/postcss.config.js
index 3ee7a7d..d95f27e 100644
--- a/src/_scss/postcss.config.js
+++ b/src/_scss/postcss.config.js
@@ -1,4 +1,5 @@
+const autoprefixer = require('autoprefixer');
 
 module.exports = {
-    plugins: [require("autoprefixer")]
-};
\ No newline at end of file
+  plugins: [autoprefixer],
+};
diff --git a/src/_scss/style.scss b/src/_scss/style.scss
index 4ca07ec..a419586 100644
--- a/src/_scss/style.scss
+++ b/src/_scss/style.scss
@@ -2,7 +2,6 @@
 
   "1.config/variables",
 
-  /* 2.base */'normalize.css',
   "2.base/default",
   "2.base/scaffold",
   "2.base/links",
@@ -22,11 +21,9 @@
   "4.components/code-conduct",
   "4.components/partners",
   "4.components/endereco",
-  "4.components/main-content",
   "4.components/section-forms",
   "4.components/footer",
 
   "5.trumps/utils",
 
   "6.icons/icons";
-
diff --git a/src/index.js b/src/index.js
index 0ef8fa9..6e0d69b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,3 @@
-import style from './_scss/main.scss';
+import './_scss/main.scss';
 import '../node_modules/normalize.css';
-import './js/main.js';
\ No newline at end of file
+import './js/main';
diff --git a/src/js/main.js b/src/js/main.js
index 67e8108..d287f8f 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,21 +1,22 @@
 import $ from 'jquery';
+
 window.jQuery = $;
 window.$ = $;
 
-$(function(){
-	$(".open-modal").click(function(){
-		$("#animatedModal").addClass('active');
-	});
+$(() => {
+  $('.open-modal').click(() => {
+    $('#animatedModal').addClass('active');
+  });
 
-	$(".close-animatedModal").click(function(){
-		$("#animatedModal").removeClass('active');
-	})
+  $('.close-animatedModal').click(() => {
+    $('#animatedModal').removeClass('active');
+  });
 
-	$(window).scroll(function () {
-		if ($(this).scrollTop() > 430) {
-			$("header").addClass("min");
-		} else {
-			$("header").removeClass("min");
-		}
-	});
+  $(window).scroll(() => {
+    if ($(window).scrollTop() > 430) {
+      $('header').addClass('min');
+    } else {
+      $('header').removeClass('min');
+    }
+  });
 });
diff --git a/webpack.config.js b/webpack.config.js
index 1f787a2..4cf5b13 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,7 +1,7 @@
 const webpack = require('webpack');
-const HtmlWebPackPlugin = require("html-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const HtmlWebPackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const CnameWebpackPlugin = require('cname-webpack-plugin');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 
@@ -10,35 +10,35 @@ module.exports = {
     rules: [
       {
         test: /\.html$/,
-        use: [{ loader: "html-loader", options: { minimize: true } }]
+        use: [{ loader: 'html-loader', options: { minimize: true } }],
       },
       {
         test: /\.(png|svg|jpe?g)/i,
         use: [
           {
-            loader: "url-loader",
+            loader: 'url-loader',
             options: {
-              name: "./images/[name].[ext]",
-              limit: 100000
-            }
+              name: './images/[name].[ext]',
+              limit: 100000,
+            },
           },
           {
-            loader: "img-loader"
-          }
-        ]
+            loader: 'img-loader',
+          },
+        ],
       },
       {
         test: /\.scss$/,
         use: [
           MiniCssExtractPlugin.loader,
-          "css-loader",
-          "postcss-loader",
-          "sass-loader"
-        ]
+          'css-loader',
+          'postcss-loader',
+          'sass-loader',
+        ],
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
       {
         test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
@@ -46,21 +46,21 @@ module.exports = {
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
-            outputPath: 'fonts'
-          }
-        }]
+            outputPath: 'fonts',
+          },
+        }],
       },
       {
         test: require.resolve('jquery'),
         use: [{
           loader: 'expose-loader',
-          options: 'jQuery'
-        },{
+          options: 'jQuery',
+        }, {
           loader: 'expose-loader',
-          options: '$'
-        }]
-      }
-    ]
+          options: '$',
+        }],
+      },
+    ],
   },
   optimization: {
     minimizer: [
@@ -68,11 +68,11 @@ module.exports = {
         sourceMap: true,
         uglifyOptions: {
           compress: {
-            inline: false
-          }
-        }
+            inline: false,
+          },
+        },
       }),
-      new OptimizeCSSAssetsPlugin({})
+      new OptimizeCSSAssetsPlugin({}),
     ],
     runtimeChunk: false,
     splitChunks: {
@@ -82,27 +82,27 @@ module.exports = {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendor_app',
           chunks: 'all',
-          minChunks: 2
-        }
-      }
-    }
+          minChunks: 2,
+        },
+      },
+    },
   },
   plugins: [
     new CnameWebpackPlugin({
       domain: 'afropython.org',
     }),
     new HtmlWebPackPlugin({
-      favicon: "src/favicon.ico",
-      template: "src/index.html",
-      filename: "./index.html"
+      favicon: 'src/favicon.ico',
+      template: 'src/index.html',
+      filename: './index.html',
     }),
     new MiniCssExtractPlugin({
-        filename: "[name].css",
-        chunkFilename: "[id].css"
+      filename: '[name].css',
+      chunkFilename: '[id].css',
     }),
     new webpack.ProvidePlugin({
-      $: "jquery",
-      jQuery: "jquery"
-    })
-  ]
-};
\ No newline at end of file
+      $: 'jquery',
+      jQuery: 'jquery',
+    }),
+  ],
+};