Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Untitled

By: a guest on Aug 16th, 2012  |  syntax: None  |  size: 17.19 KB  |  views: 82  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  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>