Merge pull request #565 from Chinmayi-H-M/main

adityai0 · web-flow · commit 57d718878a5d · 2025-08-23T18:11:14.000+05:30
Update Home Navigation and Card UI
diff --git a/CodeClip-Chinmayi b/CodeClip-Chinmayi
@@ -0,0 +1 @@
+Subproject commit b6e51e5c3381769b931a7dcab8550724ee023cab
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
     <!-- ================ Vendor CSS ================  -->
 
 <!-- ================ Vendor CSS ================ -->
-<link rel="stylesheet" href="styles/bootstrap.min.css" />
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 <link rel="stylesheet" href="styles/owl.carousel.min.css" />
 <link rel="stylesheet" href="styles/owl.theme.default.min.css" />
 <link rel="stylesheet" href="styles/fontawesome.css" />
@@ -79,15 +79,17 @@
   .icon-container i:hover {
     transform: scale(1.2);
   }
+  .navbar-light .navbar-toggler-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
 </style>
   </head>
-  </main>
 
   <body>
     <a id="top"></a>  <!--added for issue 260 -->
     <!-- ================================ Header Section Start Here ================================ -->
     <header>
-      <nav class="navbar navbar-expand-lg fixed-top">
+      <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
         <div class="container">
           <a class="navbar-brand" href="#top">Code<span>Clip</span></a>
           <button
@@ -97,8 +99,7 @@
             data-bs-target="#navbarSupportedContent"
             aria-controls="navbarSupportedContent"
             aria-expanded="false"
-            aria-label="Toggle navigation"
-          >
+            aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
@@ -191,7 +192,7 @@ <h1 data-aos="fade-right" data-aos-duration="650">
               <div class="card-body">
                 <div class="card-TopContainer">
                   <h5 class="card-Header">Frontend Challenges</h5>
-                  <p class="card-Level">EASY</p>
+                  <p class="card-Level medium-Col">EASY</p>
                   <div class="icon-container">
                     <i class="devicon-html5-plain colored" title="HTML5"></i>
                     <i class="devicon-css3-plain colored" title="CSS3"></i>
@@ -452,7 +453,7 @@ <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</sp
       <div class="container">
         <div class="row align-items-start justify-content-between py-4">
           <div data-aos-duration="650" data-aos="fade-up" class="col-12 col-md-3 mb-4 mb-md-0 footer-logo-col">
-            <a class="navbar-brand mb-2" href="#homeSection"
+            <a class="navbar-brand mb-2" id="homeSection"
               >Code<span>Clip</span></a
             > 
             <p class="footer-desc mb-0 text-dark">
@@ -463,7 +464,7 @@ <h3 data-aos-duration="650" data-aos="fade-up" class="secHeader"><span>About</sp
           <div data-aos-duration="650" data-aos="fade-left" class="col-12 col-md-6 mb-4 mb-md-0 footer-links-col">
             <h5 class="footer-title">Important Links</h5>
             <ul class="footer-links list-unstyled mb-0">
-              <li><a href="#homeSection">Home</a></li>
+              <li><a href="#top">Home</a></li>
               <li><a href="#challengeSection">Challenges</a></li>
               <li><a href="#leaderboardSection">Leaderboard</a></li>
               <li><a href="#aboutSection">About</a></li>
@@ -541,7 +542,7 @@ <h5 data-aos-duration="650" data-aos="fade-left" class="footer-title">Contact Us
     <!-- ================ Vendor JS ================  -->
     <script src="scripts/jquery.min.js"></script>
     <script src="scripts/owl.carousel.min.js"></script>
-    <script src="scripts/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
     <!-- ================ Custom JS ================  -->
     <script src="scripts/main.js"></script>
diff --git a/styles/main.css b/styles/main.css
@@ -395,13 +395,26 @@ nav {
 }
 
 .card-Level {
+<<<<<<< HEAD
+    margin-bottom: 0;
+    font-size: 10px;
+    padding: 4px 20px;
+    border-radius: 17px;
+    background: #d5edda;
+    color: #1a7071;
+    font-weight: 700;
+    /*Added margin to improve UI layout*/
+    margin-right:7px;
+
+=======
   margin-bottom: 0;
   font-size: 12px;
   padding: 4px 25px;
   border-radius: 17px;
   background: #d5edda;
   color: #1a7071;
   font-weight: 700;
+>>>>>>> d904e21b9c29665707b13f66d6d579d726cf4d51
 }
 
 .medium-Col {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+Subproject commit b6e51e5c3381769b931a7dcab8550724ee023cab`