From eca70f18b8c34ce0fb21476a9e164f1e376cf00d Mon Sep 17 00:00:00 2001 From: Md Mohin Uddin <45921824+mohin7@users.noreply.github.com> Date: Thu, 29 Feb 2024 10:52:15 +0600 Subject: [PATCH] Add top notificationbar (#132) Signed-off-by: mohin7 --- content/notification-top/_index.md | 4 + layouts/_default/baseof.html | 656 +++++++++++---------- layouts/_default/notification_top.html | 95 +++ static/assets/js/main.js | 2 + static/assets/sass/base/_homepage.scss | 11 +- static/assets/sass/components/_navbar.scss | 22 + 6 files changed, 465 insertions(+), 325 deletions(-) create mode 100644 content/notification-top/_index.md create mode 100644 layouts/_default/notification_top.html diff --git a/content/notification-top/_index.md b/content/notification-top/_index.md new file mode 100644 index 0000000000..6ddce723a7 --- /dev/null +++ b/content/notification-top/_index.md @@ -0,0 +1,4 @@ +--- +title: Promotional | AppsCode +layout: notification_top +--- diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 293a621435..f42d451ed1 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -128,376 +128,391 @@ {{ block "header" . }}
{{ block "header-top" . }} - -
+
-
- - {{ $currentPageType := cond (le (len (split (trim .Page.RelPermalink "/") "/")) 2) "products" "docs" }} -
- -
- -
- - {{$.Site.Data.products.appscode.logo.alt}} - - + + +
+
+ +
+
+ + +
+
+ + {{ $currentPageType := cond (le (len (split (trim .Page.RelPermalink "/") "/")) 2) "products" "docs" }} +
+ +
+ +
+ + {{$.Site.Data.products.appscode.logo.alt}} + + +
+
- -
-
-
- -
    -
  • - -
    - - -
    - - -
    +
    +
    + +
      +
    • + +
      + + +
      + + +
      + {{ range $item := $.Site.Data.config.productMenu.c0 }} + {{ $p := (index $.Site.Data.products $item) }} + + + +
      +
      {{ $p.name }}
      +

      {{ $p.tagline | plainify }}

      +
      +
      + + arrow_forward + +
      +       + + {{ end }} + + {{ range $item := $.Site.Data.config.productMenu.c1 }} + {{ $p := (index $.Site.Data.products $item) }} + + + +
      +
      {{ $p.name }}
      +

      {{ $p.tagline | plainify }}

      +
      +
      + + arrow_forward + +
      +       + + {{ end }} + + {{ range $item := $.Site.Data.config.productMenu.c2 }} + {{ $p := (index $.Site.Data.products $item) }} + + + +
      +
      {{ $p.name }}
      +

      {{ $p.tagline | plainify }}

      +
      +
      + + arrow_forward + +
      +       + + {{ end }} +
      + + + {{ range $item := $.Site.Data.config.productMenu.c0 }} {{ $p := (index $.Site.Data.products $item) }} - - - -
      -
      {{ $p.name }}
      -

      {{ $p.tagline | plainify }}

      + +
      +
      + {{ $p.logo.alt }}
      -
      - - arrow_forward - -
      -       - + +

      {{ $p.summary | safeHTML }}

      + + {{ $showAllFeatures := "false" }} +
        + {{ range $index, $item := $p.features }} + {{ if lt $index 8 }} +
      • task_alt{{ $item.title }}
        • + {{ end }} + {{ end }} +
      + +
      + {{ end }} {{ range $item := $.Site.Data.config.productMenu.c1 }} {{ $p := (index $.Site.Data.products $item) }} - - - -
      -
      {{ $p.name }}
      -

      {{ $p.tagline | plainify }}

      + +
      +
      + {{ $p.logo.alt }}
      -
      - - arrow_forward - -
      -       - + + +

      {{ $p.summary | safeHTML }}

      + +
        + {{ range $index, $item := $p.features }} + {{ if lt $index 8 }} +
      • task_alt{{ $item.title }}
        • + {{ end }} + {{ end }} +
      + +
      + {{ end }} + {{ range $item := $.Site.Data.config.productMenu.c2 }} {{ $p := (index $.Site.Data.products $item) }} - - - -
      - -
      • + + -
    • - -
      - -
      - - -
      - -
      -
      RESOURCES
      - -
      - - - - -
      • -
    • - Webinar New -
      • -
    - - - - -
    - - -
    - - - CONTACT - SALES + } // + // console.log('GET', 'https://x.appscode.com/_/webinars/'); + xhr.open('GET', 'https://x.appscode.com/_/webinars/'); + xhr.send(); + }()); + + +
    + + +
    + + + CONTACT + SALES +
    -
    -
    - {{ $currentPageType := cond (le (len (split (trim .Page.RelPermalink "/") "/")) 2) "products" "docs" }} +
    + {{ $currentPageType := cond (le (len (split (trim .Page.RelPermalink "/") "/")) 2) "products" "docs" }} +
    +
    - -
    - + - -
+ navbarRightAll[idx].classList.toggle("is-visible"); + }); + }) + +
{{ end }} @@ -1018,6 +1033,7 @@

Legal

+ diff --git a/layouts/_default/notification_top.html b/layouts/_default/notification_top.html new file mode 100644 index 0000000000..a66d6575a4 --- /dev/null +++ b/layouts/_default/notification_top.html @@ -0,0 +1,95 @@ + + + + + + Promotional Message + + + + + + + +
+ + Connect with the AppsCode team at Kubecon EU: Reserve your personalized 1:1 chat now! + + +
+ + diff --git a/static/assets/js/main.js b/static/assets/js/main.js index 2efdab090c..c5f8613590 100644 --- a/static/assets/js/main.js +++ b/static/assets/js/main.js @@ -308,6 +308,8 @@ $('.customPrevBtn').click(function () { }); // for social prove owlCarousel + + // owl owlCarousel JS var owlSocialProve = $('.brand-image-wrapper'); owlSocialProve.owlCarousel({ diff --git a/static/assets/sass/base/_homepage.scss b/static/assets/sass/base/_homepage.scss index 4eee0e9c8d..ea85667bc1 100644 --- a/static/assets/sass/base/_homepage.scss +++ b/static/assets/sass/base/_homepage.scss @@ -5,7 +5,6 @@ background-size: 120% 120%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; - overflow: hidden; &:after { position: absolute; @@ -18,6 +17,7 @@ z-index: -1; opacity: 0.9; background-size: 50%; + overflow: hidden; } } @@ -296,6 +296,7 @@ z-index: 1; display: flex; align-items: center; + overflow: hidden; &:after { position: absolute; @@ -360,7 +361,7 @@ &.voyager { &:after { - background-color: #e9e9fc; + background-color: #e3e3f2; } .product-description .features li .material-icons { @@ -821,7 +822,7 @@ Responsive Classes ***********************************************************************************************/ @media (max-width: 768.98px) { .hero-area-1 { - padding: 100px 0 50px; + padding: 170px 0 50px; h1 { font-size: 38px; @@ -991,7 +992,7 @@ Responsive Classes // Medium devices (tablets, 769px and up) @media (min-width: 769px) and (max-width: 1023.98px) { .hero-area-1 { - padding: 100px 0 50px; + padding: 160px 0 50px; h1 { font-size: 38px; @@ -1086,7 +1087,7 @@ Responsive Classes // Large devices (desktops, 1024px and up) @media (min-width: 1024px) and (max-width: 1215px) { .hero-area-1 { - padding: 100px 0 50px; + padding: 150px 0 50px; h1 { font-size: 38px; diff --git a/static/assets/sass/components/_navbar.scss b/static/assets/sass/components/_navbar.scss index d4b0b2f517..6c9ec1e918 100644 --- a/static/assets/sass/components/_navbar.scss +++ b/static/assets/sass/components/_navbar.scss @@ -3,6 +3,22 @@ position: relative; z-index: 99; background-color: $ac-white; + .notification-wrapper { + /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5e2dea+0,f8742e+50,f97530+51,7db9e8+100 */ + background: linear-gradient(45deg, #5e2dea 0%,#f8742e 50%,#f97530 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + .navbar-appscode.container{ + padding: 0; + @media (max-width: 1024px) { + padding: 0 16px; + } + } + iframe { + overflow: hidden; + display: flex; + width: 100%; + height: 26px; + } + } } .navbar-appscode-wrapper { @@ -890,6 +906,12 @@ .headroom--unpinned { transform: translateY(-165px); + .navbar-area { + &.navbar-fixed { + transform: translateY(135px); + } + } + .navbar-appscode-wrapper { &.navbar-product { transform: translateY(104px);