Coming Soon

Fateh SSC GD April 06, 2026

 <!DOCTYPE html>

<html lang="bn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>FatehSSCGD Premium Footer Preview</title>

    

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">


    <style>

        * { margin: 0; padding: 0; box-sizing: border-box; }

        

        body {

            background: #0f172a;

            font-family: 'Poppins', sans-serif;

            min-height: 100vh;

            display: flex;

            flex-direction: column;

        }


        .main-content {

            flex: 1;

            display: flex;

            justify-content: center;

            align-items: center;

            color: #fff;

            text-align: center;

        }


        /* --- আল্টিমেট ফুটার ডিজাইন শুরু --- */

        .ultimate-footer {

            background: #0b1120;

            padding: 100px 0 40px;

            position: relative;

            overflow: hidden;

            width: 100%;

        }


        /* আপনার দেওয়া স্লাইডিং ফটো এনিমেশন */

        .sliding-photo {

            position: absolute;

            left: -300px; /* শুরুতে বাইরে থাকবে */

            bottom: 40px;

            width: 220px;

            height: auto;

            border-radius: 25px;

            box-shadow: 0 20px 40px rgba(0,0,0,0.6);

            border: 2px solid rgba(255, 152, 0, 0.3);

            z-index: 1;

            transition: 0.5s ease;

            animation: slideIn 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;

            animation-delay: 0.5s;

        }


        @keyframes slideIn {

            0% { left: -300px; opacity: 0; transform: rotate(-15deg); }

            100% { left: 40px; opacity: 0.8; transform: rotate(0deg); }

        }


        .sliding-photo:hover {

            opacity: 1;

            transform: scale(1.05) translateY(-10px);

            border-color: #ff9800;

        }


        /* গ্লাস মরফিজম কার্ড */

        .glass-card {

            position: relative;

            z-index: 2;

            max-width: 1100px;

            margin: 0 auto;

            background: rgba(255, 255, 255, 0.03);

            backdrop-filter: blur(20px);

            -webkit-backdrop-filter: blur(20px);

            border: 1px solid rgba(255, 255, 255, 0.1);

            border-radius: 40px;

            padding: 50px;

            display: grid;

            grid-template-columns: 1.2fr 1fr 1fr;

            gap: 40px;

            box-shadow: 0 40px 100px rgba(0,0,0,0.5);

        }


        /* জাতীয় সংগীত প্লেয়ার */

        .music-player {

            background: rgba(255, 152, 0, 0.1);

            border: 1px solid rgba(255, 152, 0, 0.2);

            padding: 15px 20px;

            border-radius: 20px;

            margin-top: 25px;

            display: flex;

            align-items: center;

            gap: 15px;

            transition: 0.3s;

        }


        .music-player:hover {

            background: rgba(255, 152, 0, 0.15);

            border-color: #ff9800;

        }


        .play-btn {

            width: 45px;

            height: 45px;

            background: #ff9800;

            border: none;

            border-radius: 50%;

            color: #000;

            cursor: pointer;

            font-size: 18px;

            display: flex;

            align-items: center;

            justify-content: center;

            box-shadow: 0 5px 15px rgba(255, 152, 0, 0.3);

            transition: 0.3s;

        }


        .play-btn:hover { transform: scale(1.1); background: #fff; }


        .player-info b { display: block; font-size: 14px; color: #ff9800; }

        .player-info span { font-size: 11px; color: #94a3b8; }


        /* অন্যান্য এলিমেন্ট */

        .f-logo { font-size: 32px; font-weight: 700; color: #fff; text-decoration: none; }

        .f-logo span { color: #ff9800; }

        

        .f-col h3 { color: #ff9800; font-size: 18px; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }

        

        .f-links { list-style: none; }

        .f-links li { margin-bottom: 12px; }

        .f-links li a { color: #94a3b8; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: 0.3s; }

        .f-links li a:hover { color: #fff; transform: translateX(8px); }


        .app-btn {

            background: rgba(255, 255, 255, 0.05);

            border: 1px solid rgba(255, 255, 255, 0.1);

            padding: 12px 20px;

            border-radius: 15px;

            display: flex;

            align-items: center;

            gap: 12px;

            text-decoration: none;

            color: #fff;

            margin-bottom: 15px;

            transition: 0.4s;

        }

        .app-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-5px); border-color: #ff9800; }


        .footer-bottom {

            margin-top: 60px;

            text-align: center;

            color: #475569;

            font-size: 13px;

        }


        /* রেসপন্সিভ */

        @media (max-width: 992px) {

            .glass-card { grid-template-columns: 1fr 1fr; }

            .sliding-photo { display: none; } /* ছোট স্ক্রিনে ফটো লুকানো */

        }

        @media (max-width: 768px) {

            .glass-card { grid-template-columns: 1fr; text-align: center; }

            .f-links li a, .music-player, .app-btn { justify-content: center; }

        }

    </style>

</head>

<body>


    <div class="main-content">

        <div>

            <h1>FatehSSCGD.in</h1>

            <p style="opacity: 0.6; margin-top: 10px;">এস পি স্যার, আপনার প্রিমিয়াম ফুটারটি নিচে স্ক্রল করে দেখুন।</p>

        </div>

    </div>


    <footer class="ultimate-footer">

        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb4NqRkFNy3AoqacYqK6pQZPMmYVFj5Jd7MZeLsbCwjg2pO3JwkUiptmAi7haaKSD0izP4JF9VSZVV1FQ1r6fDavsoamraJhKN3zWuaKV4zhmiTyZ7TIuTpW01og1MIQbTIY0veTTrKJEUj2gMvvijcRsRDA3H7EO0pZ04Mep-D1Bf7heOvHIwHoJGSa4/s736/1000122531.jpg" class="sliding-photo" alt="Fateh Photo">


        <div class="glass-card">

            <div class="f-col">

                <a href="#" class="f-logo">Fateh<span>SSCGD</span></a>

                <p style="color: #94a3b8; font-size: 14px; margin-top: 15px;">আপনার সরকারি চাকরির প্রস্তুতির বিশ্বস্ত সঙ্গী।</p>

                

                <div class="music-player">

                    <button class="play-btn" onclick="togglePlay()">

                        <i id="playIcon" class="fas fa-play"></i>

                    </button>

                    <div class="player-info">

                        <b>জাতীয় সংগীত</b>

                        <span>জন গণ মন অধিনায়ক...</span>

                    </div>

                    <audio id="nationalAnthem" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"></audio>

                </div>

            </div>


            <div class="f-col">

                <h3>গুরুত্বপূর্ণ লিঙ্ক</h3>

                <ul class="f-links">

                    <li><a href="#"><i class="fas fa-user-shield"></i> Privacy Policy</a></li>

                    <li><a href="#"><i class="fas fa-file-alt"></i> Disclaimer</a></li>

                    <li><a href="#"><i class="fas fa-id-card"></i> About Us</a></li>

                    <li><a href="#"><i class="fas fa-envelope"></i> Contact Us</a></li>

                </ul>

            </div>


            <div class="f-col">

                <h3>আমাদের অ্যাপ</h3>

                <a href="#" class="app-btn">

                    <i class="fab fa-google-play" style="color: #4285F4; font-size: 24px;"></i>

                    <div class="btn-txt">

                        <span style="font-size: 10px; display: block;">Get it on</span>

                        <b>Play Store</b>

                    </div>

                </a>

                <a href="#" class="app-btn">

                    <i class="fab fa-android" style="color: #3DDC84; font-size: 24px;"></i>

                    <div class="btn-txt">

                        <span style="font-size: 10px; display: block;">Download</span>

                        <b>Android APK</b>

                    </div>

                </a>

            </div>

        </div>


        <div class="footer-bottom">

            &copy; 2026 FatehSSCGD.in | Designed with <i class="fas fa-heart" style="color: #ff9800;"></i> by SP Sir

        </div>

    </footer>


    <script>

        const audio = document.getElementById('nationalAnthem');

        const icon = document.getElementById('playIcon');


        function togglePlay() {

            if (audio.paused) {

                audio.play();

                icon.classList.remove('fa-play');

              

  icon.classList.add('fa-pause');

            } else {

                audio.pause();

                icon.classList.remove('fa-pause');

                icon.classList.add('fa-play');

            }

        }

    </script>


</body>

</html>

Fateh SSC GD

Posted by Fateh SSC GD

Post a Comment

0 Comments

Fateh SSC GD