Tablet & PC

assets/styles/components/_footer.scss

@@ -0,0 +1,13 @@
+footer{
+  display: grid;
+  background-color: $footerMainColor;
+  margin-top: 6.25rem;
+  padding: 6.25rem 0 6.25rem 0;
+  p{
+    color: $footerParaphColor;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}

assets/styles/components/_header.scss

@@ -0,0 +1,57 @@
+#header_container{
+  /*display: inline-grid;*/
+  display: grid;
+  padding: 6.25rem 0 6.25rem 0;
+  place-items: center;
+  justify-content: center;
+  img {
+    padding: 0;
+    border-radius: 8px;
+  }
+ /* img:last-child{ //IMPORTANTE PREGUNTAR A DAVID
+    height: 200px;
+  }*/
+  img:nth-last-child(1){ //IMPORTANTE
+    filter: blur(0.2px);
+  }
+  figure{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+#section_header_container{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 1.56rem 1rem 0 1.56rem;
+  h2{
+    margin: 0.75rem 0 0.75rem 0;
+    font-weight: 300;
+  }
+  h1{
+    font-weight: 600;
+    font-size: 2.625rem;
+  }
+}
+
+#second_header_container{
+  padding: 6.25rem 0 6.25rem 0;
+  background-color: $secondHeaderContainer;
+  text-align: center;
+  h1{
+    font-weight: 600;
+    margin-bottom: 0.5em;
+    font-family: $primaryFontFamily, $secondaryFontFamily;
+  }
+  p{
+    font-size: 1rem;
+    line-height: 1.6em;
+  }
+  p:nth-last-child(1){
+    margin-top: 2.4rem;
+  }
+}
+
+

assets/styles/components/_main.scss

@@ -1,3 +1,45 @@
-h1 {
-  color: $colorDark;
-}
+#main_container {
+  display: grid;
+  width: 90%;
+  margin: 0 auto;
+  img {
+    padding: 0;
+    border-radius: 8px;
+  }
+
+  .articles_container_one, .articles_container_three, .articles_container_five {
+    padding: 0 1rem 0 1rem;
+    margin: 5rem 0 4rem 0;
+    h2 {
+      margin-bottom: .75rem;
+      font-weight: 600;
+    }
+    p {
+      width: 80%;
+    }
+    figure {
+      margin-top: 1rem;
+      img {
+        border-radius: 8px;
+      }
+    }
+  }
+
+  .articles_container_two, .articles_container_four {
+    padding: 0 1rem 0 1rem;
+    margin: 5rem 0 4rem 0;
+    h2 {
+      margin-bottom: .75rem;
+      font-weight: 600;
+    }
+    p {
+      width: 80%;
+    }
+    figure {
+      margin-top: 1rem;
+      img {
+        border-radius: 8px;
+      }
+    }
+  }
+}

assets/styles/components/_page_images.scss

@@ -0,0 +1,7 @@
+.page_images{
+  width: $imageWidth;
+  height: $imageHeight;
+  padding: $imagePadding $imagePadding 0 $imagePadding;
+  justify-content: center;
+  border-radius: 8px;
+}

assets/styles/modules/_breakpoints.scss

@@ -1,7 +1,64 @@
+@import "variables.scss";
 //BREAKPOINTS MOBILE FIRST
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+  figure .page_images{
+    width: $imageNewWidthIpad;
+    height: $imageNewHeightIpad;
+  }
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+
+  #header_container{
+    padding: 0 1rem 0 1rem;
+    margin: 6rem 0 5rem 0;
+    height: 50vh;
+    display: grid;
+    grid: 100px auto 100px / repeat(2, 50%);
+    grid-template-areas:
+      "text image";
+     .header_container_text{
+       display: flex;
+       justify-content: space-around;
+    }
+    .header_main_img{
+      grid-area: image;
+    }
+    .header_container_text{
+      grid-area: text;
+    }
+  }
+
+  .article_left{
+    margin:0 auto;
+    height: 50vh;
+    display: grid;
+    grid: 100px auto 100px / repeat(2, 50%);
+    grid-template-areas:
+      "text image";
+    .text_container{
+      grid-area: text;
+    }
+    .img_container{
+      grid-area: image;
+    }
+  }
+
+  .article_right{
+    margin:0 auto;
+    height: 50vh;
+    display: grid;
+    grid: 100px auto 100px / repeat(2, 50%);
+    grid-template-areas:
+      "image text";
+    .img_container{
+      grid-area: image;
+    }
+    .text_container{
+      grid-area:text;
+    }
+  }
+}

assets/styles/modules/_variables.scss

@@ -1,2 +1,20 @@
-$colorLight: #fff;
-$colorDark: #000;
+//Page colors
+$headerColor: #282A36;
+$secondHeaderContainer :#f4f7fc;
+$footerMainColor: black;
+$footerParaphColor: white;
+
+//375 image sizes
+$imageWidth: 288px;
+$imageHeight: 190px;
+
+//768 image sizes
+$imageNewWidthIpad: 536px;
+$imageNewHeightIpad: 354px;
+
+//images spaces
+$imagePadding: 1rem;
+
+//font styles
+$primaryFontFamily: Roboto;
+$secondaryFontFamily: sans-serif;