Preview
https://preview.hs-sites.com/_hcms/preview/template/multi?hs_preview_key=eVYexisx5hU5gwXS0U4WlQ&is_buffered_template_layout=true&portalId=2946146&tc_deviceCategory=undefined&template_layout_id=37817376018&updated=1605885237259
<div class="banner-bg {{ name }}"> <div class="left-text"> <h4> {{ module.sub_header }} </h4> <h2>{{ module.header }} </h2> {{ module.richtext_field }} {% set href = module.link_field.url.href %} {% if module.link_field.url.type is equalto "EMAIL_ADDRESS" %} {% set href = "mailto:" + href %} {% endif %} {% set rel = [] %} {% if module.link_field.no_follow %} {% do rel.append("nofollow") %} {% endif %} {% if module.link_field.open_in_new_tab %} {% do rel.append("noopener") %} {% endif %} <a href="javascript:;" id="bookBtn" {% if module.link_field.open_in_new_tab %}target="_blank"{% endif %} {% if rel %}rel="{{ rel|join(" ") }}"{% endif %} > Book a workshop </a> </div> </div> <style> .left-text h4 { font-family: {{ module.sub_header_font.font }};{{ module.sub_header_font.style }}; color: {{ module.sub_header_font.color }}; font-size: {{ module.sub_header_font.size }}{{module.sub_header_font.size_unit }}; } .left-text h2 { font-family: {{ module.heading_font.font }}; {{ module.heading_font.style }}; color: {{ module.heading_font.color }}; font-size: {{ module.heading_font.size }}{{module.heading_font.size_unit }}; } .left-text 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-text a{ font-family: {{ module.cta_font.font }}; {{ module.cta_font.style }}; color: {{ module.cta_font.color }}; font-size: {{ module.cta_font.size }}{{module.cta_font.size_unit }}; border: 1px solid {{ module.cta_color.color }}; background-color: {{ module.cta_color.color }}; } .left-text a:hover{ background-color: {{ module.cta_hover_color.color }}; } .banner-bg.{{ 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 }}; background-image: url({{ module.background.src }}); } @media screen and (max-width: 1130px){ .banner-bg.{{ name }}{ background-position: right -100px top 55px; position: relative; top: 0; bottom: 0; left: 0; right: 0; } .banner-bg.{{ name }}:before { content: ""; background: rgba(255, 255, 255, .8); position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } } @media screen and (max-width: 768px) { .banner-bg.{{ name }}{ padding-top:{{ module.module_style.padding_top_tablet }}px; padding-bottom:{{ module.module_style.padding_bottom_tablet }}px; background-position: right -155px top 55px; } } @media screen and (max-width: 480px) { .banner-bg.{{ name }}{ background-position: left center; padding-top:{{ module.module_style.padding_mobile_top }}px; padding-bottom:{{ module.module_style.padding_mobile_bottom }}px; } .banner-bg { padding-right: 15px; padding-left: 15px; } } </style>
CSS
.banner-bg {
max-width: 1440px;
margin: 0 auto;
display: flex;
background-repeat: no-repeat;
padding-right: 50px;
padding-left: 50px;
background-size: cover;
background-position: center 96px;
}
.left-text {
width: 780px;
max-width: 100%;
width: 710px;
width: 53%;
z-index: 2;
}
.left-text h4 {
/* color: #000000;
font-size: 18px; */
font-weight: normal;
line-height: 48px;
margin-bottom: 0;
/* font-family: Public Sans; */
letter-spacing: -.09px;
/* font-weight: 400; */
}
.left-text h2 {
/* color: #003894;
font-size: 42px; */
line-height: 48px;
/* font-weight: 500;*/
/* font-family: Public Sans; */
}
.left-text p {
/* color: #000000;
font-size: 18px; */
line-height: 24px;
/* font-family: Public Sans; */
margin-bottom: 15px;
font-weight: 500;
letter-spacing: -0.09px;
}
.left-text a {
background-color: #003894;
padding: 7px 50px;
border: 0;
border-radius: 30px;
font-size: 18px;
color: #ffffff;
font-family: Open Sans;
border: 1px solid #003894;
display: inline-block;
margin-top: 20px;
font-weight: 500;
}
.left-text a:hover {
background-color: #fff;
border: 1px solid #003894;
color: #003894;
}
@media (min-width:1441px) {
.banner-bg {
max-width: 100%;
}
}
@media (max-width: 1024px) {
.left-text {
width: 100%;
}
}
@media (max-width: 769px) {
.left-text h2 {
font-size: 32px;
line-height: 40px;
}
.left-text h4 {
line-height: 28px;
}
.left-text p {
font-size: 16px;
}
}
@media (max-width: 480px) {
.left-text h2 {
font-size: 35px ;
}
.left-text {
width: 100%;
}
}
JS
//Js is for smooth scrolling of button to a certain point
var headerheight = $(".header-container-wrapper").outerHeight();
$("#bookBtn").click(function() {
$('html, body').animate({
scrollTop: $("#booking_form").offset().top - headerheight
}, 1200);
});
Post a Comment