From 911f3e12180133410e6f287417ccf5c6dcd4637f Mon Sep 17 00:00:00 2001 From: julioDev Date: Tue, 14 Jul 2020 23:18:08 -0500 Subject: [PATCH 1/3] Footer con BEM y SASS --- .gitignore | 1 + README.md | 6 ++-- index.html | 54 ++++++++++++++++++++++++++++++++++++ style.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++ style.scss | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 217 insertions(+), 3 deletions(-) create mode 100644 .gitignore create mode 100644 index.html create mode 100644 style.css create mode 100644 style.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b549d89 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.config \ No newline at end of file diff --git a/README.md b/README.md index 7d74f26..9189597 100644 --- a/README.md +++ b/README.md @@ -167,13 +167,13 @@ footer p { ## 🎨 Pasos a seguir: 1. Hacer un "Fork" de este proyecto. -2. Revolver el reto. +2. Resolver el reto. 3. Crear un Pull Request hacia este repositorio. ## 🎨 ¿Cómo contribuir? -Si quieres agregar o mejorar algo, te invito a colaborar directamente en este repositorio: [challenge-html-07](https://github.com/platzimaster/challenge-html-07/) +Si quieres agregar o mejorar algo, te invito a colaborar directamente en este repositorio: [challenge-CSS-02](https://github.com/PlatziMaster/challenge-CSS-02) ## 🎨 Licencia -challenge-html-06 se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT). +challenge-CSS-02 se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT). diff --git a/index.html b/index.html new file mode 100644 index 0000000..2fbb7c6 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + Challenge CSS 02 + + +
+

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..aa1d4bd --- /dev/null +++ b/style.css @@ -0,0 +1,78 @@ +@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; +} + +.info { + display: flex; + justify-content: space-evenly; + padding-bottom: 30px; +} +.info__button { + padding: 10px 20px; + border-radius: 20px; + border: 3px solid HONEYDEW; +} + +/* Inicia Footer */ +footer { + background: HONEYDEW; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; +} + +footer p { + margin: 0px; +} + +.social { + margin: 15px 0px; +} +.social__facebook { + color: ORCHID; +} +.social__instagram { + color: MEDIUMTURQUOISE; +} +.social__twitter { + color: SALMON; +} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..c14d100 --- /dev/null +++ b/style.scss @@ -0,0 +1,81 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); +$main-color: HONEYDEW; + +body { + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; +} + +header { + background: $main-color; + 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: $main-color; + display: flex; + flex-direction: column; + align-items: center; + &__img { + width: 200px; + height: 120px; + object-fit: cover; + } + &__subtitle { + margin-top: 0px; + } +} + +.info { + display: flex; + justify-content: space-evenly; + padding-bottom: 30px; + &__button { + padding: 10px 20px; + border-radius: 20px; + border: 3px solid $main-color; + } +} + +/* Inicia Footer */ + +footer { + background: $main-color; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; +} + +footer p { + margin: 0px; +} + +.social { + margin: 15px 0px; + &__facebook { + color: ORCHID; + } + &__instagram { + color: MEDIUMTURQUOISE; + } + &__twitter { + color: SALMON; + } +} \ No newline at end of file From a063b86e146c7795521a6c50d0d83a70850e69c7 Mon Sep 17 00:00:00 2001 From: julioDev Date: Wed, 15 Jul 2020 17:22:44 -0500 Subject: [PATCH 2/3] Added a minified css and finished the footer with sass --- index.html | 2 +- style-dist.css | 1 + style.css | 2 +- style.scss | 25 ++++++++++++++----------- 4 files changed, 17 insertions(+), 13 deletions(-) create mode 100644 style-dist.css diff --git a/index.html b/index.html index 2fbb7c6..ed91b87 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,6 @@

Title

- + \ No newline at end of file diff --git a/style-dist.css b/style-dist.css new file mode 100644 index 0000000..fc46880 --- /dev/null +++ b/style-dist.css @@ -0,0 +1 @@ +@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}.info{display:flex;justify-content:space-evenly;padding-bottom:30px}.info__button{padding:10px 20px;border-radius:20px;border:3px solid HONEYDEW}footer{background:HONEYDEW;display:flex;flex-direction:column;align-items:center;align-items:center;padding:30px 0px}footer p{margin:0px}.social{margin:15px 0px}.social__facebook{color:ORCHID}.social__instagram{color:MEDIUMTURQUOISE}.social__twitter{color:SALMON} \ No newline at end of file diff --git a/style.css b/style.css index aa1d4bd..d7458fc 100644 --- a/style.css +++ b/style.css @@ -55,7 +55,7 @@ footer { background: HONEYDEW; display: flex; flex-direction: column; - justify-content: center; + align-items: center; align-items: center; padding: 30px 0px; } diff --git a/style.scss b/style.scss index c14d100..dabe55d 100644 --- a/style.scss +++ b/style.scss @@ -1,5 +1,14 @@ @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); $main-color: HONEYDEW; +$color-1: ORCHID; +$color-2: MEDIUMTURQUOISE; +$color-3: SALMON; +@mixin style-1 { + background: $main-color; + display: flex; + flex-direction: column; + align-items: center; +} body { margin: 0; @@ -27,10 +36,7 @@ main { .card { border-radius: 15px; overflow: hidden; - background: $main-color; - display: flex; - flex-direction: column; - align-items: center; + @include style-1; &__img { width: 200px; height: 120px; @@ -55,10 +61,7 @@ main { /* Inicia Footer */ footer { - background: $main-color; - display: flex; - flex-direction: column; - justify-content: center; + @include style-1; align-items: center; padding: 30px 0px; } @@ -70,12 +73,12 @@ footer p { .social { margin: 15px 0px; &__facebook { - color: ORCHID; + color: $color-1; } &__instagram { - color: MEDIUMTURQUOISE; + color: $color-2; } &__twitter { - color: SALMON; + color: $color-3; } } \ No newline at end of file From 56daab96ca35d84f33b9e9440bb333ecc8290b54 Mon Sep 17 00:00:00 2001 From: julioDev Date: Wed, 15 Jul 2020 17:43:51 -0500 Subject: [PATCH 3/3] change in index about link to styles --- .gitignore | 3 ++- index.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index b549d89..11b98e1 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -*.config \ No newline at end of file +*.config +style-dist.css \ No newline at end of file diff --git a/index.html b/index.html index ed91b87..2fbb7c6 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,6 @@

Title

- + \ No newline at end of file