Add top notificationbar (#132)

Signed-off-by: mohin7 <[email protected]>
appscode · Feb 29, 2024 · eca70f1 · eca70f1
1 parent bfc1d8e
commit eca70f1
Show file tree

Hide file tree

Showing 6 changed files with 465 additions and 325 deletions.
diff --git a/content/notification-top/_index.md 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
diff --git a/layouts/_default/notification_top.html b/layouts/_default/notification_top.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Promotional Message</title>
+
+  <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
+  <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
+
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,400;1,500;1,900&display=swap');
+    html, body, p{
+      margin: 0;
+      padding: 0;
+      height: auto;
+      color: #ffffff;
+      font-family: "Roboto", sans-serif;
+      font-size: 14px;
+    }
+    .notification-top {
+      display: flex;
+      align-items: center;
+      padding: 6px 0;
+
+      a {
+        text-decoration: none;
+        transition: 0.3s ease-in-out;
+        .message {
+          color: #ffffff;
+          line-height: 170%;
+          transform: translateY(2px);
+            &:hover {
+              color: #f2f2f2;
+            }
+        }
+      }
+      .left-content {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+        p{
+          margin-bottom: 0;
+          line-height: 160%;
+        }
+        .button {
+          background: #ffffff;
+          white-space: nowrap;
+          color: #1c1c1c;
+          font-size: 12px;
+          text-transform: uppercase;
+          font-weight: 500;
+          padding: 4px 8px;
+          text-decoration: none;
+          border-radius: 4px;
+          transition: 0.3s ease-in-out;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          border:1px solid #fff;
+          cursor: pointer;
+          span.icon {
+            font-weight: 500;
+          }
+
+          &:hover {
+            border:1px solid #fff;
+            color: #00a651;
+            background: #ffffff;
+          }
+          .icon {
+            width: 16px;
+            height: 16px;
+            display: flex;
+          }
+        }
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="notification-top">
+    <a href="https://calendly.com/appscode/appscode-at-kubecon-eu-2024?text_color=1c1c1c&primary_color=00a651" target="_blank" class="left-content">
+      <span class="message">Connect with the AppsCode team at Kubecon EU: Reserve your personalized 1:1 chat now!</span>
+      <button class="button">
+        <span>Reserve Now</span>
+        <span class="icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="currentColor" fill-rule="evenodd" d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8L6.22 5.28a.75.75 0 0 1 0-1.06" clip-rule="evenodd"/>
+          </svg>
+        </span>
+      </button>
+    </a>
+  </div>
+</body>
+</html>
diff --git 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
@@ -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
@@ -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);