Big Blocks Flex

  •  

Directions:

  1. Copy CSS into your theme.
  2. Copy HTML into a Freeform block and replace dummy content.
  3. Add the class name of "BigBlockFlex" to your Freeform block under block properties.

Notes:

  1. Image size should be 550px x 550px

CSS Code

/* FLEX BIG BLOCKS */
/* BIG BLOCKS */
.titanBody .BigBlockFlex{background:var(--color-brand-primary);color:var(--color-white);position: relative;margin:0;}
.titanBody .BigBlockFlex:last-child{margin-bottom:55px;}
.titanBody .BigBlockFlex *{color:var(--color-white);}
.titanBody .BigBlockFlex a{margin:0;text-decoration:underline;}
.titanBody .BigBlockFlex .TextContainer{padding:25px;}
.titanBody .BigBlockFlex img{width:100%;}

@media (min-width:1200px){
    .titanBody .BigBlockFlex{display: flex;align-items: center;min-height:600px;}
    .titanBody .BigBlockFlex .TextContainer, .titanBody .BigBlockFlex > p {flex-basis: 50%;}
    .titanBody .BigBlockFlex:nth-child(odd){flex-direction: row-reverse;}
    .titanBody .BigBlockFlex .TextContainer{padding:50px;overflow-y:auto;max-height:600px;}
    .titanBody .BigBlockFlex > p {margin:0;overflow: hidden;height: 600px;}
    .titanBody .BigBlockFlex img{min-height:100%;max-width: none;}
}

HTML Code


<p><img alt="Big Block Image" src="https://developers.titancms.com/Images/Developer-Notes/BigBlock.jpg" />
</p>
<div class="TextContainer">
  <h3>Lorem epsom dolor elit to sirre elit to sir re bob
  </h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

 

Big Blocks Flex

Big Block Image

Lorem epsom dolor elit to sirre elit to sir re bob

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Big Block Image

Lorem epsom dolor elit to sir re bob

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Test Button

This Big Block has no image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Just a link.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Big Block Image

Lorem epsom dolor elit to sir re bob

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Big Block Image

Big Block Image

Lorem epsom dolor elit to sir re bob

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Big Block Image

Lorem epsom dolor elit to sir re bob

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

© 2017 Northwoods - all rights reserved.
top