From 66366fb30b0d6f29c256deb8a60cb84084cdf517 Mon Sep 17 00:00:00 2001 From: Sergio Ruiz Date: Wed, 5 Aug 2020 23:06:12 -0500 Subject: [PATCH] Desarrollo del reto 02 de CSS --- .gitignore | 1 + css/index.css | 62 ++++++++++++++++++++++++++++++++++ css/index.css.map | 7 ++++ index.html | 66 +++++++++++++++++++++++++++++++++++++ sass/index.scss | 84 +++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 220 insertions(+) create mode 100644 .gitignore create mode 100644 css/index.css create mode 100644 css/index.css.map create mode 100644 index.html create mode 100644 sass/index.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1c40133 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.sass-cache/ \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..926780f --- /dev/null +++ b/css/index.css @@ -0,0 +1,62 @@ +@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__paragraph { + margin: 0px; } + .footer__links { + margin: 15px 0px; } + .footer__link--1 { + color: ORCHID; } + .footer__link--2 { + color: MEDIUMTURQUOISE; } + .footer__link--3 { + color: SALMON; } + +/*# sourceMappingURL=index.css.map */ diff --git a/css/index.css.map b/css/index.css.map new file mode 100644 index 0000000..c854cba --- /dev/null +++ b/css/index.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAQ,2EAAmE;AAc3E,IAAK;EACH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,oBAAoB;;AAGnC,MAAO;EACL,UAAU,EApBU,QAAQ;EAqB5B,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,aAAa;EAC9B,OAAO,EAAE,QAAQ;;AAGnB,IAAK;EACH,UAAU,EAAE,MAAM;;AAGpB,MAAO;EACL,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,aAAa,EAAE,IAAI;;AAGrB,KAAM;EACJ,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,MAAM;EAChB,UAAU,EAvCU,QAAQ;EAwC5B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,UAAO;IACL,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,KAAK;IACb,UAAU,EAAE,KAAK;EAEnB,eAAY;IACV,UAAU,EAAE,GAAG;;AAInB,OAAQ;EACN,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,YAAY;EAC7B,cAAc,EAAE,IAAI;EACpB,eAAU;IACR,OAAO,EAAE,SAAS;IAClB,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,kBAA8B;;AAI1C,OAAQ;EACN,UAAU,EAjEU,QAAQ;EAM5B,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,OAAO,EAAE,QAAQ;EAyDjB,kBAAa;IACX,MAAM,EAAE,GAAG;EAEb,cAAS;IACP,MAAM,EAAE,QAAQ;EAElB,gBAAW;IACT,KAAK,EAzEM,MAAM;EA2EnB,gBAAW;IACT,KAAK,EA3EM,eAAe;EA6E5B,gBAAW;IACT,KAAK,EA7EM,MAAM", +"sources": ["../sass/index.scss"], +"names": [], +"file": "index.css" +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..a724d7f --- /dev/null +++ b/index.html @@ -0,0 +1,66 @@ + + + + + + + Reto 02 CSS - Sergio Ruiz + + +
+

LOGO

+ +
+
+

GREEN

+

HOLISTIC HEALTH

+
+
+
+ +

Title

+

Subtitle

+
+
+ +

Title

+

Subtitle

+
+
+ +

Title

+

Subtitle

+
+
+
+ + + +
+ + + diff --git a/sass/index.scss b/sass/index.scss new file mode 100644 index 0000000..7345ea6 --- /dev/null +++ b/sass/index.scss @@ -0,0 +1,84 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); +$backgroundPrincipal: HONEYDEW; +$colorEnlace1: ORCHID; +$colorEnlace2: MEDIUMTURQUOISE; +$colorEnlace3: SALMON; + +@mixin footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 30px 0px; +} + +body { + margin: 0; + padding: 0; + font-family: "Roboto", sans-serif; +} + +header { + background: $backgroundPrincipal; + 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: $backgroundPrincipal; + 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 $backgroundPrincipal; + } +} + +.footer { + background: $backgroundPrincipal; + @include footer; + &__paragraph { + margin: 0px; + } + &__links { + margin: 15px 0px; + } + &__link--1 { + color: $colorEnlace1; + } + &__link--2 { + color: $colorEnlace2; + } + &__link--3 { + color: $colorEnlace3; + } +}