From e4e5a62b7addb97399d51e3d30ebd754a6dae86e Mon Sep 17 00:00:00 2001 From: oscar Date: Fri, 17 Jul 2020 20:29:12 -0500 Subject: [PATCH 1/3] Change style and applied BEM and SASS --- index.html | 54 ++++++++++++++++++++++++++ styles.css | 96 +++++++++++++++++++++++++++++++++++++++++++++ styles.css.map | 1 + styles.scss | 103 +++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 254 insertions(+) create mode 100644 index.html create mode 100644 styles.css create mode 100644 styles.css.map create mode 100644 styles.scss 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

+ +
+
+

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..5b72cd3 --- /dev/null +++ b/styles.css @@ -0,0 +1,96 @@ +@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; +} + +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; + background-color: #2D5F9C; + border: 3px solid #2D5F9C; +} + +footer { + background: #2E9C1E; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; +} + +footer { + 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..ea7bb1c --- /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;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,YA1Cc;EA2Cd;EACA;EACA;EACA;EACA,YA7CW;;AA+CX;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA,YAnES;EAoET,kBArEc;EAsEd;;;AAIJ;EACE,YA5Ec;EA6Ed;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;;AAEA;EACE,OAjGc","file":"styles.css"} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..dfd8389 --- /dev/null +++ b/styles.scss @@ -0,0 +1,103 @@ +@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; + } + } +} + +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; + background-color: $secondary-color; + border: 3px solid $secondary-color; + } +} + +footer { + background: $primary-color; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; +} + +footer { + 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 From 4ed922881dc2f0820aaf88b954e1d820c1153b03 Mon Sep 17 00:00:00 2001 From: oscar Date: Fri, 17 Jul 2020 20:30:42 -0500 Subject: [PATCH 2/3] Change style and applied BEM and SASS --- styles.css | 3 --- styles.css.map | 2 +- styles.scss | 5 +---- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/styles.css b/styles.css index 5b72cd3..b13a216 100644 --- a/styles.css +++ b/styles.css @@ -74,9 +74,6 @@ footer { justify-content: center; align-items: center; padding: 30px 0px; -} - -footer { position: absolute; bottom: 0; left: 0; diff --git a/styles.css.map b/styles.css.map index ea7bb1c..b78e6b7 100644 --- a/styles.css.map +++ b/styles.css.map @@ -1 +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;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,YA1Cc;EA2Cd;EACA;EACA;EACA;EACA,YA7CW;;AA+CX;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA,YAnES;EAoET,kBArEc;EAsEd;;;AAIJ;EACE,YA5Ec;EA6Ed;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;;;AAIJ;EACE;;AAEA;EACE,OAjGc","file":"styles.css"} \ No newline at end of file +{"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;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,YA1Cc;EA2Cd;EACA;EACA;EACA;EACA,YA7CW;;AA+CX;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA,YAnES;EAoET,kBArEc;EAsEd;;;AAGJ;EACE,YA3Ec;EA4Ed;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE,OA9Fc","file":"styles.css"} \ No newline at end of file diff --git a/styles.scss b/styles.scss index dfd8389..254f7ad 100644 --- a/styles.scss +++ b/styles.scss @@ -74,7 +74,6 @@ main { border: 3px solid $secondary-color; } } - footer { background: $primary-color; display: flex; @@ -82,13 +81,11 @@ footer { justify-content: center; align-items: center; padding: 30px 0px; -} - -footer { position: absolute; bottom: 0; left: 0; right: 0; + p { margin: 0px; } From 47140fb63a9b1eb1d072d531fadb79df867fbadc Mon Sep 17 00:00:00 2001 From: oscar Date: Fri, 17 Jul 2020 20:34:17 -0500 Subject: [PATCH 3/3] Change style and applied BEM and SASS --- styles.css | 6 ++++++ styles.css.map | 2 +- styles.scss | 8 ++++++++ 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/styles.css b/styles.css index b13a216..f0e31d3 100644 --- a/styles.css +++ b/styles.css @@ -18,6 +18,7 @@ header ul { } header ul li { margin-right: 1rem; + cursor: pointer; } main { @@ -63,9 +64,14 @@ main { 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; diff --git a/styles.css.map b/styles.css.map index b78e6b7..1aea9f8 100644 --- a/styles.css.map +++ b/styles.css.map @@ -1 +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;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,YA1Cc;EA2Cd;EACA;EACA;EACA;EACA,YA7CW;;AA+CX;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA,YAnES;EAoET,kBArEc;EAsEd;;;AAGJ;EACE,YA3Ec;EA4Ed;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;AAEA;EACE,OA9Fc","file":"styles.css"} \ No newline at end of file +{"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 index 254f7ad..a2141f3 100644 --- a/styles.scss +++ b/styles.scss @@ -23,6 +23,7 @@ header { li { margin-right: 1rem; + cursor: pointer; } } } @@ -70,10 +71,17 @@ main { 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;