This is the best way to call extra attention to important content of infomation. Check out {Theme} clean and elegant Jumbotron example.
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div class="ct-jumbotron"> <div class="row"> <div class="col-md-6"> <figure><img src="assets/images/demo-content/mockup.png" alt="mockup"></figure> </div> <div class="col-md-6"> <div class="ct-jumbotron__body"> <h4 class="ct-jumbotron__header">We’re Egal Photography</h4> <div class="ct-jumbotron__content"> <p>Etiam placerat purus ac sollicitudin conue. Nullam lobortis neque eget odio suscipit um. Sed pretium a dolor vel porttitor. Pellentesque eu nibh viverra urna molestie pulvinar. In luctus consectetur odio, ut faucibus lorem commodo sit amet. Fusce nulla mi, pese sed metus in, convallis finibus turpis. </p> <p>Nulla at dictum magna. Donec rhoncus nisi id ante posuere pharetra. Suspendisse enti. Cras eu dapibus tortor.</p> </div> <ul class="ct-socials list-inline list-unstyled ct-socials--dark"> <li class="ct-socials__itemfacebook"><a href="https://www.facebook.com/createITpl" target="_blank"><i class="fa fa-facebook"></i></a></li> <li class="ct-socials__itemtwitter"><a href="https://twitter.com/createitpl" target="_blank"><i class="fa fa-twitter"></i></a></li> <li class="ct-socials__itempinterest"><a href="#" target="_blank"><i class="fa fa-pinterest"></i></a></li> <li class="ct-socials__iteminstagram"><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li> </ul> </div> </div> </div> </div> |
Screenshot
Jumbotron example