Star on GitHub button

vinodjangid07 · Jan 24, 2024 · 0c45b6c · 0c45b6c
1 parent 062ea8d
commit 0c45b6c
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 7 deletions.
diff --git a/assets/images/star-svgrepo-com.svg b/assets/images/star-svgrepo-com.svg
diff --git a/index.css b/index.css
@@ -123,6 +123,37 @@ header{
     fill: var(--light-text);
 
 }
+.right-nav-button-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    height: 100%;
+    gap: 20px;
+}
+.star-on-github-button{
+    width: fit-content;
+    height: 40px;
+    border-radius: 10px;
+    color: var(--light-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+    padding: 0px 20px;
+    gap: 10px;
+    font-weight: 500;
+    transition: all .3s;
+}
+.star-on-github-button svg{
+    width: 1.6rem;
+}
+.star-on-github-button svg path{
+    fill: var(--light-text-secondary);
+}
+.star-on-github-button:hover{
+    color: #0ba360;
+}
 
 #visual-toggle-button{
     width: 40px;
@@ -305,6 +336,7 @@ main{
 }
 .icon-image{
     width: 100px;
+    /* filter: hue-rotate(95deg)brightness(0.9); */
 }
 .download-icon{
     position: absolute;
@@ -502,6 +534,9 @@ main{
     html {
         font-size: 45%;  
     }
+    .star-on-github-button{
+        display: none;
+    }
     .landingContainer{
         height: 100vh;
     }

diff --git a/index.html b/index.html
@@ -583,13 +583,34 @@
                     </svg>
                     </a>
             </div>
-
-            <label for="visual-toggle" id="visual-toggle-button" onclick="visualMode()">
-                <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon-toggle sun-svg" viewBox="0 0 24 24"><g fill="#f1bd00"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg>
-
-                <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon-toggle moon-svg" fill="#f9ba48" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg>
-                <input type="checkbox" class="visual-toggle" id="visual-toggle">
-            </label>
+            <div class="right-nav-button-container">
+                <a href="https://github.com/vinodjangid07/Pexelicons" target="_blank" class="star-on-github-button">
+                    <svg class="star-svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+                         viewBox="0 0 217.929 217.929" xml:space="preserve">
+                    <g>
+                        <path d="M212.39,101.703c5.023-4.897,6.797-12.083,4.629-18.755s-7.827-11.443-14.769-12.452l-52.969-7.697
+                            c-0.097-0.014-0.18-0.075-0.223-0.162L125.371,14.64C122.267,8.349,115.98,4.44,108.964,4.44S95.662,8.349,92.558,14.64
+                            L68.87,62.637c-0.043,0.087-0.126,0.147-0.223,0.162l-52.968,7.697c-6.942,1.009-12.601,5.78-14.769,12.452
+                            s-0.394,13.858,4.629,18.755l38.328,37.361c0.07,0.068,0.102,0.166,0.085,0.262l-9.048,52.755
+                            c-1.186,6.914,1.604,13.771,7.279,17.894c5.676,4.125,13.059,4.657,19.268,1.393l47.376-24.907c0.086-0.046,0.19-0.045,0.276,0
+                            l47.376,24.907c2.701,1.42,5.623,2.121,8.531,2.121c3.777,0,7.53-1.184,10.736-3.514c5.675-4.123,8.464-10.98,7.279-17.895
+                            l-9.048-52.754c-0.017-0.096,0.016-0.194,0.085-0.262L212.39,101.703z M156.235,142.368l9.048,52.754
+                            c0.024,0.14,0.031,0.182-0.118,0.29c-0.149,0.108-0.187,0.088-0.312,0.022l-47.377-24.908c-5.33-2.801-11.695-2.801-17.027,0
+                            l-47.376,24.907c-0.125,0.065-0.163,0.086-0.312-0.022c-0.149-0.108-0.142-0.15-0.118-0.289l9.048-52.755
+                            c1.018-5.936-0.949-11.989-5.262-16.194L18.103,88.813c-0.101-0.099-0.132-0.128-0.075-0.303c0.057-0.175,0.099-0.181,0.239-0.202
+                            l52.968-7.697c5.961-0.866,11.111-4.607,13.776-10.008l23.688-47.998c0.063-0.126,0.081-0.165,0.265-0.165s0.203,0.039,0.265,0.165
+                            l23.688,47.998c2.666,5.401,7.815,9.143,13.776,10.008l52.968,7.697c0.14,0.021,0.182,0.027,0.239,0.202
+                            c0.057,0.175,0.026,0.205-0.075,0.303l-38.328,37.361C157.185,130.378,155.218,136.432,156.235,142.368z"/>
+                    </g>
+                    </svg>Star on GitHub</a>
+                <label for="visual-toggle" id="visual-toggle-button" onclick="visualMode()">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon-toggle sun-svg" viewBox="0 0 24 24"><g fill="#f1bd00"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg>
+
+                    <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon-toggle moon-svg" fill="#f9ba48" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg>
+                    <input type="checkbox" class="visual-toggle" id="visual-toggle">
+                </label>
+            </div>
+
         </nav>
     </header>
     <main role="main">