/* =========================== NAVBAR & HEADER STYLES (Moved from index.php) =========================== */ /* Navbar Structure */ .navbar { background: rgba(255, 255, 255, 0.95) !important; /* Inline style override preserved */ backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); padding: 12px 0; box-shadow: 0 4px 30px rgba(0,0,0,0.03); } .navbar-nav { align-items: center; } /* Brand Logo Text */ .navbar-brand { display: flex; align-items: center; text-align: center; font-weight: 800; font-size: 1.6rem; background: linear-gradient(135deg, #0297a1 0%, #016871 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* Navigation Links */ .nav-link { font-weight: 600; color: #475569 !important; margin-left: 20px; transition: 0.3s; } .nav-link:hover { color: #0297a1 !important; /* Primary Color */ } /* Shine Button Effect (Global) */ .btn-shine { background: #0297a1; /* Primary */ color: white !important; padding: 10px 25px; border-radius: 50px; font-weight: 600; transition: 0.3s; box-shadow: 0 4px 15px rgba(10, 107, 10, 0.3); display: inline-flex; align-items: center; margin-left: 20px; } .btn-shine:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(10, 107, 10, 0.4); } /* ১. প্রিমিয়াম লগইন বাটন */ .btn-premium-login { background: linear-gradient(135deg, #0297a1 0%, #016871 100%); /* সুন্দর গ্রেডিয়েন্ট */ color: white !important; padding: 10px 28px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; border: none; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 15px rgba(10, 107, 10, 0.3); /* গ্লো শ্যাডো */ display: inline-flex; align-items: center; text-decoration: none; } /* হোভার ইফেক্ট (ভেসে উঠবে) */ .btn-premium-login:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(10, 107, 10, 0.5); /* শ্যাডো বাড়বে */ } /* শাইন এনিমেশন (আলোর ঝিলিক) */ .btn-premium-login::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: 0.6s; } .btn-premium-login:hover::before { left: 100%; /* মাউস নিলে আলো বাম থেকে ডানে যাবে */ } /* ২. ড্যাশবোর্ড বাটন (লগইন থাকলে) */ .btn-user-dash-premium { background: #f0fdf4; color: #0297a1 !important; border: 1px solid #dcfce7; padding: 8px 20px; border-radius: 50px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; transition: 0.3s; } .btn-user-dash-premium:hover { background: #0297a1; color: white !important; border-color: #0297a1; transform: translateY(-2px); } /* User Dashboard Button Style (Alternative) */ .btn-user-dash { background: #e8f5e9; color: #0297a1 !important; /* Primary */ padding: 8px 20px; border-radius: 50px; font-weight: 700; margin-left: 15px; transition: 0.3s; border: 1px solid rgba(10, 107, 10, 0.1); } .btn-user-dash:hover { background: #0297a1; /* Primary */ color: white !important; box-shadow: 0 5px 15px rgba(10, 107, 10, 0.2); } /* =========================== 📱 MOBILE HEADER PREMIUM =========================== */ @media (max-width: 991px) { .navbar-collapse { background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border-radius: 20px; padding: 20px; margin-top: 15px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); border: 1px solid rgba(0,0,0,0.05); transform-origin: top; animation: menuSlide 0.3s ease-out; } @keyframes menuSlide { from { opacity: 0; transform: scaleY(0.9); } to { opacity: 1; transform: scaleY(1); } } .nav-item { margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.03); padding-bottom: 8px; text-align: center; } .nav-item:last-child { border-bottom: none; } .nav-link { justify-content: center; display: flex; align-items: center; margin-left: 0; } .btn-premium-login, .btn-user-dash-premium { width: 100%; justify-content: center; margin-top: 10px; } /* Premium Toggler */ .navbar-toggler { border: none; padding: 0; width: 42px; height: 42px; border-radius: 50%; background: #f0fdf4; color: #0297a1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: 0.3s; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(10, 107, 10, 0.2); } .navbar-toggler-icon { background-image: none; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .navbar-toggler-icon::after { content: '\f0c9'; font-family: "Font Awesome 6 Free"; font-weight: 900; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { content: '\f00d'; } .navbar-toggler[aria-expanded="true"] { background: #fee2e2; color: #dc2626; transform: rotate(90deg); } .navbar-brand { font-size: 1.3rem; } }
ভিডিও গাইডলাইন

ভিডিও টিউটোরিয়াল হাব

ইউটিউবের মত আমাদের প্রিমিয়াম ভিডিওগুলো দেখে সহজেই সব শিখে নিন

0:00 / 0:00
2x
1.5x
1x
0.5x

পরবর্তী ভিডিও

Next Video Title

প্রিমিয়াম গাইড HD কোয়ালিটি

How to Download Text Frame in Photo Card BD

15K views • ১ মাস আগে
Logo
ফটোকার্ড
অফিসিয়াল চ্যানেল

নিজের ফ্রেম যুক্ত করতে চান?

হটলাইন নম্বর 01580578930
ইমেইল এড্রেস contact@photocardbd.com
মেসেজ করুন
1
মতামত দিন
সময় বাকি:
Checking...

লোড হচ্ছে...