From d6b19b21a0f75c07f3d2941be7228ba827ef1ec2 Mon Sep 17 00:00:00 2001
From: "rajesh.n" <rajesh.n@opsmonsters.com>
Date: Thu, 25 Sep 2025 13:38:42 +0530
Subject: [PATCH] feat:added banner style

---
 banner.html | 181 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 banner.html
diff --git a/banner.html b/banner.html
new file mode 100644
index 0000000..443bf31
--- /dev/null
+++ b/banner.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Skill Card</title>
+<style>
+    body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f8f8f8;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+    }
+
+    .card {
+        display: flex;
+        width: 1200px;
+        background-color: #fff;
+        border-radius: 20px;
+        overflow: hidden;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+    }
+
+    .card:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
+    }
+
+    .card-left {
+        flex: 1;
+        background-color: #FFD966;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .card-left img {
+        width: 80%;
+        border-radius: 15px;
+    }
+
+    /* Optional: floating icons */
+    .icon {
+        position: absolute;
+        background: white;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: bold;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        animation: float 3s ease-in-out infinite;
+    }
+
+    .icon1 { top: 20%; left: 10%; animation-delay: 0s;}
+    .icon2 { top: 10%; right: 15%; animation-delay: 0.5s;}
+    .icon3 { bottom: 20%; left: 20%; animation-delay: 1s;}
+    .icon4 { bottom: 15%; right: 10%; animation-delay: 1.5s;}
+
+    @keyframes float {
+        0%, 100% { transform: translateY(0);}
+        50% { transform: translateY(-10px);}
+    }
+
+    .card-right {
+        flex: 1;
+        padding: 40px 30px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .card-right h2 {
+        font-size: 2em;
+        color: #0b2e6f;
+        margin: 0 0 20px 0;
+    }
+
+    .card-right p {
+        font-size: 1em;
+        color: #555;
+        margin-bottom: 20px;
+    }
+
+    .features {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 30px;
+    }
+
+    .feature {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 0.95em;
+        color: #555;
+    }
+
+    .feature span {
+        background: #FFD966;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        color: #0b2e6f;
+        font-weight: bold;
+    }
+
+    .card-right button {
+        background-color: #0b2e6f;
+        color: white;
+        border: none;
+        padding: 8px 18px; /* controls height and width */
+        border-radius: 25px;
+        font-size: 0.9em;
+        width: auto;       /* ensures it doesn't stretch */
+        max-width: 155px;  /* optional limit */
+        display: inline-block; /* prevents flex from stretching it */
+        cursor: pointer;
+        transition: background 0.3s;
+    }
+
+
+
+    .card-right button:hover {
+        background-color: #1d4fa0;
+    }
+
+    @media (max-width: 900px) {
+        .card {
+            flex-direction: column;
+            width: 90%;
+        }
+
+        .card-right {
+            padding: 80px 50px; /* more top/bottom space increases height */
+        }
+
+        .card-left img {
+            width: 90%;
+            max-height: 100%; /* image takes more vertical space */
+        }
+    }
+</style>
+</head>
+<body>
+
+<div class="card">
+    <div class="card-left">
+        <img src="/home/rajesh/Downloads/Gemini_Generated_Image_u81x8ju81x8ju81x.png" alt="Student Image">
+        <!-- Floating icons -->
+        <!-- <div class="icon icon1">AWS</div>
+        <div class="icon icon2">SQL</div>
+        <div class="icon icon3">C++</div>
+        <div class="icon icon4">Python</div> -->
+    </div>
+    <div class="card-right">
+        <h2>Learn & Level Up Your Skills</h2>
+        <p>Select from a wide range of courses to upskill and advance your career!</p>
+        <div class="features">
+            <div class="feature"><span>✓</span>50+ Courses</div>
+            <div class="feature"><span>✓</span>Certificate</div>
+            <div class="feature"><span>✓</span>Projects & Assignments</div>
+        </div>
+        <button>Explore Courses</button>
+    </div>
+</div>
+
+</body>
+</html>
