diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1e715ff
--- /dev/null
+++ b/index.html
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+ Challenge CSS 02
+
+
+
+ LOGO
+
+ - ABOUT
+ - ARTICLES
+ - SUBSCRIBE
+
+
+
+
+ GREEN
+ HOLISTIC HEALTH
+
+
+
+
+ 
+ Title
+ Subtitle
+
+
+
+ 
+ Title
+ Subtitle
+
+
+
+ 
+ Title
+ Subtitle
+
+
+
+
+
+
+
+
+
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..e412e90
--- /dev/null
+++ b/main.css
@@ -0,0 +1,117 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", sans-serif;
+}
+
+header {
+ background: #fff0f0;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: justify;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ padding: 0px 20px;
+}
+
+main {
+ text-align: center;
+}
+
+.cards {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: space-evenly;
+ -ms-flex-pack: space-evenly;
+ justify-content: space-evenly;
+ margin-bottom: 30px;
+}
+
+.card {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 15px;
+ overflow: hidden;
+ background: #fff0f0;
+ -webkit-transition-duration: 0.3s;
+ transition-duration: 0.3s;
+}
+
+.card:hover {
+ -webkit-box-shadow: 0 0 5px 0 #f8a7a7;
+ box-shadow: 0 0 5px 0 #f8a7a7;
+ -webkit-transform: translateY(-10px);
+ transform: translateY(-10px);
+}
+
+.card__img {
+ width: 200px;
+ height: 120px;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+
+.card__subtitle {
+ margin-top: 0px;
+}
+
+.card__button {
+ padding: 10px 20px;
+ width: 100%;
+ border: 3px solid #f8a7a7;
+ background-color: #f8a7a7;
+ color: #fafafa;
+ font-weight: bold;
+ outline: none;
+ cursor: pointer;
+}
+
+footer {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background: #fff0f0;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 30px 0px;
+}
+
+footer p {
+ margin: 0px;
+}
+
+.links {
+ margin: 15px 0px;
+}
+
+.links-1 {
+ color: ORCHID;
+}
+
+.links-2 {
+ color: MEDIUMTURQUOISE;
+}
+
+.links-3 {
+ color: SALMON;
+}
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/main.css.map b/main.css.map
new file mode 100644
index 0000000..608cf02
--- /dev/null
+++ b/main.css.map
@@ -0,0 +1,9 @@
+{
+ "version": 3,
+ "mappings": "AAAA,OAAO,CAAC,mEAAI;AAYZ,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,oBAAoB;CAClC;;AAED,AAAA,MAAM,CAAC;EACL,UAAU,EAjBO,OAAkB;EAkBnC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,OAAO,EAAE,QAAQ;CAClB;;AAED,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,MAAM;CACnB;;AAED,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,aAAa,EAAE,IAAI;CACpB;;AAED,AAAA,KAAK,CAAC;EA5BJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EA4BnB,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;EAChB,UAAU,EArCO,OAAkB;EAsCnC,mBAAmB,EAAE,IAAI;CAuB1B;;AA5BD,AAME,KANG,AAMF,MAAM,CAAC;EACN,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAvCV,OAAkB;EAwC7B,SAAS,EAAE,iBAAiB;CAC7B;;AACA,AAAD,UAAM,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,KAAK;CAClB;;AACA,AAAD,eAAW,CAAC;EACV,UAAU,EAAE,GAAG;CAChB;;AACA,AAAD,aAAS,CAAC;EACR,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG,CAAC,KAAK,CArDN,OAAkB;EAsD7B,gBAAgB,EAtDL,OAAkB;EAuD7B,KAAK,EAtDK,OAAkB;EAuD5B,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,OAAO;CAChB;;AAcH,AAAA,MAAM,CAAC;EArEL,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EAqEnB,UAAU,EA5EO,OAAkB;EA6EnC,eAAe,EAAE,MAAM;EACvB,OAAO,EAAE,QAAQ;CAIlB;;AARD,AAKE,MALI,CAKF,CAAC,CAAC;EACF,MAAM,EAAE,GAAG;CACZ;;AAGH,AAAA,MAAM,CAAC;EACL,MAAM,EAAE,QAAQ;CAUjB;;AATE,AAAD,QAAG,CAAC;EACF,KAAK,EAAE,MAAM;CACd;;AACA,AAAD,QAAG,CAAC;EACF,KAAK,EAAE,eAAe;CACvB;;AACA,AAAD,QAAG,CAAC;EACF,KAAK,EAAE,MAAM;CACd",
+ "sources": [
+ "main.scss"
+ ],
+ "names": [],
+ "file": "main.css"
+}
\ No newline at end of file
diff --git a/main.scss b/main.scss
new file mode 100644
index 0000000..d95d115
--- /dev/null
+++ b/main.scss
@@ -0,0 +1,98 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
+$color-background: rgb(255, 240, 240);
+$color-button: rgb(248, 167, 167);
+$color-claro: rgb(250, 250, 250);
+
+@mixin alineado-columna {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", sans-serif;
+}
+
+header {
+ background: $color-background;
+ display: flex;
+ justify-content: space-between;
+ padding: 0px 20px;
+}
+
+main {
+ text-align: center;
+}
+
+.cards {
+ display: flex;
+ justify-content: space-evenly;
+ margin-bottom: 30px;
+}
+
+.card {
+ @include alineado-columna;
+ border-radius: 15px;
+ overflow: hidden;
+ background: $color-background;
+ transition-duration: 0.3s;
+ &:hover {
+ box-shadow: 0 0 5px 0 $color-button;
+ transform: translateY(-10px);
+ }
+ &__img {
+ width: 200px;
+ height: 120px;
+ object-fit: cover;
+ }
+ &__subtitle {
+ margin-top: 0px;
+ }
+ &__button {
+ padding: 10px 20px;
+ width: 100%;
+ border: 3px solid $color-button;
+ background-color: $color-button;
+ color: $color-claro;
+ font-weight: bold;
+ outline: none;
+ cursor: pointer;
+ }
+}
+
+// .social {
+// display: flex;
+// justify-content: space-evenly;
+// padding-bottom: 30px;
+// &__button {
+// padding: 10px 20px;
+// border-radius: 20px;
+// border: 3px solid $color-background;
+// }
+// }
+
+footer {
+ @include alineado-columna;
+ background: $color-background;
+ justify-content: center;
+ padding: 30px 0px;
+ & p {
+ margin: 0px;
+ }
+}
+
+.links {
+ margin: 15px 0px;
+ &-1 {
+ color: ORCHID;
+ }
+ &-2 {
+ color: MEDIUMTURQUOISE;
+ }
+ &-3 {
+ color: SALMON;
+ }
+}