diff --git a/assets/styles/components/_footer.scss b/assets/styles/components/_footer.scss
new file mode 100644
index 0000000..0ceb788
--- /dev/null
+++ b/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;}
+}
\ No newline at end of file
diff --git a/assets/styles/components/_header.scss b/assets/styles/components/_header.scss
new file mode 100644
index 0000000..b7508e6
--- /dev/null
+++ b/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;
+    }
+
+  }
+
+
+}
+
+
+
+
+
diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/assets/styles/components/_image.scss b/assets/styles/components/_image.scss
new file mode 100644
index 0000000..87024ed
--- /dev/null
+++ b/assets/styles/components/_image.scss
@@ -0,0 +1,11 @@
+
+/*
+ .images{
+  .img-hero{
+    width: $img-width;
+    height: $img-height;
+    max-width: 100%;
+    border-radius: 20px;
+
+  }
+}*/
diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss
index e69de29..ed878f3 100644
--- a/assets/styles/components/_main.scss
+++ b/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;
+
+      }
+    }
+  }
+}
+
diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss
index cdfd8ae..a6de950 100644
--- a/assets/styles/modules/_app.scss
+++ b/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%;
+}*/
+
+
diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss
index bbbea70..e1ebd3d 100644
--- a/assets/styles/modules/_breakpoints.scss
+++ b/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;
+  }*/
diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss
index 62b9166..d04f892 100644
--- a/assets/styles/modules/_variables.scss
+++ b/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
+
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 84eb7fe..6bb50b5 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -8,6 +8,86 @@
   text-rendering: optimizeLegibility;
 }
 
+body {
+  font-size: 16px;
+  font-family: "Lato", sans-serif;
+}
+
+/*img{
+  max-width: 100%;
+}*/
+@media screen and (min-width: 992px) {
+  .hero {
+    margin: 0 auto;
+    height: 90vh;
+    display: grid;
+    grid: auto/repeat(2, 50%);
+    grid-template-areas: "text img";
+  }
+  .hero .container-hero {
+    grid-area: text;
+  }
+  .hero .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";
+  }
+  .type-container1 .section-text {
+    grid-area: text;
+  }
+  .type-container1 .images {
+    grid-area: img;
+    padding: 1rem 1rem 0 1rem;
+  }
+
+  .type-container2 {
+    margin: 0 auto;
+    height: 50vh;
+    display: grid;
+    grid: 100px auto 100px/repeat(2, 50%);
+    grid-template-areas: "img text";
+  }
+  .type-container2 .section-text {
+    grid-area: text;
+  }
+  .type-container2 .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;
+  }*/
 html {
   font-family: "Inter", sans-serif;
 }
@@ -17,5 +97,105 @@ html {
     font-family: "Inter var", sans-serif;
   }
 }
+.hero {
+  display: grid;
+  place-items: center;
+  width: 100%;
+}
+.hero .container-hero {
+  margin: 5rem 0;
+  padding: 0 1rem 0 1rem;
+  text-align: center;
+}
+.hero .container-hero h1 {
+  font-size: 2.8rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+.hero .container-hero p {
+  font-size: 1.5rem;
+  font-weight: 300;
+}
+.hero .container-hero img {
+  width: 80px;
+  height: 80px;
+  border-radius: 19px;
+  padding: 0;
+  border: 1px solid black;
+}
+.hero .images {
+  width: 80%;
+}
+.hero .images .img-hero {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.main-container {
+  display: grid;
+  margin: 0 auto;
+  width: 90%;
+}
+.main-container .text-main {
+  background-color: #F4F7FC;
+  padding: 6.25rem 0;
+  text-align: center;
+}
+.main-container .text-main h2 {
+  font-size: 2.25rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+.main-container .text-main p {
+  font-size: 1rem;
+}
+.main-container .type-all {
+  padding: 6.2rem 0 4.2rem;
+  width: 100%;
+}
+.main-container .type-all .section-text h3 {
+  font-size: 1.5rem;
+  margin: 0 0 0.75rem;
+}
+.main-container .type-all .section-text p {
+  font-size: 1rem;
+}
+.main-container .type-all .image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 1rem 0 1rem;
+}
+.main-container .type-all .image-container img {
+  width: 80%;
+  height: 15rem;
+  border-radius: 12px;
+}
+
+/*
+ .images{
+  .img-hero{
+    width: $img-width;
+    height: $img-height;
+    max-width: 100%;
+    border-radius: 20px;
+
+  }
+}*/
+footer {
+  display: grid;
+  background-color: #222121;
+  margin-top: 6.25rem;
+  padding: 6.25rem 0;
+}
+footer p {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  color: white;
+  margin-top: 1rem;
+  padding: 0 1rem;
+}
 
 /*# sourceMappingURL=styles.css.map */
diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map
index f39486f..c4d3a18 100644
--- a/assets/styles/styles.css.map
+++ b/assets/styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss","components/_header.scss","components/_main.scss","modules/_variables.scss","components/_image.scss","components/_footer.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;AAAA;ACLA;EAEE;IACE;IACA;IACA;IACA;IACA,qBACA;;EAEA;IACE;;EAGF;IACE;IACA;;;EAGJ;IACE;IACA;IACA;IACA;IACA,qBACA;;EAEA;IACE;;EAGF;IACE;IACA;;;EAKJ;IACE;IACA;IAEA;IACA;IACA,qBACA;;EAEA;IACE;;EAGF;IACE;IACA;;;AAkCN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AF/FA;EAAO;;;AACP;EACE;IAAO;;;AGHT;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AACA;EACE;EACA;;;AClCN;EACE;EACA;EACA;;AAGA;EACE,kBCHgB;EDIhB;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;;AAKJ;EAEE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AE3CR;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;ACDA;EACE;EACA,kBFGiB;EEFjB;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/assets/styles/styles.scss b/assets/styles/styles.scss
index 43949c9..714a3a3 100644
--- a/assets/styles/styles.scss
+++ b/assets/styles/styles.scss
@@ -6,5 +6,7 @@
 @import "modules/variables.scss";
 
 // COMPONENTS
+@import "components/header.scss";
 @import "components/main.scss";
-@import "components/hero.scss";
+@import "components/image.scss";
+@import "components/footer.scss";
diff --git a/index.html b/index.html
index 747a38f..15c8b2c 100644
--- a/index.html
+++ b/index.html
@@ -2,11 +2,110 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg" sizes="any">
     <link rel="stylesheet" href="assets/styles/styles.css">
+    <base href="https://picsum.photos/" target="_blank"/>
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap" rel="stylesheet">
+
     <title>Sass Project</title>
 </head>
 <body>
-<h1 class="title">Hello world!</h1>
+
+
+<header class="hero">
+
+    <section class="container-hero">
+<!--        <img src="https://static.thenounproject.com/png/533676-200.png" alt="">-->
+        <h1 class="title-hero">Lorem ipsum </h1>
+        <p class="text-hero">Lorem ipsum dolor sit amet.</p>
+    </section>
+
+    <figure class="images">
+        <img class="img-hero" src="500/400?random=1" alt="image1"/>
+    </figure>
+
+</header>
+
+<main class="main-container">
+
+    <section class="text-main">
+        <h2>Lorem ipsum consectetur adipisicing</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci assumenda</p>
+    </section>
+
+
+    <article class="type-all type-container1">
+        <section class="section-text">
+            <h3 class="subtitle">consectetur</h3>
+            <p class="text-article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta
+                dolore </p>
+        </section>
+
+        <figure class="image-container">
+            <img src="500/400?random=2" alt="image2"/>
+        </figure>
+    </article>
+
+    <article class="type-all type-container2">
+
+        <section class="section-text">
+            <h3 class="subtitle">amet</h3>
+            <p class="text-article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta
+                dolore</p>
+        </section>
+
+        <figure class="image-container">
+            <img src="500/400?random=3" alt="image2"/>
+        </figure>
+    </article>
+
+    <article class="type-all type-container1">
+        <section class="section-text">
+            <h3 class="subtitle">ipsum</h3>
+            <p class="text-article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta
+                dolore</p>
+        </section>
+
+        <figure class="image-container">
+            <img src="500/400?random=4" alt="image2"/>
+        </figure>
+    </article>
+
+    <article class="type-all type-container2">
+
+        <section class="section-text">
+            <h3 class="subtitle">Corporis</h3>
+            <p class="text-article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta
+                dolore</p>
+        </section>
+        <figure class="image-container">
+            <img src="500/400?random=5" alt="image2"/>
+        </figure>
+    </article>
+
+    <article class="type-all type-container1">
+        <section class="section-text">
+            <h3 class="subtitle">sit</h3>
+            <p class="text-article">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis cum dicta
+                dolore</p>
+        </section>
+        <figure class="image-container">
+            <img src="500/400?random=6" alt="image2"/>
+        </figure>
+    </article>
+
+</main>
+
+<footer>
+    <section class="text-footer">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
+        <p>Ab accusamus deleniti exercitationem</p>
+        <p> Ab accusamus deleniti exercitationem</p>
+    </section>
+</footer>
+
 </body>
 </html>