API tools faq
paste
Advertisement
joss1226

Mid-City Attractions

joss1226
Feb 19th, 2016
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.04 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>Mid-City</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>Mid-City</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/pFHo2sjaa/tiatos.png');">
  270. <div class="hover">
  271. <table border="0" cellspacing="0" cellpadding="0">
  272. <tr><td class="top">
  273. <!-- title -->
  274. <b>TIATO’S MARKET GARDEN CAFE</b>
  275. </td></tr>
  276. <tr><td class="bottom">
  277. <!-- more information -->
  278. Named after the eatery's signature minty herb, Tiato’s a chic eco-conscious Asian fusion cafe. It combines a gourmet ‘grab and go’ cafe, Asian tapas bar, tea garden and artisanal market, making it one of the go to places when in the neighborhood of Mid-City.
  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/j7go2sje4/root.png');">
  287. <div class="hover">
  288. <table border="0" cellspacing="0" cellpadding="0">
  289. <tr><td class="top">
  290. <b>THE ROOST AT LA FARM</b>
  291. </td></tr>
  292. <tr><td class="bottom">
  293. With it’s rustic feel, The Roost at La Farm serves refined plates like veal sweetbreads, diver’s scallops, and whole rotisserie chicken.
  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/doRo2sjnj/a_cut_above.png');">
  301. <div class="hover">
  302. <table border="0" cellspacing="0" cellpadding="0">
  303. <tr><td class="top">
  304. <b>A CUT ABOVE BUTCHER SHOP</b>
  305. </td></tr>
  306. <tr><td class="bottom">
  307. This butcher shop offering locally sourced, pasture-raised meats also makes artisanal sandwiches.
  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/MnKo2sjvq/modshop.png');">
  315. <div class="hover">
  316. <table border="0" cellspacing="0" cellpadding="0">
  317. <tr><td class="top">
  318. <b>MODSHOP</b>
  319. </td></tr>
  320. <tr><td class="bottom">
  321. Inspired by vintage Hollywood glamour, Modshop manufactures locally in Los Angeles. From velvet sofas to cubist credenzas, it is a fashion-forward funiture store.
  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/VMzo2sjzy/bergamot.png');">
  329. <div class="hover">
  330. <table border="0" cellspacing="0" cellpadding="0">
  331. <tr><td class="top">
  332. <b>BERGAMONT STATION</b>
  333. </td></tr>
  334. <tr><td class="bottom">
  335. Home to more than 40 upscale contemporary galleries and design firms, Bergamont Station Southern California’s largest art gallery complex. It is located on eight acres of land in the heart of Santa Monica, it also holds The Santa Monica Museum of Art.
  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/ogbo2skab/helens.png');">
  343. <div class="hover">
  344. <table border="0" cellspacing="0" cellpadding="0">
  345. <tr><td class="top">
  346. <b>HELEN'S CYCLES</b>
  347. </td></tr>
  348. <tr><td class="bottom">
  349. Explore the region of Mid-City, CA, on sporty road and mountain bikes rented at Helen’s Cycles, where an expert staff has matched pedaling patrons with the perfect bicycles since 1936.
  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/k3go2skho/willow_spa.png');">
  357. <div class="hover">
  358. <table border="0" cellspacing="0" cellpadding="0">
  359. <tr><td class="top">
  360. <b>WILLOW SPA</b>
  361. </td></tr>
  362. <tr><td class="bottom">
  363. Retreat to Willow Spa where you can rejuvenate papaya enzyme facials, mango body polish and Zen-tastic massages. Tropical, Asian-influenced wellness packages is a local must at Willow Spa. It is a tropical bungalow styled day spa complete with fragrant flowers, running waterfalls, lantern-lit stone walkways and lush gardens.
  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/aGBo2sklw/broad_stage.png');">
  371. <div class="hover">
  372. <table border="0" cellspacing="0" cellpadding="0">
  373. <tr><td class="top">
  374. <b>THE BROAD STAGE</b>
  375. </td></tr>
  376. <tr><td class="bottom">
  377. Hosting spectacular performances such as opera and jazz concerts to contemporary dance and film premiers, The Broad Stage is an intimate venue with only 499 seats so any seat is guaranteed to be intimate.
  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/vRNo2skq9/chestnut_club.png');">
  385. <div class="hover">
  386. <table border="0" cellspacing="0" cellpadding="0">
  387. <tr><td class="top">
  388. <b>THE CHESTNUT CLUB</b>
  389. </td></tr>
  390. <tr><td class="bottom">
  391. A modern cocktail bar, The Chestnut Club is known for its’ classically inspired craft cocktails ranging from the fresh and aromatic Spanish style gin & tonic to the masculine spirit forward El Camino and Bullocks Whilshire. The Chestnut Club holds one of the most extensive spirit selections in Southern California.
  392. <span></span>
  393. </td></tr>
  394. </table>
  395. </div>
  396. </div>
  397.  
  398.  
  399.  
  400. <!-- ENTRIES END HERE ------------------------------------->
  401.  
  402. </section>
  403. </div>
  404. </body>
  405.  
  406. </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!