From 3768ab567dfeca9198f63fdb68fbc6dafef568d6 Mon Sep 17 00:00:00 2001 From: nico-villegas Date: Tue, 14 Nov 2023 15:19:01 -0300 Subject: [PATCH 1/3] Fix description of the card team --- .../src/Components/TeamCard/TeamCard.scss | 17 ++--------------- .../src/Components/TeamCard/teamCard.json | 2 +- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/devias-web/src/Components/TeamCard/TeamCard.scss b/devias-web/src/Components/TeamCard/TeamCard.scss index b038271..dae2baf 100644 --- a/devias-web/src/Components/TeamCard/TeamCard.scss +++ b/devias-web/src/Components/TeamCard/TeamCard.scss @@ -48,7 +48,7 @@ @media (max-width: 767px) { margin-top: 1rem; } - } + } h5 { color: #333; @@ -57,20 +57,7 @@ font-weight: 300; margin: 0px; line-height: 1.2; - } - - .line { - border: 1px solid rgba(0, 0, 0, 0.1882352941); - margin: 1rem 0 0 0; - width: 85%; - padding: 0; - } - - p { - color: #828282; - font-size: 0.9rem; - margin-top: 1rem; - margin-bottom: 0; + text-align: center; } } diff --git a/devias-web/src/Components/TeamCard/teamCard.json b/devias-web/src/Components/TeamCard/teamCard.json index 76a5eb5..35150ee 100644 --- a/devias-web/src/Components/TeamCard/teamCard.json +++ b/devias-web/src/Components/TeamCard/teamCard.json @@ -33,7 +33,7 @@ "img": 7, "job": "Talent Manager" },{ - "name": "Fer Sydor", + "name": "Fer", "img": 8, "job": "Designer" },{ From 3c17b60bc3638901dbbbfd7eaac12d3cf0795c7d Mon Sep 17 00:00:00 2001 From: nico-villegas Date: Tue, 14 Nov 2023 16:41:46 -0300 Subject: [PATCH 2/3] Fix height of the content step --- .../src/Components/ItemStep/ItemStep.scss | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/devias-web/src/Components/ItemStep/ItemStep.scss b/devias-web/src/Components/ItemStep/ItemStep.scss index 2f1a7bc..b572fea 100644 --- a/devias-web/src/Components/ItemStep/ItemStep.scss +++ b/devias-web/src/Components/ItemStep/ItemStep.scss @@ -54,10 +54,10 @@ /* Content step */ .container-step-description { - height: 0; + max-height: 0; border-top: 0; overflow: hidden; - transition: all .35s ease-in-out; + transition: max-height .35s ease-in-out; .step-description { color: #333; @@ -66,19 +66,8 @@ } &.show { - height: 150px; - display: flex; + max-height: 500px; border-top: 0.5px solid #9d9d9d40; - - @media (max-width: 767px){ - height: 130px; - } - @media (max-width: 575px){ - height: 145px; - } - @media (max-width: 459px){ - height: 190px; - } } } @@ -96,6 +85,16 @@ &.step-3 { border-right: 0; border-left: 0; + } + + &.step-4 { + border-right: 0; + border-left: 0; + } + + &.step-5 { + border-right: 0; + border-left: 0; border-bottom: 0; } } From 9959bb0da0615baeabad256fc0747f66d50ec4b0 Mon Sep 17 00:00:00 2001 From: nico-villegas Date: Tue, 14 Nov 2023 17:04:21 -0300 Subject: [PATCH 3/3] Add animation of the screens and fix transition of the step --- .../src/Components/ItemStep/ItemStep.scss | 6 +++-- devias-web/src/Screens/AboutUs/AboutUs.scss | 26 ++++++++++++++++++ .../src/Screens/ContactUs/ContactUs.scss | 25 +++++++++++++++++ .../Screens/OurCustomers/OurCustomers.scss | 27 +++++++++++++++++++ devias-web/src/Screens/OurWay/OurWay.scss | 25 +++++++++++++++++ 5 files changed, 107 insertions(+), 2 deletions(-) diff --git a/devias-web/src/Components/ItemStep/ItemStep.scss b/devias-web/src/Components/ItemStep/ItemStep.scss index b572fea..40d5160 100644 --- a/devias-web/src/Components/ItemStep/ItemStep.scss +++ b/devias-web/src/Components/ItemStep/ItemStep.scss @@ -57,7 +57,9 @@ max-height: 0; border-top: 0; overflow: hidden; - transition: max-height .35s ease-in-out; + transition: + max-height .35s ease-out, + border-top .35s ease; .step-description { color: #333; @@ -66,7 +68,7 @@ } &.show { - max-height: 500px; + max-height: 300px; border-top: 0.5px solid #9d9d9d40; } } diff --git a/devias-web/src/Screens/AboutUs/AboutUs.scss b/devias-web/src/Screens/AboutUs/AboutUs.scss index 555b0d4..f6c73c1 100644 --- a/devias-web/src/Screens/AboutUs/AboutUs.scss +++ b/devias-web/src/Screens/AboutUs/AboutUs.scss @@ -9,6 +9,7 @@ font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } h1{ font-size: 6rem; @@ -18,6 +19,7 @@ margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -33,6 +35,8 @@ } } .section-info{ + animation: slideDown 1.5s ease-in-out; + .container{ .container-card{ width: 100%; @@ -87,4 +91,26 @@ } } } +} + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } \ No newline at end of file diff --git a/devias-web/src/Screens/ContactUs/ContactUs.scss b/devias-web/src/Screens/ContactUs/ContactUs.scss index a842dc7..3de935e 100644 --- a/devias-web/src/Screens/ContactUs/ContactUs.scss +++ b/devias-web/src/Screens/ContactUs/ContactUs.scss @@ -13,6 +13,7 @@ font-size: 6rem; font-weight: 500; margin: 0; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -28,6 +29,7 @@ font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } @media (max-width: 991px) { @@ -46,9 +48,32 @@ align-items: center; gap: 10px; flex-wrap: wrap; + animation: slideDown 1.5s ease-in-out; @media all and (max-width: 768px) { flex-direction: column; } } } + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} diff --git a/devias-web/src/Screens/OurCustomers/OurCustomers.scss b/devias-web/src/Screens/OurCustomers/OurCustomers.scss index 453cb65..1a37c38 100644 --- a/devias-web/src/Screens/OurCustomers/OurCustomers.scss +++ b/devias-web/src/Screens/OurCustomers/OurCustomers.scss @@ -5,12 +5,14 @@ .container { .main-title { margin: 100px 0 64px 0; + h5 { font-size: 1.5rem; font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } h1 { @@ -21,6 +23,7 @@ margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -35,6 +38,8 @@ } .info { + animation: slideDown 1.5s ease-in-out; + .container { .container-card { width: 100%; @@ -112,4 +117,26 @@ } } } +} + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } \ No newline at end of file diff --git a/devias-web/src/Screens/OurWay/OurWay.scss b/devias-web/src/Screens/OurWay/OurWay.scss index 275b015..4fe0d53 100644 --- a/devias-web/src/Screens/OurWay/OurWay.scss +++ b/devias-web/src/Screens/OurWay/OurWay.scss @@ -13,6 +13,7 @@ font-size: 6rem; font-weight: 500; margin: 0; + animation: slideRight 1s ease-in-out; @media (max-width: 991px) { font-size: 3rem; @@ -28,6 +29,7 @@ font-family: 'Ubuntu', sans-serif; font-weight: 300; color: #828282; + animation: slideRight 0.5s ease-in-out; } @media (max-width: 991px){ @@ -52,6 +54,7 @@ .process-steps { margin: 95px 0px 115px 0px; + animation: slideDown 1.5s ease-in-out; } .services-cards { @@ -199,4 +202,26 @@ } } } +} + +@keyframes slideRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + 100%{ + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideDown { + 0% { + transform: translateY(100%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } } \ No newline at end of file