From 940574ab7eef1cc89cd654d82d4de921f8e1e701 Mon Sep 17 00:00:00 2001 From: mohin7 Date: Tue, 20 Aug 2024 14:25:33 +0600 Subject: [PATCH] Update event and solutions page css Signed-off-by: mohin7 --- data/events.json | 28 ++++++------ hugo_stats.json | 17 +++---- layouts/_default/events.html | 7 +-- layouts/_default/solutions.html | 4 +- static/assets/sass/main.css | 58 +++++++++++++++++++++--- static/assets/sass/pages/_events.scss | 17 ++++++- static/assets/sass/pages/_solutions.scss | 37 +++++++++++++++ 7 files changed, 132 insertions(+), 36 deletions(-) diff --git a/data/events.json b/data/events.json index 79c81a9861..3b1f2153b3 100644 --- a/data/events.json +++ b/data/events.json @@ -1,26 +1,26 @@ [ { "id":"1", - "date": "AUG 01 - 04, 2024", - "sort_date": "2024-08-01", - "title": "1 AUG KubeCon | CloudNativeCon 2024", - "description": "AUG The Cloud Native Computing Foundation’s flagship conference gathers adopters and technologists from leading open source and cloud native communities in Salt Lake City, Utah from November 12-15, 2024.", - "meet_with_us": "#link1", - "event_details": "#link2" + "date": "SEP 03 - 04, 2024", + "sort_date": "2024-09-03", + "title": "Container Days Conference", + "description": "The CDS family grows every year and you can't miss this fantastic learning experience on #Kubernetes, #CloudNative, #ContainerSecurity, #DevOps, #GitOps, #EdgeComputing #CloudComputing, #Cloud Containers and much more. Kubernauts from across the globe come to speak, network and exchange on the cloud native technologies hottest topics and trends.", + "meet_with_us": "https://appscode.com/contact/", + "event_details": "https://www.containerdays.io/containerdays-conference-2024/" }, { "id":"2", - "date": "SEP 01 - 04, 2024", - "sort_date": "2024-09-01", - "title": "2 KubeCon | CloudNativeCon 2024", - "description": "The Cloud Native Computing Foundation’s flagship conference gathers adopters and technologists from leading open source and cloud native communities in Salt Lake City, Utah from November 12-15, 2024.", - "meet_with_us": "#link1", - "event_details": "#link2" + "date": "OCT 01 - 02, 2024", + "sort_date": "2024-10-01", + "title": "October Conference", + "description": "The CDS family grows every year and you can't miss this fantastic learning experience on #Kubernetes, #CloudNative, #ContainerSecurity, #DevOps, #GitOps, #EdgeComputing #CloudComputing, #Cloud Containers and much more. Kubernauts from across the globe come to speak, network and exchange on the cloud native technologies hottest topics and trends.", + "meet_with_us": "https://appscode.com/contact/", + "event_details": "https://www.containerdays.io/containerdays-conference-2024/" }, { "id":"3", - "date": "OCT 02 - 04, 2024", - "sort_date": "2024-10-02", + "date": "OCT 05 - 06, 2024", + "sort_date": "2024-10-05", "title": "3 ContainerDays Conference", "description": "The CDS family grows every year and you can't miss this fantastic learning experience...", "meet_with_us": "#link1", diff --git a/hugo_stats.json b/hugo_stats.json index a3cf3557c3..8202859a04 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -86,7 +86,6 @@ "c1", "c1_tab", "calendly-inline-widget", - "card", "card-body", "card-bottom", "card-icon", @@ -97,6 +96,8 @@ "ceo-image", "ceo-message", "ceo-message-wrapper", + "circle", + "circle-1", "circle-shape", "client-info", "client-thumb", @@ -181,12 +182,10 @@ "gallery-area", "gallery-card", "gallery-wrapper", - "gap-4", "go-to-top", "h-6", "h-right-content", "has-addons", - "has-background-black-bis", "has-background-white-bis", "has-text-centered", "has-text-centered-desktop", @@ -214,7 +213,6 @@ "hero-area-button", "hero-area-inner-2", "icon", - "id-centered", "illustration", "illustration-1", "illustration-area", @@ -227,8 +225,6 @@ "is-10-desktop", "is-10-tablet", "is-12", - "is-2", - "is-2-desktop", "is-3", "is-4", "is-4-desktop", @@ -237,7 +233,6 @@ "is-6", "is-6-desktop", "is-6-tablet", - "is-6-touch", "is-64x64", "is-7", "is-8", @@ -251,7 +246,6 @@ "is-centered", "is-checkradio", "is-danger", - "is-elipsis-4", "is-ellipsis-2", "is-ellipsis-3", "is-ellipsis-4", @@ -268,6 +262,8 @@ "is-fullwidth", "is-gap-4", "is-gap-8", + "is-ghost", + "is-gost", "is-gradient", "is-half-mobile", "is-half-tablet", @@ -311,6 +307,7 @@ "is-small", "is-sticky", "is-success", + "is-text", "is-tinny", "is-transparent", "is-two-thirds-desktop", @@ -396,6 +393,8 @@ "outlined-bg-buttons", "owl-carousel", "p-0", + "p-4", + "p-8", "package-area", "partner", "partner-hero-area", @@ -426,7 +425,6 @@ "provisioing", "provisioning", "pt-0", - "pt-40", "quote-icon", "reg-illustration", "register-notification", @@ -470,7 +468,6 @@ "social-connect-area", "social-link", "social-prove-brand-area", - "solution", "solution-page", "spam-message", "speaker-image", diff --git a/layouts/_default/events.html b/layouts/_default/events.html index f774c19215..30b131a408 100644 --- a/layouts/_default/events.html +++ b/layouts/_default/events.html @@ -4,7 +4,7 @@ {{ define "main" }} -
+
{{ $currentDate := now.Format "2006-01-02" }} @@ -15,6 +15,7 @@ {{ range $event := $lastEvent }}
+
{{ $event.date }} UPCOMING @@ -24,7 +25,7 @@

{{ $event.title }}

Join with us - Event Details + Event Details
@@ -45,7 +46,7 @@

{{ $event.title }}

Join with us - Event Details + Event Details
diff --git a/layouts/_default/solutions.html b/layouts/_default/solutions.html index 2ea46aff3a..6236559581 100644 --- a/layouts/_default/solutions.html +++ b/layouts/_default/solutions.html @@ -3,8 +3,8 @@ {{ end }} {{ define "main" }} -
-
+
+
diff --git a/static/assets/sass/main.css b/static/assets/sass/main.css index c0f06e661c..097d7c2e9a 100644 --- a/static/assets/sass/main.css +++ b/static/assets/sass/main.css @@ -25902,8 +25902,21 @@ Responsive Classes border: 1px solid #e7e7e7; padding: 32px; border-radius: 4px; - background-color: #F7F8F8; + background-color: #ffffff; height: 100%; + position: relative; +} +.single-event .circle { + width: 200px; + height: 200px; + border-radius: 50%; + border: 20px solid rgba(255, 255, 255, 0.2); + transform: none; + animation: none; + top: auto; + left: auto; + bottom: -60px; + right: -30px; } .single-event.primary-gradient { color: #ffffff; @@ -25932,34 +25945,67 @@ Responsive Classes background: linear-gradient(90deg, rgb(42, 126, 83) 0%, rgb(0, 166, 81) 100%); } +.solution-page { + position: relative; + z-index: 1; +} .solution-page .hero-area { padding: 140px 0 100px; + position: relative; + z-index: 2; +} +.solution-page .hero-area::after { + position: absolute; + content: ""; + left: 0; + top: 100px; + width: 100%; + height: 100%; + background-image: url(http://localhost:1313/assets/images/shape/decorative-el.svg); + background-repeat: no-repeat; + transform: translate(2); + z-index: -1; } .solution-page .hero-area h1 { font-size: 48px; font-weight: 700; line-height: 120%; } -.solution-page .right-content { + +.single-solution { + background-color: #fff; +} +.single-solution .left-content h3 { + font-size: 32px; + font-weight: 700; +} +.single-solution .left-content p { + margin-bottom: 32px; +} +.single-solution .right-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; } -.solution-page .right-content .single-card { +.single-solution .right-content .single-card { background-color: #F7F8F8; border: 1px solid #e7e7e7; border-radius: 4px; display: block; padding: 16px; + transition: 0.3s ease-in-out; +} +.single-solution .right-content .single-card:hover { + box-shadow: 1px 11px 114px rgba(0, 0, 0, 0.15); } -.solution-page .right-content .single-card h5 { +.single-solution .right-content .single-card h5 { margin-bottom: 8px; } -.solution-page .right-content .single-card p { +.single-solution .right-content .single-card p { color: #515D63; margin-bottom: 8px; } -.solution-page .right-content .single-card button { +.single-solution .right-content .single-card button { border: none; background-color: transparent; box-shadow: none; diff --git a/static/assets/sass/pages/_events.scss b/static/assets/sass/pages/_events.scss index b20dcd262b..564cb6b608 100644 --- a/static/assets/sass/pages/_events.scss +++ b/static/assets/sass/pages/_events.scss @@ -1,12 +1,27 @@ .events-page { padding: 80px 0 32px; } + .single-event { border: 1px solid $ac-white-light; padding: 32px; border-radius: 4px; - background-color: #F7F8F8; + background-color: #ffffff; height: 100%; + position: relative; + + .circle { + width: 200px; + height: 200px; + border-radius: 50%; + border: 20px solid rgba(255,255,255,0.2); + transform: none; + animation: none; + top: auto; + left: auto; + bottom: -60px; + right: -30px; + } &.primary-gradient { color: $ac-white; diff --git a/static/assets/sass/pages/_solutions.scss b/static/assets/sass/pages/_solutions.scss index 1cbe28e5a4..b5cd285530 100644 --- a/static/assets/sass/pages/_solutions.scss +++ b/static/assets/sass/pages/_solutions.scss @@ -1,12 +1,43 @@ .solution-page { + position: relative; + z-index: 1; .hero-area { padding: 140px 0 100px; + position: relative; + z-index: 2; + &::after { + position: absolute; + content: ""; + left: 0; + top: 100px; + width: 100%; + height: 100%; + background-image: url(http://localhost:1313/assets/images/shape/decorative-el.svg); + background-repeat: no-repeat; + transform: translate(2); + z-index: -1; + } + h1 { font-size: 48px; font-weight: 700; line-height: 120%; } } + +} +.single-solution { + background-color: #fff; + .left-content { + h3 { + font-size: 32px; + font-weight: 700; + } + p{ + margin-bottom: 32px; + } + } + .right-content { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); @@ -17,6 +48,12 @@ border-radius: 4px; display: block; padding: 16px; + transition: 0.3s ease-in-out; + + &:hover { + box-shadow: 1px 11px 114px rgba(0,0,0,.15); + } + h5{ margin-bottom: 8px; }