API tools faq
paste
Advertisement
joss1226

Montana Avenue Attractions

joss1226
Feb 19th, 2016
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.12 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>Montana Avenue</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>Montana Avenue</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/WBKo2wzgz/rds_kitchen.png');">
  270. <div class="hover">
  271. <table border="0" cellspacing="0" cellpadding="0">
  272. <tr><td class="top">
  273. <!-- title -->
  274. <b>R&D’S KITCHEN</b>
  275. </td></tr>
  276. <tr><td class="bottom">
  277. <!-- more information -->
  278. A popular choice when shopping in Montana Avenue, R&D’s Kitchen is often packed thanks to its mojitos, greyhounds, Bloody Marys, and other classic cocktails. They also serve some of the best crispy chicken sandwich, the seared ahi salad, Reubens, and deviled eggs.
  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/8PBo2wzgr/kye_s.png');">
  287. <div class="hover">
  288. <table border="0" cellspacing="0" cellpadding="0">
  289. <tr><td class="top">
  290. <b>KYE’S</b>
  291. </td></tr>
  292. <tr><td class="bottom">
  293. A fairly new restaurant in Montana Avenue, Kye’s caters to the health-conscious diner’s with its signature “Kyerritos”: burritos bundled in nori or collard greens rather than tortillas, making them gluten-free and dairy-free. Kye’s also has many vegan options such as vegan macro, vegan bulgogi and vegan nahm jim.
  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/tMdo2wzgm/father_s_office.png');">
  301. <div class="hover">
  302. <table border="0" cellspacing="0" cellpadding="0">
  303. <tr><td class="top">
  304. <b>FATHER'S OFFICE</b>
  305. </td></tr>
  306. <tr><td class="bottom">
  307. Popular American gastropub on Montana Avenue serving the much celebrated 'Office Burger', along with 36 craft beers on tap.
  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/25wo2wzgx/pink_chicken.png');">
  315. <div class="hover">
  316. <table border="0" cellspacing="0" cellpadding="0">
  317. <tr><td class="top">
  318. <b>PINK CHICKEN</b>
  319. </td></tr>
  320. <tr><td class="bottom">
  321. Not only can you shop for your children at Pink Chicken, you can also shop for yourself. A mom’s favorite place to shop, they have a wide variety of stylish clothing for babies, little girls and tweens.
  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/rbxo2wzgo/kiehls.png');">
  329. <div class="hover">
  330. <table border="0" cellspacing="0" cellpadding="0">
  331. <tr><td class="top">
  332. <b>KIEHL’S SINCE 1851</b>
  333. </td></tr>
  334. <tr><td class="bottom">
  335. Starting off as an apothecary in New York’s East Village, Kiehl’s specializes in moisturizers, cleansers, toners and other skin-care products.
  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/cFIo2wzgu/margaretoleary.png');">
  343. <div class="hover">
  344. <table border="0" cellspacing="0" cellpadding="0">
  345. <tr><td class="top">
  346. <b>MARGARET O'LEARY</b>
  347. </td></tr>
  348. <tr><td class="bottom">
  349. Margaret O'Leary represents the best of the West Coast's Casual Chic lifestyle. Margaret's fashions are coveted worldwide.
  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/ozBo2wzgh/aero.png');">
  357. <div class="hover">
  358. <table border="0" cellspacing="0" cellpadding="0">
  359. <tr><td class="top">
  360. <b>AERO THEATRE</b>
  361. </td></tr>
  362. <tr><td class="bottom">
  363. Screening independent movies, film-festival winners, classics and releases from up-and-coming filmmakers, it is known to have their directors and actors in attendance whenever a film premieres.
  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/QYRo2wzgd/aerial.png');">
  371. <div class="hover">
  372. <table border="0" cellspacing="0" cellpadding="0">
  373. <tr><td class="top">
  374. <b>AERIAL PHYSIQUE</b>
  375. </td></tr>
  376. <tr><td class="bottom">
  377. Ever wanted to try what the Cirque du Soleil performers can do or at least attempt it? At Aerial Physique, you can hone your own brand of performance art with a Cirque du Soleil like workout that has you dangling from long swaths of silk while learning tricks and exercises.
  378. <span></span>
  379. </td></tr>
  380. </table>
  381. </div>
  382. </div>
  383.  
  384.  
  385.  
  386.  
  387. <!-- ENTRIES END HERE ------------------------------------->
  388.  
  389. </section>
  390. </div>
  391. </body>
  392.  
  393. </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!