diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..1c40133
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.sass-cache/
\ No newline at end of file
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..926780f
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,62 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", sans-serif; }
+
+header {
+ background: HONEYDEW;
+ display: flex;
+ justify-content: space-between;
+ padding: 0px 20px; }
+
+main {
+ text-align: center; }
+
+.cards {
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: 30px; }
+
+.card {
+ border-radius: 15px;
+ overflow: hidden;
+ background: HONEYDEW;
+ display: flex;
+ flex-direction: column;
+ align-items: center; }
+ .card__img {
+ width: 200px;
+ height: 120px;
+ object-fit: cover; }
+ .card__subtitle {
+ margin-top: 0px; }
+
+.social {
+ display: flex;
+ justify-content: space-evenly;
+ padding-bottom: 30px; }
+ .social__button {
+ padding: 10px 20px;
+ border-radius: 20px;
+ border: 3px solid HONEYDEW; }
+
+.footer {
+ background: HONEYDEW;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 30px 0px; }
+ .footer__paragraph {
+ margin: 0px; }
+ .footer__links {
+ margin: 15px 0px; }
+ .footer__link--1 {
+ color: ORCHID; }
+ .footer__link--2 {
+ color: MEDIUMTURQUOISE; }
+ .footer__link--3 {
+ color: SALMON; }
+
+/*# sourceMappingURL=index.css.map */
diff --git a/css/index.css.map b/css/index.css.map
new file mode 100644
index 0000000..c854cba
--- /dev/null
+++ b/css/index.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAAQ,2EAAmE;AAc3E,IAAK;EACH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,oBAAoB;;AAGnC,MAAO;EACL,UAAU,EApBU,QAAQ;EAqB5B,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,OAAO,EAAE,QAAQ;;AAGnB,IAAK;EACH,UAAU,EAAE,MAAM;;AAGpB,MAAO;EACL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,aAAa,EAAE,IAAI;;AAGrB,KAAM;EACJ,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;EAChB,UAAU,EAvCU,QAAQ;EAwC5B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,UAAO;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,KAAK;EAEnB,eAAY;IACV,UAAU,EAAE,GAAG;;AAInB,OAAQ;EACN,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,cAAc,EAAE,IAAI;EACpB,eAAU;IACR,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,kBAA8B;;AAI1C,OAAQ;EACN,UAAU,EAjEU,QAAQ;EAM5B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,QAAQ;EAyDjB,kBAAa;IACX,MAAM,EAAE,GAAG;EAEb,cAAS;IACP,MAAM,EAAE,QAAQ;EAElB,gBAAW;IACT,KAAK,EAzEM,MAAM;EA2EnB,gBAAW;IACT,KAAK,EA3EM,eAAe;EA6E5B,gBAAW;IACT,KAAK,EA7EM,MAAM",
+"sources": ["../sass/index.scss"],
+"names": [],
+"file": "index.css"
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a724d7f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Reto 02 CSS - Sergio Ruiz
+
+
+
+ LOGO
+
+ - ABOUT
+ - ARTICLES
+ - SUBSCRIBE
+
+
+
+ GREEN
+ HOLISTIC HEALTH
+
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+
+
+
+
+
+
+
+
diff --git a/sass/index.scss b/sass/index.scss
new file mode 100644
index 0000000..7345ea6
--- /dev/null
+++ b/sass/index.scss
@@ -0,0 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+$backgroundPrincipal: HONEYDEW;
+$colorEnlace1: ORCHID;
+$colorEnlace2: MEDIUMTURQUOISE;
+$colorEnlace3: SALMON;
+
+@mixin footer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 30px 0px;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", sans-serif;
+}
+
+header {
+ background: $backgroundPrincipal;
+ display: flex;
+ justify-content: space-between;
+ padding: 0px 20px;
+}
+
+main {
+ text-align: center;
+}
+
+.cards {
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: 30px;
+}
+
+.card {
+ border-radius: 15px;
+ overflow: hidden;
+ background: $backgroundPrincipal;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ &__img {
+ width: 200px;
+ height: 120px;
+ object-fit: cover;
+ }
+ &__subtitle {
+ margin-top: 0px;
+ }
+}
+
+.social {
+ display: flex;
+ justify-content: space-evenly;
+ padding-bottom: 30px;
+ &__button {
+ padding: 10px 20px;
+ border-radius: 20px;
+ border: 3px solid $backgroundPrincipal;
+ }
+}
+
+.footer {
+ background: $backgroundPrincipal;
+ @include footer;
+ &__paragraph {
+ margin: 0px;
+ }
+ &__links {
+ margin: 15px 0px;
+ }
+ &__link--1 {
+ color: $colorEnlace1;
+ }
+ &__link--2 {
+ color: $colorEnlace2;
+ }
+ &__link--3 {
+ color: $colorEnlace3;
+ }
+}