communication-co : Design 3 « Templates « HTML / CSS

communication-co

   

<!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>
<title>Communication Co. - About</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body{ margin:0px; padding:0px; background:#A0A0A3;}
p{ margin:0px; padding:0px;}
img{ border:0px;}

#mainblock{  width:1000px; margin: auto;}
#innerblock{ width:1000px; float:left; background:#fff;}


a:hover{ text-decoration: underline;}
.topblock{ display:inline; clear:left; float:left;  width:1000px;}
.tp_bg1{ display:inline; clear:left; float:left; background: url(communication-co-images/tp_bg1.jpg) no-repeat; width:582px; height:317px;}
.tp_abt_bg1{ display:inline; clear:left; float:left; background: url(communication-co-images/tp_abt_bg1.jpg) no-repeat; width:1000px; height:125px;}
.tp_logo{ clear:left; float:left; margin:22px 0px 0px 68px;}
.tp_hme{ float:left; width:70px; font: bold 11px/15px arial; color:#666768; margin:28px 0px 0px 69px; text-decoration:none;}
.tp_hme1{ float:left; width:75px; font: bold 11px/15px arial; color:#666768; margin:28px 0px 0px 30px; text-decoration:none;}
.tp_are{ clear:left; float:left; margin:206px 0px 0px 336px;}
.tp_bg2{  display:inline; float:left; background: url(communication-co-images/tp_bg2.jpg) no-repeat; width:418px; height:317px;}
.tp_bg3{ display:inline; clear: left; float:left;  background: url(communication-co-images/tp_bg3.jpg) no-repeat; width:950px; height:60px; padding:0 0 0 50px; }
.abt_tp_bg3{ display:inline; clear: left; float:left;  background: url(communication-co-images/abt_tp_bg3.jpg) no-repeat; width:1000px; height:60px; }
.tp_abt{ float:left; width:60px; font: bold 11px/15px arial; color:#666768; margin:28px 0px 0px 55px; text-decoration:none;}
.tp_abt1{ float:left; width:60px; font: bold 11px/15px arial; color:#666768; margin:28px 0px 0px 20px; text-decoration:none;}
.tp_cont{ float:left; width:85px; font: bold 11px/15px arial; color:#666768; margin:28px 0px 0px 40px; text-decoration:none;}
.tp_cont1{ float:left; width:100px; font: bold 11px/15px arial; color:#666768; margin:28px 0px 0px 20px; text-decoration:none;}
.abt_hme{ clear:left; float:left; width:70px; font: bold 11px/15px arial; color:#666768; margin:45px 0px 0px 15px; text-decoration:none;}
.abt_abt{ float:left; width:72px; font: bold 11px/15px arial; color:#382900; margin:43px 0px 0px 33px; text-decoration:none;}
.sch_box{ float:left; width:140px; height:20px; background:#F2F2F2; border:1px solid #C6C3C3; margin:25px 0px 0px 0px; border-left:0; color:#515253; font:13px CenturyGothic;}
.sch_but{ float:left; margin:25px 0px 0px 0px;}
.nv_tx{ float:left; font: bold 11px/15px arial; color:#666768; padding:25px 30px 0 30px; text-decoration:none; background:url(communication-co-images/nv_ln.gif) no-repeat right; height:35px; }
.nv_tx:hover{ background:url(communication-co-images/til_nv.gif) repeat-x; float:left; font: bold 11px/15px arial; color:#666768; padding:25px 30px 0 30px; text-decoration:none; height:35px; }
.nv_tx1{ background:url(communication-co-images/til_nv.gif) repeat-x; float:left; font: bold 11px/15px arial; color:#666768; padding:25px 30px 0 30px; text-decoration:none; height:35px; }



.hme_map_bg{ clear:left; float:left; width:63px; height:18px; background: url(communication-co-images/hme_map_bg.gif) no-repeat; margin:27px 0px 0px 154px;}
.hme_map_bg2{ float:left; width:63px; height:18px; background: url(communication-co-images/hme_map_bg.gif) no-repeat; margin:27px 0px 0px 10px;}
.map_hme{ clear:left; float:left; width:60px; font: 11px/15px arial; color:#959595; margin:2px 0px 0px 15px; text-decoration:none; }

.center_panel{ display: inline; clear:left; float:left; width:908px;  padding-bottom:20px; margin-left:46px;}
.center_bg1{ clear:left; float:left; width:274px; height:185px; background:url(communication-co-images/center_bg1.jpg) no-repeat; margin:15px 0px 0px 0px;}
.best_arw{ clear:left; float:left; margin:10px 0px 0px 25px;}
.lp_best{ float:left; margin:15px 0px 10px 10px;} 
.best_txt{ float:left; width:221px; font: 11px/15px arial; color:#145360; margin:25px 0px 0px 25px; text-decoration:none; }
.best_read{ clear:left; float:left; width:60px; font: 11px/15px arial; color:#1D8FB9; margin:50px 0px 0px 25px; text-decoration:none; }
.best_txt1{ float:left; width:221px; font: 11px/15px arial; color:#2D3539; margin:25px 0px 0px 25px; text-decoration:none; }
.solu_read{ clear:left; float:left; width:60px; font: 11px/15px arial; color:#2D3539; margin:40px 0px 0px 25px; text-decoration:none; }
.news_arw{ clear:left; float:left; margin:15px 0px 0px 25px;}
.news_txt{ float:left; width:210px; font: 11px/15px arial; color:#fff; margin:10px 0px 0px 10px; text-decoration:none; }
.best_arw1{ clear:left; float:left; margin:10px 0px 0px 20px;}
.read_arw{ float:left; margin:4px 0px 0px 10px;} 
.safe_txt{ clear:left; float:left; width:218px; font: 11px/15px arial; color:#79794B; margin:10px 0px 0px 20px; text-decoration:none; }
.center_bg2{ float:left; width:274px; height:185px; background:url(communication-co-images/center_bg2.jpg) no-repeat; margin:15px 0px 0px 30px;}
.center_bg3{ float:left; width:274px; height:185px; background:url(communication-co-images/center_bg3.jpg) no-repeat; margin:15px 0px 0px 30px;}

.cp_div{ display: inline; clear:left; float:left; width:937px; margin-left:43px; padding-bottom:20px; }
.lp_div{ display:inline; clear:left; float:left; width:608px; }
.lp_wel{ clear:left; float:left; margin:42px 0px 0px 0px;}
.wel_txt{ clear:left; float:left; width:569px; font: 11px/15px arial; color:#2D3539; margin:15px 0px 0px 0px; text-decoration:none;}
.wel_line{ clear:left; float:left; margin:20px 0px 0px 0px;}
.spl_txt{ clear:left; float:left; width:200px; font: 11px/15px arial; color:#238AB0; margin:15px 0px 0px 0px; text-decoration:none;}
.spl_arw{ clear:left; float:left; margin:10px 0px 0px 0px;}
.spl_txt2{ float:left; width:270px; font: 11px/15px arial; color:#238AB0; margin:5px 0px 0px 15px; text-decoration:none;}

.rp_div{ display:inline; float:left; width:260px; margin-left:15px; }
.rp_lates{ clear:left; float:left; margin:20px 0px 0px 0px;}
.news_title{ clear:left; float:left; width:80px; font: bold 11px/15px arial; color:#F05B12; margin:15px 0px 0px 0px; text-decoration:none;}
.news_date_txt{ clear:left; float:left; width:245px; font: 11px/15px arial; color:#000; margin:15px 0px 0px 0px; text-decoration:none;}
.testi_quote{ clear:left; float:left; margin:15px 0px 0px 0px;}
.testi_quote2{ clear:left; float:left; margin:15px 0px 0px 180px;}

.few_arw{ clear:left; float:left; margin:10px 0px 0px 0px;}
.few_txt{ float:left; width:300px; font: 11px/15px arial; color:#238AB0; margin:5px 0px 0px 10px; text-decoration:none;}
.comp_img{ clear:left; float:left; margin:15px 0px 0px 0px;}


.rp_abt_img{ clear:left; float:left; margin:20px 0px 0px 0px;}
.abt_txt1{ clear:left; float:left; width:400px; font: 11px/15px arial; color:#969381; margin:20px 0px 0px 15px; text-decoration:none;}
.lates_bg{ clear:left; float:left; width:296px; height:388px;  background:url(communication-co-images/lates_bg.gif) no-repeat; margin:15px 0px 0px 0px;}
.lates_date{ clear:left; float:left; width:40px; font: 11px/15px arial; color:#000; margin:20px 0px 0px 25px; text-decoration:none; }
.lates_txt{ float:left; width:171px; font: 11px/15px arial; color:#000; margin:15px 0px 0px 15px; text-decoration:none; }
.lates_more{ clear:left; float:left; width:145px; font: 11px/15px arial; color:#000; margin:15px 0px 0px 25px; text-decoration:none;}

.ft_bg{ display: inline; clear:left; float:left; width:1000px; background: url(communication-co-images/ft_1px.gif) repeat-x; height:137px;}
.ft_bar{ float:left; margin:32px 0px 0px 15px;}
.ft_home{ clear:left; float:left; width:40px; font: 11px/15px tahoma; color:#828181; margin:29px 0px 0px 320px; text-decoration:none; }
.ft_dom{ float:left; width:65px; font: 11px/15px tahoma; color:#828181; margin:29px 0px 0px 15px; text-decoration:none;}
.ft_copy{ clear:left; float:left; width:290px; font: 11px/15px tahoma; color:#828181; margin:8px 0px 0px 440px;}
.ft_dom1{ float:left; width:70px; font: 11px/15px tahoma; color:#828181; margin:29px 0px 0px 15px; text-decoration:none;}
.ft_spl{ float:left; width:50px; font: 11px/15px tahoma; color:#828181; margin:29px 0px 0px 15px; text-decoration:none;}

.form_blk{ width:500px; float:left; margin:20px 0 0 0; padding-bottom:30px; } 
  
.form_text span { font: bold 11px Tahoma; color:#727E80; float:left; text-align:right; width:125px; margin:35px 0 0 0; }

.form_text input { width:270px; height:20px; float:left; margin:35px 0 0 10px; font:11px Verdana, Arial, Helvetica, sans-serif; color:#000; border:1px solid #727E80; }

.form_text textarea{ width:270px; border:1px solid #919191; float:left; margin:15px 0 0 10px; font:11px Verdana, Arial, Helvetica, sans-serif; border:1px solid #727E80; }

.sbmt{ margin:20px 0 0 190px; float:left; width:70px; background:#727E80; color:#fff; }

.title{ color:#263D49; font: bold 18px Arial, Helvetica, sans-serif; clear:left; float:left; margin:42px 0px 0px 0px; width:300px;  }

.title span{ color:#727E80; font: bold 18px Arial, Helvetica, sans-serif; }



</style>


</head>
<body>
<!--main block starts here -->
<div id="mainblock">
  <!--inner block starts here -->
  <div id="innerblock">
    <!--top block starts here -->
    <div class="topblock">
      <div class="tp_bg1"> <a href="http://www.free-css.com/" class="tp_logo"><img src="communication-co-images/tp_logo.gif" width="279" height="39" alt="" /></a> <img src="communication-co-images/tp_are.gif" width="246" height="28" alt="" class="tp_are" /> </div>
      <span class="tp_bg2"> <span class="hme_map_bg"> <a href="http://www.free-css.com/" class="map_hme">Home</a> </span> <span class="hme_map_bg2"> <a href="http://www.free-css.com/" class="map_hme">Site Map</a> </span> <span class="hme_map_bg2"> <a href="http://www.free-css.com/" class="map_hme">Contact</a> </span> </span>
      <div class="tp_bg3"> <a href="http://www.free-css.com/" class="nv_tx">Home Page</a> <a href="about.html" class="nv_tx1">About Us</a> <a href="http://www.free-css.com/" class="nv_tx">Services</a> <a href="http://www.free-css.com/" class="nv_tx">Projects</a> <a href="http://www.free-css.com/" class="nv_tx">Clients</a> <a href="http://www.free-css.com/" class="nv_tx">Contacts</a> <img src="communication-co-images/sc_lf.gif" alt="" width="13" height="24" style="float:left; margin:25px 0px 0px 45px;" />
        <input name="#" type="text" class="sch_box" value="Search"  />
        <a href="http://www.free-css.com/" class="sch_but"><img src="communication-co-images/sch_but.gif" width="32" height="23" alt="" /></a> </div>
      <div class="center_panel"> <span class="center_bg1"> <img src="communication-co-images/inn_arr.gif" width="26" height="20" alt="" class="best_arw" /> <img src="communication-co-images/cp_inn.gif" width="77" height="12" alt="" class="lp_best" /><br />
        <span class="best_txt">Mauris pharetra, mauris eu ullamcorper rutrum, lectus purus dapibus ligula, non elementum risus nunc et arcu. </span><br />
        <a href="http://www.free-css.com/" class="best_read">Read More</a> </span> <span class="center_bg2"> <img src="communication-co-images/best_arw.gif" width="27" height="21" alt="" class="best_arw" /> <img src="communication-co-images/cp_best.gif" width="96" height="12" alt="" class="lp_best" /><br />
        <span class="best_txt1">Sed vitae leo nec nibh sagittis dapibus. Phasellus eleifend gravida urna. Pellentesque eget velit. Vestibulum malesuada eleifend neque. Integer vitae mauris. </span><br />
        <a href="http://www.free-css.com/" class="solu_read">Read More</a> </span> <span class="center_bg3"> <img src="communication-co-images/new_arw.gif" width="23" height="26" alt="" class="best_arw" /> <img src="communication-co-images/lp_new.gif" width="110" height="15" alt="" class="lp_best" /><br />
        <img src="communication-co-images/news_arw.gif" width="3" height="3" alt="" class="news_arw" /> <a href="http://www.free-css.com/" class="news_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a><br />
        <img src="communication-co-images/news_arw.gif" width="3" height="3" alt="" class="news_arw" /> <a href="http://www.free-css.com/" class="news_txt">Morbi interdum dictum metus.</a><br />
        <img src="communication-co-images/news_arw.gif" width="3" height="3" alt="" class="news_arw" /> <a href="http://www.free-css.com/" class="news_txt">Ut sed ipsum eu sapien dignissim lobortis.</a><br />
        <img src="communication-co-images/news_arw.gif" width="3" height="3" alt="" class="news_arw" /> <a href="http://www.free-css.com/" class="news_txt">Donec volutpat est in erat.</a><br />
        </span> </div>
    </div>
    <!--top block ends here -->
    <!--content panel starts here -->
    <div class="cp_div">
      <div class="lp_div"> <span class="title">A few words <span>about company</span></span><br />
        <span class="wel_txt"><a href="http://www.free-css.com/" style="color:#2D9BC4;"><b>Mauris pharetra, mauris eu ullamcorper rutrum,</b></a> lectus purus dapibus ligula, non elementum risus nunc et arcu. Sed at ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In et enim. Donec eu mi eget lacus hendrerit semper. Integer in augue non lorem pretium rutrum.Praesent volutpat mi eget elit. Sed felis. Duis enim erat, aliquet ac, varius vitae, tincidunt at, metus. Maecenas posuere.<br />
        <br />
        Integer vitae erat quis ipsum ullamcorper sollicitudin. Ut in arcu. Suspendisse tincidunt mollis tellus. Duis venenatis lacus sed leo. Aliquam vitae dui. Pellentesque diam metus, pulvinar vitae, tempor eu, gravida sit amet, felis. Aliquam luctus. Sed dolor augue, consequat eu, laoreet at, volutpat ut, nulla. Nunc iaculis elementum mi. </span><br />
        <img src="communication-co-images/few_arw.gif" width="13" height="11" alt="" class="few_arw" /> <a href="http://www.free-css.com/" class="few_txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a> <img src="communication-co-images/few_arw.gif" width="13" height="11" alt="" class="few_arw" /> <a href="http://www.free-css.com/" class="few_txt">Donec consectetur quam at nisi.</a> <img src="communication-co-images/few_arw.gif" width="13" height="11" alt="" class="few_arw" /> <a href="http://www.free-css.com/" class="few_txt">Cras sed sem eu velit interdum aliquam.</a> <img src="communication-co-images/few_arw.gif" width="13" height="11" alt="" class="few_arw" /> <a href="http://www.free-css.com/" class="few_txt">Curabitur in augue in sapien eleifend dictum.</a> <img src="communication-co-images/wel_line.gif" width="559" height="1" alt="" class="wel_line" /><br />
        <img src="communication-co-images/lp_std.gif" width="111" height="14" alt="" class="lp_wel" /><br />
        <span class="wel_txt"><a href="http://www.free-css.com/" style="color:#2D9BC4;"><b>Mauris pharetra, mauris eu ullamcorper rutrum,</b></a> lectus purus dapibus ligula, non elementum risus nunc et arcu. Sed at ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
        <br />
        Suspendisse tincidunt mollis tellus. Duis venenatis lacus sed leo. Aliquam vitae dui. Pellentesque diam metus, pulvinar vitae, tempor eu, gravida sit amet, felis. Aliquam luctus.</span> </div>
      <div class="rp_div"> <img src="communication-co-images/rp_comp.gif" width="128" height="17" alt="" class="rp_lates" /><br />
        <img src="communication-co-images/comp_img.gif" width="248" height="71" alt="" class="comp_img" /> <span class="news_date_txt"><a href="http://www.free-css.com/" style="color:#2D3539;">Lorem ipsum</a> dolor sit amet, consecte adipiscing elit. Maecenas eros. Morbi est diam, scelerisque at. Quisque sed turpis. Mauris pretium odio sed nunc. Maecenas pulvina.Tiam pellentesque elit eget neque. Pellentesque sed turpis. <br />
        <br />
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus imperdiet purus et nisi.</span> <img src="communication-co-images/rp_cust.gif" width="276" height="95"  alt="" class="rp_lates" /><br />
      </div>
    </div>
    <!--content panel ends here -->
    <!--footer panel starts here -->
    <div class="ft_bg"> <a href="http://www.free-css.com/" class="ft_home">Main</a> <img src="communication-co-images/ft_bar.gif"  width="1" height="11" alt="" class="ft_bar" /> <a href="about.html" class="ft_dom">About Us</a> <img src="communication-co-images/ft_bar.gif"  width="1" height="11" alt="" class="ft_bar" /> <a href="http://www.free-css.com/" class="ft_spl">Services</a> <img src="communication-co-images/ft_bar.gif"  width="1" height="11" alt="" class="ft_bar" /> <a href="http://www.free-css.com/" class="ft_spl">Projects</a> <img src="communication-co-images/ft_bar.gif"  width="1" height="11" alt="" class="ft_bar" /> <a href="http://www.free-css.com/" class="ft_spl">Clients</a> <img src="communication-co-images/ft_bar.gif"  width="1" height="11" alt="" class="ft_bar" /> <a href="http://www.free-css.com/" class="ft_dom">Contacts</a> <span class="ft_copy">&copy; Copyright 2008, All rights reserved.</span> </div>
    <br />
    <br />
    <!--footer panel ends here -->
  </div>
  <!--inner block ends here -->
</div>
<!--main block ends here -->
</body>
</html>

Related examples in the same category

1.	blankspace
2.	Blasphemy
3.	blended
4.	blewwave
5.	blootoon
6.	blush
7.	boardroom
8.	BOOM
9.	boorish
10.	boosting
11.	bordered
12.	boswell
13.	bounderies
14.	boxedtype
15.	boxes_template
16.	boxybox
17.	branches
18.	breaking_ontop
19.	brewedcoffee
20.	brightfolio
21.	brightsideoflife1.0
22.	Broadcaster
23.	broadsheet
24.	brycesunrise
25.	bucolic
26.	burgeon
27.	buzz
28.	BW
29.	bwdec2007
30.	calliope
31.	callofduty2
32.	candiiclouds
33.	cantya-studio
34.	canuckington-post
35.	canvass
36.	capricious
37.	capsicum
38.	carbonated
39.	carbonizer
40.	carlmelon
41.	caronline
42.	carrera
43.	castellated
44.	catch_info
45.	cattleya
46.	center-stage
47.	COIL
48.	col1
49.	col2
50.	col3
51.	collaboration
52.	collectiveblue
53.	collegemusic
54.	colorus
55.	colosseum
56.	columna
57.	combination
58.	ComingSoon
59.	commission
60.	communication-1.0
61.	communication
62.	community-live
63.	compiled
64.	complete-collection
65.	complimentary
66.	component
67.	compressed
68.	compromise
69.	compus
70.	conceptnova
71.	concrete
72.	concurrence
73.	condition
74.	conglomerate
75.	conjunction
76.	connection
77.	connections
78.	consulting-co
79.	contemplate
80.	convergence
81.	cookiefusion
82.	Copy of modify
83.	corporattica
84.	Cosmopolitan
85.	counterstrike
86.	cover
87.	coverage
88.	coxswain
89.	creamburn
90.	crisp2
91.	criterion
92.	crystalblack
93.	css-heaven-1
94.	cssgallery
95.	cssheaven-2
96.	cssmajesty
97.	cubismo
98.	cultivated
99.	cultureshock
100.	cupofcoffee
101.	customary
102.	customize
103.	cyano
104.	cyanspark
105.	cyberarray
106.	daleri-mega
107.	daleri-structure
108.	dalmatians
109.	danmyaz1
110.	dapple
111.	david-kruger
112.	deardiary
113.	decorative
114.	deepimpact
115.	deerpark
116.	dekada
117.	delta
118.	delzep_enterprise
119.	description
120.	deserted
121.	desertsand
122.	design-gallery
123.	design-studio
124.	design10
125.	Design9
126.	designersstudio
127.	designersworld
128.	designgalo
129.	designhq
130.	designstudio
131.	Design_Agency
132.	deskspace
133.	detachable
134.	deviation
135.	devision
136.	dewdrops
137.	dezinstudio
138.	didactic
139.	Did_My_Time
140.	differential
141.	digitalweb
142.	dimension
143.	diminishing
144.	dirtylicious
145.	disambiguation
146.	discovery
147.	distillate
148.	distinctive
149.	diversity
150.	DJ