diff --git a/assets/styles/components/_hero.scss b/assets/styles/components/_hero.scss
index e69de29..f6c5ef4 100644
--- a/assets/styles/components/_hero.scss
+++ b/assets/styles/components/_hero.scss
@@ -0,0 +1,51 @@
+.hero{
+  display: grid;
+  grid-template: 60vh 40vh/ 80% ;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.section1
+{
+
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 10% 100px 10%;
+}
+
+h2
+{
+  font-size: $titleSize;
+  margin-bottom: $marginBottomTitle;
+}
+
+h1
+{
+  text-align: center;
+  font-size: $titleSize;
+  margin-bottom: 150px;
+}
+
+.section2
+{
+  display: grid;
+  grid-template: 40vh 40vh/ 80% ;
+  justify-content: center;
+  align-items: center;
+}
+
+footer
+{
+  background: black;
+  color: white;
+  width: 100%;
+  padding: 50px;
+  text-align: center;
+  margin-top: 100px;
+}
+
+
+
+
diff --git a/assets/styles/components/_main.scss b/assets/styles/components/_main.scss
index e69de29..65ff2f4 100644
--- a/assets/styles/components/_main.scss
+++ b/assets/styles/components/_main.scss
@@ -0,0 +1,32 @@
+.container-image-hero
+{
+   width: $figure;
+}
+
+
+.image
+{
+   width: $widthImagesPhone;
+   border-radius: $borderRadius;
+
+}
+
+.subtitle
+{
+
+}
+
+section
+{
+   margin-top: 100px;
+}
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/styles/components/_section1.scss b/assets/styles/components/_section1.scss
new file mode 100644
index 0000000..4cfef60
--- /dev/null
+++ b/assets/styles/components/_section1.scss
@@ -0,0 +1,5 @@
+.section1
+{
+  display: grid;
+  grid-template: 20vh 40vh 40vh / 80%;
+}
diff --git a/assets/styles/modules/_variables.scss b/assets/styles/modules/_variables.scss
index 62b9166..c3d977c 100644
--- a/assets/styles/modules/_variables.scss
+++ b/assets/styles/modules/_variables.scss
@@ -1,2 +1,7 @@
 $colorLight: #fff;
 $colorDark: #000;
+$widthImagesPhone: 100%;
+$figure: 100%;
+$borderRadius: 20px;
+$titleSize: 6rem;
+$marginBottomTitle: 150px;
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 84eb7fe..7456bb0 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -17,5 +17,58 @@ html {
     font-family: "Inter var", sans-serif;
   }
 }
+.container-image-hero {
+  width: 100%;
+}
+
+.image {
+  width: 100%;
+  border-radius: 20px;
+}
+
+section {
+  margin-top: 100px;
+}
+
+.hero {
+  display: grid;
+  grid-template: 60vh 40vh/80%;
+  justify-content: center;
+  align-items: center;
+}
+
+.section1 {
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  padding: 100px 10% 100px 10%;
+}
+
+h2 {
+  font-size: 6rem;
+  margin-bottom: 150px;
+}
+
+h1 {
+  text-align: center;
+  font-size: 6rem;
+  margin-bottom: 150px;
+}
+
+.section2 {
+  display: grid;
+  grid-template: 40vh 40vh/80%;
+  justify-content: center;
+  align-items: center;
+}
+
+footer {
+  background: black;
+  color: white;
+  width: 100%;
+  padding: 50px;
+  text-align: center;
+  margin-top: 100px;
+}
 
 /*# sourceMappingURL=styles.css.map */
diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map
index f39486f..addf613 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","components/_main.scss","modules/_variables.scss","components/_hero.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO;;;AEHT;EAEG,OCCM;;;ADGT;EAEG,OCNgB;EDOhB,eCLY;;;ADcf;EAEG;;;AEpBH;EACE;EACA;EACA;EACA;;;AAIF;EAGE;EACA;EACA;EACA;;;AAGF;EAEE,WDdU;ECeV,eDdkB;;;ACiBpB;EAEE;EACA,WDrBU;ECsBV;;;AAGF;EAEE;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EACA","file":"styles.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 747a38f..62d2cb8 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,83 @@
     <meta charset="UTF-8">
     <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg" sizes="any">
     <link rel="stylesheet" href="assets/styles/styles.css">
-    <title>Sass Project</title>
+    <base href="https://picsum.photos/" target="_blank" />
+    <title>Lorem Picsum</title>
 </head>
 <body>
-<h1 class="title">Hello world!</h1>
+    <main >
+        <section class="hero">
+
+            <div class="content-hero">
+                <h1 class="title-hero">Lorem picsum</h1>
+                <p class="p-hero">
+                    Lorem ipsum dolor sit amet, consectetur
+                    adipisicing elit. Aut consequatur consequuntur,
+                    culpa distinctio dolor doloremque ea fugiat ipsum
+                    laboriosam minus neque officia perferendis quae quia
+                    saepe sint sit tempora voluptas?
+                </p>
+            </div>
+            <figure class="container-image-hero">
+                <img class="image image-hero" src="1200/600?random=1" alt="image">
+            </figure>
+        </section>
+
+        <section class="section1">
+
+                <h2 class="subtitle">Easy to use, stylish </h2>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+                    Accusantium consequuntur cupiditate debitis distinctio dolore
+                    error est expedita, harum illum impedit incidunt inventore neque
+                    possimus similique soluta suscipit unde veniam voluptatibus?
+                </p>
+                <br>
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
+                    adipisci asperiores aut corporis debitis earum, error id molestias
+                    nostrum omnis optio, porro quam quod repudiandae rerum soluta
+                    tempora veritatis voluptates.
+                </p>
+        </section>
+
+        <section class="section2">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus
+                est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate
+                eum itaque molestiae, nesciunt non quo saepe, sint totam.
+            </p>
+            <img class="image" src="1200/600?grayscale" alt="image">
+        </section>
+
+        <section class="section2">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus
+                est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate
+                eum itaque molestiae, nesciunt non quo saepe, sint totam.
+            </p>
+            <img class="image" src="seed/picsum/1200/600" alt="image">
+        </section>
+        <section class="section2">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus
+                est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate
+                eum itaque molestiae, nesciunt non quo saepe, sint totam.
+            </p>
+            <img class="image" src="1200/600/?blur=2" alt="image">
+        </section>
+        <section class="section2">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis delectus
+                est explicabo harum neque tenetur vero! Aspernatur, at autem cum cupiditate
+                eum itaque molestiae, nesciunt non quo saepe, sint totam.
+            </p>
+            <img class="image" src="id/237/1200/600" alt="image">
+        </section>
+    </main>
+    <footer>
+        <p>created by  <strong>William Aguilar</strong> </p>
+    </footer>
+
 </body>
 </html>