Sass Proyect- Santo

assets/styles/components/_footer.scss

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

assets/styles/components/_header.scss

@@ -0,0 +1,46 @@
+.hero {
+  display: grid;
+  place-items: center;
+  width: 100%;
+
+  .container-hero {
+    margin: 5rem 0;
+    padding: 0 1rem 0 1rem;
+    text-align: center;
+
+    h1 {
+      font-size: 2.8rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+
+    p {
+      font-size: 1.5rem;
+      font-weight: 300;
+    }
+
+    img {
+      width: 80px;
+      height: 80px;
+      border-radius: 19px;
+      padding: 0;
+      border: 1px solid black;
+    }
+  }
+
+  .images {
+    width: 80%;
+    .img-hero {
+      width: 100%;
+      border-radius: 10px;
+    }
+
+  }
+
+
+}
+
+
+
+
+

assets/styles/components/_image.scss

@@ -0,0 +1,11 @@
+
+/*
+ .images{
+  .img-hero{
+    width: $img-width;
+    height: $img-height;
+    max-width: 100%;
+    border-radius: 20px;
+
+  }
+}*/

assets/styles/components/_main.scss

@@ -0,0 +1,51 @@
+.main-container{
+  display: grid;
+  margin: 0 auto;
+  width: 90%;
+
+
+  .text-main{
+    background-color: $backgroundSection;
+    padding: 6.25rem 0;
+    text-align: center;
+
+    h2{
+      font-size: 2.25rem;
+      font-weight: 600;
+      margin-bottom: 1rem;
+    }
+    p{
+      font-size: 1rem;
+    }
+
+  }
+
+  .type-all{
+
+    padding: 6.2rem 0 4.2rem;
+    width: 100%;
+
+    .section-text h3{
+      font-size: 1.5rem;
+      margin: 0 0 .75rem;
+
+    }
+    .section-text p{
+      font-size: 1rem;
+    }
+    .image-container{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 1rem 1rem 0 1rem;
+      //height: 20rem;
+      img{
+        width: 80%;
+        height: 15rem;
+        border-radius: 12px;
+
+      }
+    }
+  }
+}
+

assets/styles/modules/_app.scss

@@ -6,3 +6,14 @@
   text-decoration: none;
   text-rendering: optimizeLegibility;
 }
+
+body{
+  font-size: 16px;
+  font-family: 'Lato', sans-serif;
+}
+
+/*img{
+  max-width: 100%;
+}*/
+
+

assets/styles/modules/_breakpoints.scss

@@ -2,7 +2,121 @@
 @import "variables";
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@media screen and (min-width: 992px) {
+
+  .hero{
+    margin: 0 auto;
+    height: 90vh;
+    display: grid;
+    grid: auto / repeat(2, 50%);
+    grid-template-areas:
+    "text img";
+
+    .container-hero{
+      grid-area: text;
+
+    }
+    .images {
+      grid-area: img;
+      padding: 1rem 1rem 0 1rem;
+    }
+  }
+  .type-container1{
+    margin: 0 auto;
+    height: 50vh;
+    display: grid;
+    grid: 100px auto 100px / repeat(2, 50%);
+    grid-template-areas:
+    "text img";
+
+    .section-text{
+      grid-area: text;
+    }
+
+    .images{
+      grid-area: img;
+      padding: 1rem 1rem 0 1rem;
+
+    }
+  }
+
+  .type-container2{
+    margin: 0 auto;
+    height: 50vh;
+    //width: 90%;
+    display: grid;
+    grid: 100px auto 100px / repeat(2, 50%);
+    grid-template-areas:
+    "img text";
+
+    .section-text{
+      grid-area: text;
+    }
+
+    .images{
+      grid-area: img;
+      padding: 1rem 1rem 0 1rem;
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*  .main-container{
+    width: 100%;
+    margin: 0 auto;
+    display: grid;
+    grid: 100px auto 100px / repeat(2, 50%);
+  }
+  grid-template-areas:
+    "section section"
+    "type-1 type-1"
+    "type-2 type-2"
+    "type-1 type-1"
+    "type-2 type-2"
+    "type-1 type-1";
+
+  .text-main{
+    text-align: center;
+    grid-area: section;
+  }
+
+  .type-1{
+    grid-area: type-1;
+  }
+
+  .type-2{
+    grid-area: type2;
+  }*/

assets/styles/modules/_variables.scss

@@ -1,2 +1,11 @@
-$colorLight: #fff;
-$colorDark: #000;
+
+
+$colorHeader: #6e6767;
+$colorMain: #54117e;
+$backgroundSection: #F4F7FC;
+$backgroundFooter: #222121;
+
+
+$img-width: 288px;
+$img-height: 190px
+