From a7c43cabb2e8542ef1e1cba0aedf92900a7cce76 Mon Sep 17 00:00:00 2001
From: Priya Ghosal <162816363+PriyaGhosal@users.noreply.github.com>
Date: Fri, 11 Oct 2024 10:08:59 +0530
Subject: [PATCH] Revert "style: UI/UX Courses page rebooted #386"

---
 assets/css/uiux.css | 160 +++++++++++++++++---------------------------
 uiux.html           | 156 +++++++++++++++++++++---------------------
 2 files changed, 141 insertions(+), 175 deletions(-)

diff --git a/assets/css/uiux.css b/assets/css/uiux.css
index f7bece9f..1a593e65 100644
--- a/assets/css/uiux.css
+++ b/assets/css/uiux.css
@@ -1,124 +1,88 @@
 body {
   font-family: Arial, sans-serif;
+  background-color: #f0f0f0; /* Light gray background */
+  color: #333;
   margin: 0;
   padding: 20px;
-  background-color: #f8fafc;
 }
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
+
+header {
+  text-align: center;
+  padding-bottom: 20px;
 }
+
 h1 {
-  text-align: left;
-  color: #1e293b;
-  margin-bottom: 20px;
+  font-size: 2.5em;
+  color: #333; /* Black text for the header */
 }
-.grid {
+
+.course-list {
+  list-style-type: none;
+  padding: 0;
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 20px;
 }
+
 .card {
-  border-radius: 8px;
+  background-color: #fff; /* White background for the cards */
+  border-radius: 10px;
   padding: 20px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Darker shadow for more contrast */
   position: relative;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-  cursor: pointer;
+  overflow: hidden;
+  transition: transform 0.3s ease; /* Adding hover effect */
 }
+
 .card:hover {
-  transform: translateY(-10px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 10px;
-}
-.icon {
-  background-color: #ffffff;
-  border-radius: 4px;
-  padding: 10px;
-  font-size: 24px;
-  transition: transform 0.3s ease;
-}
-.card:hover .icon {
-  transform: rotate(20deg);
-}
-.arrow {
-  color: #64748b;
-  font-size: 24px;
-  transition: transform 0.3s ease;
+  transform: scale(1.05); /* Slight hover effect for interaction */
 }
-.card:hover .arrow {
-  transform: translateX(5px);
-}
-h2 {
-  margin: 0 0 10px 0;
-  color: #1e293b;
-  font-size: 18px;
-}
-p {
-  margin: 0 0 15px 0;
-  color: #64748b;
-  font-size: 14px;
-}
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.articles {
-  color: #64748b;
-  font-size: 12px;
+
+.card-icon img {
+  float: left;
+  margin-right: 20px;
 }
-.buy-btn {
-  background-color: #ffffff;
-  color: #3b82f6;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: background-color 0.3s, transform 0.3s;
+
+.title-lg {
+  font-size: 1.5em;
+  color: #333; /* Dark text for course title */
 }
-.buy-btn:hover {
-  background-color: #eff6ff;
-  transform: scale(1.1);
+
+.title-sm {
+  font-size: 1em;
+  color: #666; /* Lighter gray for course descriptions */
 }
-.buy-btn:active {
-  transform: scale(0.95);
+
+.layer-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  text-indent: -9999px;
 }
 
-/* Media Queries for Responsiveness */
-@media (max-width: 992px) {
-  .grid {
-      grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet screens */
-  }
+/* Accent elements in light pink */
+.card-icon img, h1 {
+  border-bottom: 2px solid #ff69b4; /* Soft pink border */
 }
 
-@media (max-width: 768px) {
-  .grid {
-      grid-template-columns: 1fr; /* Single column on mobile screens */
-  }
+.card:hover .card {
+  background-color: #ff69b4; /* Soft pink on hover */
+}
+.buy-now-btn {
+  display: inline-block;
+  background-color: #333; /* Dark color for the button */
+  color: #fff; /* White text */
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 0.9em;
+  margin-top: 10px;
+  transition: background-color 0.3s ease;
 }
 
-@media (max-width: 480px) {
-  h1 {
-      font-size: 24px;
-  }
-  h2 {
-      font-size: 16px;
-  }
-  p {
-      font-size: 12px;
-  }
-  .buy-btn {
-      font-size: 10px;
-      padding: 5px 8px;
-  }
-}
\ No newline at end of file
+.buy-now-btn:hover {
+  background-color: #ff69b4; /* Soft pink color on hover */
+}
diff --git a/uiux.html b/uiux.html
index 11401c54..6b2ee9cd 100644
--- a/uiux.html
+++ b/uiux.html
@@ -1,90 +1,92 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UI/UX Design Courses</title>
-    <link rel="stylesheet" href="assets/css/uiux.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>UI/UX Design Courses</title>
+  <link rel="stylesheet" href="assets/css/uiux.css">
 </head>
+
 <body>
-    <div class="container">
-        <h1>UI/UX Design Courses</h1>
-        <div class="grid" id="categoryGrid"></div>
-    </div>
+  <header>
+    <h1>UI/UX Design Courses</h1>
+  </header>
 
-    <script>
-        const uxUiCourses = [
-            { 
-                title: 'Intro to UI/UX Design', 
-                description: 'Beginner-friendly introduction to the basics of UI/UX.', 
-                icon: '🎨', 
-                color: '#DDFFE7', 
-               
-            },
-            { 
-                title: 'Advanced Prototyping Techniques', 
-                description: 'Master advanced prototyping for smooth UI/UX transitions.', 
-                icon: '🔧', 
-                color: '#E8EAEF', 
-              
-            },
-            { 
-                title: 'User Research Fundamentals', 
-                description: 'Understand your users to design better experiences.', 
-                icon: '🔍', 
-                color: '#BEF6F5', 
-               
-            },
-            { 
-                title: 'Design Systems & Guidelines', 
-                description: 'Learn how to create consistent and scalable design systems.', 
-                icon: '🛠️', 
-                color: '#FFE8FF', 
-             
-            },
-            { 
-                title: 'UX for Mobile Devices', 
-                description: 'Design user-friendly experiences for mobile applications.', 
-                icon: '📱', 
-                color: '#C6EDFF', 
-             
-            },
-            { 
-                title: 'Web Accessibility in UI/UX', 
-                description: 'Ensure your designs are accessible to all users.', 
-                icon: '♿', 
-                color: '#FAFDCB', 
-           
-            }
-        ];
+  <ul class="course-list">
+    <li class="card category-card">
+      <div class="card-icon">
+        <img src="./assets/images/img1.jpg" width="72" height="72" alt="Course 1 icon">
+      </div>
+      <div>
+        <h3 class="title-lg">Intro to UI/UX Design</h3>
+        <p class="title-sm">Beginner-friendly introduction to the basics of UI/UX.</p>
+        <a href="#" class="buy-now-btn">Buy Now</a>
+      </div>
+      <a href="#" class="layer-link" aria-label="Intro to UI/UX Design"></a>
+    </li>
 
-        const grid = document.getElementById('categoryGrid');
+    <li class="card category-card">
+      <div class="card-icon">
+        <img src="./assets/images/img2.jpg" width="72" height="72" alt="Course 2 icon">
+      </div>
+      <div>
+        <h3 class="title-lg">Advanced Prototyping Techniques</h3>
+        <p class="title-sm">Master advanced prototyping for smooth UI/UX transitions.</p>
+        <a href="#" class="buy-now-btn">Buy Now</a>
+      </div>
+      <a href="#" class="layer-link" aria-label="Advanced Prototyping Techniques"></a>
+    </li>
 
-        uxUiCourses.forEach(category => {
-            const card = document.createElement('div');
-            card.className = 'card';
-            card.style.backgroundColor = category.color;
+    <li class="card category-card">
+      <div class="card-icon">
+        <img src="./assets/images/img3.jpg" width="72" height="72" alt="Course 3 icon">
+      </div>
+      <div>
+        <h3 class="title-lg">User Research Fundamentals</h3>
+        <p class="title-sm">Understand your users and their needs to design better experiences.</p>
+        <a href="#" class="buy-now-btn">Buy Now</a>
+      </div>
+      <a href="#" class="layer-link" aria-label="User Research Fundamentals"></a>
+    </li>
 
-            card.innerHTML = `
-                <div class="card-header">
-                    <div class="icon">${category.icon}</div>
-                    <div class="arrow">→</div>
-                </div>
-                <h2>${category.title}</h2>
-                <p>${category.description}</p>
-                <div class="card-footer">
-                    <button class="buy-btn">Buy Now</button>
-                </div>
-            `;
+    <li class="card category-card">
+      <div class="card-icon">
+        <img src="./assets/images/img4.jpg" width="72" height="72" alt="Course 4 icon">
+      </div>
+      <div>
+        <h3 class="title-lg">Design Systems & Guidelines</h3>
+        <p class="title-sm">Learn how to create consistent and scalable design systems.</p>
+        <a href="#" class="buy-now-btn">Buy Now</a>
+      </div>
+      <a href="#" class="layer-link" aria-label="Design Systems & Guidelines"></a>
+    </li>
 
-            // Interactivity: Buy button click
-            const buyButton = card.querySelector('.buy-btn');
-            buyButton.addEventListener('click', () => {
-                alert(`You clicked "Buy Now" for ${category.title}`);
-            });
+    <li class="card category-card">
+      <div class="card-icon">
+        <img src="./assets/images/img5.jpg" width="72" height="72" alt="Course 5 icon">
+      </div>
+      <div>
+        <h3 class="title-lg">UX for Mobile Devices</h3>
+        <p class="title-sm">Design user-friendly experiences for mobile applications.</p>
+        <a href="#" class="buy-now-btn">Buy Now</a>
+      </div>
+      <a href="#" class="layer-link" aria-label="UX for Mobile Devices"></a>
+    </li>
+
+    <li class="card category-card">
+      <div class="card-icon">
+        <img src="./assets/images/img6.jpg" width="72" height="72" alt="Course 6 icon">
+      </div>
+      <div>
+        <h3 class="title-lg">Web Accessibility in UI/UX</h3>
+        <p class="title-sm">Ensure your designs are accessible to all users.</p>
+        <a href="#" class="buy-now-btn">Buy Now</a>
+      </div>
+      <a href="#" class="layer-link" aria-label="Web Accessibility in UI/UX"></a>
+    </li>
+  </ul>
 
-            grid.appendChild(card);
-        });
-    </script>
 </body>
+
 </html>