Name: Casino777.be
Brand: Casino777.be
Rating: 3.2 (2416 reviews)

The Black Card

Speel verantwoord

Blackjack

Blog

Campagnes

Claim

Contact

Dice

Faq Page

Favorieten

Aanraders

Geschenken

Home

Crash Games

Dice - Gridders

Jackpots

Table Games

Providers

Slotmachines

Tafelspellen

Live Casino

Speel en verdien

Premium Club Shop

Premium Club FAQ en Algemene Voorwaarden

Promoties

Recent

Online Roulette

Virtuele Sporten

Voucher Shop

Wat is Premium Club

Premium Club Level

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI Components Showcase</title>
    <link rel="stylesheet" href="../../../../../Downloads/css check 2/css check/style.css">
    <style>
        body {
            background-color: #0d1115;
        }
        .dark-card {
            background-color: #1a1f2b;
            border-color: #2d3748;
        }
        .dark-text {
            color: #e2e8f0;
        }
        .dark-text-secondary {
            color: #a0aec0;
        }
        .dark-border {
            border-color: #2d3748;
        }
        .dark-input {
            background-color: #1a1f2b;
            border-color: #2d3748;
            color: #e2e8f0;
        }
        .dark-input:focus {
            border-color: #3b82f6;
        }
        .dark-table {
            background-color: #1a1f2b;
        }
        .dark-table th {
            background-color: #2d3748;
            color: #e2e8f0;
        }
        .dark-table td {
            border-color: #2d3748;
            color: #e2e8f0;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #1a1f2b;
            min-width: 160px;
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        .modal-content {
            background-color: #1a1f2b;
            margin: 15% auto;
            padding: 20px;
            border-radius: 8px;
            width: 80%;
            max-width: 500px;
        }
        .tooltip {
            position: relative;
            display: inline-block;
        }
        .tooltip .tooltip-text {
            visibility: hidden;
            background-color: #1a1f2b;
            color: #e2e8f0;
            text-align: center;
            padding: 5px;
            border-radius: 6px;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            transform: translateX(-50%);
        }
        .tooltip:hover .tooltip-text {
            visibility: visible;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }
            100% {
                background-position: 200% 0;
            }
        }

        @keyframes slide-up-fade {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes movingRight {
            0% {
                transform: translateX(0);
                opacity: 1;
            }
            50% {
                opacity: 0.8;
            }
            100% {
                transform: translateX(150px);
                opacity: 0;
            }
        }

        @keyframes disappear {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        /* Animation Classes */
        .animate-pulse {
            animation: pulse 2s ease-in-out infinite;
        }

        .animate-shimmer {
            background: linear-gradient(90deg, #2d3748 0%, #4a5568 50%, #2d3748 100%);
            background-size: 200% 100%;
            animation: shimmer 2s linear infinite;
        }

        .animate-slide-up-fade {
            animation: slide-up-fade 1s ease-out forwards;
        }

        .animate-movingRight-disappear {
            animation: movingRight 3s ease-in-out infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
            position: relative;
            overflow: hidden;
        }
        
        .animate-movingRight-disappear::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 30px;
            height: 100%;
            background: rgba(255, 255, 255, 0.3);
            transform: skewX(-20deg);
            animation: shimmer 3s linear infinite;
        }
        
        /* Transition Classes */
        .transition-all {
            transition: all 0.3s ease;
        }
        
        .transition-opacity {
            transition: opacity 0.3s ease;
        }
        
        .transition-transform {
            transition: transform 0.3s ease;
        }
        
        /* Hover Effects */
        .hover\:scale-110:hover {
            transform: scale(1.1);
        }
        
        .hover\:opacity-50:hover {
            opacity: 0.5;
        }
        
        .hover\:rotate-12:hover {
            transform: rotate(12deg);
        }
        
        .hover\:skew-x-12:hover {
            transform: skewX(12deg);
        }

        /* New styles for better layout */
        .component-section {
            margin-bottom: 2rem;
            padding: 2rem;
            /* background-color: #1a1f2b; */
            /* border-radius: 0.5rem; */
            /* border: 1px solid #2d3748; */
        }

        /* Tab styles - CSS-only implementation */
        .tabs {
            display: flex;
            flex-direction: column;
        }
        .tab-input {
            display: none;
        }
        .tab-labels {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .tab-label {
            padding: 0.5rem 1rem;
            background-color: #2d3748;
            border-radius: 0.375rem;
            cursor: pointer;
            color: #e2e8f0;
            transition: background-color 0.2s;
        }
        .tab-label:hover {
            background-color: #3b82f6;
        }
        .tab-content {
            display: none;
            padding: 1rem;
        }
        .tab-input:checked + .tab-label {
            background-color: #3b82f6;
        }
        .tab-input:checked ~ .tab-content {
            display: block;
        }
        
        /* CSS-only accordion implementation */
        .accordion-item input[type="radio"] {
            display: none;
        }
        .accordion-item label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 0.75rem 1rem;
            font-weight: 600;
            color: #e2e8f0;
            transition: max-height 0.3s ease;
        }
        .accordion-arrow {
            transition: transform 0.3s ease;
        }
        .accordion-item input[type="radio"]:checked ~ label .accordion-arrow {
            transform: rotate(180deg);
        }
        .accordion-item .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0;
            padding: 0 1rem;
        }
        .accordion-item input[type="radio"]:checked ~ .accordion-content {
            max-height: 500px;
            padding: 1rem;
            opacity: 1;
        }
        
        
        /* CSS-only tabs implementation */
        .css-tabs {
            position: relative;
        }
        .css-tab {
            display: none;
        }
        .css-tab-label {
            display: inline-block;
            padding: 0.75rem 1rem;
            cursor: pointer;
            color: #a0aec0;
            border-bottom: 2px solid transparent;
        }
        .css-tab:checked + .css-tab-label {
            color: #e2e8f0;
            border-bottom: 2px solid #3b82f6;
        }
        .css-tab-content {
            display: none;
            padding: 1rem;
        }
        #tab1:checked ~ .css-tab-content:nth-of-type(1),
        #tab2:checked ~ .css-tab-content:nth-of-type(2),
        #tab3:checked ~ .css-tab-content:nth-of-type(3) {
            display: block;
        }
    </style>
</head>
<body class="p-8">

    <div class="mb-4">
        <img src="https://static-dev.casino777.be/img2/promo/2025/acetodiamond/tournament_desktop_2560x552.jpg">
        <div class="p-2"></div>
      <p class="text-l dark-text mb-4"><br class="Apple-interchange-newline">
      <span style="font-variant-ligatures:normal; font-variant-caps:normal; letter-spacing:normal; orphans:2; text-align:start; text-indent:0px; text-transform:none; widows:2; word-spacing:0px; -webkit-text-stroke-width:0px; white-space:normal; background-color:rgb(12, 17, 22); text-decoration-thickness:initial; text-decoration-style:initial; text-decoration-color:initial; display:inline !important; float:none; font-family:__Poppins_059fbd, __Poppins_Fallback_059fbd; font-size:medium; color:rgb(255, 255, 255); font-style:normal; font-weight:400; ">Wie zoekt, die wint!</span></p>
        <h6 class="text-xl dark-text w-full mb-4">Vanaf 08/04 zullen er elke dinsdag bronzen, zilveren, enkele gouden en slechts één diamanten kaart verborgen liggen aan de speciale blackjacktafels van Evolution. <br>
        Heb je de nieuwe 777 kaart te pakken gekregen? Dan zal je beloond worden met de prijs die gekoppeld is aan de gemerkte kaart (zie hieronder).</h6>
        <h4 class="text-3xl dark-text mb-4">Hoe werkt het?</h4>
    </div>
<section class="component-section">
            <div class="space-y-2">
<div class="dark-card rounded-lg accordion-item">
                    <input type="radio" id="accordion1" name="accordion" class="accordion-toggle">
  <label for="accordion1" class="w-full text-left px-4 py-4 text-2xl dark-text font-semibold">
                        <span>Speel aan een van de twee speciale blackjacktafels</span><span class="accordion-arrow">▼</span></label>
                    <div class="accordion-content">
                      <p class="text-xl dark-text w-full mb-4">Er is "777 Live Blackjack 1" en "777 Live Blackjack 2" klik op de knop hieronder om te worden doorverwezen</p>
  </div>
</div>
                <div class="space-y-2">
                <div class="dark-card rounded-lg accordion-item">
                    <input type="radio" id="accordion2" name="accordion" class="accordion-toggle">
                    <label for="accordion2" class="w-full text-left px-4 py-2 text-2xl dark-text font-semibold"><span>Speel een geschikte inzet en wacht tot je een gemerkte kaart krijgt</span><span class="accordion-arrow">▼</span></label>
                    <div class="accordion-content">
                        <p class="text-xl dark-text w-full mb-4">
                    - De minimuminzet is 5€ aan de ene tafel en 10€ aan de andere <br>- Je kunt een: Bronzen, Zilveren, Gouden en Diamanten kaarten&nbsp;                        </div></div>
                <div class="dark-card rounded-lg accordion-item">
                    <input type="radio" id="accordion3" name="accordion" class="accordion-toggle">
                    <label for="accordion3" class="w-full text-left px-4 py-2 text-2xl dark-text font-semibold"><span>Je ontvangt de beloning direct op je account</span><span class="accordion-arrow">▼</span></label>
                    <div class="accordion-content">
                      <p class="text-xl dark-text w-full mb-4">De Cash die is gekoppeld aan de beloning van de kaart die je hebt ontvangen wordt direct op je account bijgeschreven.</p>
                  </div>
                </div>
            </div>
        </section>


    <div>

    </div>

    <div>
        <h2 class="text-2xl font-semibold mb-4 dark-text">Prijzen</h2>
            <table class="w-1/2 border-collapse dark-table">
                <thead>
                    <tr>
                        <th width="130" class="px-4 py-2 text-left">Aantal kaarten</th>
                        <th width="106" class="px-4 py-2 text-left">Waarde (€)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="border-b">
                        <td class="px-4 py-2">10x</td>
                        <td class="px-4 py-2">5&nbsp;</td>                      
                    </tr>
                    <tr class="border-b">
                        <td class="px-4 py-2">10x</td>
                        <td class="px-4 py-2">20</td>                      
                    </tr>
                    <tr class="border-b">
                        <td class="px-4 py-2">5x</td>
                        <td class="px-4 py-2">50</td>                      
                    </tr>
                    <tr class="border-b">
                        <td class="px-4 py-2">1x</td>
                        <td class="px-4 py-2">500</td>                      
                    </tr>                     
                                                                                                                                                             
                </tbody>
            </table>
    </div>
<p><div class ="py-4">
    <button class="bg-blue-primary text-white px-4 py-2 rounded-md transition-all hover:scale-110"><a href="https://www.casino777.be/nl/black-card-games">NAAR DE  BLACKJACKTAFELS</a></button></div>
</body>
</html></p></p></div></link>

Zin in blackjack met een duister kantje? Elke week zit de zwarte 777-kaart verstopt in het kaartspel van blackjack! Ontvang hem van de dealer en win tot &euro; 1.000 via het Prijzenrad

The Black Card | Casino777

Aantal kaarten	Waarde (€)
10x	5
10x	20
5x	50
1x	500