Merge pull request #7 from tambeparth/main

improve font styles
Novus-Neurons · Oct 26, 2023 · 970b9e3 · 970b9e3
2 parents 361c8d6 + 8a3322a
commit 970b9e3
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 34 deletions.
diff --git a/codepal/components/navbar.html b/codepal/components/navbar.html
@@ -4,24 +4,42 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <link rel="stylesheet" href="styles.css"> <!-- Add a link to your CSS file -->
+    <title>Codepal</title>
 </head>
 
 <body>
-    <nav>
-        <div class="logo-container">
-            <img src="./assets/icons/NNIcon.png" alt="nnlogo">
-            <h1>Codepal</h1>
-        </div>
-        <div class="search-container">
-            <input type="search" name="" id="" placeholder="Search Tutorials....">
-        </div>
-        <div class="logo-container githubIcon">
-            <a href="https://github.com/Novus-Neurons/codepal" >
-                <img src="./assets/icons/githubIcon.png" alt="githubIcon">
-            </a>
-        </div>
-    </nav>
+    <header>
+        <nav class="navbar">
+            <div class="logo-container">
+                <img src="./assets/icons/NNIcon.png" alt="nnlogo">
+                <h1>Codepal</h1>
+            </div>
+            <div class="search-container">
+                <input type="search" name="search" id="searchInput" placeholder="Search Tutorials...."
+                    onclick="clearPlaceholder()">
+            </div>
+            <div class="logo-container githubIcon">
+                <a href="https://github.com/Novus-Neurons/codepal">
+                    <img src="./assets/icons/githubIcon.png" alt="githubIcon">
+                </a>
+            </div>
+        </nav>
+    </header>
+
+    <main>
+        <!-- Add your main content here -->
+    </main>
+
+    <footer>
+        <!-- Add your footer content here -->
+    </footer>
+
+    <script>
+        function clearPlaceholder() {
+            document.getElementById("searchInput").placeholder = "";
+        }
+    </script>
 </body>
 
 </html>
diff --git a/codepal/index.css b/codepal/index.css
@@ -4,11 +4,11 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    font-family: 'Roboto', 'Lucida Sans', 'Lucida Sans Regular';
+    font-family: 'Roboto', sans-serif;
 }
 
 body {
-    background: #ECECFF;
+    background: #1d4041;
     text-align: center;
     color: #212121;
 }
@@ -21,11 +21,11 @@ body {
     height: 100vh;
     width: 100%;
     z-index: -1;
-    background: radial-gradient(92.82% 58.5% at 65.55% 44.29%, rgba(255, 227, 218, 0.50) 0%, rgba(255, 252, 252, 0.85) 100%), #F2F9F4;
+    background: radial-gradient(92.82% 58.5% at 65.55% 44.29%, rgba(18, 17, 17, 0.807) 0%, rgba(3, 3, 3, 0.922) 100%), #c2e5cc;
 }
 
 nav a {
-    all: unset;
+    text-decoration: none;
     cursor: pointer;
 }
 
@@ -37,13 +37,13 @@ nav {
     align-items: center;
     justify-content: space-between;
     padding: 0.1em 2em;
-    margin-inline: auto;
-    margin-top: 1em;
+    margin: 1em auto;
 }
 
 nav .logo-container>img {
     width: 100%;
-    aspect-ratio: 1;
+    max-width: 50px;
+    height: auto;
 }
 
 nav .logo-container {
@@ -53,19 +53,20 @@ nav .logo-container {
     gap: 1em;
     color: white;
     height: 5em;
-    aspect-ratio: 1;
 }
 
 nav .search-container {
-    width: min(40%, 450px);
+    flex: 1;
+    max-width: 450px;
 }
 
 nav .search-container input {
-    all: unset;
     width: 100%;
     padding: 0.6em 0.8em;
     border-radius: 30px;
     background: #FBFBFF;
+    border: none;
+    outline: none;
 }
 
 nav .githubIcon {
@@ -75,16 +76,14 @@ nav .githubIcon {
 #Allcards {
     display: flex;
     flex-wrap: wrap;
-    align-items: start;
-    justify-content: start;
     gap: 1em;
-    margin-top: max(50px, 3%);
-    width: min(95vw, 1000px);
-    margin-inline: auto;
+    margin: max(50px, 3%) auto;
+    max-width: 1000px;
 }
 
 .MainPagecard:hover {
     box-shadow: 6px 0.55px 18px -3px rgba(101, 101, 101, 0.608);
+    transform: scale(1.1);
 }
 
 .MainPagecard {
@@ -106,14 +105,12 @@ nav .githubIcon {
     opacity: 0.6;
 }
 
-@media only screen and (max-width : 520px) {
-
+@media only screen and (max-width: 520px) {
     nav .search-container {
         display: none;
     }
 
     #Allcards {
         justify-content: center;
     }
-
 }
diff --git a/codepal/index.js b/codepal/index.js
@@ -33,7 +33,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 carddata = cardData
 
             });
-            
+
         await fetch("./components/Maincard.html")
             .then(responce => responce.text())
             .then((componentHTML) => {