diff --git a/index.html b/index.html
new file mode 100644
index 0000000..065f19c
--- /dev/null
+++ b/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+ Platzi Master: CSS to SASS
+
+
+
+
+
+ LOGO
+
+ - ABOUT
+ - ARTICLES
+ - SUBSCRIBE
+
+
+
+ GREEN
+ HOLISTIC HEALTH
+
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+
+
+
+
+
+
+
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..371641b
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,79 @@
+@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 p {
+ margin: 0px;
+}
+
+.links {
+ margin: 15px 0px;
+}
+
+.link-1 {
+ color: ORCHID;
+}
+.link-2 {
+ color: MEDIUMTURQUOISE;
+}
+.link-3 {
+ color: SALMON;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/styles.css.map b/styles.css.map
new file mode 100644
index 0000000..0448cdd
--- /dev/null
+++ b/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ;AAMR;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAIA;EAxEA,OAyEsB;;AAEtB;EA3EA,OA4EuB;;AAEvB;EA9EA,OA+EsB","file":"styles.css"}
\ No newline at end of file
diff --git a/styles.scss b/styles.scss
new file mode 100644
index 0000000..54d707b
--- /dev/null
+++ b/styles.scss
@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+@mixin color_link($color) {
+ color: $color;
+}
+
+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;
+ &__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 HONEYDEW;
+ }
+}
+
+footer {
+ background: HONEYDEW;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 30px 0px;
+
+ p {
+ margin: 0px;
+ }
+}
+
+.links {
+ margin: 15px 0px;
+}
+
+.link {
+ &-1 {
+ @include color_link(ORCHID);
+ }
+ &-2 {
+ @include color_link( MEDIUMTURQUOISE);
+ }
+ &-3 {
+ @include color_link(SALMON);
+ }
+}