From 2bd21d845973328742882c894b170f135523a841 Mon Sep 17 00:00:00 2001 From: masmelacarol Date: Sat, 18 Jul 2020 12:47:03 -0500 Subject: [PATCH] Challenge solved --- index.html | 63 ++++++++++++++++++++++++++++ style.css | 103 +++++++++++++++++++++++++++++++++++++++++++++ style.css.map | 1 + style.scss | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 281 insertions(+) create mode 100644 index.html create mode 100644 style.css create mode 100644 style.css.map create mode 100644 style.scss 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 + + + +
+

LOGO

+ +
+
+

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