Venus Jacobson

Venus Jacobson is a front-end web developer and designer who is available for off-site projects with over 7 years of strong industry experience. Visit http://www.missdemilo.com to see Venus's professional online profile.

DHTML

MySpace: Sony Pictures — Stomp The Yard (microsite)
Role(s): Front-End Developer
Skills: HTML, CSS

VIEW

Click to view sample of Soundtrack section
Click to view on MySpace

CODE SAMPLES

HTML Sample - Soundtrack (additional code available upon request):

<div class="wrap">
        <div class="songwrap">
            <div class="soundtrack">
                <div class="song">1. “Go Hard or Go Home"</div>
                <div class="artist">E-40 featuring The Federation</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track01.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
            <div class="soundtrack">
                <div class="song">2. “Van’s”</div>
                <div class="artist">The Pack</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track02.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
            <div class="soundtrack">
                <div class="song">3. “Poppin’ ”</div>
                <div class="artist">Chris Brown</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track03.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
            <div class="soundtrack">
                <div class="song">4. “Sign Me Up”</div>
                <div class="artist">Ne-Yo</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track04.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">5. “The Champ”</div>
                <div class="artist">Ghostface Killah</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track05.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">6. “Walk It Out”</div>
                <div class="artist">UNK</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track06.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">7. “Pop, Lock & Drop It”</div>
                <div class="artist">Huey</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track07.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">8. “The Deepest Hood” </div>
                <div class="artist">Al Kapone AKA Kapeezy </div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track08.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">9.  “Come On”</div>
                <div class="artist">Bonecrusher featuring Onslaught</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track09.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">10.“Supermixx’s Black In The Building”</div>
                <div class="artist">Public Enemy</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track10.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">11. “Storm” </div>
                <div class="artist">Cut Chemist featuring Edan & Mr. Lif </div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track11.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">12. “In The Music”</div>
                <div class="artist">The Roots featuring Malik B. & Porn </div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track12.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        
        
        
            <div class="soundtrack">
                <div class="song">13. “Ain’t Nothing Wrong With That”</div>
                <div class="artist">Robert Randolph & The Family Band</div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track13.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
            <div class="soundtrack">
                <div class="song">14. ”Bounce Wit Me”</div>
                <div class="artist">R.E.D. 44<span class="winner"> MySpace Winner!</span></div>
                <div class="button"><a href="javascript:openWindow('http://creative-origin.myspace.com/groups/_vj/sty/soundtrack/track14.html','mynewWindow','left=280,top=180,toolbar=0,scrollbars=0,height=285,width=349')"><img src="http://creative.myspace.com/images/spacer.gif" width="85" height="22" /></a></div>
            </div>
        <div align="center"><a href="#"><img class="buy_btn" src="images/buy_btn.gif" border="0" /></a></div>
        </div>
        </div>

CSS SAMPLE - Soundtrack:

/* CSS FOR SOUNDTRACK SECTION */	
        .wrap {
            width:735px;
            padding-left:65px;
        }
        .songwrap {
            padding-left:5px;
            width:670px;
            background-color:#322810;
            padding-top:10px;
            padding-bottom:10px;
        }
        .soundtrack {
            background:url(http://creative-origin.myspace.com/groups/_vj/sty/images/soundtrack_btn.jpg);
            width:665px;
            height:22px;
            float:left;
            background-repeat:no-repeat
        }
        .song {
            padding-left:30px;
            float:left;
            width:263px;
            color:#ffffff;
            font-weight:normal;
        }
        .artist {
            padding-left:25px;
            float:left;
            width:250px;
            color:#FFD930;
            font-weight:normal;
        }
        .button img {
            border:0px;
            width:85px;
            height:22px;
            float:left;
        }
        .buy_btn {
            padding-top:10px;
        }
        .winner {
            font-size: 70%;
            margin-left:20px;
        }

MySpace: Bravo — Top Design Microsite
Role(s): Front-End Developer
Skills: HTML, CSS

VIEW

Click to view

Union Studio:MySpace Safety Microsite - HTML, CSS layout
Role(s): Web Developer
Skills: HTML, CSS

VIEW

Click to view

CODE SAMPLES

HTML Sample - Content:

</div>
<div class="custom_content">
		<div class="col240">
		<a href="videos.html" class="buttons"><img src="images/btn_videos214x104.png" width="214" height="104" border="0"></a>
		<a href="tips.html" class="buttons"><img src="images/btn_tips214x104.png" width="214" height="104" border="0"></a>
			<div class="hm_featured">
				<h4>FEATURED TIP</h4>
				<div class="featured_copy">
					<div class="hm_featured_headline">

<img src="images/hm_check.jpg">
						<div class="headline">Safety Tip Dolor Sit Amet, Adipiscing Elit Morbi Commodo</div>
					</div>
						<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla<br /><br /><a href="#" class="featured">Get more safety tips...</a>
				</div>
			</div>
			<div class="hm_featured">

<h4>FEATURED EXPERT</h4>
				<div class="featured_copy">
					<div class="hm_featured_headline">
						<img src="images/hm_msicon.jpg">
						<div class="headline">Expert Name Lorum Ipsum Dolor Sit</div>
					</div>
						<br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. <br /><br />For more information, visit Lorum Ipsum’s website at <a href="#" target="_blank">www.url.com</a>.
				</div>

</div>
	  </div>
		

		<div class="col560">
			<img src="images/home_hdr541x159.png" widht="541" height="159">
			<h4 class="highlights">SAFETY HIGHLIGHTS</h4>

			<div class="highlights">
					<div class="highlights_headline">

<img src="images/hm_gear.jpg">
						<div class="left">
							<div class="headline">Current Highlight Lorum Ipsum Dolor</div>
							<div class="date">05/31/2007</div>
						</div>
					</div>
						<p class="left">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi.<br /><br />

Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non.
						</p>

					<div class="highlights_headline">
						<img src="images/hm_gear.jpg">
						<div class="left">
							<div class="headline">Current Highlight Lorum Ipsum Dolor</div>
							<div class="date">05/31/2007</div>
						</div>

</div>
						<p class="left">
						Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. 
						</p>
			</div>
		</div>
	</div>

CSS Sample - Menu Tabs

/*************************************************MENU TABS**************************************************/
.tabs {
	font-family:Arial Rounded MT Bold;
	font-size:11.5px;
	background:url(images/nav-off.jpg);
	width:800px;
	height:33px;
	background-repeat:no-repeat;
	position:relative;
	float:left;
}
.tabs ul {
	list-style:none;
	float:left;
	padding:0px;
	margin:0px;
}
.tabs ul li {
	list-style:none;
	float:left;
}
a#home {
	height:33px;
	width:105px;
	display:block;
	background:url(images/nav-over.jpg);
	background-repeat:no-repeat;
}
a.selected:hover#home {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:105px;
	background-repeat:no-repeat;
}
a:hover#home {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:105px;
	background-repeat:no-repeat;
}
a#parents {
	height:33px;
	width:163px;
	display:block;
}
a:hover#parents {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:163px;
	background-position:-105px;
	background-repeat:no-repeat;
}
a#teens {
	height:33px;
	width:76px;
	display:block;
}
a:hover#teens {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:76px;
	background-position:-268px;
	background-repeat:no-repeat;
}
a#resources {
	height:33px;
	width:118px;
	display:block;
}
a:hover#resources {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:118px;
	background-position:-344px;
	background-repeat:no-repeat;
}
a#videos {
	height:33px;
	width:101px;
	display:block;
}
a:hover#videos {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:101px;
	background-position:-461px;
	background-repeat:no-repeat;
}
a#tips {
	height:33px;
	width:153px;
	display:block;
}
a:hover#tips {
	display:block;
	background:url(images/nav-over.jpg);
	height:33px;
	width:153px;
	background-position:-562px;
	background-repeat:no-repeat;
}

Flip Video:MySpace Microsite - JavaScript content swapper based on time
Role(s): Web Developer
Skills: HTML, CSS, JavaScript

VIEW

Click to view on MySpace

CODE SAMPLES

HTML Sample - MySpace AboutMe Module:

<script src="http://creative.myspace.com/Client/FlipVideo/TimeSwapper.js" language="javascript"></script>

<script type="text/javascript" src="http://creative.myspace.com/CodeLibrary/Global/JavaScript/common.js"></script>
<script type="text/javascript" src="http://creative.myspace.com/Client/FlipVideo/profile.js"></script>
<script type="text/javascript" src="http://creative.myspace.com/CodeLibrary/Global/JavaScript/hitboxCommon.js"></script>
<script type="text/javascript" src="http://creative.myspace.com/CodeLibrary/Global/JavaScript/hbx.js"></script>

<link rel="stylesheet" href="http://creative.myspace.com/Client/FlipVideo/profile.css" type="text/css" />

<link type="text/css" id="MyStyle" rel="stylesheet" href="" >

<div align="container">
<iframe src="" id="MovieSwap" width="900" height="680" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
</div>

<script>
TimeSwapper();
</script>

JavaScript Sample - TimeSwapper():

/**********************************************************************************************************************************
Created on:  March 31, 2008
Created by:  Venus Jacobson (vjacobson@myspace.com)
For Client:  FlipVideo

Description:
Based on the hour of the day from a users computer, TimeSwapper() swaps out the iframe src with ID name "MovieSwap".  
The iframe is contained in the HTML (AboutMe) section of the advertiser profile.

Also, each movie has a corresponding style. The daytime movie uses index_day.css,  the night time movie uses index_night.css.  
The stylesheet reference is located in the HTML (AboutMe) section of the advertiser profile and has an ID name of "MyStyle".
**********************************************************************************************************************************/

function TimeSwapper()
{
	Stamp = new Date();
	var Hours = Stamp.getHours();

if (Hours >= 20 || Hours < 6) 
	{
		document.getElementById('MovieSwap').src='http://creative.myspace.com/Client/FlipVideo/index_night.html';
		document.getElementById('MyStyle').href = 'http://creative.myspace.com/Client/FlipVideo/index_night.css';
	}
	else 
	{
		document.getElementById('MovieSwap').src='http://creative.myspace.com/Client/FlipVideo/index_day.html';
		document.getElementById('MyStyle').href = 'http://creative.myspace.com/Client/FlipVideo/index_day.css';			
	}

}

Capcom Interactive: HTML & CSS
Role(s): Front-End Developer
Skills: HTML, CSS, Photoshop

VIEW

View

CODE SAMPLES

HTML Sample - Homepage:

<div class="left"><img src="images/nav-bottom.jpg" /></div>                
            </div>
		<div class="right-nav-side"></div>
	</div>        
    
<div class="wrap800">
<div class="left-wrap">
		
        <div class="banner"><img src="images/banner.jpg" /></div>
        
        
        <div class="home-leftside-wrap">
            <img class="left" src="images/moreinfo-top.jpg" />
                <div class="wrap-login">
                    <img src="images/hdr-login.jpg" />
                        <div class="login-main">
                        <form>
                        <input type="text" id="username" value="username"/>
                        <input type="text" id="password" value="password"/>                        
                        <div class="login-row1"><input type="image" id="login-btn" value="LOGIN" src="images/btn-login.gif" /></div>
                        <img class="left" id="hr-line2" src="images/downloader-hr.jpg" />
                        <div class="login-row2"><div class="login-text">new customer?</div><input type="image" id="signup-btn" value="SIGN UP" src="images/btn-signup.gif" /></div>
                        </form>
                        </div>
                </div>
                <div class="wrap-diary">
                    <img src="images/hdr-diary.jpg" />
                        <div class="diary-main">
                            <div class="diary-text">
                            05.25.06<br />
    Today we are building a game. Today we are building a game. Today we are building a game. Today we are building a
                            </div>
							<a href=""><img class="btn-readmore" src="images/btn-readmore.jpg" /></a>
                            
                        </div>
                </div>
                <div class="wrap-news">
                    <img src="images/hdr-news.jpg" />
                        <div class="news-main">
                            <div class="news-text">
                            05.25.06<br />
							CAPCOM Entertainment Mobile and Interactive Media Division expands
wireless casual gaming inroads with entertain-
							</div>
<a href=""><img class="btn-readmore" src="images/btn-readmore.jpg" /></a>                            
                        </div>
                </div>

</div>
        
             
        <div class="middle-wrap">
            <div class="middle-hm-row1"><img src="images/pic-game1.jpg" border="0" id="pic-game1" /><a href="#"><img id="pic-game2" src="images/pic-game2.jpg" border="0"/></a></div>
          <div class="middle-hm-row2"><img id="pic-game3" src="images/pic-game3.jpg" /><img id="pic-game4" src="images/pic-game4.jpg" /></div>
        </div>
        
</div>
<div class="right-wrap">
        
        <div class="topgames">
            <img class="left" src="images/hdr-topgames.jpg" />
            <div class="topgames-middle">
                <ul>
                    <li>LOST PLANET: TRAG ZERO</li>
                    <li>ESPN POKER CLUB</li>
                    <li>MILLIONAIRE 2007</li>
                    <li>PHOENIX WRIGHT</li>
                    <li>SUPER PUZZLE FIGHTER</li>
                </ul>
            </div>
        </div>
              
        <div class="downloader">
            <img class="left" src="images/hdr-downloader.jpg" />
            <div class="downloader-middle">
				<img src="images/hdr-carrier.jpg" />
                <div class="downloader-selectbox"><img src="images/btn-downloads.jpg" />CARRIER</div>
	            <img class="left" src="images/hdr-phone.jpg" />
                <div class="downloader-selectbox"><img src="images/btn-downloads.jpg" />MANUFACTURER</div>
                <div class="downloader-selectbox"><img src="images/btn-downloads.jpg" />DEVICE</div>                <div class="downloader-device"><img src="images/downloader-device.jpg" /></div> 	            <img class="left" src="images/hdr-game.jpg" />
                <div class="downloader-selectbox"><img src="images/btn-downloads.jpg" />LOST PLANET</div>		                <div class="downloader-game"><img src="images/downloader-game.jpg" /></div>
               	<img class="left" id="hr-line" src="images/downloader-hr.jpg" />
                <div class="downloader-now-btn"><a href="#"></a></div>
            </div>
        </div>
        
     </div>
<div class="footer">JOBS  |  LEGAL  |  PRIVACY POLICY</div>
<div class="copyright">© 2007 Capcom Interactive, Inc. All Rights Reserved. </div>
</div>

</div>

CSS Sample - General Layout:

/*GLOBAL*/
body {
	background-color:#000;
	margin:0px auto;
}
.wrap1315 {
	margin:0px auto;
	width:960px;
	height:959px;
	background:url(../images/bg-slice.jpg);
	background-repeat:repeat-x;
	background-position:0px -12px;
}
.left-nav-side {
	float:left;
	width:80px;
	height:90px;
	background:url(../images/nav-left.jpg);
	background-repeat:no-repeat;
}
.right-nav-side {
	float:left;
	width:80px;
	height:90px;
	background:url(../images/nav-right.jpg);
	background-repeat:no-repeat;
}
.wrap800 {
	height:959px;
	background-repeat:repeat-x;
	width:800px;
	padding:0px 80px 0px 80px;
	float:left;
}
.nav {
	margin:12px 0px 0px auto;
	width:960px;
}
.nav-wrap {
	float:left;
	width:492px;
	height:77px;
}
.left-wrap {
	float:left;
	width:620px;
}
*html .left-wrap {
	float:left;
	width:623px;
}
.right-wrap {
	float:right;
	background-color:#000;
	padding:3px 7px 7px 3px;
	width:154px;
}
.banner {
	float:left;
	background:#000;
	padding:3px 7px 3px 3px;
	width:610px;
	height:182px;
	margin-bottom:17px;
}

*html .banner {
	margin-bottom:22px;
}
*html .banner {
	float:left;
	background:#000;
	padding:3px 7px 3px 3px;
	width:610px;
	height:182px;
	margin-bottom:15px;
}
.left {
	float:left;
}
.footer {
	float:left;
	margin-top:5px;
	height:23px;
	width:798px;
	border-left:1px solid #21274F;
	border-right:1px solid #21274F;
	background:url(../images/footer-bg.jpg);
	background-repeat:repeat-x;
	color:#8CA3FF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-align:center;
	padding-top:15px;
}
.copyright {
	width:800px;
	font-family:verdana;
	font-size:10px;
	color:#83A3FF;
	text-align:center;
	float:left;
}
/**** MORE INFO ***/
.moreinfo-wrap {
	width:164px;
	float:left;
	margin-right:2px;
}
.wrap-moreinfo {
	float:left;
	width:154px;
	padding-left:3px;
	padding-right:7px;
	background-color:#000;
}
.wrap-moreinfo img {
	float:left;
}
.moreinfo-hdr {
	float:left;
	background:url(images/moreinfo-hdr.jpg);
	background-repeat:no-repeat;
	width:164px;
	height:28px;
}
.moreinfo-main {
	float:left;
	width:152px;
	height:319px;
	background:url(../images/moreinfo-bg-slice.jpg) #C0C0C0;
	background-repeat:repeat-x;
	border-left:1px #fff solid;
	border-right:1px #fff solid;
	border-bottom:1px #fff solid;
}
*html .moreinfo-main {
	height:323px;
}
.moreinfo-menu {
	float:right;
	padding-top:10px;
}
.moreinfo-menu ul {
	list-style:none;
	float:left;
	padding:0px;
	margin:0px;
}
.moreinfo-menu ul li {
	list-style:none;
	float:left;
}
.moreinfo-menu ul li a img {
	border:0px;
}
.description {
	height:21px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-repeat:no-repeat;
}
a.description {
	height:21px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-repeat:no-repeat;
}
a.selected:hover.description {
	display:block;
	background:url(../images/moreinfo-on.jpg);
	height:21px;
	width:149px;
	background-repeat:no-repeat;
}
a:hover.description {
	display:block;
	background:url(../images/moreinfo-on.jpg);
	height:21px;
	width:149px;
	background-repeat:no-repeat;
}
.reviews {
	height:18px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-position:0px -21px;
}
a.reviews {
	height:18px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-position:0px -21px;
}
a:hover.reviews {
	display:block;
	background:url(../images/moreinfo-on.jpg);
	height:18px;
	width:149px;
	background-position:0px -21px;
	background-repeat:no-repeat;
}
.screenshots {
	height:18px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-position:0px -43px
}
a.screenshots {
	height:18px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-position:0px -43px
}
a:hover.screenshots {
	display:block;
	background:url(../images/moreinfo-on.jpg);
	height:18px;
	width:149px;
	background-position:0px -43px;
	background-repeat:no-repeat;
}
.trailer {
	height:18px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-position:0px -63px
}
a.trailer {
	height:18px;
	width:149px;
	display:block;
	background:url(../images/moreinfo-off.jpg);
	background-position:0px -63px
}
a:hover.trailer {
	display:block;
	background:url(../images/moreinfo-on.jpg);
	height:18px;
	width:149px;
	background-position:0px -63px;
	background-repeat:no-repeat;
}
/*DESCRIPTION REVIEWS SCREENSHOTS TRAILER, HOME MIDDLE SECTION*/

.middle-wrap {
	float:left;
	width:454px;
}
.middle-wrap-row1, .middle-wrap-row3 {
	float:left;
	width:454px;
}
.middle-hm-row1, .middle-hm-row2{
	float:left;
	width:454px;
}

#pic-game1, #pic-game3 {margin-right:2px;}
#pic-game1, #pic-game2 {margin-bottom:2px;}
*html #pic-game1, #pic-game2 {margin-bottom:3px;}

.middle-wrap-row2 {
	float:left;
	width:444px;
	height:348px;
	background-color:#000;
	padding:0px 7px 0px 3px;
}

.middle-inner-wrap {
	float:left;
	width:410px;
	height:348px;
	border:1px solid #d8daf0;
	background:url(../images/bg-middle.jpg) #BDC0E1;
	background-repeat:repeat-x;
	padding:0px 15.5px 0px 15.5px;
}

*html .middle-inner-wrap {
	height:350px;
}
.middle-hdr {
	font-family:verdana;
	font-size:11px;
	font-weight:bold;
	color:#fff;
	text-align:center;
	float:left;
	width:406px;
	padding:13px 0px 16px 0px;
}
/*SCREENSHOTS*/
.screenshot-pic {
	float:left;
	width:130px;
	height:130px;
	border:1px solid #d8daf0;
}
.screenshot-pic-center {
	float:left;
	width:130px;
	height:130px;
	border:1px solid #d8daf0;
	margin:0px 5px 0px 5px
}
.screenshot-row {
	float:left;
	width:406px;
	padding-bottom:21px;
}
/*********************** RIGHT SIDE**************************/
/*TOP GAMES*/
.topgames {
	float:left;
	width:154px;
	margin-bottom:5px;
}
.topgames-middle {
	float:left;
	width:152px;
	height:64px;
	border-left:1px solid #d8daf0;
	border-right:1px solid #d8daf0;
	background:url(../images/bg-topgames.jpg);
	background-repeat:repeat-x;
	border-bottom:1px solid #d8daf0;
	font-family:verdana;
	font-size:8pt;
	letter-spacing:-0.10em;
	background-position:top;
	background-color:#babde0;
}
.topgames-middle ul {
	text-decoration:none;
	padding:0px 0px 0px 0px;
	margin:0px;
}
.topgames-middle ul li {
	display:block;
	text-decoration:none;
	padding:0px 0px 0px 10px;
	margin:0px;
}
/*DOWNLOADER*/
/*TOP GAMES*/
.downloader {
	float:left;
	width:154px;
}
.downloader-middle {
	float:left;
	width:152px;
	height:423px;
	border-left:1px solid #d8daf0;
	border-right:1px solid #d8daf0;
	background:url(../images/bg-downloader.jpg);
	background-repeat:repeat-x;
	border-bottom:1px solid #d8daf0;
	font-family:verdana;
	font-size:8pt;
	letter-spacing:-0.10em;
	background-position:top;
	background-color:#babde0;
}
.downloader-middle ul {
	text-decoration:none;
	padding:0px 0px 0px 0px;
	margin:0px;
}
.downloader-middle ul li {
	display:block;
	text-decoration:none;
	padding:0px 0px 0px 10px;
	margin:0px;
}
.downloader-selectbox {
	float:left;
	width:142px;
	height:11px;
	border:1px solid #30365b;
	background-color:#6b7098;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#30365b;
	margin-left:5px;
	margin-bottom:5px;
}
*html .downloader-selectbox {
	float:left;
	width:142px;
	height:11px;
	border:1px solid #30365b;
	background-color:#6b7098;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#30365b;
	margin-left:2px;
	margin-bottom:5px;
}
.downloader-device, .downloader-game {
	float:left;
	width:152px;
	text-align:center;
	margin-bottom:5px;
}
#hr-line {
	padding-bottom:5px;
}
.downloader-now-btn {
	float:left;
	width:152px;
	position:relative;
}
.downloader-now-btn a {
	background:url(../images/btn-download-now.jpg);
	width:126px;
	height:18px;
	background-repeat:no-repeat;
	display:block;
	position:absolute;
	left:8%;
}
/*DESCRIPTION*/
.description-text {
	float:left;
	width:203px;
	height:268px;
	text-align:justify;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
	overflow:hidden;
	margin-right:20px;
}
.description-right {
	float:left;
	width:186px;
}
.description-pic {
	float:left;
	width:175px;
	height:203px;
	border:1px solid #fff;
	background-color:#30365b;
}
.description-hr {
	padding-top:5px;
	padding-bottom:5px;
	float:left;
}
.description-btn {
	float:left;
	width:186px;
	height:65px;
}
/*TRAILER*/
.trailer-video {
	float:left;
	width:410px;
	height:265px;
	border:1px solid #fff;
	background-color:#30365b;
}
/*COMING SOON*/
.home-wrap {
	width:164px;
	float:left;
	margin-right:2px;
}
.wrap-home {
	float:left;
	width:154px;
	padding-left:3px;
	padding-right:7px;
	padding-bottom:7px;
	background-color:#000;
}
.home-main {
	float:left;
	width:152px;
	height:345px;
	background:url(../images/bg-middle.jpg);
	background-repeat:repeat-x;
	border-left:1px #fff solid;
	border-right:1px #fff solid;
	border-bottom:1px #fff solid;
	background-color:#BABDE0;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
*html .home-main {
	height:348px;
}
/**** LOGIN  ***/
.home-leftside-wrap {
	width:164px;
	float:left;
	margin-right:2px;
	height:auto;
}
.wrap-login {
	float:left;
	width:154px;
	padding-left:3px;
	padding-right:7px;
	background-color:#000;
	height:auto;
	padding-bottom:6px;
}
.wrap-login img {
	float:left;
}
.login-hdr {
	float:left;
	background:url(images/moreinfo-hdr.jpg);
	background-repeat:no-repeat;
	width:164px;
	height:28px;
}
.login-main {
	float:left;
	width:152px;
	height:84px;
	background:url(../images/bg-login.jpg);
	background-repeat:repeat-x;
	border-left:1px #fff solid;
	border-right:1px #fff solid;
	border-bottom:1px #fff solid;
}
input#username {
	margin-left:5px;
	width:140px;
	height:16px;
	border-top:1px solid #75736E;
	border-left:1px solid #75736E;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	background:#D1E0E8;
	color:#3E4676;
	margin-bottom:2px;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
input#password {
	margin-left:5px;
	width:140px;
	height:16px;
	border-top:1px solid #75736E;
	border-left:1px solid #75736E;
	border-right:1px solid #fff;
	border-bottom:1px solid #fff;
	background:#D1E0E8;
	color:#3E4676;
	margin-bottom:2px;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
input#login-btn {
	float:right;
	position:relative;
}
input#signup-btn {
	float:right;
	position:relative;

}
.login-text {
	float:left;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#3E4676;
}
.login-row1, .login-row2 {
	width:142px;
	float:left;
}
.login-row1,.login-row2 {padding-left:5px;
}
*html .login-row1,.login-row2 {padding-left:7px;
}

#hr-line2 {
	padding-bottom:0px;
}

/**** DESIGN DIARY  ***/
.wrap-diary {
	float:left;
	width:154px;
	padding-left:3px;
	padding-right:7px;
	background-color:#000;
	height:auto;
	padding-bottom:6px;
}
.wrap-diary img {
	float:left;
}
.diary-hdr {
	float:left;
	background:url(images/moreinfo-hdr.jpg);
	background-repeat:no-repeat;
	width:164px;
	height:28px;
}
.diary-main {
	float:left;
	width:152px;
	height:auto;
	background:url(../images/bg-login.jpg);
	background-repeat:repeat-x;
	border-left:1px #fff solid;
	border-right:1px #fff solid;
	border-bottom:1px #fff solid;
	overflow:hidden;
	background-color:#BEC1E2;
}
.diary-text {
	width:140px;
	height:71px;
	overflow:hidden;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	font-size:10px;
	padding:0px 5px 0px 5px;
}
/**** NEWS  ***/
.wrap-news {
	float:left;
	width:154px;
	padding-left:3px;
	padding-right:7px;
	background-color:#000;
	height:auto;
	padding-bottom:6px;
}
.wrap-news img {
	float:left;
}
.news-hdr {
	float:left;
	background:url(images/moreinfo-hdr.jpg);
	background-repeat:no-repeat;
	width:164px;
	height:28px;
}
.news-main {
	float:left;
	width:152px;
	height:auto;
	background:url(../images/bg-login.jpg);
	background-repeat:repeat-x;
	border-left:1px #fff solid;
	border-right:1px #fff solid;
	border-bottom:1px #fff solid;
	background-color:#BEC1E2;
}
.news-text {
	width:140px;
	height:71px;
	overflow:hidden;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	font-size:10px;
	padding:0px 5px 0px 5px;
}
img.btn-readmore {
	float:right;
	margin-top:5px;
	border:0px;
}

/*PRODUCTS*/
.middle-products-wrap {
	float:left;
	width:620px;
	height:350px;
	margin-bottom:10px;
}

.products-container {
	height:349px;
	width:605px;
	overflow-y:auto;
	padding-right:3px;
	background-color:#21253F;
	scrollbar-arrow-color: #8185AE;
	scrollbar-track-color: #8185AE;
	scrollbar-face-color: #A7ABD6;
	scrollbar-highlight-color: #000;
	scrollbar-3dlight-color: #6B7097;
	scrollbar-darkshadow-color: #C9CBE1;
	scrollbar-shadow-color: #30365B;
}

*html .products-container {
	height:352px;
}

.middle-products-left{
	float:left;
	width:611px;
	padding:0px 6px 0px 3px;
	background-color:#000;
}

.products-row {
	float:left; 
	height:auto;
	margin-bottom:2px;
}
.products-screenshot{
	float:left;
	width:140px;
	height:145px;
	border-top:1px solid #D8DAF0;
	border-right:0px;
	border-bottom:1px solid #21253F;
	border-left:1px solid #D8DAF0;
	background-color:#A7ABD6;

}

.products-screenshot img {
	width:128px;
	height:128px;
	margin-top:7px;
	margin-left:4px;
	border:1px solid #D8DAF0;

}

.products-rightside {
	float:left;
	width:447px;
	height:146px;
	overflow:hidden;
}

.products-text {
	float:left;
	width:436px;
	padding-right:10px;
	height:120px;
	border-top:1px solid #D8DAF0;
	border-right:1px solid #D8DAF0;	
	background-color:#A7ABD6;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#fff;
}

.products-hdr {
	float:left;
	width:446px;
	padding-top:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#fff;
	font-weight:bold;
}

.products-links {
	float:left;
	width:447px;
	height:27px;
}

.products-links img {
	border:0px;
}

Breard & Associates, Inc.: Site redesign and rebuild
Role(s): Web UI Designer and Developer
Skills: HTML, CSS, JavaScript, Photoshop, Illustrator

VIEW

View

CODE SAMPLES

HTML Sample - News & Announcements:

<div id="bottomWrapper">
    	<div id="menu">
        	<a href="shadowBox.html" onmouseover="UnshowSub2();"><div class="menuLink" >HOME</div></a>
                <div id="aboutUs" onmouseover="ShowSub(this);">
                   <a id="aboutUsLinks" onmouseover="ShowSub2();" href="aboutUs.html"><div id="aboutUsLink" class="menuLink">ABOUT US</div></a>
                    <div id="aboutUsSubLinks" class="subMenu">
                       <ul>
                           <li><a href="ourFounder.html"><div class="subMenuLink">Our Founder</div></a></li>

<li><a href="ourPeople.html"><div class="subMenuLink">Our People</div></a></li>
                       </ul>
                    </div>
                </div>
                <div style="float:left">
             <a href="news.html" onmouseover="UnshowSub2();"><div class="menuLink" id="breadCrumb" >NEWS & ANNOUNCEMENTS</div></a>
             <a href="services.html" onmouseover="UnshowSub2();"><div class="menuLink" >SERVICES</div></a>

<a href="careers.html" onmouseover="UnshowSub2();"><div class="menuLink">CAREERS</div></a>
             <a href="contact.html" onmouseover="UnshowSub2();"><div class="menuLink">CONTACT US</div></a>
         		</div>
             <div class="signature" id="firstSignature">
                9221 Corbin Avenue, Suite 270<br />
                Northridge, California 91324<br />
                (818) 866-0940<br />

Fax (818) 886-1924
            </div>
            
            <div class="signature">
                2101 Telegraph Avenue, Suite B<br />
                Oakland, California  94612<br />
                (510) 893-8080 
            </div>
    
        </div>

<div id="main">
        	<div id="mainHeader">News & Announcements</div>
            <div id="content">
            	<div class="columnWrapper" id="leftColumn">
                    <div class="subHeader"><div class="newsSubHeader">Important Dates</div><div class="newsIcon"><img src="images/datesIcon.jpg" /></div></div>
                    <div class="newsList">
                    <ul>

<li>11/28/07 - Lorem ipsum dolor</li>
                        <li>11/28/07 - Lorem ipsum dolor</li>
                        <li>11/28/07 - Lorem ipsum dolor</li>
                        <li>11/28/07 - Lorem ipsum dolor</li>
                        <li>11/28/07 - Lorem ipsum dolor</li>
                        <li>11/28/07 - Lorem ipsum dolor</li>

</div>
                     
                    <div class="subHeader"><div class="newsSubHeader">Resources</div><div class="newsIcon"><img src="images/resourcesIcon.jpg" /></div></div>
                    <div class="resourcesList">
                    <ul>
                        <li>NASD</li>
                        <li>SEC</li>
                        <li>IRS</li>

<li>Franchise Tax Board</li>
                     </ul>
                     </div>
                     
                 </div>
                 
                 
				 <div class="columnWrapper">
                    <div class="subHeader"><div class="newsSubHeader">Company Updates</div><div class="newsIcon"><img src="images/updatesIcon.jpg" /></div></div>
                    
                    <div class="subHeader2">Launch of new website</div>

<p>In May of 2008, after months of hard work, the new and improved BAI CPA's website was launched.  This was a long held dream to streamline and anhance the company website.  Special thanks to Venus Jacobson for all of her hard work.</p>

<div class="subHeader2">New York License</div>
                    <p>In November of 2007, after a lengthy application process, Mr. Breard became licensed to practice in New York.  We are very excited by this new region for the Company to explore and expand in.</p>

<div class="subHeader2">Innovation Award</div>
                    <p>In September of 2007, Practical Accountant announced it’s Practice Innovation Awards which recognizes firms that have taken the lead in developing new or improved services in the public accounting field.  This year BAII, CPA was awarded an innovation award!</p>

<div class="subHeader2">Top Accounting Firm Award</div>
                    <p>In August of 2007, The San Fernando Valley Business Journal announced the top 30 accounting firms in the San Fernando Valley.  Our reputation for excellence and our rapid growth launched us from number 29 to 26.  We advanced three levels from the previous year!</p>

</div>
                                  
            </div>
            
        
        </div>

</div>

</div>

CSS Sample - General Layout:

body
{
	background:#333;
	margin:0 auto;
}

#mainWrapper
{
	width:800px;
	margin:0 auto;
}

#header
{
	margin:0 auto;
	width:800px;
	height:105px;
	clear:both;
}

#bottomWrapper
{
	width:800px;
	background:url(images/menuBg.jpg) repeat-y #faf5ef;
	float:left;
}

/* CONTENT */
#main
{
	width:546px;
	padding:0px 25px 20px 25px;
	background:#faf5ef;
	padding-top:30px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#190d0d;
	float:right;
	
}

#mainHeader,
.subHeader,
.subHeader2

{
	font-family:verdana;	
	color:#034659;
	font-weight:bold;
	clear:both;
}
#mainHeader
{
	font-size:18px;

}
.subHeader
{
	font-size:14px;
}

#content
{
	border-top:1px solid #034659;
	padding-top:20px;
}

.rowWrapper
{
	padding:0 0 38px 0;
	/*clear:both;*/
	float:left;
	line-height:18px;
}

.rowWrapper img
{
	border:2px solid #565543;
	margin-right:9px;
}

/*ABOUT ME*/
#coreWrapper
{
	width:210px;
	float:left;
}
#corePicsWrapper
{
	float:left;
}

#corePicsWrapper img
{
	border:2px solid #565543;
}

/*FOOTER*/
#footer
{
	clear:both;
}

.signature
{
	float:left;
	text-align:left;
	color:#faf5ef;
	padding:0px 0px 20px 20px;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;

}

/* OUR FOUNDER*/
#founder
{
	float:left;
	margin:0px 20px 20px 0px;
}

#ourFounderList
{
	padding-left:150px;
}

#subHeaderFounder
{
	position:relative;
	top:-10px;
	padding:0;
}
/*OUR PEOPLE*/
.peoplePic
{
	margin:0px;
	float:left;
}

.peopleWrapper
{
	background:#e5e0da;
	width:315px;
	height:170px;
	padding:10px;
	float:right;
}

.peopleName,
.peopleTitle
{
	font-size:12px;
	color:#190d0d;
}

.peopleName
{
	font-weight:bold;
}
.peopleDescription
{
	font-size:9px;
	height:138px;
	overflow-y:auto;
}

.pagination
{
	text-align:right;
	color:#034659;
	font-weight:bold;
}

.pagination a
{
	color:#034659;
	text-decoration:none;
}
.pagination a:hover
{
	text-decoration:underline;
}

/*NEWS*/
.columnWrapper
{
	width:245px;
	height:750px;
	float:left;
	padding:10px;
	background:#e5e0da;
	font-size:10px;
}

.columnWrapper p
{
	padding:0 0 20px 0;
}
#leftColumn
{
	margin-right:15px;
}

.newsSubHeader
{
	float:left;
	padding:10px 10px 0px 0px;
}

.newsIcon
{
	float:left;
}

.newsList ul
{
	padding:0px;
	marging:0px;
	list-style:none;
	clear:both;
	line-height:18px;
}

.resourcesList ul
{
	clear:both;
	padding:0 0 0 15px;

}

/*CONTACT US*/
#contactLeft
{
	padding-right:100px;
}
#contactRight,
.contactCol
{
	float:left;
}

JavaScript Sample - Menu Rollovers:

CSS Sample - Menu CSS:

/* NAVIGATION - MENU AREA */
#menu
{
	width:189px;
	padding:30px 0 0 15px;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;

}

.menuLink
{
	width:165px;
	padding:5px;
	margin-bottom:15px;
}

.menuLink:hover 
{
	background:#faf5ef;
	text-decoration:underline;
}

.menuLink:hover a
{
	background:#faf5ef;
	text-decoration:underline;
}

.menuLink a
{
	width:160px;
}

a:hover 
{
	background:#faf5ef;
	text-decoration:underline;
	color:#034659;	
}

.menuLink a:hover 
{
	background:#faf5ef;
	text-decoration:underline;
	color:#034659;
}

#menu a
{
	text-decoration:none;
	color:#faf5ef;
}

#menu a:hover
{
	text-decoration:underline;
	color:#034659;

}

/* SUBMENUS */

.subMenuLink
{
	width:168px;
	padding:2px 2px 2px 5px;
	background:#999;
}

.subMenuLink a:hover 
{
	color:#034659;
	text-decoration:underline;
}

#aboutUsSubLinks
{
	display:none;
}

.subMenu 
{
	padding:0px;
	margin:0px;
	position:relative;
	top:-12px;
	width:175px;
	padding:1px 0 1px 0;

}

#menu .subMenu ul 
{
	padding:0px;
	margin:0px;
	position:relative;
	top:-2px;
}

#menu .subMenu ul li
{
	width:175px;
	padding:1px 0 1px 0;
	margin:0px;
	float:left;
	list-style:none;
	
}
#breadCrumb
{
	background:#faf5ef;
	color:#034659;
	text-decoration:underline;
}

/*FOOTER*/

#firstSignature
{
	padding-top:600px;
}

/*FOOTER*/
#footer
{
	clear:both;
}

.signature
{
	float:left;
	text-align:left;
	color:#faf5ef;
	padding:0px 0px 20px 0px;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}