docs: add icon to page

jerrylususu · Jan 28, 2024 · 334b4ec · 334b4ec
1 parent 53a18c8
commit 334b4ec
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -65,12 +65,28 @@
             border: 1px solid #ccc;
             border-radius: 3px;
         }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="title">MainOnly</div>
-        <div class="description">A JavaScript bookmarklet designed to isolate and highlight a specific element on a webpage, effectively hiding all other elements.</div>
+        .icon {
+            height: 150px;
+            width: 150px;
+        }
+        .title-and-icon-container {
+            display: flex;
+            justify-content: space-between;
+        }
+        .github-button {
+            background-color: #28a745;
+        }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+        <div class="title-and-icon-container">
+            <div>
+                <div class="title">MainOnly</div>
+                <div class="description">A JavaScript bookmarklet designed to isolate and highlight a specific element on a webpage, effectively hiding all other elements.</div>
+            </div>
+            <img src="icon.png" alt="MainOnly Icon" class="icon">
+        </div>
         <div class="step">
             <div class="step-number">1</div>
             <div class="step-content">
@@ -104,12 +120,13 @@
             <div class="step-content">
                 <div class="step-hint">Check out the Github Repo</div>
                 <p>Found this useful? Or just interested in how it works? Check out the Github repo for more. (Or just add a star)</p>
-                <a class="button" href="https://github.com/jerrylususu/mainonly" style="background-color: #28a745;">⭐ GitHub Repo</a>
-
-                <br>
-                <p>Made with ❤️, built using 🤖</p>
+                <div style="text-align: center;">
+                    <a class="button github-button" href="https://github.com/jerrylususu/mainonly">⭐ GitHub Repo</a>
+                    <br>
+                    <p>Made with ❤️, built using 🤖</p>
+                </div>
             </div>
         </div>
     </div>
 </body>
-</html>
+</html>