From 66a281ddc39bd263b21a85077cc613e2519b8cb9 Mon Sep 17 00:00:00 2001 From: Danelia Sanchez Date: Sat, 15 Aug 2020 23:40:16 -0500 Subject: [PATCH] sass challenge completed --- index.html | 54 ++++++++++++++++++++++++++++++++ styles.css | 79 ++++++++++++++++++++++++++++++++++++++++++++++ styles.css.map | 1 + styles.scss | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 219 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..065f19c --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + Platzi Master: CSS to SASS + + + + +
+

LOGO

+ +
+
+

GREEN

+

HOLISTIC HEALTH

+
+
+
+ +

Title

+

Subtitle

+
+
+ +

Title

+

Subtitle

+
+
+ +

Title

+

Subtitle

+
+
+
+ + + +
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..371641b --- /dev/null +++ b/styles.css @@ -0,0 +1,79 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} + +header { + background: HONEYDEW; + display: flex; + justify-content: space-between; + padding: 0px 20px; +} + +main { + text-align: center; +} + +.cards { + display: flex; + justify-content: space-evenly; + margin-bottom: 30px; +} + +.card { + border-radius: 15px; + overflow: hidden; + background: HONEYDEW; + display: flex; + flex-direction: column; + align-items: center; +} +.card__img { + width: 200px; + height: 120px; + object-fit: cover; +} +.card__subtitle { + margin-top: 0px; +} + +.social { + display: flex; + justify-content: space-evenly; + padding-bottom: 30px; +} +.social__button { + padding: 10px 20px; + border-radius: 20px; + border: 3px solid HONEYDEW; +} + +footer { + background: HONEYDEW; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; +} +footer p { + margin: 0px; +} + +.links { + margin: 15px 0px; +} + +.link-1 { + color: ORCHID; +} +.link-2 { + color: MEDIUMTURQUOISE; +} +.link-3 { + color: SALMON; +} + +/*# sourceMappingURL=styles.css.map */ diff --git a/styles.css.map b/styles.css.map new file mode 100644 index 0000000..0448cdd --- /dev/null +++ b/styles.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":"AAAQ;AAMR;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAIA;EAxEA,OAyEsB;;AAEtB;EA3EA,OA4EuB;;AAEvB;EA9EA,OA+EsB","file":"styles.css"} \ No newline at end of file diff --git a/styles.scss b/styles.scss new file mode 100644 index 0000000..54d707b --- /dev/null +++ b/styles.scss @@ -0,0 +1,85 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +@mixin color_link($color) { + color: $color; +} + +body { + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +header { + background: HONEYDEW; + display: flex; + justify-content: space-between; + padding: 0px 20px; +} + +main { + text-align: center; +} + +.cards { + display: flex; + justify-content: space-evenly; + margin-bottom: 30px; +} + +.card { + border-radius: 15px; + overflow: hidden; + background: HONEYDEW; + display: flex; + flex-direction: column; + align-items: center; + &__img { + width: 200px; + height: 120px; + object-fit: cover; + } + &__subtitle { + margin-top: 0px; + } +} + +.social { + display: flex; + justify-content: space-evenly; + padding-bottom: 30px; + &__button { + padding: 10px 20px; + border-radius: 20px; + border: 3px solid HONEYDEW; + } +} + +footer { + background: HONEYDEW; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; + + p { + margin: 0px; + } +} + +.links { + margin: 15px 0px; +} + +.link { + &-1 { + @include color_link(ORCHID); + } + &-2 { + @include color_link( MEDIUMTURQUOISE); + } + &-3 { + @include color_link(SALMON); + } +}