Call to action
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<section class="ct-mediaSection ct-u-paddingBoth120" data-stellar-background-ratio="0.3" data-type="parallax" data-bg-image="assets/images/background-4.jpg" data-bg-image-mobile="assets/images/background-4.jpg"> <div class="ct-mediaSection-inner"> <div class="container"> <div class="row"> <div class="col-md-6"> <h5 class="ct-u-colorWhite">No one would have believed in the last years of the nineteenth century that this world was being watched </h5> </div> </div> <div class="row"> <div class="col-md-7 ct-u-colorWhite"> <p class="ct-u-colorFaint ct-u-paddingBoth20"> No one would have believed in the last years of the nine- teenth century that this world was being watched keenly and closely by intelligences greater than man’s and yet as mortal as his </p> <a class="btn btn-lg ct-btn-rounded ct-btn--transparent" href="contact-us.html"> Get in touch! </a> </div> <div class="col-md-5"></div> </div> </div> </div> </section> |
CSS Classes:
ct-u-paddingBoth120: adds 120px padding both to top and buttom.
ct-u-paddingBoth20: adds 20px padding both to top and bottom.
ct-u-colorFaint: changes the opacity.
ct-u-colorWhite: gives white color to component.
ct-mediaSection, ct-mediaSection-inner: are common throughout all our templates.
You can edit section parameters with the following data-attributes:
data-type: indicates the parralax effect for section.
data-stellar-background-ratio: how fast will background image change its position with parallax effect.
data-bg-image-mobile: define image, which should be displayed on mobile devices.