update about page

mmdbalkhi · Jun 2, 2022 · 440bb03 · 440bb03
1 parent 307456f
commit 440bb03
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 15 deletions.
diff --git a/app/templates/about.html b/app/templates/about.html
@@ -1,11 +1,71 @@
 {% extends 'base.html' %}
 {% block content %}
-    <h1> {% block title %} About! {% endblock %} </h1>
-    <p>
-        <span class="first-letter">T</span>he Mozlink is a simple, fast, and free link shortener.
-        I make it because I'm in the process of learning how to build a web application and usage of the <a href="https://flask.palletsprojects.com/">Flask</a> framework. 
-    </p>
-    <p>
-        How I can Run this? for more information, please visit <a href="https://github.com/mmdbalkhi/mozlink#readme">Github</a>
-    </p>
+<style>
+    .first-letter {
+        font-size: 250%;
+        color: #2c2c2c;
+    }
+</style>
+<h1> {% block title %} About! {% endblock %} </h1>
+<p>
+    <span class="first-letter">T</span>he Mozlink is a simple, fast, and free link shortener.
+    I make it because I'm in the process of learning how to build a web application and usage of the <a
+        href="https://flask.palletsprojects.com/">Flask</a> framework.
+</p>
+<p>
+    <h3>How I can Run this?</h3> for more information, please visit <a
+        href="https://github.com/mmdbalkhi/mozlink#readme">Github</a>
+</p>
+<p>
+    <h3>Support me?</h3> if you like this project, please give me a star on <a
+        href="https://github.com/mmdbalkhi/mozlink">github</a> or follow me on <a
+        href="https://twitter.com/mmdbalkhi">twitter</a>
+</p>
+<p>
+    <h4> Power by</h4>
+    <ul>
+        <li>
+            <a href="https://flask.palletsprojects.com/">Flask <img
+                    src="https://github.com/pallets/flask/raw/main/docs/_static/flask-icon.png" alt="flask-logo"
+                    width="64" height="64">
+            </a>
+        </li>
+        <li>
+            <a href="https://www.sqlalchemy.org/">SQLAlchemy <img src="https://www.sqlalchemy.org/img/sqla_logo.png"
+                    alt="sqlalchemy-logo" width="300" height="63">
+            </a>
+        </li>
+        <li>
+            <a href="https://hashids.org/">Hsashids <img src="https://avatars.githubusercontent.com/u/8481000"
+                    alt="hashids-logo" width="64" height="64">
+            </a>
+        </li>
+        <li>
+            <a href="https://getbootstrap.com/"> Bootstrap <img
+                    src="https://getbootstrap.com/docs/5.2/assets/brand/bootstrap-logo-shadow.png" alt="bootstrap-logo"
+                    width="64" height="64">
+            </a>
+        </li>
+        <li>
+            <a href="https://popper.js.org/"> popper.js <img
+                    src="https://popper.js.org/static/popper-logo-outlined-fb38d0b34a253d52fc74cd9c4f3dcec3.svg"
+                    width="64" height="64" alt="popper logo">
+
+            </a>
+        </li>
+        <li>
+            <a href="https://sweetalert2.github.io/">sweetalert2 <img
+                    src="https://sweetalert2.github.io/images/favicon.png" width="64" height="64"
+                    alt="SweetAlert2 logo"> </a>
+        </li>
+        <li>
+            <a href="https://github.com/sandoche/Darkmode.js"> DarkMode.js <img
+                    src="https://darkmodejs.learn.uno/favicon.png" width="64" height="64" alt="darkmode.js-logo"> </a>
+        </li>
+        <li>
+            <a href="https://fontawesome.com/">Font Awesome <img src="https://fontawesome.com/favicon.ico" width="64"
+                    height="64" alt="fontAwesome logo"></a>
+        </li>
+    </ul>
+</p>
 {% endblock %}
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -27,7 +27,7 @@
 
 <body>
   <div class="center">
-    <navbar style="margin-left: 1%">
+    <navbar style="margin-left: 5%">
       <a href='{{ url_for("index")}}'>Mozlink!</a> |
       <a href="https:&#x2F;&#x2F;github.com&#x2F;mmdbalkhi&#x2F;mozlink">Source Code</a>
       |
@@ -45,17 +45,19 @@
   <script src="https://code.jquery.com/jquery-3.6.0.slim.js"
     integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
-    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
-    crossorigin="anonymous"></script>
+    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
+  </script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
-    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
-    crossorigin="anonymous"></script>
+    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
+  </script>
   <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
   <script src="https://kit.fontawesome.com/872f587f26.js" crossorigin="anonymous"></script>
 
   <script>
     function addDarkmodeWidget() {
-      new Darkmode({ label: "🌓" }).showWidget();
+      new Darkmode({
+        label: "🌓"
+      }).showWidget();
     }
     window.addEventListener("load", addDarkmodeWidget);
   </script>
@@ -68,7 +70,6 @@
       $temp.remove();
       swal("Copyed!", "Your link was successfully copied", "success");
     }
-
   </script>
 </body>