it-advance : Design 9 « Templates « HTML / CSS






it-advance

    

<!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 profile="http://gmpg.org/xfn/11">
<title>IT Advance</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Theme Name: itadvance
Theme URI: http://www.makequick.com
Version: 1.0
Description: 2 Column theme
Author: Make Quick
Author URI: http://www.makequick.com
*/



/* Links */

a:link { text-decoration: none; color: #AAD0D0; }

a:visited { text-decoration: none; color: #AAD0D0; }

a:hover, a:active { color: #93BFBF; }

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }

h1 { font-size: 32px; margin-bottom: 0px; margin-top: 10px;}

h2 { font-size: 28px; }

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 20px; }

/* Other Html Elements */
.titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none;}
.titles a:link, .titles a:visited, .titles a:active {
text-decoration: none;
font-size: 24px;
font-weight: normal;
border-bottom-width: 0;
}



pre, blockquote 
{
  overflow: auto;
  padding: 0 10px;
  margin: 20px 30px;
  line-height: 1.8em;
  background-color: #465757;
  border: 1px solid #314343;
}

pre:hover, blockquote:hover
{
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
}

pre { padding-top: 10px; padding-bottom: 10px; }

code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }

ul, ol { line-height: 2.0em; }

ul { list-style-image: url(it-advance-images/bullet.gif); }

abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }

del { text-decoration: line-through; color: #999999; }

ins { text-decoration: none; color: #009977; }

/* Structure */

body
{
  margin: 0;
  padding: 0;
  color: #222222;
  background-image: url(it-advance-images/bg.gif);
  background-repeat: repeat-x;
  background-color: #112B2B;
  font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}

#wrapper2 {
width: 768px;
margin-left: auto;
margin-right: auto;
}
#header
{
  float: left;
  width: 100%;
  padding-bottom: 8px;
  background: #3C4E4E url('it-advance-images/header-bg.gif');
  clear: right;
  height: 59px;
  margin-top: 15px;
}

#navigation
{
  clear: both;
  float: left;
  width: 100%;
  background-image: url(it-advance-images/header.gif);
  height: 212px;
}

#wrapper
{
  clear: both;
  float: left;
  width: 100%;
  color: #BECDCD;
  background: #3C4E4E;
}

#content-wrapper
{
  width: 65%;
  float: left;
}

#content
{
  float: left;
  padding: 0 0px 10px 30px;
}

#sidebar-wrapper
{
  width: 35%;
  float: right;
}

#sidebar
{
  float: right;
  padding: 0px 15px 0px 10px;
  width: 213px;
  background-image: url(it-advance-images/sidebar-bg.gif);;
  margin-right: 15px;
  margin-top: 7px;
}

#footer
{
  clear: both;
  float: left;
  width: 748px;
  text-align: left;
  padding-left: 20px;
  background: #3C4E4E;
  background-image: url(it-advance-images/footer-bg.gif);
  margin-bottom: 15px;
  color: #BECDCD;
  height: 36px;
  padding-top: 10px;
}

#footer a:link, #footer a:hover, #footer a:active, #footer a:visited {
color: #BECDCD;
}

#extras
{
  float: left;
  width: 780px;
  color: #444444;
  text-align: left;
  padding: 0 10px 10px;
  margin: 10px 12px 20px;
  background-color: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}

/* Header */

#header h1 { padding-left: 20px; }

#header h1 a:link, #header a:active {
color: #AAD0D0;
font-size: 20px;
text-transform: lowercase;
}

#header h1 a:hover {
color: #8EBABA;
font-size: 20px;
text-transform: lowercase;
}

#header h1 a:active {
color: #8EBABA;
font-size: 20px;
text-transform: lowercase;
}

#header h1 a:visited {
color: #8EBABA;
font-size: 20px;
text-transform: lowercase;
}

/* Navigation */

#navigation ul { list-style-type: none; list-style-image: none; float: left; margin-top: 0px; margin-left: 0px; padding-left: 0px;}

#navigation li { float: left; }

#navigation li a:link,
#navigation li a:visited
{
  float: left;
  color: #8CA5A5;
  display: block;
  padding: 0px 10px;
  margin-right: 1px;
  height: 23px;
  font-size: 13px;
  margin-top: 0px;
  background-color: #304242;
  background-image: url(it-advance-images/nav-bg.gif);
  border-left: 1px solid #1E2D2D;
  border-right: 1px solid #1E2D2D;
  
}

#navigation li a:hover,
#navigation li a:active
{
  color: #A5BABA;
  background-repeat: repeat-x;
  font-size: 13px;
  margin-top: 0px;
  background-color: #1B292A;
  background-image: url(it-advance-images/nav-bg2.gif);
  border-left: 1px solid #1E2D2D;
  border-right: 1px solid #1E2D2D;
}

#navigation li.active a
{
  color: #BECDCD;
  background-color: #3C4E4E;
}

/* Wrapper */

#wrapper a:link { font-weight: bold; }

#wrapper a:visited { font-weight: bold; }

#wrapper a:hover, #wrapper a:active { }

/* Content */

#content .post-title a { border-bottom-width: 0; }

#content .post p.img { float: left; margin: 0 15px 0 0; }

#content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }

#content .post-footer 
{ 
  font-size: 90%; 
  color: #677F7F;
  margin-bottom: 5px; 
  padding:5px 5px 5px 15px;
  background-color: #394B4B;
  border: 1px solid #2E3F3F;
}

.post {
padding-left: 10px;
padding-right: 10px;
}
.post-wrapper {
background-image: url(it-advance-images/post-bg.gif);
background-repeat: no-repeat;
width: 476px;
padding: 10px;
margin-left: -15px;
margin-right: 10px;
}

.post-wrapper2 {
width: 476px;
padding: 10px;
margin-left: -15px;
margin-right: 10px;
}
/* Sidebar */

.sideblock
{
  padding: 5px 10px;
  margin-bottom: 20px;
}

.sideblock ul { }

.sideblock h3 { margin-top: 5px; margin-left: -13px; font-size: 14px; display: block; background-image: url('it-advance-images/h2-bg.gif'); background-repeat: no-repeat;  width: 210px; padding-left: 10px; line-height: 30px; margin-bottom: 0px; margin-right: 0px; color: #BECDCD;  }

#sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }

#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }

#sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none;}

#sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }

#sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}

/* Extras */

#extras h6 { font-size: 14px; text-transform: uppercase; color: #BECDCD; }

#friends
{
  float: left;
  width: 150px;
  margin-left: 20px;
  margin-right: 10px;
}

#links
{
  float: left;
  width: 275px;
  margin-right: 50px;
}

#about
{
  float: left;
  width: 250px;
  margin-right: 20px;
}

#friends ul { padding-left: 20px; }

#links dl, #links dt, #links dd { margin: 0; padding: 0; }

#links dt { font-weight: bold; padding-top: 5px; }

#links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }

  /* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #3C4E4E;
width: 280px;
}

#commentform textarea {
background: #485959;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform textarea:hover {
background: #324444;
border: 1px solid #2D3F3F;
}
#commentform textarea:focus {
background: #3C4E4E;
border: 1px solid #2D3F3F;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #3C4E4E;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #3C4E4E;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #3C4E4E;
border: 1px solid #2D3F3F;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}

.date {
  height: 54px;
  margin-bottom: 5px;
  width: 54px;
  text-align: center;
  float: left;
  margin-top: 10px;
  margin-left: 10px;

}
.date .month {
  display: block;
  color: #D9DBDB;
  padding: 2px 0px;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: bold;
}
.date .day {
  display: block;
  color: #FFBD0C;
  font: 2.3em Georgia;
  padding-top: 0px;
  text-align: center;
  margin-top: -5px;
}

#left {
  width: 60px;
  float: left;
}

.slogan {
font-size: 13px;
color: #141F1F;
text-transform: lowercase;
margin-left: 20px;
margin-bottom: 2px;
float: left;
}
.icons {
float: right;
margin-right: 30px;
margin-top: -20px;
}

</style>


<!--[if lt ie 7]>  
<link rel="stylesheet" type="text/css" media="screen" href="ie-win.css" />
<![endif]-->
<style type="text/css">
.recentcomments a{display:inline !important;padding: 0 !important;margin: 0 !important;}
</style>
</head>
<body>
<div id="wrapper2">
  <div id="header">
    <h1><a href="http://www.free-css.com/">IT Advance</a></h1>
    <div class="slogan">Free CSS Blog Template</div>
    <div class="icons"><img src="it-advance-images/icons.gif" alt="" usemap="#Map" border="0" height="15" width="64" />
      <map name="Map" id="Map">
        <area shape="rect" coords="3,-1,22,18" href="http://www.free-css.com/" />
        <area shape="rect" coords="24,0,44,16" href="http://www.free-css.com/" />
        <area shape="rect" coords="46,-1,68,18" href="http://www.free-css.com/" />
      </map>
    </div>
  </div>
  <div id="navigation">
    <ul>
      <li class="page_item"><a href="http://www.free-css.com/">Home</a></li>
      <li class="page_item page-item-2"><a href="http://www.free-css.com/">About</a></li>
      <li class="page_item page-item-14"><a href="http://www.free-css.com/">Contact</a></li>
      <li class="page_item page-item-21"><a href="http://www.free-css.com/">Installing a Theme</a></li>
    </ul>
  </div>
  <div id="wrapper">
    <div id="content-wrapper">
      <div id="content">
        <div class="post-wrapper">
          <div class="date"> <span class="month">Apr</span> <span class="day">01</span> </div>
          <div style="float: right; width: 395px; clear: right; margin-top: 10px; margin-bottom: 15px; padding-top: 10px; margin-left: 15px;"> <span class="titles"><a href="http://www.free-css.com/">IT Advance</a></span> </div>
          <div style="clear: both;"></div>
          <div class="post">
            <p>Sometimes less is more when it comes to great website designs. If you are looking for a simple, professional, and userfriendly design, this theme is for you!</p>
            <p>Sometimes less is more when it comes to great website designs. If you are looking for a simple, professional, and userfriendly design, this theme is for you!</p>
            <p>Sometimes less is more when it comes to great website designs. If you are looking for a simple, professional, and userfriendly design, this theme is for you!</p>
            <p>Sometimes less is more when it comes to great website designs. If you are looking for a simple, professional, and userfriendly design, this theme is for you!</p>
            <p>Sometimes less is more when it comes to great website designs. If you are looking for a simple, professional, and userfriendly design, this theme is for you!</p>
            <p>Sometimes less is more when it comes to great website designs. If you are looking for a simple, professional, and userfriendly design, this theme is for you!</p>
          </div>
          <div class="post-footer">Posted in <a href="http://www.free-css.com/">Free Themes</a> <strong>|</strong> <a href="http://www.free-css.com/">1 Comment </a></div>
        </div>
        <p class="pagination"><a href="http://www.free-css.com/"> Previous Entries</a> </p>
      </div>
    </div>
    <div id="sidebar-wrapper">
      <div id="sidebar">
        <div style="width: 239px; margin-left: -10px; height: 12px; background-image: url(it-advance-images/sidebar-top.gif);"></div>
        <div class="sideblock">
          <h3>Recent Posts</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Simplyorange</a></li>
            <li><a href="http://www.free-css.com/">Bluebar</a></li>
            <li><a href="http://www.free-css.com/">Trippygreen</a></li>
            <li><a href="http://www.free-css.com/">Grayband</a></li>
          </ul>
        </div>
        <div class="sideblock">
          <h3>Blogroll</h3>
          <ul>
            <li><a href="http://www.free-css.com/">Free Graphical Weblog Polls</a></li>
            <li><a href="http://www.free-css.com/">Free Wordpress Themes</a></li>
            <li><a href="http://www.free-css.com/">Website Templates</a></li>
          </ul>
        </div>
        <div style="width: 239px; margin-left: -10px; height: 14px; background-image: url(it-advance-images/sidebar-bottom.gif);"></div>
      </div>
    </div>
  </div>
  <div id="footer">
    <p> designed by: <a href="http://www.smartertemplates.com/">Smarter Templates</a></p>
  </div>
</div>
</body>
</html>

   
    
    
    
  








Related examples in the same category

1.grid-system
2.grotesqueart
3.grunge-superstar-website-template
4.guarantee
5.guideline
6.gumamela
7.gunmetal
8.h-free-software
9.h2o-bubbles
10.halcyon
11.hanging
12.hapal
13.happy_template
14.hardwarestore
15.hawaiblomst
16.heatwave
17.HelloLand
18.hexahedron
19.hibiscus
20.hifinews
21.HigherGround11
22.highmountains
23.highway
24.highwaycss
25.hilaryduff
26.HomeOfProjects
27.honeythemes
28.hyper
29.i-feel-lucky
30.ibex
31.html
32.html5-alin1
33.html5-passion
34.hurt-hobain-1.0
35.idyllic
36.ifeellucky
37.ignition
38.ikonik
39.illogix
40.illuminated
41.illusion
42.ilounge
43.imagination
44.impeccable
45.implied
46.imprimis
47.improved
48.in-fantasy
49.inapickle
50.inception
51.indication
52.indicator
53.indigo
54.individual
55.inf04-css
56.inf05
57.inf07
58.inf08
59.infinitehorizon
60.inflight
61.informatif
62.innodemag
63.inscriptions
64.inspired by google forum
65.instant
66.integral
67.intelligent-studios
68.intensesimplicity
69.interactive-media
70.interactive-works
71.interchange
72.intercosmic
73.intercraft
74.interior-art
75.interlude
76.intermediate
77.internationalway
78.internet-encyclopedia
79.internet-phenomenon
80.internetbroadcast
81.internetcenter
82.internetmusic
83.internetsharing
84.Internet_Studio
85.invention
86.Inverted_Headline
87.invision
88.ionika
89.iqbiz
90.isometric
91.it-technologies
92.itdesk
93.ithilien
94.iViolet2b
95.I_Like
96.JA
97.Jan002
98.Jazz Hut Template
99.jdf-boxing
100.jenniferlovehewitt
101.jetbiz
102.jet_30
103.Jewerly-Store
104.joker
105.judgement
106.junkbox
107.just-lucid
108.justgrey
109.Just_Lucid
110.kaleidos
111.kappebeans
112.katz-maus
113.keep_it_simple
114.keero
115.khaki
116.kim-fashion
117.kitchen
118.konnekt-media
119.KrazieKen
120.language-ofa-lover
121.lasvegas
122.lasvegastoo
123.layoftheland
124.lazybreeze
125.leafbiz
126.leafbrush
127.leanmagazine
128.leavesdew
129.leavesv1
130.lemonlimev2
131.leonardo
132.lepidoptera
133.lessantique
134.level2
135.librarypro
136.Light
137.lightspeed
138.limegreen
139.limelight
140.Limey
141.linear
142.lingerie-store
143.link-line
144.liquidity_graph
145.lithium
146.loadfoov2
147.loadhost
148.localize
149.locomotive
150.logistix
151.longbeach
152.loseout
153.lotusflower
154.lucent
155.lunaria-1
156.lusciouscandy
157.luvbold
158.mactall
159.mag
160.magazine
161.majestic
162.majesty
163.makemyday
164.marcelle
165.marked
166.Matrix
167.maxos
168.maxosdarker
169.mcube
170.meadows
171.media
172.Medieval
173.megacorporate
174.meganews
175.megazzine
176.memoranda
177.meretricious
178.Midddot
179.middle-blue
180.midnightrainforest
181.mighty
182.milestone
183.mimbo-magazine
184.minigallery
185.minimal