1 - PetLetter Design

by Reusablecode

HTML

<link rel="stylesheet" href="http://www.ehabaref.com/css/ps_global.css">
<div id="page-wrap">
<div class="banner" id="banner-home">
        <div class="header">
<!--
            <nav>
                <div class="smlinks">
                       <a href="http://www.linkedin.com/in/ehabaref"><img src="/img/social-linkin.png" id="LinkedIn" alt="LinkIn"></a>
                    <a href="http://www.youtube.com/user/ehabnyc"><img src="/img/social-youtube.png" id="YouTube" alt="YouTube"></a>
                    <a href="http://twitter.com/ehabaref"><img src="/img/social-twitter.png" id="Twitter" alt="Twitter"></a>
                    <a href="http://www.facebook.com/pages/Ehab-Aref-Design/172196066150612"><img src="/img/social-facebook.png" id="Facebook" alt="Facebook"></a>
                </div>
                
                <ul>
<li id="service"><a href="http://www.ehabaref.com/services.html">VitalPet</a></li>

                </ul>
            </nav>
            -->
<!-- REQUEST A QUOTE SLIDING PANEL -->
<div id="toppanel">
    <div id="panel">
        <div class="content clearfix">
        </div>
    </div>
</div> <!--END OF QUOTE SLIDING PANEL -->
                
<h1 class="h1home">
<span id="line1">blah blah peanut butter dogs </span>
<span id="line2home">VitalPet Family of Veterninary Clinics</span>
<span id="line3">We are pleased to offer you the following information/span>
</h1>

</div>
    
    <!--was from http://www.ehabaref.com/   -->
    
    <div id="letter-window-container" style="display:block; width:100%;position:absolute;top:0;left:0;">
    
        <div style="display:block;">
            <img width="310px" height="110px;" src="http://convergeclientsolutions.com/vitalpet/images/vitalpetImages/vpet-edited-logo-310x110.png" alt="" />
        </div>

            <div class="AddressBlock-Container">
                <div id="AddressBlock-Sender" style="margin:20px 0 10px 10px">
                   ...

CSS

</head>
<head>


<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!--
    <link rel="stylesheet" href="http://galleria.aino.se/static/css/aino.css">
    <link rel="stylesheet" href="http://galleria.aino.se/static/css/G.css?3">
-->
<style>


/* CSS RESET
---
    html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
    v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
    html5doctor.com/html-5-reset-stylesheet/
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
}

nav ul { list-style:none; }

blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; text-align:left;}
input, select { vertical-align:middle; }


/* GENERIC PIECES
--- */
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: visible; }
.ir { display: block; text-indent: -999em; overflow: hidden;...