"ഫലകം:Header4/styles.css" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
No edit summary റ്റാഗ്: Reverted |
(Ranjithsiji (സംവാദം) ചെയ്ത നാൾപ്പതിപ്പ് 2865988 നീക്കം ചെയ്യുന്നു) റ്റാഗ്: തിരസ്ക്കരിക്കൽ |
||
| വരി 1: | വരി 1: | ||
/* Container */ | |||
#mp-topbanner { | #mp-topbanner { | ||
width: | width: 96%; | ||
background: linear-gradient(135deg, # | background: linear-gradient(135deg, #f0f7ff, #ffffff); /* Light blue → white */ | ||
margin: 10px 0; | |||
padding: 20px 15px; | |||
border-radius: 12px; | border-radius: 12px; | ||
text-align: center; | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
align-items: center; | align-items: center; | ||
border: 3px solid #7BBCE5; | |||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); | |||
} | } | ||
.banner- | /* Title */ | ||
#mp-topbanner .banner-title { | |||
font-size: 2rem; /* ~32px desktop */ | |||
font-weight: bold; | |||
color: #004EC3; | |||
margin: 10px 0 15px 0; | |||
} | } | ||
.banner- | /* Single image centered */ | ||
#mp-topbanner .banner-image { | |||
margin: 15px 0; | |||
} | } | ||
#mp-topbanner .banner-image img { | |||
.banner- | max-width: 100% !important; | ||
height: auto !important; | |||
display: block; | |||
margin: 0 auto; | |||
border-radius: 8px; | |||
} | } | ||
.banner-desc { | /* Description */ | ||
font-size: 1. | #mp-topbanner .banner-desc { | ||
line-height: 1. | font-size: 1.2rem; /* ~19px */ | ||
color: #333; | |||
margin: 10px 0; | |||
line-height: 1.6em; | |||
} | } | ||
.banner-stats { | /* Stats */ | ||
font-size: | #mp-topbanner .banner-stats { | ||
font-size: 1rem; /* ~16px */ | |||
color: #444; | |||
margin-top: 15px; | |||
line-height: 1.6em; | |||
} | } | ||
/* Responsive | /* Responsive tweaks */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.banner- | #mp-topbanner .banner-title { | ||
font-size: 1.5rem; /* ~24px */ | |||
} | |||
#mp-topbanner .banner-desc { | |||
font-size: 1rem; | |||
} | |||
#mp-topbanner .banner-stats { | |||
font-size: 0.9rem; | |||
} | } | ||
} | |||
@media (max-width: 480px) { | |||
#mp-topbanner .banner-title { | |||
font-size: 1.2rem; /* ~20px */ | |||
} | } | ||
.banner- | #mp-topbanner .banner-desc { | ||
font-size: 0.95rem; | |||
} | } | ||
.banner- | #mp-topbanner .banner-stats { | ||
font-size: 0.85rem; | |||
} | } | ||
} | } | ||
10:10, 30 സെപ്റ്റംബർ 2025-നു നിലവിലുണ്ടായിരുന്ന രൂപം
/* Container */
#mp-topbanner {
width: 96%;
background: linear-gradient(135deg, #f0f7ff, #ffffff); /* Light blue → white */
margin: 10px 0;
padding: 20px 15px;
border-radius: 12px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
border: 3px solid #7BBCE5;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
/* Title */
#mp-topbanner .banner-title {
font-size: 2rem; /* ~32px desktop */
font-weight: bold;
color: #004EC3;
margin: 10px 0 15px 0;
}
/* Single image centered */
#mp-topbanner .banner-image {
margin: 15px 0;
}
#mp-topbanner .banner-image img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 0 auto;
border-radius: 8px;
}
/* Description */
#mp-topbanner .banner-desc {
font-size: 1.2rem; /* ~19px */
color: #333;
margin: 10px 0;
line-height: 1.6em;
}
/* Stats */
#mp-topbanner .banner-stats {
font-size: 1rem; /* ~16px */
color: #444;
margin-top: 15px;
line-height: 1.6em;
}
/* Responsive tweaks */
@media (max-width: 768px) {
#mp-topbanner .banner-title {
font-size: 1.5rem; /* ~24px */
}
#mp-topbanner .banner-desc {
font-size: 1rem;
}
#mp-topbanner .banner-stats {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
#mp-topbanner .banner-title {
font-size: 1.2rem; /* ~20px */
}
#mp-topbanner .banner-desc {
font-size: 0.95rem;
}
#mp-topbanner .banner-stats {
font-size: 0.85rem;
}
}