API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Aug 16th, 2012
362
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.19 KB | None | 0 0
raw download clone embed print report
  1. css:
  2.  
  3.  
  4. .header {
  5. background-image: url("../img/header.png");
  6. width: 100%;
  7. height: 79px;
  8. }
  9.  
  10. .secondheader {
  11. background-image: url("../img/second.png");
  12. width: 100%;
  13. height: 66px;
  14. border-bottom: solid 6px #f0e8ce;
  15. }
  16.  
  17. .thirdheader {
  18. background-image: url("../img/bhead3.png");
  19. width: 100%;
  20. height: 60px;
  21. border-bottom: solid 6px #f6f6f6;
  22. }
  23.  
  24. @font-face {
  25. font-family: telegrafico;
  26. src: url(‘telegrafico.ttf’);
  27. }
  28.  
  29. #fontfamily1 {
  30. color: #747272;
  31. font-family: telegrafico;
  32. font-size: 18px;
  33. float: left;
  34. }
  35.  
  36. #lines {
  37. cursor: default;
  38. float: right;
  39. position: relative;
  40. bottom: 19px;
  41. left: 2px;
  42. }
  43. #lines1 {
  44. cursor: default;
  45. float: right;
  46. position: relative;
  47. bottom: 19px;
  48. left: 1px;
  49. }
  50.  
  51. /* Boxes row 1 */
  52. #box1 {
  53. background: rgb(232,232,232); /* Old browsers */
  54. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  55. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  56. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  57. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  58. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  59. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  60. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  61. width: 219px;
  62. height: 269px;
  63. border: solid 1px #bcbcbc;
  64. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  65. box-shadow: inset 0px 0px 0px 1px #ffffff;
  66. }
  67. #box2 {
  68. background: rgb(232,232,232); /* Old browsers */
  69. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  70. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  71. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  72. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  73. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  74. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  75. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  76. width: 219px;
  77. height: 269px;
  78. border: solid 1px #bcbcbc;
  79. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  80. box-shadow: inset 0px 0px 0px 1px #ffffff;
  81. }
  82. #box3 {
  83. background: rgb(232,232,232); /* Old browsers */
  84. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  85. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  86. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  87. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  88. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  89. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  90. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  91. width: 219px;
  92. height: 269px;
  93. border: solid 1px #bcbcbc;
  94. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  95. box-shadow: inset 0px 0px 0px 1px #ffffff;
  96. }
  97. #box4 {
  98. background: rgb(232,232,232); /* Old browsers */
  99. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  100. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  101. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  102. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  103. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  104. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  105. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  106. width: 219px;
  107. height: 269px;
  108. border: solid 1px #bcbcbc;
  109. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  110. box-shadow: inset 0px 0px 0px 1px #ffffff;
  111. }
  112.  
  113. /* Boxes row 2 */
  114.  
  115. #box5 {
  116. background: rgb(232,232,232); /* Old browsers */
  117. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  118. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  119. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  120. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  121. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  122. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  123. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  124. width: 219px;
  125. height: 269px;
  126. border: solid 1px #bcbcbc;
  127. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  128. box-shadow: inset 0px 0px 0px 1px #ffffff;
  129. }
  130. #box6 {
  131. background: rgb(232,232,232); /* Old browsers */
  132. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  133. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  134. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  135. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  136. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  137. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  138. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  139. width: 219px;
  140. height: 269px;
  141. border: solid 1px #bcbcbc;
  142. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  143. box-shadow: inset 0px 0px 0px 1px #ffffff;
  144. }
  145. #box7 {
  146. background: rgb(232,232,232); /* Old browsers */
  147. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  148. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  149. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  150. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  151. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  152. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  153. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  154. width: 219px;
  155. height: 269px;
  156. border: solid 1px #bcbcbc;
  157. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  158. box-shadow: inset 0px 0px 0px 1px #ffffff;
  159. }
  160. #box8 {
  161. background: rgb(232,232,232); /* Old browsers */
  162. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  163. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  164. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  165. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  166. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  167. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  168. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  169. width: 219px;
  170. height: 269px;
  171. border: solid 1px #bcbcbc;
  172. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  173. box-shadow: inset 0px 0px 0px 1px #ffffff;
  174. }
  175.  
  176. /* Pages */
  177. #page1 {
  178. background: rgb(232,232,232); /* Old browsers */
  179. background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
  180. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232,232,232,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
  181. background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
  182. background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
  183. background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
  184. background: linear-gradient(to bottom, rgba(232,232,232,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
  185. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
  186. width: 30px;
  187. height: 28px;
  188. border: solid 1px #bcbcbc;
  189. -webkit-box-shadow: inset 0px 0px 0px 1px #ffffff;
  190. box-shadow: inset 0px 0px 0px 1px #ffffff;
  191. -webkit-border-radius: 3px;
  192. border-radius: 3px;
  193. text-align: center;
  194. padding-top: 10px;
  195. padding-bottom: 5px;
  196.  
  197. }
  198.  
  199. .navigation {
  200. display:inline;
  201. }
  202.  
  203.  
  204. .footerbefore {
  205. background-image: url("../img/footerbg.png");
  206. width: 100%;
  207. height: 66px;
  208. border-bottom: #d4ccb0;
  209. }
  210.  
  211. .footerbefore {
  212. background-image: url("../img/footerbg.png");
  213. width: 100%;
  214. height: 66px;
  215. border-bottom: solid 7px #d4ccb0;
  216. }
  217.  
  218.  
  219. .footer {
  220. background-image: url("../img/2.png");
  221. width: 100%;
  222. height: 242px;
  223. border-bottom: solid 7px #5c5c5c;
  224. }
  225.  
  226. .subfooter {
  227. background-image: url("../img/subfooter.png");
  228. width: 100%;
  229. height: 67px;
  230. }
  231.  
  232.  
  233. #logo {
  234. margin-top: 15px;
  235. }
  236.  
  237. .navigation {
  238. list-style: none;
  239. font-family: telegrafico;
  240. float: right;
  241. margin-top: 10px;
  242. font-size: 14px;
  243. }
  244.  
  245. .navigation li {
  246. display: inline-block;
  247. margin: 7px;
  248. }
  249.  
  250. .navigation a {
  251. color: #fff;
  252. }
  253. .navigation a:hover {
  254. color: #000;
  255. }
  256.  
  257. .current a{
  258. color: #000;
  259. }
  260.  
  261. .nav6 {
  262. list-style: none;
  263. font-family: 'Dosis', sans-serif;
  264. float: left
  265. font-size: 20px;
  266. margin-top: 13px;
  267. margin-left: -35px;
  268. }
  269.  
  270. .nav6 li {
  271. display: inline;
  272. margin: 20px;
  273. font-size: 18px;
  274. font-family: 'Dosis', sans-serif;
  275. float: left;
  276. margin-top: 10px;
  277. }
  278.  
  279. .nav6 a {
  280. color: #7d7253;
  281. }
  282.  
  283. .nav6 a:hover {
  284. background: rgb(241,228,185); /* Old browsers */
  285. background: -moz-linear-gradient(top, rgba(241,228,185,1) 0%, rgba(251,241,210,1) 100%); /* FF3.6+ */
  286. background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(241,228,185,1)), color-stop(100%,rgba(251,241,210,1))); /* Chrome,Safari4+ */
  287. background: -webkit-linear-gradient(top, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* Chrome10+,Safari5.1+ */
  288. background: -o-linear-gradient(top, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* Opera 11.10+ */
  289. background: -ms-linear-gradient(top, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* IE10+ */
  290. background: linear-gradient(to bottom, rgba(241,228,185,1) 0%,rgba(251,241,210,1) 100%); /* W3C */
  291. filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e4b9', endColorstr='#fbf1d2',GradientType=0 ); /* IE6-9 */
  292.  
  293. color: #53410f;
  294. text-decoration: none;
  295. padding: 21px;
  296. clear: clear;
  297.  
  298. }
  299.  
  300. HTML:
  301.  
  302.  
  303. <!DOCTYPE html>
  304. <html lang="en">
  305. <head>
  306. <meta charset="UTF-8" />
  307. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  308. <title>Test site | Jony</title>
  309. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  310. <meta name="description" content="Testing website coded by Jony - rapture-gfx" />
  311. <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  312. <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen"/>
  313. <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
  314.  
  315. </head>
  316. <header>
  317. <!-- First header start -->
  318. <div class="header">
  319. <div class="container">
  320. <div class="row">
  321.  
  322. <div class="span6">
  323. <div id="logo"><img src="img/logo.png"></div>
  324. </div>
  325. <div class="span6">
  326. <ul class="navigation">
  327. <li><a href="#">Notifications</a></li>
  328. <li><a href="#">Wish list [0]</a></li>
  329. <li><a href="#">Account</a></li>
  330. <li><a href="#">orders</a></li>
  331. <li><a href="#"><img src="img/market.png"></a></li>
  332. </ul>
  333. </div>
  334. </div>
  335. </div>
  336. </div>
  337. <!-- First header end -->
  338.  
  339. <div class="secondheader">
  340. <div class="container">
  341. <div class="span12">
  342. <ul class="nav6">
  343. <li><a href="#">Home</a></li>
  344. <li><a href="#">Categories</a></li>
  345. <li><a href="#">Buy</a></li>
  346. <li><a href="#">Sell</a></li>
  347. <li><a href="#">Forums</a></li>
  348. <li><a href="#">Contact</a></li>
  349. <li><a href="#">item 1</a></li>
  350. <li><a href="#">item 2</a></li>
  351. <li><a href="#">item 3</a></li>
  352. <li><a href="#">item 4</a></li>
  353. <li><a href="#">item 3</a></li>
  354. </ul>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. <div class="thirdheader">
  360. </div>
  361.  
  362. </div>
  363. </div>
  364.  
  365. </header>
  366.  
  367. <body>
  368. <div class="container">
  369. <br />
  370. <img src="img/slider.png" /><br />
  371. <br />
  372. <br />
  373.  
  374. <span id="fontfamily1">FEATURED</span>&nbsp;
  375. <div id="lines"><img src="img/lines.gif"/>
  376. </div>
  377.  
  378. <!-- Featured boxes start -->
  379. <div class="row-fluid">
  380. <div class="span3">
  381. <div id="box1"></div>
  382. </div>
  383. <div class="span3">
  384. <div id="box2"></div>
  385. </div>
  386. <div class="span3">
  387. <div id="box3"></div>
  388. </div>
  389. <div class="span3">
  390. <div id="box4"></div>
  391. </div>
  392.  
  393.  
  394. </div>
  395. <br />
  396. <br />
  397. <span id="fontfamily1">LETEST</span>&nbsp;
  398. <div id="lines1"><img src="img/line2.gif"/>
  399. </div>
  400.  
  401. <!-- Featured boxes start -->
  402. <div class="row-fluid">
  403. <div class="span3">
  404. <div id="box5"></div>
  405. </div>
  406. <div class="span3">
  407. <div id="box6"></div>
  408. </div>
  409. <div class="span3">
  410. <div id="box7"></div>
  411. </div>
  412. <div class="span3">
  413. <div id="box8"></div>
  414. </div>
  415.  
  416.  
  417. </div>
  418. <br />
  419. <br />
  420. <div class="row-fluid">
  421.  
  422. <ul>
  423. <li class="btn btn-info"><a href=""><span style="color: #545454;">&laquo;</span></a></li>
  424. <li class="btn btn-current"><a href=""><span style="color: #545454;">1</span></a></li>
  425. <li class="btn btn-info"><a href="#"><span style="color: #545454;">2</span></a></li>
  426. <li class="btn btn-info"><a href="#"><span style="color: #545454;">3</span></a></li>
  427. <li class="btn btn-info"><a href="#"><span style="color: #545454;">4</span></a></li>
  428. <li class="btn btn-info"><a href=""><span style="color: #545454;">5</span></a></li>
  429. <li class="btn btn-info"><a href="#"><span style="color: #545454;">6</span></a></li>
  430. <li class="btn btn-info"><a href="#"><span style="color: #545454;">7</span></a></li>
  431. <li class="btn btn-info"><a href="#"><span style="color: #545454;">&raquo;</span></a></li>
  432. <!--Class "arrow" is the arrow -->
  433. </ul>
  434. </div>
  435. <br /><br /><br />
  436. </div>
  437. </body>
  438.  
  439. <div class="footerbefore">
  440. </div>
  441. <div class="footer">
  442. </div>
  443. <div class="subfooter">
  444. </div>
  445.  
  446.  
  447. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!