1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. 	<title>Twitionery</title>
  6. 	<style media="all" type="text/css">@import "css/all.css";</style>
  7. 	<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="css/lt7.css" media="screen"/><![endif]-->
  8. </head>
  9. <body>
  10. 	<!-- page -->
  11. 	<div id="page">
  12. 		<!-- header -->
  13. 		<div class="header">
  14. 			<!-- logo -->
  15. 			<h1 class="logo"><a href="#">Twitionery</a></h1>
  16. 			<div class="header-inn">
  17. 				<p>Not a member?  <a href="#">Get Started!</a></p>
  18. 				<form action="#">
  19. 					<div class="login">
  20. 						<div class="area">
  21. 							<input type="text" value="Login" class="text" />
  22. 							<input type="text" value="Password" class="text" />
  23. 						</div>
  24. 						<div class="holder"><label><input type="checkbox" checked="checked" class="check" />remember me</label>	</div>					
  25. 					</div>
  26. 				</form>
  27. 			</div>
  28. 		</div>
  29. 		<!-- content -->
  30. 		<div class="primary-content">
  31. 			<div class="main-col">
  32. 				<div class="promo">
  33. 					<div class="promo-img">
  34. 						<a href="#"><img src="images/img1.jpg" alt="#" /></a>
  35. 					</div>
  36. 					<p>“Quicken Loans”  <a href="#">view all backgrounds</a></p>
  37. 				</div>
  38. 				<h2 class="popular-backgrounds">popular backgrounds</h2>
  39. 				<ul class="list">
  40. 					<li>
  41. 						<ul>
  42. 							<li class="on"><a href="#">&nbsp;</a></li>
  43. 							<li class="on"><a href="#">&nbsp;</a></li>
  44. 							<li class="on"><a href="#">&nbsp;</a></li>
  45. 							<li class="on"><a href="#">&nbsp;</a></li>
  46. 							<li class="half"><a href="#">&nbsp;</a></li>
  47. 						</ul>
  48. 						<div><a href="#"><img src="images/img2.jpg" alt="#" /></a></div>
  49. 					</li>
  50. 					<li>
  51. 						<ul>
  52. 							<li class="on"><a href="#">&nbsp;</a></li>
  53. 							<li class="on"><a href="#">&nbsp;</a></li>
  54. 							<li class="on"><a href="#">&nbsp;</a></li>
  55. 							<li class="on"><a href="#">&nbsp;</a></li>
  56. 							<li class="half"><a href="#">&nbsp;</a></li>
  57. 						</ul>
  58. 						<div><a href="#"><img src="images/img3.jpg" alt="#" /></a></div>
  59. 					</li>
  60. 					<li>
  61. 						<ul>
  62. 							<li class="on"><a href="#">&nbsp;</a></li>
  63. 							<li class="on"><a href="#">&nbsp;</a></li>
  64. 							<li class="on"><a href="#">&nbsp;</a></li>
  65. 							<li class="half"><a href="#">&nbsp;</a></li>
  66. 							<li><a href="#">&nbsp;</a></li>
  67. 						</ul>
  68. 						<div><a href="#"><img src="images/img4.jpg" alt="#" /></a></div>
  69. 					</li>
  70. 					<li>
  71. 						<ul>
  72. 							<li class="on"><a href="#">&nbsp;</a></li>
  73. 							<li class="on"><a href="#">&nbsp;</a></li>
  74. 							<li class="on"><a href="#">&nbsp;</a></li>
  75. 							<li class="on"><a href="#">&nbsp;</a></li>
  76. 							<li class="half"><a href="#">&nbsp;</a></li>
  77. 						</ul>
  78. 						<div><a href="#"><img src="images/img2.jpg" alt="#" /></a></div>
  79. 					</li>
  80. 					<li>
  81. 						<ul>
  82. 							<li class="on"><a href="#">&nbsp;</a></li>
  83. 							<li class="on"><a href="#">&nbsp;</a></li>
  84. 							<li class="on"><a href="#">&nbsp;</a></li>
  85. 							<li class="on"><a href="#">&nbsp;</a></li>
  86. 							<li class="half"><a href="#">&nbsp;</a></li>
  87. 						</ul>
  88. 						<div><a href="#"><img src="images/img3.jpg" alt="#" /></a></div>
  89. 					</li>
  90. 					<li>
  91. 						<ul>
  92. 							<li class="on"><a href="#">&nbsp;</a></li>
  93. 							<li class="on"><a href="#">&nbsp;</a></li>
  94. 							<li class="on"><a href="#">&nbsp;</a></li>
  95. 							<li class="half"><a href="#">&nbsp;</a></li>
  96. 							<li><a href="#">&nbsp;</a></li>
  97. 						</ul>
  98. 						<div><a href="#"><img src="images/img4.jpg" alt="#" /></a></div>
  99. 					</li>
  100. 				</ul>
  101. 				<h2 class="latest-backgrounds">latest backgrounds</h2>
  102. 				<ul class="list">
  103. 					<li>
  104. 						<ul>
  105. 							<li class="on"><a href="#">&nbsp;</a></li>
  106. 							<li class="on"><a href="#">&nbsp;</a></li>
  107. 							<li class="on"><a href="#">&nbsp;</a></li>
  108. 							<li class="on"><a href="#">&nbsp;</a></li>
  109. 							<li class="half"><a href="#">&nbsp;</a></li>
  110. 						</ul>
  111. 						<div><a href="#"><img src="images/img2.jpg" alt="#" /></a></div>
  112. 					</li>
  113. 					<li>
  114. 						<ul>
  115. 							<li class="on"><a href="#">&nbsp;</a></li>
  116. 							<li class="on"><a href="#">&nbsp;</a></li>
  117. 							<li class="on"><a href="#">&nbsp;</a></li>
  118. 							<li class="on"><a href="#">&nbsp;</a></li>
  119. 							<li class="half"><a href="#">&nbsp;</a></li>
  120. 						</ul>
  121. 						<div><a href="#"><img src="images/img3.jpg" alt="#" /></a></div>
  122. 					</li>
  123. 					<li>
  124. 						<ul>
  125. 							<li class="on"><a href="#">&nbsp;</a></li>
  126. 							<li class="on"><a href="#">&nbsp;</a></li>
  127. 							<li class="on"><a href="#">&nbsp;</a></li>
  128. 							<li class="half"><a href="#">&nbsp;</a></li>
  129. 							<li><a href="#">&nbsp;</a></li>
  130. 						</ul>
  131. 						<div><a href="#"><img src="images/img4.jpg" alt="#" /></a></div>
  132. 					</li>
  133. 					<li>
  134. 						<ul>
  135. 							<li class="on"><a href="#">&nbsp;</a></li>
  136. 							<li class="on"><a href="#">&nbsp;</a></li>
  137. 							<li class="on"><a href="#">&nbsp;</a></li>
  138. 							<li class="on"><a href="#">&nbsp;</a></li>
  139. 							<li class="half"><a href="#">&nbsp;</a></li>
  140. 						</ul>
  141. 						<div><a href="#"><img src="images/img2.jpg" alt="#" /></a></div>
  142. 					</li>
  143. 					<li>
  144. 						<ul>
  145. 							<li class="on"><a href="#">&nbsp;</a></li>
  146. 							<li class="on"><a href="#">&nbsp;</a></li>
  147. 							<li class="on"><a href="#">&nbsp;</a></li>
  148. 							<li class="on"><a href="#">&nbsp;</a></li>
  149. 							<li class="half"><a href="#">&nbsp;</a></li>
  150. 						</ul>
  151. 						<div><a href="#"><img src="images/img3.jpg" alt="#" /></a></div>
  152. 					</li>
  153. 					<li>
  154. 						<ul>
  155. 							<li class="on"><a href="#">&nbsp;</a></li>
  156. 							<li class="on"><a href="#">&nbsp;</a></li>
  157. 							<li class="on"><a href="#">&nbsp;</a></li>
  158. 							<li class="half"><a href="#">&nbsp;</a></li>
  159. 							<li><a href="#">&nbsp;</a></li>
  160. 						</ul>
  161. 						<div><a href="#"><img src="images/img4.jpg" alt="#" /></a></div>
  162. 					</li>
  163. 				</ul>
  164. 			</div>
  165. 			<div class="sidebar">
  166. 				<ul class="menu">
  167. 					<li><a href="#">Home</a></li>
  168. 					<li><a href="#">Get started</a></li>
  169. 					<li><a href="#">Support</a></li>
  170. 					<li><a href="#">FAQ</a></li>
  171. 					<li><a href="#">CONTACT</a></li>
  172. 				</ul>
  173. 				<h3 class="last-tweet">Last Tweet</h3>
  174. 				<div class="last">
  175. 					<p>
  176. 						Can anyone find other words to express themselves about this besides explicatives? 
  177. 						<a href="#">» link to Feds spending millions on Kennedy legacy in Mass</a>. 
  178. 						<a href="#">I can't #tcot</a>
  179. 					</p>
  180. 					<span class="button-box"><a href="#">Follow us on Twitter</a></span>
  181. 				</div>
  182. 				<h3 class="tags">Tags</h3>
  183. 				<ul class="tags-list">
  184. 					<li><a href="#">Главное</a></li>
  185. 					<li><a href="#">События</a></li>
  186. 					<li><a href="#">Дело</a></li>
  187. 					<li><a href="#">Семья</a></li>
  188. 					<li><a href="#">Здоровье</a></li>
  189. 					<li class="size1"><a href="#">Автомобиль</a></li>
  190. 					<li><a href="#">Lifestyle</a></li>
  191. 					<li><a href="#">Медиа</a></li>
  192. 					<li><a href="#">Хобби</a></li>
  193. 					<li><a href="#">Украина</a></li>
  194. 					<li><a href="#">Карьера</a></li>
  195. 					<li><a href="#">Дом</a></li>
  196. 					<li><a href="#">Новости</a></li>
  197. 					<li><a href="#">Новинки</a></li>
  198. 					<li class="size1"><a href="#">Клуб</a></li>
  199. 					<li class="size1"><a href="#">Кино</a></li>
  200. 					<li><a href="#">Охота</a></li>
  201. 					<li><a href="#">Европа</a></li>
  202. 					<li><a href="#">Бизнес</a></li>
  203. 					<li><a href="#">Дети</a></li>
  204. 				</ul>
  205. 				<form action="#">
  206. 					<div class="search">
  207. 						<div>
  208. 							<input type="text" value="Search" class="text" />
  209. 							<input type="image" src="images/search-btn.gif" alt="search" class="button" />
  210. 						</div>	
  211. 					</div>
  212. 				</form>
  213. 			</div>
  214. 		</div>
  215. 		<!-- footer -->
  216. 		<div class="footer">
  217. 			<p>&copy; Copyright 2009 Twitionary.com | <strong>designed by <a href="#">www.kavoon.com</a></strong></p>
  218. 			<p>
  219. 				Use of this Web site constitutes acceptance of the Twitonary 
  220. 				<a href="#">User Agreement</a> and <a href="#">Privacy Policy</a>.
  221. 			</p>
  222. 		</div>
  223. 	</div>
  224. 	<div class="cloud1">cloud background</div>
  225. 	<div class="cloud2">cloud background</div>
  226. 	<div class="cloud3">cloud background</div>
  227. 	<div class="cloud4">cloud background</div>
  228. 	<div class="cloud5">cloud background</div>
  229. 	<div class="cloud6">cloud background</div>
  230. 	<div class="cloud7">cloud background</div>
  231. </body>
  232. </html>