|
|
| ১৬৩ নং লাইন: |
১৬৩ নং লাইন: |
| width: auto !important; | | width: auto !important; |
| vertical-align: middle !important; | | vertical-align: middle !important; |
| }
| |
|
| |
| /*test*/
| |
| /* --- Boipedia Main Page Design (Robust & Responsive) --- */
| |
|
| |
| /* Root Container */
| |
| .main-page-root {
| |
| margin-top: 10px;
| |
| font-family: 'Segoe UI', sans-serif;
| |
| color: #333;
| |
| }
| |
|
| |
| /* 1. Banner Styling */
| |
| .mp-banner {
| |
| background: linear-gradient(135deg, #102a43, #243b55); /* Premium Navy Blue */
| |
| color: #ffffff;
| |
| padding: 40px 20px;
| |
| text-align: center;
| |
| border-radius: 4px;
| |
| margin-bottom: 20px;
| |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1);
| |
| }
| |
|
| |
| .mp-welcome-title {
| |
| font-size: 2.5em;
| |
| font-family: 'Times New Roman', serif;
| |
| font-weight: bold;
| |
| color: #f0c05a; /* Gold Accent */
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .mp-welcome-tagline {
| |
| font-size: 1.2em;
| |
| opacity: 0.9;
| |
| margin-bottom: 15px;
| |
| }
| |
|
| |
| .mp-stats-bar {
| |
| background: rgba(255,255,255,0.1);
| |
| display: inline-block;
| |
| padding: 5px 15px;
| |
| border-radius: 20px;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| /* 2. Grid System (Flexbox) */
| |
| .mp-grid-container {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 20px;
| |
| }
| |
|
| |
| .mp-column-left {
| |
| flex: 2; /* 66% width */
| |
| min-width: 300px;
| |
| }
| |
|
| |
| .mp-column-right {
| |
| flex: 1; /* 33% width */
| |
| min-width: 250px;
| |
| }
| |
|
| |
| /* 3. Box Styling (Common) */
| |
| .mp-box {
| |
| border: 1px solid #e0e0e0;
| |
| border-radius: 4px;
| |
| margin-bottom: 20px;
| |
| background: #fff;
| |
| padding: 15px;
| |
| box-shadow: 0 1px 3px rgba(0,0,0,0.05);
| |
| }
| |
|
| |
| /* Headers */
| |
| .mp-header-gold {
| |
| margin: 0 0 15px 0;
| |
| padding-bottom: 8px;
| |
| border-bottom: 2px solid #f0c05a;
| |
| color: #102a43;
| |
| font-size: 1.4em;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .mp-header-blue {
| |
| margin: 0 0 15px 0;
| |
| padding-bottom: 8px;
| |
| border-bottom: 2px solid #102a43;
| |
| color: #102a43;
| |
| font-size: 1.2em;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .mp-header-white {
| |
| color: #fff;
| |
| font-size: 1.4em;
| |
| margin: 0 0 10px 0;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| /* Featured Book Section */
| |
| .mp-content-flex {
| |
| display: flex;
| |
| gap: 20px;
| |
| }
| |
|
| |
| .mp-book-cover {
| |
| flex-shrink: 0;
| |
| }
| |
|
| |
| .mp-book-title {
| |
| font-size: 1.5em;
| |
| font-weight: bold;
| |
| color: #8b0000; /* Deep Red for Title */
| |
| }
| |
|
| |
| .mp-book-author {
| |
| font-style: italic;
| |
| color: #555;
| |
| margin-bottom: 10px;
| |
| }
| |
|
| |
| .mp-read-more a {
| |
| display: inline-block;
| |
| background: #f0c05a;
| |
| color: #102a43;
| |
| padding: 5px 10px;
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| border-radius: 3px;
| |
| margin-top: 5px;
| |
| }
| |
|
| |
| /* Category Grid */
| |
| .mp-category-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
| |
| gap: 10px;
| |
| }
| |
|
| |
| .mp-cat-card {
| |
| background: #f8f9fa;
| |
| border: 1px solid #ddd;
| |
| text-align: center;
| |
| padding: 10px;
| |
| border-radius: 4px;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .mp-cat-card a {
| |
| color: #333;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .mp-cat-card:hover {
| |
| background: #e9ecef;
| |
| border-color: #aaa;
| |
| }
| |
|
| |
| /* Action Box (Blue Sidebar) */
| |
| .mp-action-box {
| |
| background: #102a43;
| |
| color: #fff;
| |
| border: none;
| |
| text-align: center;
| |
| }
| |
|
| |
| .mp-action-btn a {
| |
| display: block;
| |
| background: #f0c05a;
| |
| color: #102a43;
| |
| padding: 10px;
| |
| margin-top: 10px;
| |
| border-radius: 4px;
| |
| text-decoration: none;
| |
| font-weight: bold;
| |
| }
| |
|
| |
| .mp-action-btn a:hover {
| |
| background: #fff;
| |
| }
| |
|
| |
| /* Mobile Responsiveness */
| |
| @media (max-width: 768px) {
| |
| .mp-grid-container {
| |
| flex-direction: column;
| |
| }
| |
| .mp-content-flex {
| |
| flex-direction: column;
| |
| align-items: center;
| |
| text-align: center;
| |
| }
| |
| } | | } |
আমাদের ফেসবুক পেজ অনুসরণ করুন.