updated js-beginner-project UI

Git21221 · Oct 4, 2023 · b5aa710 · b5aa710
1 parent c2a148e
commit b5aa710
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 57 deletions.
diff --git a/contributors.html b/contributors.html
@@ -42,11 +42,11 @@
           listItem.classList.add('d-inline-block', 'mr-2', 'mb-2');
 
           const badge = document.createElement('span');
-          badge.classList.add('badge', 'bg-dark', 'm-2');
+          badge.classList.add('badge', 'cards', 'm-2');
           badge.innerHTML = `
                  <a href="${contributor.html_url}"  target="_blank">
-                 <img src="${contributor.avatar_url}" alt="${contributor.login}" class="rounded-circle" width="50">
-                 <span style="margin-left: 10px;" class="text-nowrap">${contributor.login}</span>
+                 <img src="${contributor.avatar_url}" alt="${contributor.login}" class="rounded-circle" width="100">
+                 <p style="margin-top: 10px;font-size:16px;" class="text-nowrap">${contributor.login}</p>
                  </a>
                   `;
 
@@ -66,7 +66,7 @@
   <header class="w-100 d-md-none d-block mobile-header">
     <nav class="navbar navbar-expand-lg">
       <div class="container">
-        <a class="bg-primary rounded h4 p-1 fw-bold mb-0" href="#">Small Javascript Projects</h1>
+        <a class=" rounded h4 p-1 fw-bold mb-0" href="#">Small Javascript Projects</h1>
         </a>
         <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
           aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -106,14 +106,12 @@
         <a href="https://github.com/Git21221/JS-beginner-projects" class="nav-link" target="_blank">github</a>
       </li>
     </ul>
-    <div class="d-none d-md-inline ml-md-2 text-center text-md-left">
-      <h1 class="text-uppercase"> <span class="badge bg-primary">small javascript projects</span> </h1>
-    </div>
+
   </div>
   <!-- tabs: end -->
 
 
-  <h2 class="text-center"><span class="badge bg-success text-uppercase mb-2">Contributors</span> </h2>
+  <h2 class="text-center"><span class="badge  text-uppercase ">Contributors</span> </h2>
   <div class="container">
     <div class="row">
       <div class="col-12">

diff --git a/css/style.css b/css/style.css
@@ -1,27 +1,33 @@
 /*removed comment tag, hindring the display of colors */
 :root {
-    --white-color-lv5: #dfdfdf;
-    --dark-color-lv5: #212121;
+    --white-color-lv5: #fff;   
+   --dark-color-lv5: #36454F;
 }
 
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   box-sizing: border-box;
 }
 
 /*navbar-text-item styling*/
 .display-7 {
-    font-size: 1.5em;
-    font-weight: 500;
+   font-size: 1.5em;
+   font-weight: 500;
+}
+.nav-link:hover {
+   color: #fff !important;
+}
+.Heading{
+   border-bottom: 1px solid ;
 }
 
 
 /* mobile header: start */
 .mobile-header .navbar-toggler:is(:focus, :active) {
-    outline: none;
-    /* add white box shadow */
-    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.75);
+   outline: none;
+   /* add white box shadow */
+   box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.75);
 }
 
 /* mobile header: end */
@@ -32,56 +38,68 @@ a:hover,
 a:link,
 a:visited,
 a:active {
-    text-decoration: none;
-    color: var(--white-color-lv5);
+   text-decoration: none;
+   color: var(--white-color-lv5);
 }
 
 body {
-    padding: 10px;
-    font-family: 'Outfit', sans-serif;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    row-gap: 30px;
-    /*changed background height*/
-    height: 200vh;
+   /* padding: 10px; */
+   font-family: 'Outfit', sans-serif;
+   display: flex;
+
+   flex-direction: column;
+   row-gap: 30px;
+
+   height: 100vh;
 
-    background: linear-gradient(135deg, rgb(212, 0, 240), rgb(0, 101, 216));
-    color: var(--white-color-lv5);
+   background-color: #141d2f !important;
+   color: #fff;
 }
 
 .projectsName {
-    display: flex;
-    padding: 0.5rem 1.5rem;
-    background: rgba(255, 255, 255, 0.178);
-    -webkit-box-shadow: 10px 10px 77px -15px rgba(0, 0, 0, 0.733);
-    -moz-box-shadow: 10px 10px 77px -15px rgba(0, 0, 0, 0.75);
-    box-shadow: 10px 10px 77px -15px rgba(0, 0, 0, 0.75);
-    border-radius: 30px;
-    transition: 0.3s ease-in-out;
+   display: flex;
+   padding: 0.5rem 1.5rem;
+   background: #1e2a47;
+
+   border-radius: 30px;
+   border: 1px solid #1e2a47;
+   margin: auto;
+   transition: 0.3s ease-in-out;
 }
 
 .projectsName:hover {
-    background: rgba(80, 75, 75, 0.295);
-    cursor: pointer;
+   background: rgba(80, 75, 75, 0.295);
+   cursor: pointer;
 }
 
 .gamesAndProjects {
-    display: flex;
-    flex-wrap: wrap;
-    flex-shrink: 1;
-    flex-basis: auto;
-    overflow: hidden;
-    row-gap: 20px;
-    column-gap: 20px;
-    align-items: center;
-    justify-content: center;
-    padding: 5px;
+   display: flex;
+   flex-wrap: wrap;
+   flex-shrink: 1;
+   flex-basis: auto;
+   overflow: hidden;
+   row-gap: 20px;
+   column-gap: 20px;
+   align-items: center;
+   justify-content: center;
+   padding: 5px;
+   margin: auto;
 }
 
 .hvr-sweep-to-right::before {
-    border-radius: 30px;
-    background-color: #47699ca6;
-    /* glow */
-    box-shadow: 0 0 5px 0.5px #fff;
+   border-radius: 30px;
+   background-color: #47699ca6;
+   /* glow */
+   box-shadow: 0 0 5px 0.5px #fff;
+}
+.nav-tabs{
+   border-bottom: 0px;
+}
+.navbar{
+   background-color: #141d2f;
+   box-shadow: 0px 15px 10px -15px #ddd;    
+}
+.cards{
+   background-color:#1e2a47 ;
+   padding: 20px 40px !important;
 }
diff --git a/index.html b/index.html
@@ -31,7 +31,7 @@
   <header class="w-100 d-md-none d-block mobile-header">
     <nav class="navbar navbar-expand-lg">
       <div class="container">
-        <a class="bg-primary rounded h4 p-1 fw-bold mb-0" href="#">Small Javascript Projects</h1>
+        <a class="text-secondary rounded h4 p-1 fw-bold mb-0" href="#">Small Javascript Projects</h1>
         </a>
         <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
           aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -72,9 +72,11 @@
       </li>
     </ul>
     <div class="d-none d-md-inline ml-md-2 text-center text-md-left">
-      <h1 class="text-uppercase"> <span class="badge bg-primary">small javascript projects</span> </h1>
+      <h1 class="text-uppercase Heading"> <span class="badge">small javascript projects</span> </h1>
     </div>
   </div>
+
+
   <!-- tabs: end -->
 
 
@@ -114,7 +116,6 @@ <h1 class="text-uppercase"> <span class="badge bg-primary">small javascript proj
     <a href="./To Do List/todolist.html" class="hvr-sweep-to-right projectsName">To Do List</a>
     <a href="./Unlimited Color/unlimitedcolor.html" class="hvr-sweep-to-right projectsName">Unlimited Color</a>
     <a href="./Weather App/weatherapp.html" class="hvr-sweep-to-right projectsName">Weather App</a>
-    <a href="./memory/index.html" class="hvr-sweep-to-right projectsName">Memory Game</a>
   </section>
 
   <!-- Bootstrap Core JS -->