API tools faq
paste
Advertisement
joss1226

Ocean Ave Attractions

joss1226
Feb 19th, 2016
86
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.54 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>Ocean 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>Ocean 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/KtIo2x3nq/blueplateoysterrette.png');">
  270. <div class="hover">
  271. <table border="0" cellspacing="0" cellpadding="0">
  272. <tr><td class="top">
  273. <!-- title -->
  274. <b>BLUE PLATE OYSTERETTE</b>
  275. </td></tr>
  276. <tr><td class="bottom">
  277. <!-- more information -->
  278. With its perfect location just across the beach, Blue Plate Oysterette gives you a New England feel in Santa Monica. The raw bar offers several types of ceviche and oysters with homemade cocktail sauce and pickled shallot mignonette, while the regular menu delivers more traditional seafood-shack fare: lobster rolls, clam chowder, and fish tacos.
  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/yqjo2x3ns/chezjay.png');">
  287. <div class="hover">
  288. <table border="0" cellspacing="0" cellpadding="0">
  289. <tr><td class="top">
  290. <b>CHEZ JAY</b>
  291. </td></tr>
  292. <tr><td class="bottom">
  293. Around for more than 50 years, Chez Jay is a local dive in Ocean Avenue famous for being a celebrity hideout, serves classic seafood and steak. It also has a steady crowd of locals and tourists.
  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/yr0o2x3nu/oatmanrockshop.png');">
  301. <div class="hover">
  302. <table border="0" cellspacing="0" cellpadding="0">
  303. <tr><td class="top">
  304. <b>OATMAN ROCK SHOP</b>
  305. </td></tr>
  306. <tr><td class="bottom">
  307. The second oldest business in Santa Monica Pier, Oatman Rock Shop is an open-air stall that sells crystals, jewelry, shells, postcards and maps.
  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/qZ2o2x3nm/66_to_cali.png');">
  315. <div class="hover">
  316. <table border="0" cellspacing="0" cellpadding="0">
  317. <tr><td class="top">
  318. <b>66-TO-CALI</b>
  319. </td></tr>
  320. <tr><td class="bottom">
  321. Route 66, which ends in Santa Monica just shy of the Santa Monica Pier, lives on inside 66-to-Cali, which celebrates “Mother Road” lore with loads of memorabilia, including T-shirts, road signs, and guidebooks.
  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/cwuo2x3no/annenberg.png');">
  329. <div class="hover">
  330. <table border="0" cellspacing="0" cellpadding="0">
  331. <tr><td class="top">
  332. <b>ANNENBERG COMMUNITY BEACH HOUSE</b>
  333. </td></tr>
  334. <tr><td class="bottom">
  335. Spanning five acres of oceanfront property, formerly a private property, the Annenberg Community Beach House is now a public area where you can tour the Marion Davies Guest house or check out the art exhibit in the gallery, or simply play on the beach.
  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/cfqo2x3nw/pacificpark.png');">
  343. <div class="hover">
  344. <table border="0" cellspacing="0" cellpadding="0">
  345. <tr><td class="top">
  346. <b>PACIFIC PARK</b>
  347. </td></tr>
  348. <tr><td class="bottom">
  349. An oceanside amusement park featuring games, food and rides. The main attraction in Pacific Park is the 130-foot Pacific Wheel where you can see the most amazing view of the beach.
  350. <span></span>
  351. </td></tr>
  352. </table>
  353. </div>
  354. </div>
  355.  
  356. <div class="poster rp" style="background-image: url('http://static.tumblr.com/mgn77jf/H5Bo3n29u/circus.png');">
  357. <div class="hover">
  358. <table border="0" cellspacing="0" cellpadding="0">
  359. <tr><td class="top">
  360. <b>CIRCUS DIJZAAK</b>
  361. </td></tr>
  362. <tr><td class="bottom">
  363. Starting as a street performance and growing into a full establishment over the years, the Circus Dijzaak runs large performances biweekly. The main tent, however, is open daily with smaller performances by its patrons and welcomes guests to visits its animals or performers as they wish.
  364. <span></span>
  365. </td></tr>
  366. </table>
  367. </div>
  368. </div>
  369.  
  370.  
  371.  
  372.  
  373. <!-- ENTRIES END HERE ------------------------------------->
  374.  
  375. </section>
  376. </div>
  377. </body>
  378.  
  379. </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!