Hoerr Schott

Bio page detail

by Chris LaFrombois

HTML

<div class="container">
    <div class="img">
        <img src="http://placehold.it/300x600" />
    </div>
    <div class="content">
        <h1>This is a title</h1>
        <h4>Erat nec tempus luctus eu amet nascetur at at eget feugiat debitis. Et odio nunc. In sit ante condimentum in vitae. Id sapien vel. Aliquam ullamcorper nisl posuere dolor massa. Ante amet ut commodo sollicitudin integer augue integer suscipit nunc bibendum aliquam dui velit illum rutrum commodo quia. Consequat vitae magnam. Sit iaculis lobortis neque venenatis lacinia. Sit egestas ultrices suspendisse nec nec.</h4>
        <p>Magni at arcu wisi et eget ultrices nunc aute. Ut at mauris. Praesent ultrices ac. Morbi elit pariatur. Lorem vel wisi felis tortor ipsum pretium tellus imperdiet. Pretium sit recusandae est et nulla nunc metus cursus voluptatum nunc consectetuer elementum nisl fusce. Maecenas quis felis. At pellentesque luctus. Fermentum nulla id. Enim sed sed wisi quis torquent eget viverra nibh dolor aliquet non. Ut aliquet mauris. Lorem vestibulum unde at dolor adipiscing. Augue vestibulum id. Ante sed ut. Semper eu donec duis pellentesque scelerisque fusce pulvinar dolor montes ante in.</p>

CSS

html,body {
    font-family:'open sans', Helvetica, Arial, sans-serif;
    line-height:1.65;
    margin:0;
    padding:0;
}
.container {
    width:100%;
    position:relative;
}

h1 {
    font-weight:normal;
    text-transform:uppercase;
    font-size:35px;
}

h4 {
    font-weight:300;
    font-size:22px;
}

.img {
    width:100%;
    position:relative;
    margin:0;
    box-sizing:border-box;
}

.img img {
    width:100%;
    height:auto;
}

.content {
    position:relative;
    box-sizing:border-box;
    padding:25px;
    
}

@media all and (min-width:600px) {

.img {
    width:300px;
    position:absolute;
    margin-left:-1%;
}
    
.img img {
    max-width:300px;
        width:inherit;
}

.content {
    margin-left:320px;
    padding:0;
}
}