Modified the Navbar

codingkatty · Oct 13, 2024 · cc758fe · cc758fe
1 parent 661e7cc
commit cc758fe
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 50 deletions.
diff --git a/about.html b/about.html
@@ -7,6 +7,8 @@
     <title>About Math 4 Python</title>
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" 
           integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" 
           crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -60,23 +62,29 @@
     </style>
 </head>
 <body>
-    <div class="navbar">
+    <div class="navbar"> 
+        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+        <h1 class="title">MathPyLearn</h1>
+        <div class="theme-toggle-wrapper">
+            <button style="cursor: pointer;" id="theme-toggle">
+                <i class="fas fa-sun"></i>
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+
         <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html" class="active">About</a>
             <a href="learn.html">Learn</a>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        <div class="theme-toggle-wrapper">
-            <button style="cursor: pointer;" id="theme-toggle">
-                <i class="fas fa-sun"></i>
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
-        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+
+        <!-- <a href="learn.html" class="active">Learn</a>
+        <a href="challenge.html">Challenge</a> -->
     </div>
 
+
     <div class="container">
         <div class="banner">
             <h1>About Math 4 Python</h1>

diff --git a/challenge.html b/challenge.html
@@ -7,26 +7,34 @@
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
 </head>
 <body id="challenge">
-    <div class="navbar">
+    <div class="navbar"> 
+        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+        <h1 class="title">MathPyLearn</h1>
+        <div class="theme-toggle-wrapper">
+            <button style="cursor: pointer;" id="theme-toggle">
+                <i class="fas fa-sun"></i>
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+
         <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html">Learn</a>
             <a href="challenge.html" class="active">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        <div class="theme-toggle-wrapper">
-            <button id="theme-toggle">
-                <i class="fas fa-sun"></i>
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
-        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+
+        <!-- <a href="learn.html" class="active">Learn</a>
+        <a href="challenge.html">Challenge</a> -->
     </div>
 
+
     <div class="content">
         <h2><i class="fas fa-trophy"></i> Python Challenges</h2>
         <p>Welcome to the challenges section! Test your skills with various coding challenges.</p>

diff --git a/faq.html b/faq.html
@@ -8,26 +8,34 @@
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
   </head>
   <body id="faq">
-    <div class="navbar">
+    <div class="navbar"> 
+        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+        <h1 class="title">MathPyLearn</h1>
+        <div class="theme-toggle-wrapper">
+            <button style="cursor: pointer;" id="theme-toggle">
+                <i class="fas fa-sun"></i>
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+
         <div class="nav-links">
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html" >Learn</a>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html" class="active">FAQs</a>
         </div>
-        <div class="theme-toggle-wrapper">
-            <button id="theme-toggle">
-                <i class="fas fa-sun"></i>
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
-        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+
+        <!-- <a href="learn.html" class="active">Learn</a>
+        <a href="challenge.html">Challenge</a> -->
     </div>
 
+
     <div class="content">
         <h2><i class="fas fa-question-circle"></i> Frequently Asked Questions</h2>
         <div class="faq-container">

diff --git a/index.html b/index.html
@@ -13,29 +13,33 @@
     <!-- <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">-->
     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+        <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
 </head>
 
 <body id="home">
     <div class="navbar">
-
+        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
+        <!-- <a href="learn.html">Learn</a>
+        <a href="challenge.html">Challenge -->
+        </a>
+        <h1 class="title">MathPyLearn</h1>
+        <div class="theme-toggle-wrapper">
+            <button style="cursor: pointer;" id="theme-toggle">
+                <i class="fas fa-sun"></i>
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
         <div class="nav-links">
             <a href="index.html" class="active">Home</a>
             <a href="about.html">About</a>
             <a href="learn.html">Learn</a>
             <a href="challenge.html">Challenge</a>
             <a href="faq.html">FAQs</a>
         </div>
-        <div class="theme-toggle-wrapper">
-            <button style="cursor: pointer;" id="theme-toggle">
-                <i class="fas fa-sun"></i>
-                <i class="fas fa-moon"></i>
-            </button>
-        </div>
+
 
-        <a class="logo" href="index.html"><img src="logonew.svg" width="40"></a>
-        <!-- <a href="learn.html">Learn</a>
-        <a href="challenge.html">Challenge -->
-        </a>
+
     </div>
 
     <div class="content">

diff --git a/learn.html b/learn.html
@@ -9,31 +9,35 @@
     <link rel="shortcut icon" href="Untitled design1.ico" type="image/x-icon">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
     <script src="https://cdn.jsdelivr.net/pyodide/v0.22.1/full/pyodide.js"></script>
+            <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono&display=swap" rel="stylesheet">
 </head>
 <body id="learn" onload="showEditor('Untitled')">
-    <div class="navbar">
-        <div class="nav-links">
-            <a href="index.html">Home</a>
-            <a href="about.html">About</a>
-            <a href="learn.html" class="active">Learn</a>
-            <a href="challenge.html">Challenge</a>
-            <a href="faq.html">FAQs</a>
-        </div>
+
+        <div class="navbar"> 
+        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
+        <h1 class="title">MathPyLearn</h1>
         <div class="theme-toggle-wrapper">
             <button style="cursor: pointer;" id="theme-toggle">
                 <i class="fas fa-sun"></i>
                 <i class="fas fa-moon"></i>
             </button>
         </div>
 
-        <a class="logo" href="index.html"><img src="logonew.svg" height="40" width="40" alt="Math 4 Python Logo"></a>
-
+        <div class="nav-links">
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+            <a href="learn.html" class="active">Learn</a>
+            <a href="challenge.html">Challenge</a>
+            <a href="faq.html">FAQs</a>
+        </div>
+
         <!-- <a href="learn.html" class="active">Learn</a>
         <a href="challenge.html">Challenge</a> -->
     </div>
 
-    <div class="content">
+     <div class="content">
         <h2>Python Lessons</h2>
         <p>Welcome to the Python lessons! Choose a lesson below to get started.</p>
 

diff --git a/styles.css b/styles.css
@@ -24,29 +24,43 @@ body {
 
 .nav-links {
     display: flex;
-    gap: 1rem;
+    gap: 6rem;
+}
+.title {
+    color: black;
+    font-family: 'Lobster', cursive;
+    font-size: 40px;
+    margin-left: 15px; /* Adjust this margin as per your layout */
+    margin-top: 8px;
+    position: relative; /* Use relative positioning to keep it in normal flow */
+    top: 0;
 }
 
+.theme-toggle-wrapper {
+    margin-left: 600px; /* Push to the right */
+}
 .navbar a {
-    color: #ecf0f1;
+    color: #050c0e;
     text-decoration: none;
     padding: 0.5rem 1rem;
-    font-size: 1rem;
+    font-size: 25px;
     font-weight: 500;
     border-radius: 4px;
     transition: background-color 0.3s, color 0.3s;
+    font-family: 'Lobster', cursive;
 }
 
 .navbar a:hover, .navbar a.active {
     background-color: #34495e;
-    color: #3498db;
+    color: #e4e8eb;
 }
 
 /* Logo */
 .navbar .logo img {
     height: 40px;
     width: auto;
     transition: transform 0.3s ease;
+    border: 2px solid black;
 }
 
 .navbar .logo img:hover {