Pattern Library Przemyslaw Byrdy

Jumbotron is used to grab users attention therefore it's usually a large field with a big title and rather big font.

Jumbotron 1

Jumbotron

Lorem ipsum dolor sit amet, diam debet suscipiantur te ius, omnis tincidunt maiestatis an qui. Duo meis scaevola no. Duo eu audire torquatos comprehensam, erant noster torquatos no pri. Aliquid mediocritatem ne per, quas modus populo mei id. Eum eu voluptaria scriptorem.

HTML and CSS Code

HTML Code

<div class="jumbotron-grey"> <p>Jumbotron</p> <div class="container-grey"> <p>Lorem ipsum dolor sit amet, diam debet suscipiantur te ius, omnis tincidunt maiestatis an qui. Duo meis scaevola no. Duo eu audire torquatos comprehensam, erant noster torquatos no pri. Aliquid mediocritatem ne per, quas modus populo mei id. Eum eu voluptaria scriptorem.</p> <p> <button class="button" type="button">Okay</button> </p> </div> </div>

CSS Code

.jumbotron-grey{ background-color: #999999; color: #FFFFFF; padding: 20px; font-size: 30px; } .container-grey{ font-size: 20px; color: #333333; }

Jumbotron 2

Jumbotron

HTML and CSS Code

HTML Code

<div class="jumbotron-orange"> <p>Jumbotron</p> <div class="container-orange"> <p>Lorem ipsum dolor sit amet, diam debet suscipiantur te ius, omnis tincidunt maiestatis an qui. Duo meis scaevola no. Duo eu audire torquatos comprehensam, erant noster torquatos no pri. Aliquid mediocritatem ne per, quas modus populo mei id. Eum eu voluptaria scriptorem.</p> <p> <button class="ghostbutton" type="button">Okay</button> </p> </div> </div>

CSS Code

.jumbotron-orange{ background-color: #FFAA80; color: #333333; padding: 20px; font-size: 30px; font-weight: bold; border-radius: 20px; } .container-orange{ font-size: 20px; color: #333333; font-weight: 100; }