Element | Info Panel with CTA

Render a nice wide info panel that is responsive to a vertical phone screen. All the code is heavily commented, so you know what to change to customize it.

The color scheme is set to our site’s dark mode options, so it will only work on this site. You can download our custom child theme for Twenty Sixteen with the dark mode toggle on this page.

You can keep scrolling down to find a version with a white background and black and grey elements. All the code to change is indicated with comments so you can easily adjust the colors to match your site.

The border and button can be rounded to match your style by adjusting the radius value, indicated in the code.

Here is the example:

Here is the code:

<style>
    /* --- LAYOUT & RESPONSIVE ENGINE --- */
    .ap-container {
        padding: 1rem;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- DARK MODE (DEFAULT) --- */
    .ap-panel {
        width: 100%;
        padding: 1.5rem;
        box-sizing: border-box;
        transition: all 0.3s ease;
        
        /* PRONOUNCED SHADOW (Dark Mode)
           Using two layers for a richer, deeper "lift" effect.
        */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 15px 15px -10px rgba(0, 0, 0, 0.7);

        /* ADJUST BORDER RADIUS HERE 
           0 = Sharp corners, 4px = Slight round, 12px = Very round
        */
        border-radius: 0; 

        /* Dark Mode Colors */
        background: #000000; 
        border: 1px solid #d1d1d1; 
        color: #e0e0e0; 
    }

    .ap-heading {
        /* Dark Mode Title Color */
        color: #f5f5f5; 
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 1.25rem;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0.75rem;
    }

    /* --- LIGHT MODE OVERRIDES --- */
    /* Responds to your theme's toggle class */
    body.light-mode .ap-panel {
        background: #f0f0f0;
        border: 1px solid #000000;
        color: #1a1a1a;

        /* PRONOUNCED SHADOW (Light Mode)
           Slightly lower opacity than dark mode to keep it from looking "dirty" 
           but still much stronger than the previous version.
        */
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 15px 20px -10px rgba(0, 0, 0, 0.15);
    }

    body.light-mode .ap-heading {
        color: #333333;
    }


    /* --- SHARED STYLING --- */
    .ap-content-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    /* Desktop/Horizontal Viewport (Tablets and Laptops) */
    @media (min-width: 768px) {
        .ap-content-wrapper {
            flex-direction: row;
            align-items: flex-start;
        }
        .ap-text-block {
            text-align: left;
        }
    }

    .ap-icon {
        font-size: 3.75rem;
        flex-shrink: 0;
        line-height: 1;
    }

    .ap-text-block {
        flex: 1;
        text-align: center;
    }

    .ap-body {
        font-size: 1rem;
        line-height: 1.625;
        opacity: 0.9;
        margin: 0;
    }

    /* BUTTON STYLING */
    .ap-action-area {
        margin-top: 2rem;
        display: flex;
        justify-content: center;
    }

    .ap-button {
        display: inline-block;
        padding: 0.75rem 2rem;
        font-weight: bold;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        font-size: 0.875rem;
        transition: all 0.3s ease;
        
        /* ADJUST BUTTON RADIUS HERE 
        */
        border-radius: 0; 

        background-color: var(--btn-bg, #e0e0e0);
        color: var(--btn-text, #121212) !important;
    }

    /* Dark Mode Hover */
    .ap-button:hover {
        background-color: #ffffff;
        color: #000000 !important;
        transform: translateY(-1px);
    }

    /* Light Mode Hover Override */
    body.light-mode .ap-button:hover {
        background-color: #444444;
        color: #ffffff !important;
    }
</style>

<!-- Main Outer Container -->
<div class="ap-container">

    <!-- The Announcement Panel -->
    <div class="ap-panel">
        
        <div class="ap-content-wrapper">
        
            <!-- 
                 ICON / EMOJI 
                 Adjust the emoji inside the div below 
            -->

            <div class="ap-icon">
                🎓
            </div>

            <!-- END ICON -->


            <!-- Text Area -->
            <div class="ap-text-block">
                
                <!-- 
                     MAIN HEADING / TITLE 
                     Adjust the text inside the h3 tag below 
                -->

                <h3 class="ap-heading">
                    Coming Soon: Native Courses!
                </h3>

                <!-- END HEADING -->


                <!-- 
                     BODY CONTENTS 
                     Adjust the message inside the p tag below 
                -->

                <p class="ap-body">
                    Learn to code, develop apps efficiently and effectively, and use AI to enhance every step of the process. 
                    Our courses are designed to be highly engaging and provide you with skills that are immediately actionable.
                </p>

                <!-- END BODY -->

            </div>
        </div>

        <!-- 
             BUTTON AREA 
        -->
        <div class="ap-action-area">
            
            <!-- 
                 BUTTON LINK & TEXT 
                 Adjust 'href' for the link and the text inside the <a> tag
            -->

            <a href="#courses-peek" class="ap-button">
                Come have a peek at the first pages!
            </a>

            <!-- END BUTTON -->

        </div>
    </div>
</div>