GMail Layout

by yoorek

HTML

<header>
    <nav class="super"> <a href="#">Search</a>
 <a href="#">Images</a>
 <a href="#">Maps</a>
 <a href="#">Play</a>
 <a href="#">YouTube</a>
 <a href="#">News</a>

    </nav>
    <div class="search">
        <img src="https://ssl.gstatic.com/ui/v1/icons/mail/logo_default.png" id="logo" />
        <div class="input-append">
            <input class="input-xlarge" id="appendedDropdownButton" type="text" />
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Search <span class="caret"></span>

                </button>
            </div>
        </div>
    </div>
    <div class="controls">
         <h1>Gmail</h1>

        <button class="btn dropdown-toggle" data-toggle="dropdown">
            <input type="checkbox" /><span class="caret"></span>

        </button>
        <button class="btn">Refresh</button>
        <button class="btn dropdown-toggle" data-toggle="dropdown">More<span class="caret"></span>

        </button>
    </div>
</header>
<div id="side">
    <button class="btn btn-danger" id="compose-button">Compose</button>
    <ul class="nav nav-list">
        <li class="active"><a>Inbox</a>

        </li>
        <li><a>Starred</a>
        </li>
        <li><a>Important</a>
        </li>
        <li><a>Sent Mail</a>
        </li>
        <li><a>Drafts</a>
        </li>
        <li><a>Follow Up</a>
        </li>
    </ul>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>This text is here to demo scrolling</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit...

CSS

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css');
 HTML {
    height: 100%;
}
BODY {
    font-family: arial;
    font-size: 13px;
    position: relative;
    height: 100%;
}
HEADER {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 139px;
    border-bottom: 1px solid #ddd;
}
HEADER .super {
    background-color: #2D2D2D;
    padding-left: 16px;
}
HEADER .super a {
    display: inline-block;
    padding: 2px 8px;
    font-weight: bold;
    color: #aaa;
}
#logo {
    margin:0 32px 0 16px;
}
HEADER .search {
    padding: 4px;
    border-bottom: 1px solid #ddd;
    background-color: #f3f3f3;
}
HEADER .controls {
    padding: 8px 16px;
}
HEADER .controls h1 {
    margin: 0;
    font-size: 20px;
    font-weight: normal;
    color: #DD4B39;
    display: inline-block;
    width: 160px;
}
#side {
    position: absolute;
    top: 140px;
    left: 0;
    bottom: 0;
    padding: 8px;
    width: 164px;
    background-color: #f5f5f5;
    overflow: auto;
}
#content {
    position: absolute;
    top: 140px;
    left: 196px;
    bottom: 0;
    right: 0;
    overflow: auto;
}

#content h2{
    font-size: 16px;
    font-weight: normal;
}

.btn .caret {
    margin-left: 16px;
}
.unread-message {
    text-align: center;
    margin: 1em;
}
#compose-button {
    width: 120px;
    margin-bottom: 2em;
}