|
ট্যাগ: হাতদ্বারা প্রত্যাবর্তন |
| ৪৮৩ নং লাইন: |
৪৮৩ নং লাইন: |
|
| |
|
|
| |
|
| /* ডেস্কটপ ভিউতে ইনফোবক্স ডিজাইন */ | | /* মোবাইলে ফুল-উইডথ, ডেস্কটপে ডান দিকে ইনফোবক্স */ |
| .infobox-person-officeholder { | | .infobox-person-officeholder { |
| width: 70%; /* ডেস্কটপ ভিউতে ৭০% চওড়া */ | | width: 100%; |
| margin: 20px 0; | | max-width: 350px; |
| display: block;
| | background: #f8f9fa; |
| background-color: #f8f9fa; /* বক্সের ব্যাকগ্রাউন্ড কালার */ | | border: 1px solid #ddd; |
| border: 1px solid #ddd; /* সীমানা */ | | padding: 10px; |
| border-radius: 8px; /* গোলাকার কোণা */ | | box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); |
| box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); | | } |
| padding: 20px;
| | |
| box-sizing: border-box; /* বক্স সাইজিং ঠিক রাখা */
| | /* ডেস্কটপে ইনফোবক্স ডান দিকে রাখার জন্য */ |
| overflow: hidden; /* ডিজাইন ঠিক রাখতে */
| | @media (min-width: 768px) { |
| float: right; /* ইনফোবক্স ডানদিকে রাখার জন্য */ | | .infobox-person-officeholder { |
| | float: right; |
| | margin-left: 20px; |
| | width: 30%; |
| | } |
| } | | } |
|
| |
|
| .infobox-title, .infobox-subtitle, .infobox-header {
| | /* মোবাইল ভিউতে ইনফোবক্স ফুল-উইডথ */ |
| text-align: center;
| | @media (max-width: 767px) { |
| padding: 15px;
| | .infobox-person-officeholder { |
| background-color: #ebecf0; /* টাইটেল বক্স কালার */
| | width: 100%; |
| border-radius: 5px; | | margin: 0 auto; |
| | } |
| } | | } |
|
| |
|
| .infobox-office, .infobox-organization { | | /* ইনফোবক্সের হেডার স্টাইল */ |
| color: #3465c5; | | .infobox-title { |
| | text-align: center; |
| | font-size: 125%; |
| | background: #ebecf0; |
| | padding: 5px; |
| } | | } |
|
| |
|
| /* ডেস্কটপ ভিউতে টেবিলের ডিজাইন */
| | .infobox-subtitle { |
| .infobox-person-officeholder table { | | text-align: center; |
| width: 100%; | | font-size: 110%; |
| border-collapse: collapse; | | background: #F8F9FA; |
| | padding: 5px; |
| } | | } |
|
| |
|
| .infobox-person-officeholder th, | | .infobox-header { |
| .infobox-person-officeholder td {
| | text-align: center; |
| padding: 12px; | | background: #e5e6fa; |
| text-align: left; | | font-weight: bold; |
| border-bottom: 1px solid #ddd; | | padding: 5px; |
| } | | } |
|
| |
|
| | /* ইনফোবক্সের ছবির স্টাইল */ |
| .infobox-image-wrapper { | | .infobox-image-wrapper { |
| width: 200px; | | position: relative; |
| margin: 0 auto; | | width: 100%; |
| } | | } |
|
| |
|
| .infobox-img { | | .infobox-img { |
| width: 100%; | | width: 100%; |
| max-height: 200px; | | height: auto; |
| object-fit: cover; | | display: block; |
| border-radius: 5px;
| |
| } | | } |
|
| |
|
| /* ডেস্কটপ ভিউতে সিগনেচার */
| | .infobox-image-caption { |
| .infobox-signature img { | | position: absolute; |
| max-width: 100px; | | top: 10px; |
| height: auto; | | right: 15px; |
| | color: rgba(0, 0, 0, 0.2); |
| | font-size: 50%; |
| | font-weight: bold; |
| | z-index: 1; |
| | pointer-events: none; |
| } | | } |
|
| |
|
| /* মোবাইল ভিউতে ইনফোবক্স ডিজাইন */ | | /* সিগনেচার সেকশন */ |
| @media (max-width: 767px) {
| | .infobox-signature { |
| .infobox-person-officeholder {
| | text-align: center; |
| width: 95%; /* মোবাইলে কিছুটা মার্জিন রেখে সুন্দরভাবে ফিট করবে */
| | } |
| margin: 10px auto; /* সেন্টার করা */
| |
| display: block;
| |
| background-color: #f8f9fa; /* বক্সের ব্যাকগ্রাউন্ড কালার */
| |
| border: 1px solid #ddd; /* সীমানা */
| |
| border-radius: 8px; /* গোলাকার কোণা */
| |
| box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
| |
| padding: 15px; /* কিছু প্যাডিং দিলাম যাতে কন্টেন্ট খুব কাছে না আসে */
| |
| box-sizing: border-box; /* বক্স সাইজিং ঠিক রাখা */
| |
| overflow: hidden; /* ডিজাইন ঠিক রাখতে */
| |
| }
| |
|
| |
|
| /* মোবাইল ভিউতে ইনফোবক্সের টেবিল ফিট করা */
| | /* অফিস এবং অর্গানাইজেশন কালার */ |
| .infobox-person-officeholder table {
| | .infobox-office, .infobox-organization { |
| width: 100%;
| | color: #3465c5; |
| border-collapse: collapse;
| |
| }
| |
| | |
| .infobox-person-officeholder th,
| |
| .infobox-person-officeholder td {
| |
| display: block;
| |
| text-align: center;
| |
| padding: 8px;
| |
| }
| |
| | |
| /* মোবাইল ভিউতে ছবির জন্য */
| |
| .infobox-image-wrapper {
| |
| width: 100%;
| |
| max-width: 300px;
| |
| margin: 0 auto;
| |
| }
| |
| | |
| .infobox-img {
| |
| width: 100%;
| |
| height: auto;
| |
| max-height: 250px;
| |
| object-fit: cover; /* ছবি ঠিকভাবে বসবে */
| |
| border-radius: 5px;
| |
| }
| |
| | |
| /* মোবাইল ভিউতে সিগনেচার */
| |
| .infobox-signature img {
| |
| max-width: 80px;
| |
| height: auto;
| |
| }
| |
| | |
| /* ইনফোবক্সের হেডার, টাইটেল এবং সেকশনের কালার ঠিক করা */
| |
| .infobox-title, .infobox-subtitle, .infobox-header {
| |
| text-align: center;
| |
| padding: 10px;
| |
| background-color: #ebecf0; /* টাইটেল বক্স কালার */
| |
| border-radius: 5px;
| |
| }
| |
| | |
| /* অফিস এবং অর্গানাইজেশন কালার ঠিক করা */
| |
| .infobox-office, .infobox-organization {
| |
| color: #3465c5;
| |
| }
| |
| } | | } |
