From 43ba84f564da3373e20b73b68f5817c488d978c8 Mon Sep 17 00:00:00 2001 From: Ricardo Tornero Date: Wed, 15 Jul 2020 15:03:41 -0500 Subject: [PATCH] Reto resuelto --- README.md | 177 +--------------------------------------------------- estilos.css | 83 ++++++++++++++++++++++++ index.html | 55 ++++++++++++++++ 3 files changed, 140 insertions(+), 175 deletions(-) create mode 100644 estilos.css create mode 100644 index.html diff --git a/README.md b/README.md index 7d74f26..a275b8b 100644 --- a/README.md +++ b/README.md @@ -2,178 +2,5 @@ SASS Practice -## 馃帹 驴En qu茅 consiste? - -En este reto tendr谩s tres componentes: un c贸digo HTML, una fracci贸n de c贸digo SASS y una fracci贸n de c贸digo CSS. La idea, es que transformes el c贸digo CSS a SASS usando la metodolog铆a BEM. - -> * C贸digo base: [Aqu铆](https://codepen.io/teffcode_/pen/xxZJNpo?editors=1100) -> * Gu铆a base para instalaci贸n: [Aqu铆](https://github.com/teffcode/sass-workshop) // Tambi茅n puedes usar Codepen - -Te dejo la siguiente documentaci贸n sobre SASS: - -* [Documentaci贸n oficial | En ingl茅s](https://sass-lang.com/guide) -* [Sass cheatsheet | En ingl茅s](https://devhints.io/sass) -* [Introducci贸n a SASS/SCSS | En espa帽ol](https://galuxui.com.es/#/sass-facilito-parte-1) -* [SASS/SCSS para principantes | En espa帽ol](https://galuxui.com.es/#/sass-facilito-parte-2) -* [SASS/SCSS intermedio | En espa帽ol](https://galuxui.com.es/#/sass-facilito-parte-3) -* [SASS News | En ingl茅s](http://thesassway.com/) - -Te dejo la siguiente documentaci贸n sobre BEM: - -* [What is BEM? And Why you should use it in your project. | En ingl茅s](https://medium.com/@dannyhuang_75970/what-is-bem-and-why-you-should-use-it-in-your-project-ab37c6d10b79) -* [BEM Methodology | En ingl茅s](https://en.bem.info/methodology/) -* [Get BEM | En ingl茅s](http://getbem.com/introduction/) - -### HTML - -``` -
-

LOGO

- -
-
-

GREEN

-

HOLISTIC HEALTH

-
-
-
- -

Title

-

Subtitle

-
-
- -

Title

-

Subtitle

-
-
- -

Title

-

Subtitle

-
-
-
- - - -
- -``` - -### SASS hasta el momento: - -``` -@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; - &__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; - } -} -``` - -### CSS que debes "transformar" a SASS usando BEM: - -Puedes usar mixins con par谩metros 馃か - -``` -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; -} -``` - -## 馃帹 Pasos a seguir: - -1. Hacer un "Fork" de este proyecto. -2. Revolver 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/) - -## 馃帹 Licencia - -challenge-html-06 se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT). +Archivos HTML y CSS +Realizado con ayuda de Codepen diff --git a/estilos.css b/estilos.css new file mode 100644 index 0000000..f5270ce --- /dev/null +++ b/estilos.css @@ -0,0 +1,83 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); + +$face: ORCHID; +$insta: MEDIUMTURQUOISE; +$twt: SALMON; + +@mixin relleno($n) { + color: $n; +} +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; + } +} + +.contacto { + background: HONEYDEW; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; + &__parraf { + margin: 0px; + } + &__link { + margin: 15px 0px; + &--face { + @include relleno($face); + } + &--insta { + @include relleno($insta); + } + &--twt { + @include relleno($twt); + } + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..af0adb7 --- /dev/null +++ b/index.html @@ -0,0 +1,55 @@ +
+

LOGO

+ +
+
+

GREEN

+

HOLISTIC HEALTH

+
+
+
+ +

Title

+

Subtitle

+
+
+ +

Title

+

Subtitle

+
+
+ +

Title

+

Subtitle

+
+
+
+ + + +
+