Light-weight Responsive Template

Valley View Tree Farm

Looking for the perfect tree to plant in your backyard? Maybe future plans for a treehouse for the kids? At Valley View Farms we will supply the tree of your dreams! Come and view our vast collection of trees from Giant Spruces to Maple Trees.


Source: http://codepen.io/CourtneyJordan/pen/RWgePx
Code:

Valley View Tree Farm
Looking for the perfect tree to plant in your backyard? Maybe future plans for a treehouse for the kids? At Valley View Farms we will supply the tree of your dreams! Come and view our vast collection of trees from Giant Spruces to Maple Trees.
CSS:
* {
font-family: "Open Sans", sans-serif;
color: #444;
 }
 
 *, *:after, *:before {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
 }
 
 img {
width: auto;
max-width: 100%;
height: auto !important;
 }
 
 a {
color: #444;
text-decoration: none;
 }
 a:hover, a:active {
color: #EF6000;
 }
 
 .wrapper:after,
 .row:after {
content: "";
display: table;
clear: both;
 }
 
 .wrapper {
width: 100%;
margin: 0 auto;
 }
 .wrapper .row {
background: #FFF;
 }
 .wrapper .row span {
background: #FFF;
display: block;
text-align: center;
margin-bottom: 20px;
 }
 .wrapper .row span:first-child {
margin-bottom: 0;
 }
 .wrapper .row p {
text-align: left;
padding: 0 16px;
 }
 .wrapper .row .banner {
max-width: 80%;
 }
 .wrapper .row .tree img {
border-radius: 200px;
max-width: 45%;
 }
 
 [class*='column-'] {
float: left;
padding: 1em;
width: 100%;
min-height: 1px;
 }
 
 @media only screen and (min-width: 30em) {
.wrapper {
width: 95%;
max-width: 65em;
}
 
.column-1 {
width: 8.33333%;
}
 
.column-2 {
width: 16.66667%;
}
 
.column-3 {
width: 25%;
}
 
.column-4 {
width: 33.33333%;
}
 
.column-5 {
width: 41.66667%;
}
 
.column-6 {
width: 50%;
}
 
.column-7 {
width: 58.33333%;
}
 
.column-8 {
width: 66.66667%;
}
 
.column-9 {
width: 75%;
}
 
.column-10 {
width: 83.33333%;
}
 
.column-11 {
width: 91.66667%;
}
 
.column-12 {
width: 100%;
}
 }