"ഫലകം:Header4/styles.css" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം

ഫലകം:Header4/styles.css (മൂലരൂപം കാണുക)

10:22, 30 സെപ്റ്റംബർ 2025-നു നിലവിലുണ്ടായിരുന്ന രൂപം

2,411 ബൈറ്റുകൾ കൂട്ടിച്ചേർത്തിരിക്കുന്നു , 30 സെപ്റ്റംബർ

തിരുത്തലിനു സംഗ്രഹമില്ല

ബ്യൂറോക്രാറ്റുകൾ, ചെക്ക് യൂസർമാർ, emailconfirmed, സമ്പർക്കമുഖ കാര്യനിർവാഹകർ, kiteuser, oversight, അമർച്ചകർ, കാര്യനിർവാഹകർ, അപ്‌ലോഡ് സഹായി മേള തിരുത്തുന്നവർ

24,964

തിരുത്തലുകൾ

@@ വരി 1: / വരി 1: @@
 /* Container */
-#mp-topbanner {
+        #mp-topbanner {
-  width: 96%;
+            width: 96%;
-  background: linear-gradient(135deg, #f0f7ff, #ffffff);
+            max-width: 1200px;
-  margin: 10px auto;
+            background: linear-gradient(135deg, #f0f7ff, #ffffff);
-  padding: 20px;
+            margin: 10px auto;
-  border-radius: 12px;
+            padding: 20px;
-  border: 3px solid #7BBCE5;
+            border-radius: 12px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+            border: 3px solid #7BBCE5;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: row;   /* side by side */
+            display: flex;
-  align-items: stretch;
+            flex-direction: row;
-  gap: 20px;
+            align-items: stretch;
-  box-sizing: border-box;
+            gap: 20px;
-}
+        }
-/* Left (Image) */
+        /* Left (Image) */
-#mp-topbanner .banner-left {
+        #mp-topbanner .banner-left {
-  flex: 1;   /* image takes 1 share */
+            flex: 1;
-  display: flex;
+            display: flex;
-  align-items: center;
+            align-items: center;
-  justify-content: center;
+            justify-content: center;
-}
+            overflow: hidden;
-#mp-topbanner .banner-left img {
+        }
-  width: 100%;
-  height: auto;
+        #mp-topbanner .banner-left img {
-  max-width: 100%;
+            width: 100%;
-  border-radius: 8px;
+            height: auto;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
+            max-width: 100%;
-}
+            border-radius: 8px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
-/* Right (Text) */
+            object-fit: cover;
-#mp-topbanner .banner-right {
+            min-height: 200px;
-  flex: 2;   /* text takes 2 shares */
+        }
-  display: flex;
-  flex-direction: column;
+        /* Right (Text) */
-  justify-content: center;
+        #mp-topbanner .banner-right {
-  text-align: left;
+            flex: 2;
-}
+            display: flex;
+            flex-direction: column;
-/* Title */
+            justify-content: center;
-#mp-topbanner .banner-title {
+            text-align: left;
-  font-size: 2rem;
+            padding: 10px 0;
-  font-weight: bold;
+        }
-  color: #004EC3;
-  margin: 0 0 15px 0;
+        /* Title */
-}
+        #mp-topbanner .banner-title {
+            font-size: 2rem;
-/* Description */
+            font-weight: bold;
-#mp-topbanner .banner-desc {
+            color: #004EC3;
-  font-size: 1.2rem;
+            margin: 0 0 15px 0;
-  color: #333;
+            line-height: 1.2;
-  line-height: 1.6em;
+        }
-  margin-bottom: 10px;
-}
+        /* Description */
+        #mp-topbanner .banner-desc {
-/* Stats */
+            font-size: 1.2rem;
-#mp-topbanner .banner-stats {
+            color: #333;
-  font-size: 1rem;
+            line-height: 1.6em;
-  color: #444;
+            margin-bottom: 15px;
-  line-height: 1.6em;
+        }
-}
+        /* Stats */
-/* Responsive: stack on small screens */
+        #mp-topbanner .banner-stats {
-@media (max-width: 768px) {
+            font-size: 1rem;
-  #mp-topbanner {
+            color: #444;
-    flex-direction: column;
+            line-height: 1.6em;
-    text-align: center;
+            margin-bottom: 10px;
-  }
+        }
-  #mp-topbanner .banner-left,
-  #mp-topbanner .banner-right {
+        /* Links */
-    flex: 1 1 100%;
+        .banner-links {
-    max-width: 100%;
+            display: flex;
-  }
+            flex-wrap: wrap;
-  #mp-topbanner .banner-right {
+            gap: 10px;
-    text-align: center;
+            margin-top: 10px;
-    margin-top: 15px;
+        }
-  }
-}
+        .banner-links a {
+            display: inline-block;
+            padding: 8px 15px;
+            background-color: #004EC3;
+            color: white;
+            text-decoration: none;
+            border-radius: 5px;
+            font-weight: bold;
+            transition: background-color 0.3s;
+        }
+        .banner-links a:hover {
+            background-color: #003A9B;
+        }
+        /* Responsive: stack on small screens */
+        @media (max-width: 768px) {
+            #mp-topbanner {
+                flex-direction: column;
+                padding: 15px;
+                gap: 15px;
+            }
+            #mp-topbanner .banner-left,
+            #mp-topbanner .banner-right {
+                flex: 1 1 100%;
+                max-width: 100%;
+            }
+            #mp-topbanner .banner-right {
+                text-align: center;
+                margin-top: 0;
+            }
+            #mp-topbanner .banner-title {
+                font-size: 1.6rem;
+            }
+            #mp-topbanner .banner-desc {
+                font-size: 1.1rem;
+            }
+            .banner-links {
+                justify-content: center;
+            }
+        }
+        /* Extra small screens */
+        @media (max-width: 480px) {
+            #mp-topbanner {
+                padding: 10px;
+            }
+            #mp-topbanner .banner-title {
+                font-size: 1.4rem;
+            }
+            #mp-topbanner .banner-desc {
+                font-size: 1rem;
+            }
+            .banner-links {
+                flex-direction: column;
+                align-items: center;
+            }
+            .banner-links a {
+                width: 100%;
+                text-align: center;
+            }
+        }