Bootstrap Template

Empty template with Bootstrap JS, CSS and Font Awesome

by davidpauljunior

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="full">
    <header id="header" class="full">
        <h1>Page title</h1>
    </header>
    <div class="container-fluid full">
        <article class="project full row">
            <aside class="col-sm-4">
                <h2>Test</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis convallis vulputate odio sit amet luctus. Etiam quis volutpat nulla. Nam varius purus vitae purus malesuada cursus. Nam nec lectus ipsum. Aenean ut tellus nibh. Praesent nec metus tortor.</p>
            </aside>
            <div class="col-sm-12 col-sm-push-8-oc feature-container full">
                <figure class="feature">
                    <img src="http://placehold.it/600x400"/>
                </figure>
            </div>
        </article>
    </div>
</div>

SCSS

html, body {
    height: 100%;
}

.full {
    position: relative;
}

#header {
    background-color: #c1ee82;
}

#header h1 {
    margin: 0;
}

.project {
    overflow: hidden;
}

.feature img {
    max-width: 100%;
}

aside {
    border-top: 5px solid yellow;
}

@media (min-width: 768px) {
    .full {
        height: 100%;
    }
    .col-sm-push-8-oc {
        margin-right: -75%;
    }
    .feature-container {
        position: relative;
        overflow: hidden;
    }
    .feature {
        position: absolute; 
        top: -50%; 
        left: -50%; 
        width: 200%; 
        height: 200%;
        margin: 0;
    }
    .feature img {
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        margin: auto; 
        min-width: 50%;
        min-height: 50%;
    }
}