From 700c15d1994595f2d13b0951a21a1f02775fcc9c Mon Sep 17 00:00:00 2001
From: driyash9881 <priyatiwari9881@gmail.com>
Date: Thu, 23 May 2024 12:29:41 +0530
Subject: [PATCH] Add hover effect and responsive design to example section
 with fixed bug

---
 .hintrc    | 25 +++++++++++++++++++++++++
 index.html | 12 +++++-------
 style.css  | 37 +++++++++++++++++++++----------------
 3 files changed, 51 insertions(+), 23 deletions(-)
 create mode 100644 .hintrc

diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..83fa4f7
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
+    ],
+    "axe/structure": [
+      "default",
+      {
+        "list": "off"
+      }
+    ],
+    "axe/name-role-value": [
+      "default",
+      {
+        "link-name": "off"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 610ba60..be96168 100644
--- a/index.html
+++ b/index.html
@@ -164,9 +164,7 @@ <h3>Design professionals</h3>
             </div>
         </div>
     </section>
-
-    <!-- examples section -->
-
+<!-- examples section -->
     <section class="examples-section">
         <div class="container">
             <div class="examples-header flex">
@@ -174,16 +172,16 @@ <h2 class="examples-heading-text">One platform, endless possibilities</h2>
                 <a href="#" class="secondary-button">See more examples <i class="fa-solid fa-right-long"></i></a>
             </div>
             <div class="examples-area flex">
-                <a href="#" class="examples-card">
+                <a href="#" class="examples-card" style="background-color: #ADD8E6;"> <!-- light blue -->
                     <h3 class="card-text">Can user complete a task in my software interface?</h3>
                 </a>
-                <a class="examples-card" href="#" style="background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(asset\ 34.jpeg); background-size: cover;">
+                <a class="examples-card" href="#" style="background-color: #F7DC6F;"> <!-- light yellow -->
                     <h3 class="card-text">Can users find important pages on my website?</h3>
                 </a>
-                <a class="examples-card" href="#">
+                <a class="examples-card" href="#" style="background-color: #C6F7D0;"> <!-- light green -->
                     <h3 class="card-text">Is my website’s intended audience clear? </h3>
                 </a>
-                <a class="examples-card" href="#">
+                <a class="examples-card" href="#" style="background-color: #FFC5C5;"> <!-- light red -->
                     <h3 class="card-text">Do visitors understand what a page is about?</h3>
                 </a>
             </div>
diff --git a/style.css b/style.css
index d9167b2..5ec1f19 100644
--- a/style.css
+++ b/style.css
@@ -330,9 +330,10 @@ header {
 }
 
 .features-card {
+    margin-bottom: 12px;
     flex-direction: column;
     gap: 20px;
-    max-width: 30%;
+    max-width: 32%;
     text-align: center;
 }
 .features-card:hover{
@@ -383,30 +384,22 @@ header {
     justify-content: space-between;
     margin-block: 30px;
     flex-wrap: wrap;
+    
 }
 
 .examples-card {
     width: 23%;
     position: relative;
     height: 300px;
-    background: var(--secondary-text-color);
-    background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(asset\ 35.jpeg);
-    background-size: cover;
+    border-radius: 10px; /* added border radius */
     transition: 0.2s ease-out;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* added box shadow */
+    
 }
 
 .examples-card:hover {
-    box-shadow: 0 0 10px #888;
-}
-
-.examples-card:nth-child(3) {
-    background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(asset\ 36.jpeg);
-    background-size: cover;
-}
-
-.examples-card:nth-child(4) {
-    background: linear-gradient(rgb(0, 0, 0, 0.1), rgb(0, 0, 0, 0.8)), url(asset\ 37.jpeg);
-    background-size: cover;
+    transform: translateY(-5px); /* added hover effect */
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
 }
 
 .card-text {
@@ -414,7 +407,19 @@ header {
     bottom: 20px;
     left: 20px;
     right: 20px;
-    color: var(--secondary-text-color);
+    color: #607584;
+    /* color: var(--secondary-text-color); */
+}
+
+@media (max-width: 768px) {
+    .examples-card {
+        width: calc(50% - 20px);
+    }
+}
+@media (max-width: 480px) {
+    .examples-card {
+        width: 100%;
+    }
 }
 
 /* cta section */