<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
        <meta name="generator" content="AcelleSystemLayouts">
        <title>Two column layout</title>

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/custom.css" rel="stylesheet">

    <style>
        @media (min-width: 768px) {
            .container {
                max-width: 650px;
            }
        }
        @media (min-width: 992px) {
            .container {
                max-width: 760px;
            }
        }
        @media (min-width: 769px) {
            [data-hide-on="desktop"] {
                display: none!important;
            }
        }
        @media (max-width: 600px) {
            [data-hide-on="mobile"] {
                display: none!important;
            }
        }
        @media (max-width: 600px) {
            [builder-element=CellContainerElement].cell-responsive {
                display: block!important;
            }
            [builder-element=CellContainerElement].cell-responsive [builder-element="CellElement"] {
                width: 100%!important;
                max-width: none!important;        
            }
            [builder-element=CellContainerElement].cell-responsive [builder-element="CellElement"],
            [builder-element=CellContainerElement].cell-responsive [builder-element="BlockElement"] {
                padding-left: 0px!important;
                padding-right: 0px!important;
            }
            /* EmailMode */
            [builder-element=CellContainerElement].cell-responsive tbody,
            [builder-element=CellContainerElement].cell-responsive tr,
            [builder-element=CellContainerElement].cell-responsive td {
                display: block!important;
                width: 100%;
            }
            [builder-element=CellContainerElement].cell-responsive [builder-element="CellElement"] td {
                padding-left: 0px!important;
                padding-right: 0px!important;
            }
        }
        @media (min-width: 600px) {
            [builder-element=PricingTableElement] .col-12 {
                flex-basis: 0;
                flex-grow: 1;
            }
        }
    </style>
        
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
    </head>
    <body style="width: 100%" data-new-gr-c-s-loaded="9.38.0">    
        <div builder-element="PageElement">
            <div builder-element="BlockElement" builder-wrapper>
                <form-section>
                    <div>
                        <div builder-element="PopupBannerElement" class="banner-container" style="
                            background-image: url('image/placeholder.svg');
                            background-size: auto 400%;
                            background-position: center center;
                            height: 160px;
                        ">
                            
                        </div>
                        <div class="main-container">
                            <div builder-element="BlockElement" style="padding-top:15px;padding-bottom:15px">
                                <div class="container">
                                    <h2 builder-element="" builder-inline-edit="" class="mt-3">{LIST_NAME}</h2>
                                    <p class="mb-0" builder-element="" builder-inline-edit="" class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique ligula ac ipsum interdum.</p>
                                </div>
                            </div>
                            <div builder-element="BlockElement" builder-container="" style="min-height: 100px" id="formContainer">              
                                
                            </div>
                            <div builder-element="" builder-draggable>
                                <div class="container">
                                    <div builder-element="TextElement" class="mt-4 text-center small">
                                        Made by <span class="fw-bold">YourBrand</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form-section>
                <message-section style="display: none;">
                    <div builder-element="PageElement">
                        <div builder-element="BlockElement" style="padding-top:60px;padding-bottom:60px">
                            <div class="container">
                                <h1 builder-element builder-inline-edit builder-draggable style="text-align: center;font-weight: normal;">Thanks for subscribing!</h1>
                            </div>
                        </div>
                    </div>
                </message-section>
            </div>
        </div>
    </body>
</html>