From 094ae18ce9220e6a3d5325e43dc16e89d311ddce Mon Sep 17 00:00:00 2001
From: Rajishshaji <rajishshaji11@gmail.com>
Date: Sat, 19 Oct 2024 09:42:38 +0530
Subject: [PATCH] Create improve home page

---
 improve home page | 122 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 improve home page
diff --git a/improve home page b/improve home page
new file mode 100644
index 0000000..06065c9
--- /dev/null
+++ b/improve home page	
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dark Themed Card Design</title>
+    <style>
+        * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #121212;
+    color: #f1f1f1;
+    padding: 20px;
+}
+
+.card-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.card {
+    background-color: #1e1e1e;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s, box-shadow 0.3s;
+    padding: 20px;
+    text-align: center;
+}
+
+.card-icon {
+    font-size: 3em;
+    margin-bottom: 20px;
+    color: #f39c12;
+}
+
+.card-content {
+    padding: 10px;
+}
+
+.card-title {
+    font-size: 1.5em;
+    margin-bottom: 10px;
+    color: #fff;
+}
+
+.card-description {
+    font-size: 1em;
+    color: #bbb;
+    margin-bottom: 20px;
+}
+
+.card-btn {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #f39c12;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.card-btn:hover {
+    background-color: #d35400;
+}
+
+.card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .card-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+    </style>
+</head>
+<body>
+    <div class="card-container">
+        <!-- Card 1 -->
+        <div class="card">
+            <div class="card-icon">💻</div>
+            <div class="card-content">
+                <h2 class="card-title">Software</h2>
+                <p class="card-description">This is a brief description of the card. It explains the card content in a short and concise way.</p>
+                <a href="#" class="card-btn">Learn More</a>
+            </div>
+        </div>
+
+        <!-- Card 2 -->
+        <div class="card">
+            <div class="card-icon">📱</div>
+            <div class="card-content">
+                <h2 class="card-title">Applications</h2>
+                <p class="card-description">This is a brief description of the card. It explains the card content in a short and concise way.</p>
+                <a href="#" class="card-btn">Learn More</a>
+            </div>
+        </div>
+
+        <!-- Card 3 -->
+        <div class="card">
+            <div class="card-icon">🌐</div>
+            <div class="card-content">
+                <h2 class="card-title">Browser</h2>
+                <p class="card-description">This is a brief description of the card. It explains the card content in a short and concise way.</p>
+                <a href="#" class="card-btn">Learn More</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
+
