diff --git a/index.html b/index.html
new file mode 100644
index 0000000..83bafb0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+ GREEN: HOLISTIC HEALTH
+
+
+
+
+
+ GREEN
+ HOLISTIC HEALTH
+
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+ 
+ Title
+ Subtitle
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a7697c1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,103 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+:root {
+ --bg-primary: HONEYDEW;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: "Roboto", sans-serif;
+}
+
+.header {
+ background: var(--bg-primary);
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ padding: 0px 20px;
+}
+.header__navigation {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ list-style: none;
+}
+.header__navigation--item {
+ margin-left: 10px;
+}
+
+main {
+ text-align: center;
+}
+
+.cards {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ margin-bottom: 30px;
+ margin: 10px;
+}
+.cards .card {
+ border-radius: 15px;
+ overflow: hidden;
+ background: var(--bg-primary);
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
+}
+.cards .card__img {
+ width: 200px;
+ height: 120px;
+ object-fit: cover;
+}
+.cards .card__subtitle {
+ margin-top: 0px;
+}
+
+.social {
+ display: flex;
+ justify-content: space-evenly;
+ flex-wrap: wrap;
+ padding-bottom: 30px;
+}
+.social__button {
+ padding: 10px 20px;
+ border-radius: 20px;
+ border: 3px solid var(--bg-primary);
+}
+
+footer {
+ background: var(--bg-primary);
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+ flex-direction: column;
+ align-items: center;
+ padding: 30px 0px;
+}
+footer p {
+ margin: 0px;
+}
+footer .social-media {
+ margin: 15px 0px;
+}
+footer .social-media__link {
+ text-decoration: none;
+ color: #343434;
+}
+footer .social-media__link:hover {
+ color: blue;
+}
+footer .social-media__link .facebook {
+ color: ORCHID;
+}
+footer .social-media__link .instagram {
+ color: MEDIUMTURQUOISE;
+}
+footer .social-media__link .twitter {
+ color: SALMON;
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/style.css.map b/style.css.map
new file mode 100644
index 0000000..b51f15b
--- /dev/null
+++ b/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAQ;AAER;EACE;;;AAGF;EACE;EACA;EACA;;;AAaF;EACE;EAVA;EACA,iBAUc;EATd;EAIA;;AAQA;EAdA;EACA,iBAcgB;EAbhB;EAcE;;AAEA;EACE;;;AAKN;EACE;;;AAGF;EA5BE;EACA,iBA4Bc;EA3Bd;EA4BA;EACA;;AAEA;EACE;EACA;EACA;EApCF;EACA,iBAoCgB;EAnChB;EAoCE;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;;;AAMN;EAtDE;EACA,iBAsDc;EArDd;EAsDA;;AAEA;EApDA;EAsDE;EACA;;;AAIJ;EACE;EAlEA;EACA,iBAkEc;EAjEd;EAkEA;EACA;EA/DA;;AAkEA;EACE;;AAGF;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
new file mode 100644
index 0000000..7ff9d35
--- /dev/null
+++ b/style.scss
@@ -0,0 +1,114 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+:root {
+ --bg-primary: HONEYDEW;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Roboto', sans-serif;
+}
+
+@mixin flex($j-c) {
+ display: flex;
+ justify-content: $j-c;
+ flex-wrap: wrap;
+}
+
+@mixin padding($t-b, $l-r) {
+ padding: $t-b $l-r;
+}
+
+.header {
+ background: var(--bg-primary);
+ @include flex(space-between);
+ @include padding(0px, 20px);
+
+ &__navigation {
+ @include flex(space-evenly);
+ list-style: none;
+
+ &--item {
+ margin-left: 10px;
+ }
+ }
+}
+
+main {
+ text-align: center;
+}
+
+.cards {
+ @include flex(space-evenly);
+ margin-bottom: 30px;
+ margin: 10px;
+
+ .card {
+ border-radius: 15px;
+ overflow: hidden;
+ background: var(--bg-primary);
+ @include flex(center);
+ flex-direction: column;
+ align-items: center;
+
+ &__img {
+ width: 200px;
+ height: 120px;
+ object-fit: cover;
+ }
+
+ &__subtitle {
+ margin-top: 0px;
+ }
+ }
+}
+
+
+.social {
+ @include flex(space-evenly);
+ padding-bottom: 30px;
+
+ &__button {
+ @include padding(10px, 20px);
+ border-radius: 20px;
+ border: 3px solid var(--bg-primary);
+ }
+}
+
+footer {
+ background: var(--bg-primary);
+ @include flex(center);
+ flex-direction: column;
+ align-items: center;
+ @include padding(30px, 0px);
+
+ p {
+ margin: 0px;
+ }
+
+ .social-media {
+ margin: 15px 0px;
+
+ &__link {
+ text-decoration: none;
+ color: #343434;
+
+ &:hover {
+ color: blue;
+ }
+
+ .facebook {
+ color: ORCHID;
+ }
+
+ .instagram {
+ color: MEDIUMTURQUOISE;
+ }
+
+ .twitter {
+ color: SALMON;
+ }
+ }
+ }
+}
\ No newline at end of file