Code:
/* CSS Document */
body {
width:100%;
height:100%;
margin:0;
padding:0;
text-align:center;
background:white url(http://www.airsauce.com/images/main_bg.gif) repeat-x 0% 0%;
font-family: Georgia,"Times New Roman",Times,serif;
font-size: small;
color: #2F3352;
}
#logo {
width: 180px;
height: 150px;
float: right;
text-align:left;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 4px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#container {
width: 790px;
margin: 0 auto;
padding: 47px 0 0 0;
}
#nav {
float: left;
width: 40em;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding-top: 12px;
padding-right: 9px;
padding-bottom: 9px;
padding-left: 9px;
}
#nav ul {
margin: 0;
padding: 0;
list-style: none;
background: #383d44;
}
#nav li {
float: left;
margin: 0;
padding: 0;
font-family: Georgia, serif;
font-size: 82%;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav li a {
float: left;
padding: 10px 0;
text-decoration: none;
color: #4F5398;
border: none;
width:102px;
}
#nav li a:hover {
color: #E38E34;
background: url(http://www.airsauce.com/images/nav_bg.gif) no-repeat 0%;
width:102px;
}
#nav li a.active {
font-weight: bold;
color: #4F5398;
background: url(http://www.airsauce.com/images/nav_bg.gif) no-repeat 0%;
width:102px;
}
#projects {
margin-left: 1px;
}
#PageTitle {
background:transparent url(http://www.airsauce.com/images/content_top.gif) no-repeat 0% 100%;
width: 570px;
float: left;
margin: 0 auto;
padding:3px 0;
}
#title {
float:left;
top:0px;
width:380px;
height:40px;
margin: 20px 0 0 40px;
}
/* Content
.......................................................... */
#content {
width: 485px;
float: left;
text-align: left;
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 35px 120px 50px;
background-color: transparent;
background-image: url(http://www.airsauce.com/images/contentbg.gif);
background-repeat: repeat-y;
}
#content p{padding-bottom:12px; border-bottom:1px solid #F5F5F5;}
#content p img{
float:left;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
}
#content div.subhead {
margin: 15px 5px 5px 0;
padding: 0 0 4px 14px;
font-weight: bold;
color: #343867;
border-bottom: 1px dashed #dbd5c5;
background: url(http://www.airsauce.com/images/star.gif) no-repeat 0 2px;
}
#PageTitle {
height: 83px;
padding-top: 20px;
background-position: 0px 0px;
margin: 0 auto;
}
#homepic {
width: 570px;
height: 134px;
float: left;
padding:0;
margin: 0 auto;
}
#search{
margin:0 auto;}
#textfield {
width: 30px;
height: 15px;
outline-color: #ECE9D8;
border:1px solid #ece9d8; margin:10px auto 0 10px;
}
/* Snippets
.......................................................... */
#snippets {
font-size:97%;
width: 210px;
text-align: left;
float: right;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 10px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0px;
}
#snippets a {
font-size:90%;
font-weight: bold;
padding-bottom: 3px;
text-decoration:none
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.snipbg {
background-image: url(../images/snippetsbg.gif);
background-repeat: repeat-y;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
.projectsbg {
width: 177px;
padding: 1px 20px 20px 20px;
background-image: url(..images/projects_bg.gif);
background-repeat: no-repeat;
background-position: bottom;
}
.snippetsbg {
width: 177px;
padding: 1px 17px 5px 24px;
background-image: url(../images/projects_bg.gif);
background-repeat: no-repeat;
background-position: bottom;
}
#snippets-list dt.first {
margin-top: -10px;
}
#snippets-list dt {
margin: 12px 0 0 0;
font-weight: normal;
}
#snippets-list dl {
margin-top: 0.1em;
}
#snippets-list dd strong {
color: #666;
}
#snippets-list dd strong {
color: #666;
}
#snippets-list dt a {
float: left;
display: block;
margin: 2px 8px 0 0;
padding: 2px;
border: 3px solid #dbd5c5;
background: #fffefa;
}
#snippets-list dt a:hover, #snippets-list dt.active a {
border-color: #fff;
background: #fff;
}
#snippets-list dt.active a {
border-color: #EBF4D9;
background: #2D405B;
}
#snippets-list dd.active a {
text-decoration: none;
font-weight: bold;
color: #2D405B;
border-bottom: none;
}
/* Snippets End
.......................................................... */
p {
margin: 0 auto;
}
#porthead {
padding-top: 0.4em;
padding-right: 0em;
padding-bottom: 0.3em;
padding-left: 0em;
font-family: Georgia, serif;
font-size: 2.6em;
font-style: italic;
font-weight: bold;
color: #D2232A;
width: 400px;
}
#footer {
height: 20px;
border-left: 3em;
width: 100%;
float: none;
font-size: 10px;
color: #FFFFFF;
background-color: #999999;
clear:both;
margin: 0 auto;
}
#footer a,a:visited{
color: #ffffff;
text-decoration: none;
}
#footer a:hover{
text-decoration: underline;
}
h1,h2,h3,h4,h5,h6{margin: 0 auto;padding: 0;}
h1 {color: #9A9ED6; padding:15px 0 0 0; letter-spacing:-1px; text-align:right; width:95%; font-size:120%;}
h1 span{color:#4F5398;}
h2{
color: #9A9ED6;
padding:10px 0 0 0;
letter-spacing:-1px;
text-align:left;
font-size:170%;
font-family: Arial, Helvetica, sans-serif;
}
h3 {
color: #585CA1;
font-size:150%;
font-weight: bolder;
margin-bottom: 0px;
}
h5 {font-size: 11px; color:#9A9ED6; text-align:left; width:100%;}
h6 {color: #666666;
font-weight:normal;
font-size:85%;
margin-top:3px;
margin-bottom:3px;
}
.foliolink {
padding-bottom: 5px;
margin-top: 10px;
margin-bottom: 20px;
text-decoration:none;
}
a:link, a:visited{
color:#E38E34;
border-bottom: 1px dotted #ccccd6;
text-decoration: none;
}
a:focus, a:hover{color:#4F5398; text-decoration:none;}
a.more{
font-weight:bolder;
margin:0 auto;
text-decoration:none;
font-size: 100%;
}
a.more:link, a.more:visited{color:#E38E34;}
a.more:focus, a.more:hover {color:#4F5398;}
.more {
color: #D2232A;
margin: 3px 0 3px 0;
}
#quote {padding: 3em 2em 4px; font: italic 1.05em Georgia, serif;}
#folioquote {
font: italic 1.05em Georgia, serif;
padding-top: 0em;
padding-bottom: 0px;
width: 400px;
padding-right: 2em;
padding-left: 2em;
}
#folionav {
float: right;
color: #D2232A;
font-variant: small-caps;
text-transform: lowercase;
margin-right: 20px;
margin-bottom: 0;
width: 60px;
margin-top: 40px;
}
#folionav a:link, p.categories a:link {
color: #D2232A;
text-decoration: none;
border-bottom: 1px dotted #003;
}
#folionav a:visited, p.categories a:visited {
color: #D2232A;
text-decoration: none;
border-bottom: 1px dotted #ccccd6;
}
#folionav a:hover, p.categories a:hover {
color: #5BB045;
text-decoration: none;
}
#folionav a:active, p.categories a:active {
color: #5BB045;
}
h4 {
clear: both;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 0.8em;
font-weight: normal;
text-transform: uppercase;
text-align: center;
border-top: 1px dashed #000;
border-bottom: 1px solid #000;
}
p.categories, p.responsibilities {
color: #7f7f99;
font-variant: small-caps;
letter-spacing: .1em;
text-align: center;
text-transform: lowercase;
text-indent: 0;
margin: 1em 0;
}
.post img {
padding: 4px;
border: 1px solid #ccccd6;
margin: 0 0 .5em 0;
}
.post img.inset {
float: left;
clear: both;
margin-right: 10px;
}
.post p+img {
margin-top: 1em;
}
.article img {
float: right;
border: 1px solid #ccccd6;
margin-top: 3.3em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 2em;
padding: 4px;
}
#leftbox {
width: 50px;
height: 120px;
border: none;
float: left;
}
#rightbox {
width: 50px;
height: 40px;
border: none;
float: right;
padding-top: 6em;
}
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- #BeginLibraryItem "/Library/Meta.lbi" --><title>web designer | web design | Uk Web Agency</title><!-- #EndLibraryItem -->
<link rel="stylesheet" type="text/css" href="sIFR-print.css" media="print" />
<link rel="stylesheet" type="text/css" href="sIFR-screen.css" title="default" media="screen" />
<script src="sifr.js" type="text/javascript"></script>
<link href="css/home.css" rel="stylesheet" type="text/css" />
</head>
<body onload="preloadImages();">
<div id="container">
<!-- nav-->
<div id="nav">
<ul>
<li><a href="index.html" class="active">HOME</a></li>
<li><a href="about-uk-web-design-agency/about-us.htm">ABOUT</a></li>
<li><a href="web-and-print-projects/projects.htm" id="projects">PROJECTS</a></li>
<li><a href="products-services/services.htm">SERVICES</a></li>
<li><a href="uk-web-designer-contact/contact.htm">CONTACT</a></li>
</ul>
</div>
<!-- Nav-->
<!-- Logo-->
<div id="logo"><a href="index.html"><img src="images/clients-include.gif" alt="uk web design - click here foto go to the home page" width="176" height="157" border="0" /></a>
<!-- Search-->
</div>
<!-- Page Title-->
<div id="PageTitle">
<div id="title" >
<div align="left"><img src="images/elegant.gif" alt="elegant interactive solutions" width="475" height="60" /></div>
</div>
</div>
<div id="homepic"><img src="images/homepic.jpg" alt="web design - search engine optimisation, seo" width="570" height="134" /></div>
<!-- #BeginLibraryItem "/Library/Right Content.lbi" -->
<div id="snippets"><img src="images/recent-projects.gif" alt="recent projects" width="220" height="61" />
<div class="snipbg"><div class="projectsbg"><dl id="snippets-list" >
<dt class="first"><a href="web-and-print-projects/charlotte-stevens.htm"><img src="images/charlotte_snip.gif" alt="Charlotte Stevens" width="40" height="40" border="0" /></a></dt>
<dd class="first"><a href="web-and-print-projects/charlotte-stevens.htm">Charlotte Stevens</a></dd>
<dd>Pop Princess website revamp </dd>
<dt><a href="web-and-print-projects/sequins-and-sawdust.htm"><img src="images/sequins_snip.gif" alt="Sequins and Sawdust" width="40" height="40" border="0" /></a></dt>
<dd><a href="web-and-print-projects/sequins-and-sawdust.htm">Sequins & Sawdust</a></dd>
<dd>New production on the South Bank </dd>
<dt><a href="web-and-print-projects/the-cloud.htm"><img src="images/cloud_snip.gif" alt="The Cloud" width="40" height="40" border="0" /></a></dt>
<dd><a href="web-and-print-projects/the-cloud.htm">The Cloud PSP Ads </a></dd>
<dd>National advert campaign </dd>
<dt><a href="web-and-print-projects/gascoyne-place.htm"><img src="images/gascoyne_snip.gif" alt="Gascoyne Place" width="40" height="40" border="0" /></a></dt>
<dd><a href="web-and-print-projects/gascoyne-place.htm">Gascoyne Place </a></dd>
<dd>Award winning restaurant </dd>
</dl>
</div></div>
<img src="images/web-snippets.gif" alt="web snippets" width="220" height="61" class="first" />
<div class="snipbg">
<div class="snippetsbg">
<a href="http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/" target="_blank" class="top"> Does Your Copy Hold Up To A Quick Glance? </a>
<h6>By Jessica Neuman Beck</h6>
<p>Quick - what does your site’s copy say about you? Make sure your graphics are proportionate to the rest of the body text. <a href="http://www.digital-web.com/articles/does_your_copy_hold_up_to_a_quick_glance/" target="_blank">More</a> <img src="images/right-dot-div.gif" alt="dots" width="177" height="13" /></p>
<a href="http://www.digital-web.com/articles/where_did_my_beautiful_internet_go/" target="_blank">Where Did My Beautiful Internet Go? </a>
<h6>By Sean Madden</h6>
<p>Most web designers worth their salt know the phrase web design is a laughably broad term. Designing for the web entails understanding interaction design, information architecture.. <a href="http://www.digital-web.com/articles/where_did_my_beautiful_internet_go/" target="_blank">More </a></p>
<p> </p>
</div></div>
</div><!-- #EndLibraryItem --><!-- Content-->
<div id="content">
<h2>What we do</h2>
<span class="style6"><strong>We love making things. </strong> </span>
We've been producing new media solutions for over 10 years.
Whether you're small business
looking for a simple online presence or a Blue Chip looking to re-brand, we can deliver.
<div class="more"><a href="about-uk-web-design-agency/about-us.htm" target="_blank" class="more">More here </a></div>
<h2>Latest Project</h2>
<span class="style6"><strong>Sequins and Sawdust </strong>is a lavish, circus based theatrical production
which is being held in a Big top on the South Bank in London
and slap bang in the Centre of Bristol. Tickets are flying out fast so grab one while you can
</span><div class="more"><a href="http://www.sequinsandsawdust.co.uk" target="_blank" class="more">See the website</a></div>
<h2>Search Engine Optimisation</h2>
<strong>Congratulations</strong>, you've now got a beautiful website. The next step is to tell the world or more specifically your target audience that you've arrived. There are a number of ways to attract visitors. The first and most effective way is by <em><a href="products-services/search-engine-optimisation.htm">Search Engine Optimisation</a></em> or <a href="products-services/search-engine-optimisation.htm">SEO</a><br style="clear:both;" />
<div class="more"><a href="products-services/search-engine-optimisation.htm" class="more">Find out more about Search Engine Optimisation</a></div>
<h2>Latest Project</h2>
<span class="style6"><strong>We're passionate</strong> about creating online solutions that enhance and further business. Good web design and development stems from an intrinsic understanding of your business and it's objectives - we always get to know your company and target market before we start the design and build process.</span>
<div class="more"><a href="#" class="more">Find out more about our web design service </a></div>
</div>
</div>
<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){
// This is the preferred "named argument" syntax
sIFR.replaceElement(named({sSelector:"h2", sFlashSrc:"conduit.swf", sColor:"#1F2752", sBgColor:"#FFFFFF"}));
};
//]]>
</script>
<div id="footer">
<p><!-- #BeginLibraryItem "/Library/Footer Links.lbi" -->
<a href="Library/index.html">Home</a> | <a href="Library/about-uk-web-design-agency/about.htm">About</a> | <a href="Library/web-and-print-projects/projects.htm">Projects</a> | <a href="/products-services/services.htm">Services</a> | <a href="Library/uk-web-designer-contact/contact.htm">Contact</a> 2007© <a href="http://www.airsauce.com">airsauce.com.</a> All rights are reserved t. +44(0)1225 427638 <a href="Library/legal.htm">Legal</a> <!-- #EndLibraryItem --></p>
</div>
</body>
</html>
Bookmarks