Added donation link

LOUDO56 · May 1, 2024 · 61cf70a · 61cf70a
1 parent bb230d7
commit 61cf70a
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/assets/heart.png b/assets/heart.png
diff --git a/download.html b/download.html
@@ -21,10 +21,10 @@
                     <a href="/" class="title-software">PyMacroRecord</a>
                 </div>
                 <div class="links">
-                    <a href="/">Home</a>
                     <a href="download">Download</a>
                     <a href="https://github.com/LOUDO56/PyMacroRecord">Github</a>
                     <a href="https://github.com/LOUDO56/PyMacroRecord/blob/main/TUTORIAL.md">Help</a>
+                    <a href="https://ko-fi.com/loudo" target="_blank" class="donate"><img src="assets/heart.png" alt="heart png"> Donate</a>
                 </div>
                 <img src="assets/hamburger-icon.svg" alt="hambuger menu icon" class="hambuger-icon">
             </nav>
@@ -33,10 +33,10 @@
         <div class="links-mobile-menu">
             <img src="assets/close.svg" alt="close icon" class="close-icon">
             <div class="links-mobile">
-                <a href="/">Home</a>
                 <a href="download">Download</a>
                 <a href="https://github.com/LOUDO56/PyMacroRecord">Github</a>
                 <a href="https://github.com/LOUDO56/PyMacroRecord/blob/main/TUTORIAL.md">Help</a>
+                <a href="https://ko-fi.com/loudo" target="_blank" class="donate"><img src="assets/heart.png" alt="heart png"> Donate</a>
             </div>
         </div>
 

diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@
                     <a href="download">Download</a>
                     <a href="https://github.com/LOUDO56/PyMacroRecord">Github</a>
                     <a href="https://github.com/LOUDO56/PyMacroRecord/blob/main/TUTORIAL.md">Help</a>
+                    <a href="https://ko-fi.com/loudo" target="_blank" class="donate"><img src="assets/heart.png" alt="heart png"> Donate</a>
                 </div>
                 <img src="assets/hamburger-icon.svg" alt="hambuger menu icon" class="hambuger-icon">
             </nav>
@@ -39,6 +40,7 @@
                 <a href="download">Download</a>
                 <a href="https://github.com/LOUDO56/PyMacroRecord">Github</a>
                 <a href="https://github.com/LOUDO56/PyMacroRecord/blob/main/TUTORIAL.md">Help</a>
+                <a href="https://ko-fi.com/loudo" target="_blank" class="donate"><img src="assets/heart.png" alt="heart png"> Donate</a>
             </div>
         </div>
 
@@ -229,6 +231,13 @@ <h4 class="not-windows">Not having Windows? Follow this <a href="download#instal
                     So I hope this software will do the job! 
                 </p>
             </div>
+
+            <div class="support">
+                <p class="support-txt">Support &lt;3</p>
+                <p class="support-desc">Developing a software is not an easy task. If you really like this project, please consider making a small donation, it really helps and means a lot! &lt;3</p>
+                <a href='https://ko-fi.com/loudo' target='_blank'><img height='35' sclass="ko-fi-img" style='border:0px;height:46px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
+            </div>
+
         </main>
 
         <footer>

diff --git a/style.css b/style.css
@@ -67,6 +67,7 @@ nav{
     display: flex;
     gap: 30px;
     font-size: 18px;
+    align-items: center;
 
 }
 
@@ -103,7 +104,7 @@ nav{
     display: none;
 }
 
-.links-mobile-menu img{
+.close-icon{
     float: right;
     margin-top: 17px;
     margin-right: 20px;
@@ -114,7 +115,7 @@ nav{
     position: fixed;
     height: 100%;
     width: 150px;
-    background-color: #d3d3d3;
+    background-color: #ebebeb;
     right: -25em;
     top: 0;
     transition: 200ms ease;
@@ -133,6 +134,25 @@ nav{
     text-decoration: none;
 }
 
+.donate{
+    background-color: #6786F2;
+    padding: 10px 15px;
+    border-radius: 10px;
+    color: white !important;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: 200ms ease;
+
+}
+
+.donate:hover{
+    text-decoration: none !important;
+    background-color: #839dfa;
+
+}
+
 
 /*
 /*
@@ -187,6 +207,7 @@ nav{
     background-color: #839dfa;
 }
 
+
 .not-windows{
     margin-top: -10px;
     font-size: 15px;
@@ -309,6 +330,28 @@ nav{
     margin-top: 50px;
 }
 
+.support{
+    padding: 40px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.support-txt{
+    font-size: 70px;
+    color: #e83f88;
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 40px;
+}
+
+.support-desc{
+    font-size: 18px;
+    max-width: 40em;
+    margin: 0 auto;
+}
+
 
 /*
 /*