From 143d2b4e7eace4096ff23eaa9cd704b57fd46d3c Mon Sep 17 00:00:00 2001 From: Max23Esau Date: Wed, 15 Jul 2020 20:12:26 -0500 Subject: [PATCH] reto terminado --- index.html | 73 ++++++++++++++++++++++++++++++++ main.css | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++ main.css.map | 9 ++++ main.scss | 98 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 297 insertions(+) create mode 100644 index.html create mode 100644 main.css create mode 100644 main.css.map create mode 100644 main.scss diff --git a/index.html b/index.html new file mode 100644 index 0000000..1e715ff --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + Challenge CSS 02 + + +
+

LOGO

+ +
+ +
+

GREEN

+

HOLISTIC HEALTH

+
+ +
+
+ +

Title

+

Subtitle

+ +
+
+ +

Title

+

Subtitle

+ +
+
+ +

Title

+

Subtitle

+ +
+
+ + + + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..e412e90 --- /dev/null +++ b/main.css @@ -0,0 +1,117 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} + +header { + background: #fff0f0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0px 20px; +} + +main { + text-align: center; +} + +.cards { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + margin-bottom: 30px; +} + +.card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 15px; + overflow: hidden; + background: #fff0f0; + -webkit-transition-duration: 0.3s; + transition-duration: 0.3s; +} + +.card:hover { + -webkit-box-shadow: 0 0 5px 0 #f8a7a7; + box-shadow: 0 0 5px 0 #f8a7a7; + -webkit-transform: translateY(-10px); + transform: translateY(-10px); +} + +.card__img { + width: 200px; + height: 120px; + -o-object-fit: cover; + object-fit: cover; +} + +.card__subtitle { + margin-top: 0px; +} + +.card__button { + padding: 10px 20px; + width: 100%; + border: 3px solid #f8a7a7; + background-color: #f8a7a7; + color: #fafafa; + font-weight: bold; + outline: none; + cursor: pointer; +} + +footer { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background: #fff0f0; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + padding: 30px 0px; +} + +footer p { + margin: 0px; +} + +.links { + margin: 15px 0px; +} + +.links-1 { + color: ORCHID; +} + +.links-2 { + color: MEDIUMTURQUOISE; +} + +.links-3 { + color: SALMON; +} +/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/main.css.map b/main.css.map new file mode 100644 index 0000000..608cf02 --- /dev/null +++ b/main.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,OAAO,CAAC,mEAAI;AAYZ,AAAA,IAAI,CAAC;EACH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,oBAAoB;CAClC;;AAED,AAAA,MAAM,CAAC;EACL,UAAU,EAjBO,OAAkB;EAkBnC,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,OAAO,EAAE,QAAQ;CAClB;;AAED,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,MAAM;CACnB;;AAED,AAAA,MAAM,CAAC;EACL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,aAAa,EAAE,IAAI;CACpB;;AAED,AAAA,KAAK,CAAC;EA5BJ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EA4BnB,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;EAChB,UAAU,EArCO,OAAkB;EAsCnC,mBAAmB,EAAE,IAAI;CAuB1B;;AA5BD,AAME,KANG,AAMF,MAAM,CAAC;EACN,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAvCV,OAAkB;EAwC7B,SAAS,EAAE,iBAAiB;CAC7B;;AACA,AAAD,UAAM,CAAC;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,UAAU,EAAE,KAAK;CAClB;;AACA,AAAD,eAAW,CAAC;EACV,UAAU,EAAE,GAAG;CAChB;;AACA,AAAD,aAAS,CAAC;EACR,OAAO,EAAE,SAAS;EAClB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG,CAAC,KAAK,CArDN,OAAkB;EAsD7B,gBAAgB,EAtDL,OAAkB;EAuD7B,KAAK,EAtDK,OAAkB;EAuD5B,WAAW,EAAE,IAAI;EACjB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,OAAO;CAChB;;AAcH,AAAA,MAAM,CAAC;EArEL,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EAqEnB,UAAU,EA5EO,OAAkB;EA6EnC,eAAe,EAAE,MAAM;EACvB,OAAO,EAAE,QAAQ;CAIlB;;AARD,AAKE,MALI,CAKF,CAAC,CAAC;EACF,MAAM,EAAE,GAAG;CACZ;;AAGH,AAAA,MAAM,CAAC;EACL,MAAM,EAAE,QAAQ;CAUjB;;AATE,AAAD,QAAG,CAAC;EACF,KAAK,EAAE,MAAM;CACd;;AACA,AAAD,QAAG,CAAC;EACF,KAAK,EAAE,eAAe;CACvB;;AACA,AAAD,QAAG,CAAC;EACF,KAAK,EAAE,MAAM;CACd", + "sources": [ + "main.scss" + ], + "names": [], + "file": "main.css" +} \ No newline at end of file diff --git a/main.scss b/main.scss new file mode 100644 index 0000000..d95d115 --- /dev/null +++ b/main.scss @@ -0,0 +1,98 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); + +$color-background: rgb(255, 240, 240); +$color-button: rgb(248, 167, 167); +$color-claro: rgb(250, 250, 250); + +@mixin alineado-columna { + display: flex; + flex-direction: column; + align-items: center; +} + +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} + +header { + background: $color-background; + display: flex; + justify-content: space-between; + padding: 0px 20px; +} + +main { + text-align: center; +} + +.cards { + display: flex; + justify-content: space-evenly; + margin-bottom: 30px; +} + +.card { + @include alineado-columna; + border-radius: 15px; + overflow: hidden; + background: $color-background; + transition-duration: 0.3s; + &:hover { + box-shadow: 0 0 5px 0 $color-button; + transform: translateY(-10px); + } + &__img { + width: 200px; + height: 120px; + object-fit: cover; + } + &__subtitle { + margin-top: 0px; + } + &__button { + padding: 10px 20px; + width: 100%; + border: 3px solid $color-button; + background-color: $color-button; + color: $color-claro; + font-weight: bold; + outline: none; + cursor: pointer; + } +} + +// .social { +// display: flex; +// justify-content: space-evenly; +// padding-bottom: 30px; +// &__button { +// padding: 10px 20px; +// border-radius: 20px; +// border: 3px solid $color-background; +// } +// } + +footer { + @include alineado-columna; + background: $color-background; + justify-content: center; + padding: 30px 0px; + & p { + margin: 0px; + } +} + +.links { + margin: 15px 0px; + &-1 { + color: ORCHID; + } + &-2 { + color: MEDIUMTURQUOISE; + } + &-3 { + color: SALMON; + } +}