Add support block

farengeyt451 · Aug 29, 2023 · 79db16d · 79db16d
1 parent 6f18a2c
commit 79db16d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.html b/projects/ngx-tippy-demo/src/app/components/header/header.component.html
@@ -24,10 +24,27 @@ <h2 class="header__title">ngx-tippy-wrapper</h2>
     ></tui-badge>
   </div>
 
+
+
   <div class="header__actions">
+    <div class="header__support">
+      <a
+        class="header__support-link"
+        href="https://www.buymeacoffee.com/alexanderkislov"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <img
+          class="header__support-icon"
+          src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
+          alt="Buy Me A Coffee"
+        ></a>
+    </div>
+
     <div class="header__social">
       <t-demo-social></t-demo-social>
     </div>
+
     <div class="header__scheme-switcher">
       <t-demo-scheme-switcher></t-demo-scheme-switcher>
     </div>

diff --git a/projects/ngx-tippy-demo/src/app/components/header/header.component.scss b/projects/ngx-tippy-demo/src/app/components/header/header.component.scss
@@ -8,6 +8,10 @@ $animation-time: 3s;
   justify-content: space-between;
 }
 
+.header__left {
+  display: flex;
+}
+
 .header__hero {
   display: flex;
   align-items: center;
@@ -46,6 +50,23 @@ $animation-time: 3s;
   animation-name: animation-bounce-reversed;
 }
 
+.header__social {
+  margin-left: 2rem;
+}
+
+.header__support-link {
+  display: flex;
+  height: 100%;
+  align-items: center;
+}
+
+.header__support-icon {
+  height: 46px;
+  width: 162px;
+  border-radius: 1.5rem
+}
+
+
 @keyframes animation-bounce-reversed {
   0% {
     transform: translate3d(0, 10px, 0) rotate(0.01deg);