diff --git a/index.html b/index.html
new file mode 100644
index 0000000..bbdd9b8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,54 @@
+
+
+
+
+
+ Challenge CSS 02
+
+
+
+
+ Green
+
+ - ABOUT
+ - ARTICLES
+ - SUBSCRIBE
+
+
+
+ GREEN
+ HOLISTIC HEALTH
+
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..f0e31d3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,99 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+body {
+ margin: 0;
+ padding: 0;
+ color: white;
+ font-family: "Roboto", sans-serif;
+}
+
+header {
+ background: #2E9C1E;
+ display: flex;
+ justify-content: space-between;
+ padding: 0px 20px;
+}
+header ul {
+ display: flex;
+ list-style: none;
+}
+header ul li {
+ margin-right: 1rem;
+ cursor: pointer;
+}
+
+main {
+ margin-top: 10px;
+ color: black;
+ text-align: center;
+}
+
+.cards {
+ display: flex;
+ justify-content: center;
+ margin: 30px 0;
+}
+
+.card {
+ border-radius: 15px;
+ overflow: hidden;
+ background: #2E9C1E;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 20px;
+ box-shadow: 1px 1px 12px 0px #0000008a;
+}
+.card__img {
+ width: 400px;
+ height: 350px;
+ object-fit: cover;
+}
+.card__subtitle {
+ margin-top: 0px;
+}
+
+.social {
+ display: flex;
+ justify-content: center;
+ padding-bottom: 30px;
+}
+.social__button {
+ padding: 10px 20px;
+ margin: 0 20px;
+ border-radius: 20px;
+ color: white;
+ font-weight: bold;
+ box-shadow: 1px 1px 12px 0px #0000008a;
+ cursor: pointer;
+ background-color: #2D5F9C;
+ border: 3px solid #2D5F9C;
+}
+.social__button:hover {
+ background-color: white;
+ color: #2D5F9C;
+}
+
+footer {
+ background: #2E9C1E;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 30px 0px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+footer p {
+ margin: 0px;
+}
+
+.pages {
+ margin: 15px 0px;
+}
+.pages__link {
+ color: #2D5F9C;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/styles.css.map b/styles.css.map
new file mode 100644
index 0000000..1aea9f8
--- /dev/null
+++ b/styles.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ;AAMR;EACE;EACA;EACA;EACA;;;AAGF;EACE,YAZc;EAad;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,YA3Cc;EA4Cd;EACA;EACA;EACA;EACA,YA9CW;;AAgDX;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA,YApES;EAqET;EACA,kBAvEc;EAwEd;;AAEA;EACE;EACA,OA5EY;;;AAiFlB;EACE,YAnFc;EAoFd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE,OAtGc","file":"styles.css"}
\ No newline at end of file
diff --git a/styles.scss b/styles.scss
new file mode 100644
index 0000000..a2141f3
--- /dev/null
+++ b/styles.scss
@@ -0,0 +1,108 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+$primary-color: #2E9C1E;
+$secondary-color: #2D5F9C;
+$box-shadow: 1px 1px 12px 0px #0000008a;
+
+body {
+ margin: 0;
+ padding: 0;
+ color: white;
+ font-family: 'Roboto', sans-serif;
+}
+
+header {
+ background: $primary-color;
+ display: flex;
+ justify-content: space-between;
+ padding: 0px 20px;
+
+ ul {
+ display: flex;
+ list-style: none;
+
+ li {
+ margin-right: 1rem;
+ cursor: pointer;
+ }
+ }
+}
+
+main {
+ margin-top: 10px;
+ color: black;
+ text-align: center;
+}
+
+.cards {
+ display: flex;
+ justify-content: center;
+ margin: 30px 0;
+}
+
+.card {
+ border-radius: 15px;
+ overflow: hidden;
+ background: $primary-color;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 0 20px;
+ box-shadow: $box-shadow;
+
+ &__img {
+ width: 400px;
+ height: 350px;
+ object-fit: cover;
+ }
+ &__subtitle {
+ margin-top: 0px;
+ }
+}
+
+.social {
+ display: flex;
+ justify-content: center;
+ padding-bottom: 30px;
+ &__button {
+ padding: 10px 20px;
+ margin: 0 20px;
+ border-radius: 20px;
+ color: white;
+ font-weight: bold;
+ box-shadow: $box-shadow;
+ cursor: pointer;
+ background-color: $secondary-color;
+ border: 3px solid $secondary-color;
+
+ &:hover {
+ background-color: white;
+ color: $secondary-color;
+ }
+ }
+}
+
+footer {
+ background: $primary-color;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 30px 0px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+
+ p {
+ margin: 0px;
+ }
+}
+
+.pages {
+ margin: 15px 0px;
+
+ &__link {
+ color: $secondary-color;
+ }
+}
\ No newline at end of file