Update base.html

shabiasaeed · Jun 25, 2024 · 1707f55 · 1707f55
1 parent 48da20e
commit 1707f55
Showing 1 changed file with 26 additions and 77 deletions.
diff --git a/portfolio/templates/portfolio/base.html b/portfolio/templates/portfolio/base.html
@@ -8,92 +8,41 @@
 
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
-
     <link rel="stylesheet" href="{% static "portfolio/custom.css" %}">
-
     <link href="https://fonts.googleapis.com/css2?family=Mate+SC&display=swap" rel="stylesheet">
-
     <link rel="icon" type="image/png" href="{% static "portfolio/images.png" %}">
-
-
     <title>Shabia Saeed</title>
   </head>
   <body>
-
-
-
-
-    <nav id="topNav" class="navbar navbar-expand-md navbar-dark bg-dark">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="{% url 'home' %}">
-        <img src="{% static "portfolio/images.png" %}" width="40" height="40" class="d-inline-block align-top" alt="Shabia's Logo">
-         <a class="navbar-brand" href="#">SHABIA SAEED</a>
-      </a>
-      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <div class="collapse navbar-collapse text-center" id="navbarNav">
-        <ul class="navbar-nav ml-auto">
-
-          <li class="nav-item">
-            &nbsp;
-            <a class="btn btn-warning" href="{% static "portfolio/Res.pdf" %}">Resume</a>
-          </li>
-
-          <li class="nav-item">
-            &nbsp;
-            <a class="btn btn-warning" href="https://www.linkedin.com/in/shabia-saeed-b2a9a3224" target="_blank">LinkedIn</a>
-          </li>
-
-
-          <li class="nav-item">
-            &nbsp;
-            <a class="btn btn-warning" href="https://www.instagram.com/shabia_saeed/?hl=en" target="_blank">Instagram</a>
-          </li>
-
-          <li class="nav-item">
-            &nbsp;
-            <a class="btn btn-warning" href="https://www.facebook.com/shabia.saeed" target="_blank">Facebook</a>
-          </li>
-
-          <li class="nav-item">
-            &nbsp;
-            <a class="btn btn-warning" href="https://twitter.com/ShabiaSaeed" target="_blank">Twitter</a>
-          </li>
-
-          <li class="nav-item">
-            &nbsp;
-            <a class="btn btn-warning" href="https://github.com/shabiasaeed?tab=repositories" target="_blank">GitHub Repository</a>
-          </li>
-
-
-          <li>
-            &nbsp;
-
-            <a role="button" href="{% url 'blog:all_blogs' %}" class="btn btn-warning">Blog</a>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </nav>
-
-
-
-  <div class="container">
+    <!-- Navbar -->
+     <header id="header">
+         <!-- Logo -->
+         <div class="header-left">
+           <a href="{% url 'home' %}">
+             <img src="{% static "portfolio/letters.png" %}" alt="Logo">
+           </a>
+         </div>
+
+         <div class="header-right">
+           <a class="navbar-brand" href="{% url 'home' %}">SHABIA SAEED</a>
+           <a href="{% url 'home' %}" class="nav-link {% block nav_item_home %}{% endblock nav_item_home %}">Home <span class="sr-only">(current)</span></a>
+           <a href="" class="nav-link">Skills</a>
+           <a href="{% url 'blog:all_blogs' %}" class="nav-link {% block nav_item_blog %}{% endblock nav_item_blog %}">Blog</a>
+         </div>
+         <span class="align-right">
+           <a href="https://github.com/shabiasaeed" class="fa fa-github"></a>
+           <a href="https://twitter.com/ShabiaSaeed" class="fa fa-twitter"></a>
+           <a href="https://www.linkedin.com/in/shabia-saeed-b2a9a3224" class="fa fa-linkedin"></a>
+           <a href="https://www.instagram.com/shabia_saeed/?hl=en" class="fa fa-instagram"></a>
+         </span>
+    </header>
+
+    <div class="container">
     {% block content %}{% endblock %}
+    </div>
 
-
-
-
-    <!-- Optional JavaScript; choose one of the two! -->
-
-    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
 
-    <!-- Option 2: Separate Popper and Bootstrap JS -->
-    <!--
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-    -->
   </body>
 </html>