AMSD Layout

by Riderman Sousa

HTML

<script src="http://jquery.bassistance.de/treeview/lib/jquery.cookie.js"></script>
<script src="http://jquery.bassistance.de/treeview/jquery.treeview.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/treeview/jquery.treeview.css">
 <div id="wrap">
            <div id="header">
                <div id="boxRight">
                    <div id="boxLeft">
                        <img id="arquitetura" src="http://kaso-jeux.com/images/titre_sav.jpg" alt="Logo da AMSD" />
                    </div>
                </div>
                <div id="waycontact">
                    <div class="contactPaula">
                        <p>paulaMACHADO</p>
                        <p>crea 97877/D-MG</p>
                        <p>(31) 8725 5393</p>
                    </div>
                    <div class="contactBeatriz">
                        <p>beatrizDAMAS</p>
                        <p>crea 94660/D-MG</p>
                        <p>(31) 9216 6968</p>
                    </div>
                    <div class="address">
                        <p>av. álvares cabral, 381, sl. 604, centro - belo horizonte - mg</p>
                        <p>cep: 30170-000 - telefax: (31) 3222 0345</p>
                        <p>[email protected]</p>
                    </div>
                </div>
                <a href="./">
                    <img id="logo" src="http://tompkinsconstruction.com/pages/images/AmbrosePointlogocopy.jpg" alt="Logo da AMSD" />
                </a>
            </div>
            <div id="leftcontent">
                <div id="content">
                    <h1>AMSD Arquitetura</h1>
                    <img class="left space" alt="Arquitetura" src="http://cdn.archdaily.net/wp-content/uploads/2009/05/1265154380_107-silos-090511-west-view-a4-allard-architecture-528x304.jpg" />
<h2>Sobre a empresa</h2>
<p>A AMSD é focada em qualidade..</p>
<p>Prepare-se porque estamos chegando!!!</p>

                </div>
                <div id="footer">
  ...

CSS

body
{
    font-size: 12px;
    font-family: Calibri, Arial, Georgia, Verdana, Tahoma, Microsoft Sans Serif;
    margin: 0;
    padding: 0;
    color: #666666;
}
a
{
    text-decoration:none;
}
a:link, a:visited
{
    color:#5B194F;
}
a:hover
{
    color: #666666;
}
a:active
{
    color: #444444;
}
p
{
    margin:2px;
}
div#social-networks
{
    float:left;
    margin:2px;    
}
#bindsolution-link
{
    color: #666666;
}
a#bindsolution-link:active
{
    color:rgb(91,25,79);
}
a#bindsolution-link:hover
{
    color:rgb(124,71,111);
}
div#powered
{
    float:right;
    font-size:10px;
    margin:2px;    
    position:absolute; right:0; bottom:0; 
}
div#wrap
{
    width:1024px;
    margin:5px auto;
    border:2px solid #ccc;
    overflow:auto;
    position:relative;
}
div#boxRight
{
    height:180px;
    background-color: rgb(91,25,79);
}
div#boxLeft
{
    height:100%;
    width:810px;
    border-right:10px solid rgb(169, 171, 174);
    background-color: rgb(124,71,111);
}
div#footer
{
    margin:10px;
    bottom:0px; 
    text-align:center;
    font-size: 1.27em;
}
div#waycontact
{
    width:320px;
    margin:20px 40px;
}
div#content
{
    margin-left:40px;
    padding-top:10px;
    overflow:auto;
}
div#leftcontent
{
    width:810px;
    border-right:10px solid rgb(169, 171, 174);
}

div.contactPaula p, div.contactBeatriz p
{
    padding:0px;
    margin:0px;
}
div.contactBeatriz
{
    float:right;
    text-align:right;
}
div.contactPaula
{
    float:left;
    text-align:left;
    margin-bottom:20px;
}
div.address
{
    text-align:center;
}
img#logo
{
    margin:20px auto;
    margin-left:46px;
    width:450px;
    margin-bottom:15px;
}
img#arquitetura
{
    height:160px;
    margin-left:790px;
    margin-top:10px;
}
/* Navigation
----------------------------------------*/
div#nav
{
    padding-top:10px;
}
div#nav span.group, div#nav span.menu
{
   font-weight:bold; 
}
div#nav span.menu
{
    color:#5B194F;
    font-size:16px;
}
#menu
{
    margin-left:10px;
}
/*...

JavaScript

$(document).ready(function (){
    $("#menu").treeview({
        animated: "fast",
        collapsed: false,
        unique: true,
}); 
});