API tools faq
paste
Advertisement
joss1226

Main Street Attractions

joss1226
Feb 19th, 2016
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.18 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>Main Street</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>Main Street</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/Sbyo2sh1k/dogtown_coffee.png');">
  270. <div class="hover">
  271. <table border="0" cellspacing="0" cellpadding="0">
  272. <tr><td class="top">
  273. <!-- title -->
  274. <b>DOGTOWN COFFEE</b>
  275. </td></tr>
  276. <tr><td class="bottom">
  277. <!-- more information -->
  278. A laid back destination for those who enjoy organic coffee, a small meal and a seat on the patio. Formerly a surf shop that was once frequented by big name local skaters such as Stacy Peralta and Jay Adams, Dogtown Coffee is the best place to get a breakfast burrito and salads.
  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/LaJo2sh9l/pizzeria.png');">
  287. <div class="hover">
  288. <table border="0" cellspacing="0" cellpadding="0">
  289. <tr><td class="top">
  290. <b>STELLA BARRA PIZZERIA</b>
  291. </td></tr>
  292. <tr><td class="bottom">
  293. Serving up to 500 artisan pizza’s with seasonal ingredients such as crispy purple kale and fresh rosemary, Stella Barra Pizzeria is a short walk from the ocean front. Among the selection of artisan pizza are small plates, salads and sandwiches.
  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/uklo2shez/pub.png');">
  301. <div class="hover">
  302. <table border="0" cellspacing="0" cellpadding="0">
  303. <tr><td class="top">
  304. <b>FINN MCCOOL’S IRISH PUB & RESTAURANT</b>
  305. </td></tr>
  306. <tr><td class="bottom">
  307. Playing live music every night, Finn McCool’s also has a selection of 18 draft beers and 50 international whiskeys are available. The pub and restaurant serves traditional Irish foods such as Guinness beef stew, boxty and shepherd’s pie are served along with lighter meals such as “Kaeser” (a combination of kale and caesar salad) and peppered salmon are available.
  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/05ko2shma/rawvolution.png');">
  315. <div class="hover">
  316. <table border="0" cellspacing="0" cellpadding="0">
  317. <tr><td class="top">
  318. <b>RAWVOLUTION</b>
  319. </td></tr>
  320. <tr><td class="bottom">
  321. Neighborhood raw food cafe, juicery, coffee and elixir bar that aims to nourish and inspire with its menu, as well as to preserve the planet.
  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/1TIo2shsu/muji.png');">
  329. <div class="hover">
  330. <table border="0" cellspacing="0" cellpadding="0">
  331. <tr><td class="top">
  332. <b>MUJI</b>
  333. </td></tr>
  334. <tr><td class="bottom">
  335. A popular Japanese lifestyle brand selling a wide variety of things ranging from stationary to skincare and kitchenware to luggage. They are known for their simple, low-cost, good quality products which makes Muji the place to get all your home furnishing needs.
  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/LCXo2shx7/zj.png');">
  343. <div class="hover">
  344. <table border="0" cellspacing="0" cellpadding="0">
  345. <tr><td class="top">
  346. <b>ZJ BOARDING HOUSE</b>
  347. </td></tr>
  348. <tr><td class="bottom">
  349. Established in 1988, it has been one of the more popular destinations for surfers, skateboarders and snowboarders looking to buy new sticks, hoodies, goggles and anything else needed. They house brands such as Billabong and Hurley’s flagship stores.
  350. <span></span>
  351. </td></tr>
  352. </table>
  353. </div>
  354. </div>
  355.  
  356. <div class="poster shop" style="background-image: url('http://static.tumblr.com/mgn77jf/SdRo2si3f/buffalo_exchange.png');">
  357. <div class="hover">
  358. <table border="0" cellspacing="0" cellpadding="0">
  359. <tr><td class="top">
  360. <b>BUFFALO EXCHANGE</b>
  361. </td></tr>
  362. <tr><td class="bottom">
  363. It is a vintage clothing store that sells new and recycled fashions sourced right from the local community. They buy your clothes and give you the option of either getting cash or store trade right on the spot.
  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/8Mno2si9v/visitor_center.png');">
  371. <div class="hover">
  372. <table border="0" cellspacing="0" cellpadding="0">
  373. <tr><td class="top">
  374. <b>SANTA MONICA VISITOR’S CENTER</b>
  375. </td></tr>
  376. <tr><td class="bottom">
  377. Located inside Edgmar building, it is the best place to pick up maps, chat with travel experts who know their way around Santa Monica and to shop for visitors. It is the to go place when you are just visiting Santa Monica.
  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/tNAo2sidf/tongva_park.png');">
  385. <div class="hover">
  386. <table border="0" cellspacing="0" cellpadding="0">
  387. <tr><td class="top">
  388. <b>TONGVA PARK</b>
  389. </td></tr>
  390. <tr><td class="bottom">
  391. A recent six acre addition to Main Street, Tongva Park is divided into four main sections: Observation Hill, Discovery Hill, Garden Hill and Gathering Hill. It features native plants, picnics areas, playgrounds and an elevated view of the Pacific.
  392. <span></span>
  393. </td></tr>
  394. </table>
  395. </div>
  396. </div>
  397.  
  398. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/Ksjo2sika/ca_heritage_museum.png');">
  399. <div class="hover">
  400. <table border="0" cellspacing="0" cellpadding="0">
  401. <tr><td class="top">
  402. <b>CALIFORNIA HERITAGE MUSEUM</b>
  403. </td></tr>
  404. <tr><td class="bottom">
  405. Located in the 1894 Historic Landmark Roy Jones house at 2612 Main Street in Santa Monica, the Heritage Museum is a multicultural facility presenting exhibitions that promote the history and cultures of the people that comprise our California community.
  406. <span></span>
  407. </td></tr>
  408. </table>
  409. </div>
  410. </div>
  411.  
  412. <div class="poster play" style="background-image: url('http://static.tumblr.com/mgn77jf/JSno2siqc/books_and_cookies.png');">
  413. <div class="hover">
  414. <table border="0" cellspacing="0" cellpadding="0">
  415. <tr><td class="top">
  416. <b>BOOKS AND COOKIES</b>
  417. </td></tr>
  418. <tr><td class="bottom">
  419. Books and Cookies is a Children's Bookstore, Enrichment Center and Event Space at 2309 Main Street in Santa Monica, California. The unique design of the Books and Cookies space makes it a safe and relaxing environment for the whole family – with the goal of bringing wonder and excitement back to reading and learning. The space is divided into three areas: The Bookstore/Interactive Reading Room, The Enrichment Center and new Indoor / Outdoor Learn and Play area and Event Space.
  420. <span></span>
  421. </td></tr>
  422. </table>
  423. </div>
  424. </div>
  425.  
  426. <div class="poster rp" style="background-image: url('http://static.tumblr.com/mgn77jf/zlio2siuj/off_record.png');">
  427. <div class="hover">
  428. <table border="0" cellspacing="0" cellpadding="0">
  429. <tr><td class="top">
  430. <b>OFF RECORD</b>
  431. </td></tr>
  432. <tr><td class="bottom">
  433. Another one of Santa Monica’s hidden gems, Off Record the best place to go for those hard to find almost obscure vinyls dated way back in the 60s. Off Record is often regarded as the music store where modern meets old school as it has everything you could possibly want. From the latest album by Adele to Elvis Presley’s limited release vinyls.
  434. <span></span>
  435. </td></tr>
  436. </table>
  437. </div>
  438. </div>
  439.  
  440.  
  441. <!-- ENTRIES END HERE ------------------------------------->
  442.  
  443. </section>
  444. </div>
  445. </body>
  446.  
  447. </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!