<div class="form-area {{ name }}"> <div class="left-area"> <h3> {{ module.header }} </h3> {{ module.richtext_field }} </div> <div class="right-area"> <h4 id="booking_form"> Want to learn more? Book a workshop with Citrix and Microsoft today. </h4> {% form form_to_use="{{ module.form_field.form_id }}" response_response_type="{{ module.form_field.response_type }}" response_message="{{ module.form_field.message }}" response_redirect_id="{{ module.form_field.redirect_id }}" response_redirect_url="{{module.form_field.redirect_url}}" gotowebinar_webinar_key="{{ module.form_field.gotowebinar_webinar_key }}" %} </div> </div> <style> .left-area h3 { font-family: {{ module.header_font.font }}; {{ module.header_font.style }}; color: {{ module.header_font.color }}; font-size: {{ module.header_font.size }}{{module.header_font.size_unit }}; } .left-area p { font-family: {{ module.text_font.font }}; {{ module.text_font.style }}; color: {{ module.text_font.color }}; font-size: {{ module.text_font.size }}{{module.text_font.size_unit }}; } .left-area ul li { font-family: {{ module.text_font.font }}; {{ module.text_font.style }}; color: {{ module.text_font.color }}; font-size: {{ module.text_font.size }}{{module.text_font.size_unit }}; } .right-area h4{ font-family: {{ module.form_header_font.font }}; {{ module.form_header_font.style }}; color: {{ module.form_header_font.color }}; font-size: {{ module.form_header_font.size }}{{module.form_header_font.size_unit }}; } .right-area form input[type="submit"] { background: {{ module.cta_color.color }}; border: 2px solid {{ module.cta_color.color }}; } .right-area form input[type="submit"]:hover { background: {{ module.hover_cta_color.color }}; border: 2px solid {{ module.hover_cta_color.color }}; } .form-area.{{ name }}{ background-color: {{ module.module_style.section_background_color.color }}; padding-top:{{ module.module_style.padding_top_desktop }}px; padding-bottom:{{ module.module_style.padding_bottom_desktop }}px; font-family: {{ module.module_style.font_field.font }}; {{ module.module_style.font_field.style }}; color: {{ module.module_style.font_field.color }}; font-size: {{ module.module_style.font_field.size }}{{module.module_style.font_field.size_unit }}; } @media screen and (max-width: 768px) { .form-area.{{ name }}{ padding-top:{{ module.module_style.padding_top_tablet }}px; padding-bottom:{{ module.module_style.padding_bottom_tablet }}px; } } @media screen and (max-width: 480px) { .form-area.{{ name }}{ padding-top:{{ module.module_style.padding_mobile_top }}px; padding-bottom:{{ module.module_style.padding_mobile_bottom }}px; } } </style>
CSS
.form-area { display: flex; flex-flow: row wrap; max-width: 1452px; max-width: 1440px; margin: 0 auto; } .left-area { width: 45%; font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; padding-right: 120px; padding-top: 90px; padding-left: 40px; padding-bottom: 40px; } .left-area h3 { font-size: 32px; line-height: 40px; font-family: Open Sans; color: #003894; font-weight: normal; width: 390px; } .left-area p { font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; margin-bottom: 10px; } .left-area ul { list-style: none; padding: 0; margin: 0; padding-left: 25px; } .left-area ul li { text-indent: -20px; margin-bottom: 20px; } .left-area ul li::before { content: "\2022"; color: #003894; font-weight: bold; display: inline-block; width: 15px; font-size: 25px; top: 5px; position: relative; left: 15px; } .right-area { color: red; width: 55%; background-color: #3894FF; padding: 135px 130px 130px 150px; } .right-area h4 { color: #003894; font-size: 24px; line-height: 32px; font-weight: normal; } .right-area form {} body .right-area form .hs-form-field { margin-bottom: 30px; } .right-area .input input::placeholder { font-weight: normal; color: #000; font-weight: 300; } .right-area .input input { height: 52px; border-radius: 0; border: 0; color: #000; text-transform: uppercase; box-shadow: 2px 5px 7px 3px rgb(112 112 112 / .24); -webkit-box-shadow: 2px 5px 7px 3px rgb(112 112 112 / .24); font-family: Open Sans; font-weight: 300; } .right-area form input[type="submit"] { width: 180px; height: 50px; border-radius: 30px; border: 0; font-size: 18px; font-family: Open Sans; color: #003894; text-transform: none; margin-top: 12px; } @media (min-width:1441px) { .form-area { max-width: 100%; } } @media (max-width: 1024px) { .left-area { padding-right: 40px; } .left-area h3 { width: auto; } .right-area { padding: 50px 40px; } } @media (max-width: 769px) { .form-area { display: block; } .left-area { width: 100%; } .right-area { width: 100%; } }
Js
Post a Comment