Trivial Design Pattern Library

by John Tucker

HTML

<div 
     style="background-image: url(http://larkintuckerllc.com/assets/img/bg.jpg);"
     class="my_hero"
     >
    <h1>Lorem Ipsum Dolor</h1>
</div>
<div class="container my_columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a risus leo. Aenean in sodales sem, et consectetur metus. Donec facilisis fringilla massa, euismod volutpat lectus fringilla in. Cras tristique nibh nec orci finibus tempus. Morbi ac porta velit. Nullam quis cursus libero. Vestibulum et fringilla turpis, id ultrices risus. Nulla non magna venenatis, efficitur purus vehicula, sodales nisl. Cras viverra ultricies feugiat. Donec eleifend convallis eros, ut auctor augue feugiat in. In a est purus. Vestibulum porta, nunc sit amet pharetra blandit, magna dolor sollicitudin augue, id ultrices risus est porttitor sapien.</p>
    <p>Sed metus augue, sagittis ac lacinia non, tincidunt a sapien. Pellentesque accumsan consequat mi, at varius nunc viverra at. Aenean rhoncus dictum neque, in egestas massa consequat vel. Integer quis massa vitae massa dignissim dignissim. Aliquam sagittis ornare odio. In vel dolor nec metus fringilla convallis. Sed sed libero at tellus maximus convallis. Cras semper finibus odio et rhoncus. Maecenas molestie eros ut lacus finibus, quis commodo nulla faucibus. Vestibulum ut fermentum odio, vitae pharetra turpis. Curabitur quis urna et nisi posuere pretium. Aenean at rutrum sem. Sed pellentesque sapien ut lorem fringilla, ac facilisis tortor placerat.</p>
</div>
<div class="container my_columns">
    <div class="row">
        <div class="col-sm-6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a risus leo. Aenean in sodales sem, et consectetur metus. Donec facilisis fringilla massa, euismod volutpat lectus fringilla in. Cras tristique nibh nec orci finibus tempus. Morbi ac porta velit. Nullam quis cursus libero. Vestibulum et fringilla turpis, id ultrices risus. Nulla non magna venenatis, efficitur purus...

CSS

.my_hero {
    position: relative;
    height: 600px;
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center;
}
.my_hero h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0px;
    color: #ffffff;
    text-align: center;
}

@media screen and (max-width: 768px) {
   .my_hero {
        height: 300px;
    }
}

.my_columns {
    margin-top: 20px;
}

.my_block {
    padding: 30px;
}

@media screen and (min-width: 768px) {
   .my_block {
        border: 1px solid #dddddd;
    }
}

.my_block_text {
    margin-top: 10px;
}