BEM Example

BEMExample.html

<div id="AfiliateLanding" class="fixPaddingAnchor">
        <style>
            .AfiliateBanner{
                background-image: url("{% static "img/afiliate/mobile_background.jpg" %}")
            }
            @media (min-width: 768px){
                .AfiliateBanner{
                    background-image: url("{% static "img/afiliate/tablet_background.jpg" %}")
                }
            }
            @media (min-width: 1200px){
                .AfiliateBanner{
                    background-image: url("{% static "img/afiliate/pc_background.jpg" %}")
                }
            }
        </style>

        <div class="AfiliateModal">
            <div class="AfiliateModal__inner">
                <div class="AfiliateModal__mainFormContainer">
                    <i class="AfiliateModal__closeIcon fa fa-times"></i>
                    <h1 class="AfiliateModal__title">Sé un Afiliado Crehana</h1>
                    <p class="AfiliateModal__description">Nuestro programa de afiliados está
                        limitado para cierto tipo de empresas o comunidades creativas. Cuéntanos porque deberías de ser parte de nuestra red.</p>
                    <div class="AfiliateModal__formContainer">
                        <form id="AfiliateForm" action="" data-parsley-validate="">
                            <div class="AfiliateModal__formGroup">
                                <label for="url" class="AfiliateModal__formLabel">URL de tu website o comunidad</label>
                                <input type="text" class="AfiliateModal__formInput" name="url" required="">
                            </div>
                            <div class="AfiliateModal__formGroup">
                                <label for="" class="AfiliateModal__formLabel">¿Por qué quieres ser parte de nuestro programa de afiliados?</label>
                                <textarea name="why_textarea" id="AfiliateModal__why" cols="30" rows="5"
                                          class="AfiliateModal__formTextarea" required=""></textarea>
                            </div>
                            <div class="AfiliateModal__formGroup">
                                <label for="" class="AfiliateModal__formLabel">¿Cómo planeas promocionar nuestro contenido?</label>
                                <textarea name="how_textarea" id="AfiliateModal__how" cols="30" rows="5"
                                          class="AfiliateModal__formTextarea" required=""></textarea>
                            </div>
                            <div class="AfiliateModal__sendButtonContainer">
                                <button type="submit" class="AfiliateModal__sendButton">Enviar información</button>
                                <div class="registerButtonLoader">
                                    <img src="https://www.crehana.com/static/img/icon-loading.gif" alt="loader gif"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="AfiliateModal__thanksMessage">
                    <i class="AfiliateModal__closeIcon fa fa-times"></i>
                    <h2 class="AfiliateModal__thanksTitle">Sé un Afiliado Crehana</h2>
                    <p class="AfiliateModal__thanksMessage">¡Gracias por aplicar a nuestro programa de afiliados! Pronto estaremos revisando tu
                        información y te responderemos lo más pronto posible.</p>
                </div>

            </div>
        </div>
        <section class="AfiliateBanner">
            <div class="wrapper">
                <h2 class="AfiliateBanner__mainTitle">Sé un Afiliado <span class="AfiliateBanner__strong">Crehana</span></h2>
                <p class="AfiliateBanner__description">Inscríbete en el programa de afiliados de Crehana y
                    gana comisiones por compartir contenido creativo único</p>
                {% if user.is_authenticated %}
                    <button class="AfiliateBanner__joinUsButton AfiliateModal__showModalButton">Únete hoy</button>
                {% else %}
                    <button class="AfiliateBanner__joinUsButton" onclick="showTheModal()">Únete hoy</button>
                {% endif %}
            </div>
        </section>
        <section class="AfiliateBenefits">
            <div class="wrapper">
                <div class="AfiliateBenefits__benefitsContainer">
                    <div class="AfiliateBenefit">
                        <i class="AfiliateBenefit__icon icon-Crehanaicons-151"></i>
                        <h2 class="AfiliateBenefit__title">Gana dinero</h2>
                        <p class="AfiliateBenefit__description">Genera hasta un 25% en comisiones por cualquier venta que se genere a través de los enlaces de tu página web o comunidad.</p>
                    </div>
                    <div class="AfiliateBenefit">
                        <i class="AfiliateBenefit__icon icon-Crehanaicons-152"></i>
                        <h2 class="AfiliateBenefit__title">Únete hoy</h2>
                        <p class="AfiliateBenefit__description">Regístrate y, una vez aprobada tu solicitud, nuestro equipo de afiliados te enviará todo lo que necesitas para empezar y comenzar a ganar dinero inmediatamente.</p>
                    </div>
                    <div class="AfiliateBenefit">
                        <i class="AfiliateBenefit__icon icon-Crehanaicons-153"></i>
                        <h2 class="AfiliateBenefit__title">Resultados en tiempo real</h2>
                        <p class="AfiliateBenefit__description">Sigue el movimiento de tus ventas y pagos todo a través de un panel personalizado para ti.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="AfiliateFAQSection">
            <div class="wrapper">
                <h2 class="AfiliateFAQSection__title">¿Tienes alguna pregunta?</h2>
                <h3 class="AfiliateFAQSection__subtitle">Aquí te damos algunas respuestas.</h3>
                <div class="AfiliateFAQSection__faqsContainer">
                    <div class="AfiliateFAQ">
                        <h3 class="AfiliateFAQ__question">¿Qué es Crehana?</h3>
                        <p class="AfiliateFAQ__answer">Crehana es una comunidad global educativa para profesionales de la industria digital y creativa. Nuestra misión es construir a la nueva generación de profesionales usando la tecnología y el Internet.</p>
                    </div>
                    <div class="AfiliateFAQ">
                        <h3 class="AfiliateFAQ__question">¿Cómo funciona el programa de afiliados de Crehana?</h3>
                        <p class="AfiliateFAQ__answer">Los afiliados de Crehana pueden ganar comisiones (un porcentaje de los ingresos) por ventas de cursos y demás contenido originados desde enlaces únicos. Actualmente, nuestro equipo ofrece soporte en inglés y español.</p>
                    </div>
                    <div class="AfiliateFAQ">
                        <h3 class="AfiliateFAQ__question">¿Quién puede participar en el Programa de Afiliados de Crehana?</h3>
                        <p class="AfiliateFAQ__answer">Crehana ofrece una gama exclusiva de contenido para la comunidad creativa y digital. En principio, la inscripción está abierta a todos los que desean ser afiliados de Crehana y busquen monetizar sus propias comunidades comunicando nuestro contenido.</p>
                    </div>
                    <div class="AfiliateFAQ">
                        <h3 class="AfiliateFAQ__question">¿Cómo funcionan las comisiones?</h3>
                        <p class="AfiliateFAQ__answer">La comisión se gana por cada venta aprobada (excepto las que acaban en devoluciones y cancelaciones). El período de nuestras cookies es de 30 días; los afiliados recibirán comisión por todas y cada una de las ventas atribuidas a su cuenta durante este período. Los pagos se realizan durante las primeras dos semana luego de cierre de mes.</p>
                    </div>
                </div>
            </div>
        </section>
        <section class="AfiliateWantMoreInfoSection">
            <div class="wrapper">
                <h2 class="AfiliateWantMoreInfoSection__title">¿Deseas más información?</h2>
                <p class="AfiliateWantMoreInfoSection__writeUs">Escríbele a nuestro equipo:
                    <span class="AfiliateWantMoreInfoSection__blueText"><a class="AfiliateWantMoreInfoSection__blueText" href="mailto:afiliados@crehana.com">afiliados@crehana.com</a></span></p>
                {% if user.is_authenticated %}
                    <button class="AfiliateWantMoreInfoSection__joinUsButton AfiliateModal__showModalButton">Únete hoy</button>
                {% else %}
                    <button class="AfiliateWantMoreInfoSection__joinUsButton" onclick="showTheModal()">Únete hoy</button>
                {% endif %}
            </div>
        </section>
    </div>