API tools faq
paste
joss1226

Downtown Attractions

joss1226
Feb 19th, 2016
38
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.39 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>Downtown Santa Monica</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 #eee;
  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>Downtown Santa Monica</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/M4ao2sejm/the_misfit.png');">
  270. <div class="hover">
  271. <table border="0" cellspacing="0" cellpadding="0">
  272. <tr><td class="top">
  273. <!-- title -->
  274. <b>THE MISFIT RESTAURANT + BAR</b>
  275. </td></tr>
  276. <tr><td class="bottom">
  277. <!-- more information -->
  278. The Misfit Restaurant + Bar in Santa Monica, reprises a “back to the bar” ideal of casual destination dining serving signature cocktails and accessible comfort food intended to be enjoyed on a daily basis.
  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/HIuo2ses3/farmer_market.png');">
  287. <div class="hover">
  288. <table border="0" cellspacing="0" cellpadding="0">
  289. <tr><td class="top">
  290. <b>SANTA MONICA FARMERS MARKETS</b>
  291. </td></tr>
  292. <tr><td class="bottom">
  293. While Downtown Santa Monica is home to the highest concentration of shops, restaurants, and hotels in town, it also gives off a local vibe with its twice-weekly farmers market on Wednesday and Saturday mornings and lively street performers.
  294. <span></span>
  295. </td></tr>
  296. </table>
  297. </div>
  298. </div>
  299.  
  300. <div class="poster eat" style="background-image: url('http://static.tumblr.com/mgn77jf/qJ4o2sf14/kings_head.png');">
  301. <div class="hover">
  302. <table border="0" cellspacing="0" cellpadding="0">
  303. <tr><td class="top">
  304. <b>YE OLDE KING'S HEAD</b>
  305. </td></tr>
  306. <tr><td class="bottom">
  307. British Pub, Restaurant, Gift Shoppe & Bakery located between 3rd St Promenade and the Beach - World Famous for over 40 years! Serving Breakfast, Lunch, Afternoon Tea and Dinner. Stock up on your imported goods in our Gift Shoppe. Fresh Pies and Pastries baked daily. Karaoke Sun, Trivia Wed, DJ Fri. Imported Beers and Full Bar.
  308. <span></span>
  309. </td></tr>
  310. </table>
  311. </div>
  312. </div>
  313.  
  314. <div class="poster eat" style="background-image: url('http://static.tumblr.com/mgn77jf/Ifro2sf6v/border_grill.png');">
  315. <div class="hover">
  316. <table border="0" cellspacing="0" cellpadding="0">
  317. <tr><td class="top">
  318. <b>BORDER GRILL</b>
  319. </td></tr>
  320. <tr><td class="bottom">
  321. Chefs Mary Sue Milliken and Susan Feniger, Bravo’s “Top Chef Masters” and Food Network’s “Too Hot Tamales,” present modern gourmet Mexican fare in a lively cantina setting.
  322. <span></span>
  323. </td></tr>
  324. </table>
  325. </div>
  326. </div>
  327.  
  328. <div class="poster shop" style="background-image: url('http://static.tumblr.com/mgn77jf/hxOo2sffx/santa_monica_place.png');">
  329. <div class="hover">
  330. <table border="0" cellspacing="0" cellpadding="0">
  331. <tr><td class="top">
  332. <b>SANTA MONICA PLACE</b>
  333. </td></tr>
  334. <tr><td class="bottom">
  335. The open-air Santa Monica Place offers dozens of exciting specialty stores and a rooftop Dining Deck offering gorgeous ocean views and a tremendous variety of both casual and chef-driven restaurants. A shopping mall at the south end, is ground zero, with nearly 100 options.
  336. <span></span>
  337. </td></tr>
  338. </table>
  339. </div>
  340. </div>
  341.  
  342. <div class="poster shop" style="background-image: url('http://static.tumblr.com/mgn77jf/Dbfo2sfok/fred_segal.png');">
  343. <div class="hover">
  344. <table border="0" cellspacing="0" cellpadding="0">
  345. <tr><td class="top">
  346. <b>FRED SEGAL SANTA MONICA</b>
  347. </td></tr>
  348. <tr><td class="bottom">
  349. Pioneer of the shop-in-a-shop concept Fred Segal landed in town in 1985 and turned the spotlight on hot new designers by giving them their own boutiques inside a larger building. It’s still the epitome of LA cool, popular with celebrities and name-dropped in movies like Legally Blonde and Clueless.
  350. <span></span>
  351. </td></tr>
  352. </table>
  353. </div>
  354. </div>
  355.  
  356. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/ZFGo2sfyf/3rd.png');">
  357. <div class="hover">
  358. <table border="0" cellspacing="0" cellpadding="0">
  359. <tr><td class="top">
  360. <b>THIRD STREET PROMENADE</b>
  361. </td></tr>
  362. <tr><td class="bottom">
  363. Enjoy some of Santa Monica’s best people watching along the 3rd Street Promenade, where crowds gather for street performers ranging from hip-hop dancers to earnest singer-songwriters to circus acts.
  364. <span></span>
  365. </td></tr>
  366. </table>
  367. </div>
  368. </div>
  369.  
  370. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/3Bxo2sg6o/penthouse.png');">
  371. <div class="hover">
  372. <table border="0" cellspacing="0" cellpadding="0">
  373. <tr><td class="top">
  374. <b>THE PENTHOUSE</b>
  375. </td></tr>
  376. <tr><td class="bottom">
  377. Ideally located at the top of the upscale Huntley Hotel with unmatched ocean views from its wrap around windows, this hip destination is popular for sunset cocktails and a lively bar scene. It provides a glitzy rendezvous spot with spectacular sunsets enjoyed through a wall of windows.
  378. <span></span>
  379. </td></tr>
  380. </table>
  381. </div>
  382. </div>
  383.  
  384. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/aMSo2sgbe/comedy_theater.png');">
  385. <div class="hover">
  386. <table border="0" cellspacing="0" cellpadding="0">
  387. <tr><td class="top">
  388. <b>M.I.'S WESTSIDE COMEDY THEATER</b>
  389. </td></tr>
  390. <tr><td class="bottom">
  391. Named one the best comedy clubs in LA, we've got improv, standup, and a fantastic beer and wine selection with no drink minimum. Big names like Aziz Ansari, Zach Galifianakis, and Dave Chappelle have been known to drop in.
  392. <span></span>
  393. </td></tr>
  394. </table>
  395. </div>
  396. </div>
  397.  
  398. <div class="poster rp" style="background-image: url('http://static.tumblr.com/mgn77jf/U0Ao2sghk/watering_hole.png');">
  399. <div class="hover">
  400. <table border="0" cellspacing="0" cellpadding="0">
  401. <tr><td class="top">
  402. <b>THE WATERING HOLE</b>
  403. </td></tr>
  404. <tr><td class="bottom">
  405. The Watering Hole is a hole in the wall kind of bar where most of it’s patrons are locals and if by some chance a tourist does walk in, they’re most likely either lost or family of a local from Santa Monica. The Watering Hole will most likely have football playing on the TV and drunken regulars screaming about the game. It is one of the oldest bars in the city.
  406. <span></span>
  407. </td></tr>
  408. </table>
  409. </div>
  410. </div>
  411.  
  412. <!-- ENTRIES END HERE ------------------------------------->
  413.  
  414. </section>
  415. </div>
  416. </body>
  417.  
  418. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!