From 8e77d3208bf94677776a2379ae2d5103f882c423 Mon Sep 17 00:00:00 2001 From: Franklin Date: Fri, 28 Apr 2023 08:24:51 -0400 Subject: [PATCH] Added services to services section & added a cool hover selected effect to each card --- css/service_card.css | 68 ++++++++++++++++++++++------------ css/services.css | 2 +- src/components/service_card.rs | 2 +- 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/css/service_card.css b/css/service_card.css index c7ee0a4..6008605 100644 --- a/css/service_card.css +++ b/css/service_card.css @@ -12,6 +12,26 @@ width: clamp(300px, 50vw, 350px); height: 420px; } +.service-card-container:nth-child(1) .service-card-icon { + background-color: #4ADB61; + filter: drop-shadow(0px 15px 30px #4ADB61); +} +.service-card-container:nth-child(2) .service-card-icon { + background-color: #FF2D59; + filter: drop-shadow(0px 15px 30px #FF2D59); +} +.service-card-container:nth-child(3) .service-card-icon { + background-color: #2776EA; + filter: drop-shadow(0px 15px 30px #2776EA); +} +.service-card-container:nth-child(4) .service-card-icon { + background-color: #FFCC00; + filter: drop-shadow(0px 15px 30px #FFCC00); +} +.service-card-container:nth-child(5) .service-card-icon { + background-color: #FF6800; + filter: drop-shadow(0px 15px 30px #FF6800); +} .service-card-icon { width: 75px; @@ -51,33 +71,35 @@ align-items: center; } -.service-card-container-selected { - display: flex; - flex-direction: column; - justify-content: space-evenly; - align-items: center; - - padding: 10px; - border-radius: 20px; - box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4); +.service-card-container:hover { background-color: #4C40F7; - - width: 60vw; - height: 420px; + transition-duration: 0.5s; } +.service-card-container:hover .service-card-icon { + background-color: white; + filter: none; + box-shadow: none; + color: #4C40F7; + transition-duration: 0.5s; +} +.service-card-container:hover .service-card-title { + color: white; + transition-duration: 0.5s; +} +.service-card-container:hover .service-card-description { + color: white; + transition-duration: 0.5s; +} +.service-card-container:hover .service-card-button { + transition-duration: 0.5s; + background-color: #F3F4F6; +} + + .service-card-icon-selected { - width: 75px; - height: 75px; - border-radius: 100%; background-color: white; color: #4C40F7; filter: drop-shadow(0px 15px 30px #17134a); - - display: flex; - justify-content: center; - align-items: center; - - font-size: 24px; } .service-card-title-selected { font-family: Poppins; @@ -107,8 +129,8 @@ @media only screen and (min-width: 750px) { .service-card-container { - width: 23vw; - height: 400px; + width: clamp(270px, 24vw, 380px); + height: clamp(360px, 33vw, 450px); } } \ No newline at end of file diff --git a/css/services.css b/css/services.css index cbdb2a8..ce9873a 100644 --- a/css/services.css +++ b/css/services.css @@ -34,6 +34,6 @@ flex-flow: row wrap; justify-content: center; align-items: center; - gap: 10px; + gap: 15px; } } diff --git a/src/components/service_card.rs b/src/components/service_card.rs index f5da221..046eb74 100644 --- a/src/components/service_card.rs +++ b/src/components/service_card.rs @@ -35,7 +35,7 @@ pub fn service_card(props: &ServiceCardProps) -> Html { } else { html! {
-
+
//Icon