diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..11b98e1 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.config +style-dist.css \ 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-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 new file mode 100644 index 0000000..d7458fc --- /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; + 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.scss b/style.scss new file mode 100644 index 0000000..dabe55d --- /dev/null +++ b/style.scss @@ -0,0 +1,84 @@ +@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; + 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; + @include style-1; + &__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 { + @include style-1; + align-items: center; + padding: 30px 0px; +} + +footer p { + margin: 0px; +} + +.social { + margin: 15px 0px; + &__facebook { + color: $color-1; + } + &__instagram { + color: $color-2; + } + &__twitter { + color: $color-3; + } +} \ No newline at end of file