A fully functional demo URL: http://69.24.73.172/demos/index.html
Note that in FireFox there is a small horizontal scrollbar bug which I have fixed at home.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Welcome to Scirra.com</title>
<meta name="description" content="Construct 2, the HTML5 games creator." />
<link rel="stylesheet" href="css/default.css" type="text/css" />
<link rel="stylesheet" href="plugins/coin-slider/coin-slider-styles.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="plugins/coin-slider/coin-slider.min.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>
</head>
<body>
<div class="topBar"></div>
<div class="mainBox">
<div class="headWrapper">
<div class="searchWrapper">
<div class="searchBox">
<input type="text" id="SearchBox" />
<div class="s searchIco"></div>
</div>
</div>
</div>
<div class="topMenu">
<a href="#" class="topSelWrapper">Home</a>
<a href="#" class="topNormal">Forum</a>
<a href="#" class="topNormal">Contruct</a>
<a href="#" class="topNormal">Arcade</a>
<a href="#" class="topNormal">Manual</a>
<a href="#" class="topNormal">Support</a>
<a href="#" class="topNormal">Contact</a>
</div>
<div class="subMenu">
<a href="#" class="subSelWrapper">Homepage</a>
<a href="#" class="subNormal">Construct</a>
<a href="#" class="subNormal">Products</a>
<a href="#" class="subNormal">Community Forum</a>
<a href="#" class="subNormal">Contact Us</a>
</div>
<div class="contentWrapper">
<div class="wideCol">
<div id='coin-slider' class="slideShowWrapper">
<a href="#" target="_blank">
<img src='images/screenshot1.jpg' >
<span>
Scirra software allows you to bring your imagination to life
</span>
</a>
<a href="#">
<img src='images/screenshot2.jpg' >
<span>
Export your creations to HTML5 pages
</span>
</a>
<a href="#">
<img src='images/screenshot3.jpg' >
<span>
Another description of some image
</span>
</a>
<a href="#">
<img src='images/screenshot4.jpg' >
<span>
Something motivational to tell people
</span>
</a>
</div>
<div class="newsWrapper">
<h1>Latest from Twitter</h1>
<div id="twitterFeed">
<p>The news on the block is this. Something has happened some news or something. <span class="smallDate">About 6 hours ago</span></p>
<p>Another thing has happened lets tell the world some news or something. Lots to think about. Lots to do.<span class="smallDate">About 6 hours ago</span></p>
<p>Shocker! Santa Claus is not real. This is breaking news, we must spread it. <span class="smallDate">About 6 hours ago</span></p>
</div>
</div>
</div>
<div class="thinCol">
<h1>Main Heading</h1>
<p>Some paragraph goes here. It tells you about the picture. Cool! Have you thought about downloading Construct 2? Well you can download it with the link below. This column will expand vertically.</p>
<h2>Help Me!</h2>
<p>This column will keep expanging and expanging. It pads stuff out to make other things look good imo.</p>
<h2>Why Download?</h2>
<p>As well as other features, we also have some other features. Check out our <a href="#">other features</a>. Each of our other features is really cool and there to help everyone suceed.</p>
<a href="#" class="s downloadBox">
<div class="downloadHead">Download</div>
<div class="downloadSize">24.5 MB</div>
</a>
</div>
<div class="clear"></div>
<h1>This Weeks Spotlight</h1>
<div class="halfColWrapper">
<img src="images/spotlight1.png" class="spotLightImg" />
<p>Our spotlight member this week is Pooh-Bah. He writes good stuff. Read it.</p>
<a class="moreInfoLink" href="#">Learn More</a>
</div>
<div class="halfColSpacer"> </div>
<div class="halfColWrapper">
<img src="images/spotlight2.png" class="spotLightImg" />
<p>Killer Bears is a scary ass game from JimmyJones. How many bears can you escape from?</p>
<a class="moreInfoLink" href="#">Learn More</a>
</div>
<div class="clear"></div>
</div>
</div>
<div class="footerWrapper">
<div class="footerBox">
<div class="footerItem">
<h3>Community</h3>
<a href="#">The Blog</a><br />
<a href="#">Community Forum</a><br />
<a href="#">RSS Feed</a><br />
<a class="s footIco facebook" href="http://www.facebook.com/ScirraOfficial" target="_blank"></a>
<a class="s footIco twitter" href="http://twitter.com/Scirra" target="_blank"></a>
<a class="s footIco youtube" href="http://www.youtube.com/user/ScirraVideos" target="_blank"></a>
</div>
<div class="footerItem">
<h3>About Us</h3>
<a href="#">Contact Information</a><br />
<a href="#">Advertising</a><br />
<a href="#">History</a><br />
<a href="#">Privacy Policy</a><br />
<a href="#">Terms and Conditions</a>
</div>
<div class="footerItem">
<h3>Want to Help?</h3>
You can contribute to the community <a href="#">in lots of ways</a>. We have a large active friendly community, and there are lots of ways to join in!<br />
<div class="ralign">
<a href="#"><strong>Learn More</strong></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="copyright">
Copyright © 2011 Scirra.com. All rights reserved.
</div>
</body>
</html>
(Note head wrapper div is empty at the moment, this will have a logo at a later date).
CSS:
/* Main Layout Elements */
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana;
background: #fff url(../images/background.png) repeat-x;
color:#444;
}
p {
margin: 0 0 20px 8px;
}
a{
color: #0066FF;
}
.smallDate{
float:right;
color: #339900;
}
.topBar{
position:absolute;
background-color: #339900;
height: 30px;
border-bottom:2px solid #3FBF00;
width: 100%;
z-index:1;
-moz-box-shadow: 0px 0px 5px #555;
-webkit-box-shadow: 0px 0px 5px #555;
box-shadow: 0px 0px 5px #555;
}
h1{
margin:0;
margin-bottom:5px;
font-size:35px;
color: #339900;
font-weight:normal;
}
h2{
margin:0 0 5px 0;
font-size:22px;
color: #339900;
font-weight:normal;
}
h3{
text-shadow: black 0.1em 0.1em 0.2em;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
margin-bottom: 3px;
}
.ralign{
text-align:right;
}
.clear{
clear:both;
}
/* Sprite definitions and positioning */
.s{
background-image:url(../images/sprites.png);
background-repeat:no-repeat;
}
.facebook{
background-position: 0 0;
}
.twitter{
background-position: 0 -40px;
}
.slideShowWrapper{
height:261px;
overflow:hidden;
-moz-box-shadow: 0px 0px 5px #555;
-webkit-box-shadow: 0px 0px 5px #555;
box-shadow: 0px 0px 5px #555;
}
.youtube{
background-position: 0 -80px;
}
/* Main Wrappers */
.contentWrapper{
padding: 10px;
}
.headWrapper{
height: 120px;
}
.footerWrapper{
position:relative;
z-index:1;
top: -20px;
height:155px;
padding-top: 15px;
background-image: url(../images/background-footer.png);
background-repeat:repeat-x;
margin-bottom: -20px;
overflow: hidden;
}
.mainBox{
-moz-box-shadow: 0px 0px 12px #444;
-webkit-box-shadow: 0px -20px 28px #c0c0c0;
box-shadow: 0px 0px 12px #444;
margin: 0 auto;
width: 770px;
border:0;
z-index:2;
position:relative;
background-color: #ffffff;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
}
/* Footer */
.footerBox
{
color: white;
font-size: 13px;
margin: 0 auto;
width: 700px;
margin-top:5px;
}
.footerItem{
float: left;
width: 33%;
}
.footerItem a{
font-size:13px;
color:white;
}
.footerItem a:hover{
color: #ffaa00;
}
.copyright
{
color: white;
text-align:center;
background-color: #000000;
font-size: 12px;
padding: 3px;
}
.footIco{
height: 40px;
width: 32px;
float: left;
margin-top: 7px;
position:relative;
left: -4px;
display:block;
}
/* Search */
.searchWrapper{
float:right;
background-color: #339900;
width: 250px;
height:53px;
position:relative;
left: 50px;
-moz-border-radius-bottomright: 10px;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-left-radius: 10px;
text-align:center;
line-height:50px;
}
.searchBox{
position:Relative;
left:12px;
}
.searchBox input{
height:20px;
padding-left:10px;
color: #c0c0c0;
line-height:20px;
padding-right:25px;
}
.searchIco{
height: 37px;
width: 36px;
float: right;
background-position: -40px 0;
position:relative;
left:-33px;
top:11px;
}
/* Menus */
.topMenu{
height:38px;
background-color: #339900;
font-size: 15px;
font-weight: bold;
line-height:38px;
}
.topMenu a{
text-shadow: #114400 1px 1px 1px;
display: block;
float:left;
padding-left: 8px;
padding-right: 8px;
color:white;
}
.subMenu{
height: 33px;
background-color: #1B5300;
font-size: 13px;
line-height:33px;
}
.subMenu a{
display: block;
float:left;
padding-left: 8px;
padding-right: 8px;
color:white;
text-decoration: none;
}
.subLinkLImg{
float:left;
width:11px;
height:23px;
background-position: -80px 0;
}
.subLinkSelected{
background-color:#123700;
float:left;
height:22px;
line-height:22px;
}
.subSelWrapper{
text-decoration: none;
margin-right: -20px;
margin-left: 5px;
}
.subNormal{
margin-left: 25px;
}
.subNormal:hover{
background-color:#123700;
text-decoration: none;
}
.ssOrient{
position:relative;
top:6px;
}
.subLinkRImg{
float:right;
width:11px;
height:23px;
background-repeat:no-repeat;
background-position: -91px 0;
}
.topSelWrapper{
text-decoration: none;
margin-right: -20px;
margin-left: 5px;
}
.topLinkLImg{
float:left;
width:11px;
height:33px;
background-position: -105px 0;
}
.topLinkRImg{
float:right;
width:11px;
height:33px;
background-position: -116px 0;
}
.topLinkSelected{
background-color:#1B5300;
float:left;
height:33px;
line-height:33px;
}
.tlOrient{
position:relative;
top:5px;
}
.topNormal{
margin-left: 25px;
text-decoration: none;
}
.topNormal:hover{
background-color:#2B8200;
}
/* Download box link */
.downloadBox{
display: block;
background-position: -134px 0;
width: 215px;
height: 55px;
margin: 0 auto;
text-align:right;
color:white;
text-transform: uppercase;
text-decoration: none;
}
.downloadHead{
font-weight:bold;
font-size:17px;
padding-top:14px;
padding-right: 15px;
}
.downloadSize{
padding-right: 15px;
font-size:14px;
margin-top: -3px;
}
/* Other */
.moreInfoLink{
display:block;
color:white;
font-size:12px;
font-weight:bold;
text-decoration: none;
float:right;
height:17px;
background-color:#3366CC;
text-align:center;
padding:0 12px 0 12px;
line-height:17px;
min-width:100px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-top:-12px;
margin-bottom:10px;
clear:both;
}
.moreInfoLink:hover{
text-decoration:underline;
background-color: #537DD5;
}
.thinCol{
float:left;
width:270px;
}
.wideCol{
float:left;
margin-right:10px;
width:470px;
}
.newsWrapper{
position:relative;
top: 5px;
}
.halfColSpacer{
width:4%;
float:left;
}
.halfColWrapper{
float:left;
width:48%;
}
.spotLightImg{
float:left;
margin-right:15px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 3px #444;
-webkit-box-shadow: 3px 3px 3px #444;
box-shadow: 3px 3px 3px #444;
width: 90px;
height: 90px;
}
.slideShowWrapper img{
width:470px;
height: 261px;
border: 0;
}
.slideShowWrapper a{
text-decoration: none;
}
I've tried really hard to design this with progressive enhancement in mind, so I think it degrades quite nicely.
IE7 and below aren't supported. I am completely fine with taking that decision. I'm considering adding some sort of notification though.
It's tested in Safari, FF, IE8 and Chrome.
I've used a sprite image to improve load speed. CSS isn't compressed/optimised yet, I'll do that later.
Comments on CSS/HTML/JS are all welcome. I really want to nail this as being as near to perfect as possible. Main areas of importance are:
- SEO friendly
- Fast and responsive
- Accessible