Hubspot

Latest Post
Twitter Facebook

1 ,

 


Preview

https://preview.hs-sites.com/_hcms/preview/template/multi?hs_preview_key=LIhdD7-zZ4LIX3w8_8eN1Q&is_buffered_template_layout=true&portalId=2946146&tc_deviceCategory=undefined&template_layout_id=40536345807&updated=1610615767932

Js

//Match title height

function MatchHeight() {

  $('.heading-tab-mod .tab-bg h3').matchHeight({});

}

function MatchHeightPara() {

  $('.heading-tab-mod .tab-bg p').matchHeight({});

}



//Functions that run when all HTML is loaded

$(document).ready(function() {

  MatchHeight(); 

  MatchHeightPara();

});


Js Library

https://brm.io/jquery-match-height/

Twitter Facebook

,

 




Sample Preview

http://melbournepolytechni-edu-au-7549024-hs-sites-com.sandbox.hs-sites.com/home-banyule


CSS


<style> 

.page-center {

    max-width: 1230px;

  }

.heading-sec {

    padding-bottom: 14px;

}

.program-sec a {

    text-decoration: none;

}

.heading-sec h2{

   font-family: 'vicbold';

   margin: 10px 0px 14px;

   color: #333742;

  font-size: 60px;

  font-weight: 700;

  font-style: normal;

  letter-spacing: 2px;

  line-height: 72px;

  margin-bottom:20px;

}


.heading-sec h4 {

    font-family: 'vicmedium';

    margin: 10px 0px;

  color: #333742;

}

.menu-item{

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: start;

    justify-content: flex-start;

}

.menu-item ul{

    padding: 0px;

    list-style: none;

}

.menu-item ul li {

    display: inline-block;

    margin-right: 20px;

}

.menu-item ul li:last-child {

    margin-right: 0px;

}

.menu-item ul li a {

    font-family: 'vicmedium';

    text-decoration: none;

    color: #999092;

    font-size: 24px;

    font-weight: 500;

    font-style: normal;

    letter-spacing: normal;

    line-height: normal;

}


.menu-item ul li.active a {

      font-weight: 700;

      color: #40aead;

}

.menu-item ul li a:hover, .menu-item ul li a:focus, .menu-item ul li a:active{

  color: #40aead;

}

.program-sec{

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: center;

    justify-content: center;

  flex-wrap: wrap;

}


.program-item{

  padding: 20px 12px;

/* max-width: 366px; */

  width: 33.33%;

  box-sizing: border-box;

}

.program-item:hover {

    box-shadow: 0 2px 11px 4px rgba(0, 0, 0, 0.14);

    padding: 20px 12px;

    transition: .2s ease;

}

.program-item:hover .container-img>img {

    border-bottom: 8px solid #fff;

/*   border-bottom: 8px solid #6e4987; */

}

.program-item h5{

  color: #333742;

  font-family: 'vicbold';

  font-size: 24px;

  font-weight: 700;

  font-style: normal;

  letter-spacing: normal;

  line-height: 30px;

}

.program-item:hover h5 {

     color: #6e4987;

}

/* .program-item:last-child{

    padding-right: 0px;

}

.program-item:first-child{

    padding-left: 0px;

} */

.program-item .container-img>img {

    width: 100%;

      border-bottom: 8px solid #e57e3b;

  border-bottom: 8px solid #333742;

  

}



.program-item h5 {

    margin-bottom: 5px;

    margin-top: 10px;

    line-height: 30px;

    text-align: left;

}

.program-item p {

    margin: 0px;

    color: #55565b;

    font-family: 'viclight';

    font-weight: 300;

    font-size: 18px;

    line-height: 24px;

    text-align: left;

}

.program-item p span {

    color: #55565b;

    font-family: 'vicmedium';

    font-size: 18px;

    line-height: 24px;

    font-weight: 700;

    padding-left: 3px;

}

.load-more-cta{

 text-align: center;

 padding-top: 100px;

}

.program-cta.load-more-cta a{

    background-color: #40aead;

    padding: 16px 0px;

    max-width: 372px;

    width: 100%;

    display: inline-block;

    color: #ffffff;

    text-decoration: none;

    font-family: 'vicmedium';

    font-size: 24px; 

    font-weight: 500;

    font-style: normal;

    letter-spacing: normal;

    line-height: normal;

    text-align: center;

}

/* .load-more-cta a:hover{

 background-color: #e57e3b;

} */

.container-img{

  position: relative;

  width: 100%;

  max-width: 377px;

}

.overlay-img {

    position: absolute;

    bottom: 10px;

    top: 137px;

    overflow: hidden;

    left: 0;

    right: 0;

    margin: 0 0 0 auto;

    max-width: 180px;

    width: 100%;

    opacity: 0;

    transition: .3s ease;

}

.overlay-img img {

    width: 100%;

}

.image {

  display: block;

  width: 100%;

  height: auto;

}

.program-item:hover .overlay-img {

  opacity: 1;

}


@media(max-width: 767px){

.container-img {

    margin: 0 auto;

}

.program-item p {

    text-align: center;

}

.program-item h5 {

    text-align: center;

  }

 .program-sec {

    display: block;

} 

.program-item {

    width: 100%;

    margin: 0 auto;

}

.load-more-cta {

    padding-top: 50px;

}

}


@media(max-width: 480px){

.heading-sec h2{ 

    font-size: 40px;

}


}

.program-item{

  display: none;

}

.show {

  display: block;

}


</style>

Twitter Facebook

 


Note: image have no special alignment, However we can switch the position between text div and image div using flex-direction: row-reverse;



HUBL

<div class="webinar-bg {{ name }}"> <div class="right-webinar"> {% if module.image_field.src %} {% set sizeAttrs = 'width="{{ module.image_field.width }}" height="{{ module.image_field.height }}"' %} {% if module.image_field.size_type == 'auto' %} {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %} {% elif module.image_field.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="100%" height="auto" style="max-width: {{ module.image_field.max_width }}px; max-height: {{ module.image_field.max_height }}px"' %} {% endif %} {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading }}"' : '' %} <img src="{{ module.image_field.src }}" alt="{{ module.image_field.alt }}" {{ loadingAttr }} {{ sizeAttrs }}> {% endif %} </div> <div class="left-webinar"> <h3> {{ module.header }} </h3> {{ module.richtext_field }} {% cta guid="{{ module.cta_field }}" %} </div> </div> <style> .left-webinar 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-webinar 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-webinar 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 }}; } .left-webinar a.cta-btn, .left-webinar a.cta_button { 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 }}; background-color: {{ module.cta_color.color }}; } .left-webinar a.cta-btn:hover, .left-webinar a.cta_button:hover { background-color: {{ module.cta_hover_color.color }}; color: {{ module.cta_hover.color }}; } .webinar-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 }}; } @media screen and (max-width: 768px) { .webinar-bg.{{ 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) { .webinar-bg.{{ name }}{ padding-top:{{ module.module_style.padding_mobile_top }}px; padding-bottom:{{ module.module_style.padding_mobile_bottom }}px; } } </style>



CSS


.webinar-bg { display: flex; flex-flow: row wrap; max-width: 1440px; margin: 0 auto; padding: 0px; /* margin-bottom: 200px; */ flex-direction: row-reverse; background-color: #7DC7FF; } .left-webinar { width: 48%; font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; padding-right: 174px; padding-top: 90px; padding-bottom: 90px; padding-left: 40px } .left-webinar h3 { font-size: 32px; line-height: 40px; font-family: Open Sans; color: #003894; font-weight: normal; width: 450px; } .left-webinar p { font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; } .left-webinar a.cta-btn, .left-webinar a.cta_button { margin-top: 20px; } .left-webinar ul { list-style: none; padding: 0; margin: 0; padding-left: 40px; } .left-webinar ul li { text-indent: -20px; margin-bottom: 20px; } .left-webinar ul li::before { content: "\2022"; color: #003894; font-weight: bold; display: inline-block; width: 15px; font-size: 30px; top: 5px; position: relative; } .right-webinar { width: 52%; text-align: right; } .right-webinar form {} .right-webinar 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; } @media (min-width:1441px) { .webinar-bg { max-width: 100%; } } @media (max-width: 1024px) { .left-webinar { padding-right: 40px; } .left-webinar h3 { width: auto; } } @media (max-width: 769px) { .webinar-bg { display: block; } .left-webinar { width: 100%; padding-bottom: 30px; } .right-webinar { width: 100%; text-align: center; } }










Twitter Facebook

 




Note:  Module width can be set 100% (using media query min-width :1440px ) or  fixed 


Hubl 


<div class="form-outer"> <div class="form-area {{ name }}"> <div class="left-area"> <h3> {{ module.header }} </h3> {{ module.richtext_field }} </div> <div class="right-area"> <div class="form-box"> <h4 id="booking_form"> Vul hier het formulier in </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> </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 label{ font-family: {{ module.label_font.font }}; {{ module.label_font.style }}; color: {{ module.label_font.color }}; font-size: {{ module.label_font.size }}{{module.label_font.size_unit }}; } .right-area form input[type="submit"] { color: {{ module.cta_color.color }}; border: 2px solid {{ module.cta_color.color }}; background: {{ module.cta_bg_color.color }}; } .right-area form input[type="submit"]:hover { background: {{ module.hover_cta_color.color }}; border: 2px solid {{ module.hover_cta_color.color }}; } .right-area p{ font-family: {{ module.form_font.font }}; {{ module.form_font.style }}; color: {{ module.form_font.color }}; font-size: {{ module.form_font.size }}{{module.form_font.size_unit }}; } .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-outer { width: 100%; } .form-area { display: flex; /* flex-flow: row wrap; */ max-width: 1452px; max-width: 1240px; margin: 0 auto; } .left-area { width: 44%; font-size: 18px; color: #000000; font-weight: 100; line-height: 24px; padding-right: 70px; padding-top: 60px; padding-left: 50px; padding-bottom: 40px; } .left-area h3 { line-height: 25px; margin-bottom: 20px; } .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: #9fb000; font-weight: bold; display: inline-block; width: 15px; font-size: 25px; top: 5px; position: relative; left: 15px; } .right-area { width: 56%; /* background-color: #3894FF; */ position: relative; padding-top: 35px; } .form-box { padding: 30px 30px 30px 40px; position: absolute; left: 0; border: 1px solid #dfe3e5; background-color: #fff; /* width: 100%; */ } .right-area h4 { line-height: 25px; margin-bottom: 20px; } .right-area form {} .right-area form .hs-form-field { margin-bottom: 20px; } .right-area form .hs-form-field:nth-child(2n+0) { width: 70%; } .right-area form fieldset { max-width: 600px; } .right-area form label {} .right-area .input input::placeholder { font-weight: normal; color: #000; font-weight: 300; } .right-area .input input { height: 52px; border-radius: 0; border: 1px solid #ccc; color: #000; padding-left: 10px; padding-right: 10px; } .right-area .input .hs-input { width: 91%; } .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; padding: 0 20px 0 20px; cursor: pointer; } .right-area p { margin-bottom: 20px; } .form-columns-2 .hs-form-field { width: 46% !important; } @media (min-width:1441px) { .form-area { /* max-width :100%; */ } } @media (max-width: 1024px) { .form-area { display: block; max-width: 100%; } .form-box { position: relative; } .left-area { padding-right: 40px; width: auto; } .left-area h3 { width: auto; } .right-area { padding: 50px 40px; width: auto; } .right-area form fieldset { max-width: 100%; } } @media (max-width: 769px) { .form-area { display: block; } .left-area {} .right-area {} .right-area .input .hs-input { width: 70%; } } @media (max-width: 580px) { .left-area { padding: 30px 20px 0 20px; font-size: 13px !important; } .left-area h3 { font-size: 15px !important; } .left-area p { font-size: 13px !important; line-height: 18px; } .left-area ul li { font-size: 13px !important; margin-bottom: 5px; } .right-area form .hs-form-field { width: 100%; float: none; } .right-area { padding: 0; } .right-area h4 { font-size: 15px !important; } .form-box { border: 0; padding: 20px 20px 50px; } .left-support { padding-left: 20px !important; padding-right: 20px !important; } .left-support p { font-size: 16px !important; } } @media (max-width: 480px) { .right-area form .hs-form-field { margin-bottom: 10px; } .right-area form label { font-size: 11px !important; line-height: 10px; padding-bottom: 0; margin-bottom: 0; } .right-area .input input { height: 25px; font-size: 12px; } .right-area p { font-size: 11px !important; margin-bottom: 10px; } .right-area form input[type="submit"] { font-size: 16px; } }







MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget