improve the ui of graph algo section

sakeel-103 · Oct 18, 2024 · a56dd76 · a56dd76
1 parent fc66ed7
commit a56dd76
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html
@@ -101,19 +101,19 @@ <h1 class="text-5xl md:text-7xl font-bold text-white tracking-tight">
       </div>
 
       <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
-        <div class="bg-white shadow-lg rounded-2xl p-6 text-gray-800">
+        <div class="bg-white shadow-lg rounded-2xl p-6 text-gray-800 box-g">
           <span class="share-icon text-2xl">📤</span>
           <h3 class="text-xl font-semibold mb-2 mt-4">Interactive Visualization</h3>
           <p class="text-gray-600">Watch algorithms come to life with step-by-step visual demonstrations.</p>
         </div>
 
-        <div class="bg-white shadow-lg rounded-2xl p-6 text-gray-800">
+        <div class="bg-white shadow-lg rounded-2xl p-6 text-gray-800 box-g">
           <span class="git-branch-icon text-2xl">🌿</span>
           <h3 class="text-xl font-semibold mb-2 mt-4">Advanced Algorithms</h3>
           <p class="text-gray-600">Learn complex algorithms including DFS, BFS, Dijkstra's, and more.</p>
         </div>
 
-        <div class="bg-white shadow-lg rounded-2xl p-6 text-gray-800">
+        <div class="bg-white shadow-lg rounded-2xl p-6 text-gray-800 box-g">
           <span class="zap-icon text-2xl">⚡</span>
           <h3 class="text-xl font-semibold mb-2 mt-4">Real-time Analysis</h3>
           <p class="text-gray-600">Get instant feedback and performance metrics as you explore.</p>

diff --git a/src/app/components/header/style.css b/src/app/components/header/style.css
@@ -383,3 +383,16 @@ nav {
     padding: 0.6rem 1.2rem;
   }
 }
+
+/* add some hover effect and improving  styling  */
+.box-g{
+  padding: 12px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+
+}
+
+.box-g:hover{
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.025);
+
+}