API tools faq
paste
Advertisement
joss1226

Wilshire Blvd Attraction

joss1226
Feb 19th, 2016
80
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--
  6.  
  7. THEME/PAGE BY http://tea-n-candy.tumblr.com/
  8. http://tnk-s.tumblr.com/
  9.  
  10. DO NOT DELETE OR MOVE CREDIT
  11. DO NOT REDISTRIBUTE
  12. DO NOT USE AS BASE
  13. Thank you!
  14.  
  15. -->
  16.  
  17. <title>Wilshire Boulevard</title>
  18. <link rel="shortcut icon" href="{Favicon}">
  19. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  20. <script type="text/javascript" src="http://static.tumblr.com/8wtv1hn/S9Jn4175v/cat.js"></script>
  21. <style type="text/css">
  22.  
  23. /* --------- reset --------- */
  24. body,div,ol,ul,li,pre,p,th,td {
  25. margin: 0;
  26. padding: 0;
  27. }
  28.  
  29. body {
  30. background-color: #fff;
  31. font-family: Helvetica, sans-serif;
  32. font-size: 14px;
  33. color: #000;
  34. text-align: center;
  35. overflow-y: scroll;
  36. overflow-x: hidden;
  37. }
  38.  
  39. a, a:visited, a:active, a:hover {
  40. text-decoration: none;
  41. }
  42.  
  43. #wrapper {
  44. margin: 0 auto;
  45. width: 1170px;
  46. }
  47.  
  48. header {
  49. font-weight: bold;
  50. text-transform: capitals;
  51. color: #9a1f1f;
  52. font-size: 16px;
  53. line-height: 15px;
  54. padding: 40px;
  55. }
  56.  
  57. nav {
  58. width: 150px;
  59. height: 100%;
  60. position: fixed;
  61. background-color: #f3f3f3;
  62. z-index: 1;
  63.  
  64. }
  65.  
  66. nav a {
  67. display: block;
  68. width: 120px;
  69. line-height: 28px;
  70. text-align: left;
  71. color: #8e8e8e;
  72. transition: 0.3s ease-out;
  73. padding: 0 5px 0;
  74. border-bottom: 1px solid #f3f3f3;
  75. margin: 0 10px 0 10px;
  76. background-color: #f3f3f3;
  77. }
  78.  
  79. nav a:hover {
  80. color: #555;
  81. background-color: #fff;
  82. transition: 0.6s ease-in;
  83. }
  84.  
  85. nav a.div {
  86. border-bottom: 2px solid #f3f3f3;
  87. }
  88.  
  89. .bot {
  90. bottom: -1px;
  91. position: absolute;
  92. background-color: #f3f3f3;
  93. z-index: 1;
  94. }
  95.  
  96.  
  97. .bot a {
  98. line-height: 24px;
  99. }
  100.  
  101. nav span {
  102. display: block;
  103. width: 150px;
  104. line-height: 24px;
  105. text-align: center;
  106. color: #eee;
  107. font-style: italic;
  108. }
  109.  
  110. section {
  111. margin-left: 150px;
  112. float: left;
  113. width: 1020px;
  114. height: 100%;
  115. margin-top: -5px;
  116. }
  117.  
  118. .poster {
  119. float: left;
  120. margin-left: 5px;
  121. margin-top: 5px;
  122. width: 250px;
  123. height: 250px;
  124. position: relative;
  125. background-color: #eee;
  126. }
  127.  
  128. .hover {
  129. opacity: 0;
  130. width: 240px;
  131. height: 240px;
  132. color: #fff;
  133. margin: 0;
  134. transition: 0.5s ease-out;
  135. padding: 5px;
  136. display: table;
  137. }
  138.  
  139. .hover:hover {
  140. opacity: 1;
  141. background-color: rgba(0,0,0,0.8);
  142. transition: 0.6s ease-in;
  143. }
  144.  
  145. .top {
  146. height: 114px;
  147. width: 240px;
  148. border-bottom: 1px solid #fff;
  149. padding-bottom: 5px;
  150. vertical-align: bottom;
  151. }
  152.  
  153. .bottom {
  154. height: 115px;
  155. width: 240px;
  156. padding-top: 5px;
  157. display: block;
  158. }
  159.  
  160. .top, .bottom {
  161. font-weight: lighter;
  162. font-family: calibri, sans-serif;
  163. font-style: italic;
  164. font-size: 10px;
  165. letter-spacing: 1px;
  166. color: #ddd;
  167. }
  168.  
  169. .top b, .top strong {
  170. font-style: normal;
  171. text-transform: uppercase;
  172. font-weight: bold;
  173. color: #fff;
  174. font-size: 14px;
  175. display: block;
  176. margin-top: 1px;
  177. }
  178.  
  179. .bottom b, .bottom strong {
  180. font-weight: bold;
  181. color: #fff;
  182. }
  183.  
  184. .bottom span {
  185. font-size: 14px;
  186. letter-spacing: -1px;
  187. font-style: normal;
  188. display: block;
  189. width: 100%;
  190. text-align: center;
  191. }
  192.  
  193. section a {
  194. color: #48a1b4;
  195. transition: 0.5s ease-out;
  196. }
  197.  
  198. section a:hover {
  199. color: #02d5ff;
  200. transition: 0.5s ease-in;
  201. }
  202.  
  203. @media screen and (max-height: 600px) {
  204. header {
  205. line-height: 24px;
  206. }
  207.  
  208. nav a {
  209. font-size: 10px;
  210. line-height: 16px;
  211. }
  212.  
  213. .bot a {
  214. line-height: 14px;
  215. }
  216. }
  217.  
  218. @media screen and (max-width: 1280px) {
  219. #wrapper {
  220. width: 915px;
  221. }
  222.  
  223. section {
  224. width: 765px;
  225. }
  226. }
  227.  
  228. </style>
  229. </head>
  230.  
  231. <body>
  232. <div id="wrapper">
  233. <nav>
  234. <header>Wilshire Boulevard</header>
  235.  
  236. <!-- TO ADD A NEW CATEGORIE:
  237. Simply make a new link with href="javascript:;"
  238. class="cat" and id="xy". Choose a short and
  239. self-explanatory name for the id (see examples!)
  240.  
  241. To give a link a 2px underline to serve as a separator
  242. add div to the class (see examples!)
  243.  
  244. Add this id to any poster div as class.
  245. If you want more than one category on a poster
  246. separate the ids with a space (see examples!)
  247. -->
  248.  
  249. <a href="javascript:;" class="div" id="all">all attractions</a>
  250. <a href="javascript:;" class="cat" id="eat">eat</a>
  251. <a href="javascript:;" class="cat div" id="shop">shop</a>
  252. <a href="javascript:;" class="cat" id="play">play</a>
  253. <a href="javascript:;" class="cat" id="rp">roleplay original</a>
  254. <div class="bot">
  255. <a href="/">back</a>
  256. <a href="http://www.tumblr.com/dashboard">dash</a>
  257. <a href="http://tea-n-candy.tumblr.com/" target="blank">theme</a>
  258. </div>
  259. </nav>
  260. <section>
  261.  
  262. <!-- ENTRIES GO HERE -------------------------------------->
  263.  
  264. <!-- EXAMPLES ------------------------------------------>
  265.  
  266. <!-- class= poster for css, add any number of categories
  267. background-image: url('') for the image
  268. Images must be 250x250px -->
  269. <div class="poster eat" style="background-image: url('http://static.tumblr.com/mgn77jf/Sxlo2x4g0/elcholo.png');">
  270. <div class="hover">
  271. <table border="0" cellspacing="0" cellpadding="0">
  272. <tr><td class="top">
  273. <!-- title -->
  274. <b>EL CHOLO</b>
  275. </td></tr>
  276. <tr><td class="bottom">
  277. <!-- more information -->
  278. With hacienda style decor, El Cholo serves authentic Mexican food. It is a small chain of restaurants in the LA-area serving dishes such as Sonoran enchiladas and tostadas compuestas, recipes that have been handed down through generations of family owners.
  279. <!-- any kind of rating, +/-/stars/.. -->
  280. <span></span>
  281. </td></tr>
  282. </table>
  283. </div>
  284. </div>
  285.  
  286. <div class="poster eat" style="background-image: url('http://static.tumblr.com/mgn77jf/vdqo2x4g2/huckleberry.png');">
  287. <div class="hover">
  288. <table border="0" cellspacing="0" cellpadding="0">
  289. <tr><td class="top">
  290. <b>HUCKLEBERRY BAKERY & CAFE</b>
  291. </td></tr>
  292. <tr><td class="bottom">
  293. Huckleberry Bakery & Cafe is the domain of James Beard–nominated pastry chef Zoe Nathan. She has inspired both a cookbook and a cult-like following willing to stand in line for an addictive assortment of maple-bacon biscuits, cinnamon sugar brioche, and vegetarian croque monsieur.
  294. <span></span>
  295. </td></tr>
  296. </table>
  297. </div>
  298. </div>
  299.  
  300. <div class="poster shop" style="background-image: url('http://static.tumblr.com/mgn77jf/gpBo2x4g8/johnnie_o.png');">
  301. <div class="hover">
  302. <table border="0" cellspacing="0" cellpadding="0">
  303. <tr><td class="top">
  304. <b>JOHNNIE-O</b>
  305. </td></tr>
  306. <tr><td class="bottom">
  307. Johnnie-O is local fashion designer John O’Donnell’s take on what he fondly calls “West Coast Prep.” His signature motif—a man holding a surfboard—accents every polo shirt, pullover, and button-down in his eponymous line.
  308. <span></span>
  309. </td></tr>
  310. </table>
  311. </div>
  312. </div>
  313.  
  314. <div class="poster shop" style="background-image: url('http://static.tumblr.com/mgn77jf/dANo2x4gc/toptotop.png');">
  315. <div class="hover">
  316. <table border="0" cellspacing="0" cellpadding="0">
  317. <tr><td class="top">
  318. <b>TOP TO TOP</b>
  319. </td></tr>
  320. <tr><td class="bottom">
  321. For expert advice on running shoes, including gait analysis, stop by Top to Top, which has been trusted by sporty locals for more than 30 years.
  322. <span></span>
  323. </td></tr>
  324. </table>
  325. </div>
  326. </div>
  327.  
  328. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/5tBo2x4fy/douglaspark.png');">
  329. <div class="hover">
  330. <table border="0" cellspacing="0" cellpadding="0">
  331. <tr><td class="top">
  332. <b>DOUGLAS PARK</b>
  333. </td></tr>
  334. <tr><td class="bottom">
  335. On any given day, Douglas Park fills with kids on the playground, volleying tennis players, senior citizens on the lawn-bowling green, and nature lovers gazing at the reflecting pools. Resident wildlife like ducks and turtles, as well as the plentiful picnic tables and benches, are a big draw for parkgoers, both young and old.
  336. <span></span>
  337. </td></tr>
  338. </table>
  339. </div>
  340. </div>
  341.  
  342. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/TTeo2x4ga/soulcycle.png');">
  343. <div class="hover">
  344. <table border="0" cellspacing="0" cellpadding="0">
  345. <tr><td class="top">
  346. <b>SOULCYCLE</b>
  347. </td></tr>
  348. <tr><td class="bottom">
  349. SoulCycle has attracted a dedicated fan base, and plenty of classes at the downtown studio give visitors a chance to spin into high gear alongside throngs of fitness-addicted locals.
  350. <span></span>
  351. </td></tr>
  352. </table>
  353. </div>
  354. </div>
  355.  
  356.  
  357. <div class="poster rp" style="background-image: url('http://static.tumblr.com/mgn77jf/rgNo2x4g5/jlu_gym.png');">
  358. <div class="hover">
  359. <table border="0" cellspacing="0" cellpadding="0">
  360. <tr><td class="top">
  361. <b>JLU GYM</b>
  362. </td></tr>
  363. <tr><td class="bottom">
  364. Local gym lovated in Wilshire Boulevard, it is best known for the top personal trainers in Santa Monica. With all the latest gym equipment, this gym always has the best things to keep in top shape for the beach and overall fitness.
  365. <span></span>
  366. </td></tr>
  367. </table>
  368. </div>
  369. </div>
  370.  
  371.  
  372. <!-- ENTRIES END HERE ------------------------------------->
  373.  
  374. </section>
  375. </div>
  376. </body>
  377.  
  378. </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!