Barkyard Scoopers

Basic Layout

by Reusablecode

HTML

<div class="bg_GreenStripe"></div>

<div class="bg_BlueStripe"></div>

<div class="bg_Grass"></div>

<div class="bg_GraphicDirt"></div>

<div class="CuteCritter1"></div>


<div class="LittleBoxes_Title">
    <h1><span>BarkYard Scoopers</span></h1>
</div>

<div class="LittleBoxes_FreeEstimates">
    <h2>FREE ESTIMATES!</h2>
    <h2><span>(214)555-1212</span></h2>
</div>

<section class="LittleBoxes_ContainerOfBoxes">
    
    <article class="LittleBoxes_ContentBox1">
        <h2>12 years of Professional Service</h2>
        <span class="floatLeft">
            <img src="http://convergeclientsolutions.com/woof/pyramid.jpg" alt="Clean Yard" />
            <br />
            <i>Play Care-Free in Your Yard</i>
        </span>
        <p>
            Here at the Barkyard our professional scoopers have proudly served the DFW community for the past 12 years. BarkYard Scoopers is a family owned and operated leader in the pet waste removal service for homeowners, communities, commercial properties and special events.
        </p><br /><p>
        Since 1998, we have been licensed, bonded and insured.  We carry liability and workers compensation as well as auto insurance. Our professional technicians will come to your home or complex in clean uniforms and wrapped trucks.  They will clean your yard and TAKE THE WASTE WITH THEM!
        </p><br /><p>
        Our tools and boots are sanitized with an Eco friendly “GREEN” disinfectant that will not harm your dogs or lawn.
        </p>
    </article>
    
    <article class="LittleBoxes_ContentBox2">
        <h1>Signup Now!</h1>
        <label for="firstName">First Name</label><br />
        <input id="firstName" name="firstName" type="text" placeholder="First Name">
        <br />
        <label for="firstName">First Name</label><br />
        <input id="firstName" name="firstName" type="text" placeholder="First Name">
        <br />
        <label for="firstName">First Name</label><br />
        <input id="firstName"...

CSS

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    padding: 0;
    font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;    
    
}


h1 {
    font-size: 2.5em;
    font-weight: bold;
    text-align: left;
    
}

h2 {
    font-size: 2.0em;
    font-weight: bold;
    text-align: left;
}

p {
    font-size: 1.5em;
    font-weight: normal;
    text-align: left;   
}

.clear {
    clear: both;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.bg_GreenStripe {
    z-index: 40;
    height: 168px;
    position: relative;
    background: url('http://convergeclientsolutions.com/woof/bg_header.png');
    background-repeat: repeat-x;
    -o-background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    background-size: contain;
}

.bg_BlueStripe {
    z-index: 5;
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    height: 600px;
    background-size: cover;
    //background-image: -moz-linear-gradient(bottom, deepskyblue, deepskyblue);
    //background-image: -webkit-gradient(linear, center bottom, center top, from(deepskyblue), to(deepskyblue));
    border-style: none;
    border-width: 0px;
    //background: url('http://convergeclientsolutions.com/woof/clouds/clouds_skylens.jpg') center center no-repeat;
    background: url('http://convergeclientsolutions.com/woof/clouds/edit_clouds_Cumulus_humilis.jpg') top left no-repeat;
    
    
}

.bg_Grass {
    z-index: 40;
    display: block;
    overflow:auto;
    position: absolute;
    top: 540px;
    left: 0px;
    height: 163px;
    width: 100%;
    border: none;
    background: transparent url('http://convergeclientsolutions.com/woof/bg_Grass.png');
    
}

.bg_GraphicDirt {
    z-index: 10;
    position: absolute;
    top: 600px;
    left: 0px;
    height: 600px;
    width: 100%;
    border: none;
    background: url('http://convergeclientsolutions.com/woof/bg_dirt.jpg');
    background-repeat: repeat;
   ...