API tools faq
paste
Advertisement
pistachi-o

media 2014 (v1)

pistachi-o
Jan 2nd, 2014
2,313
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3.  
  4. <!--
  5.  
  6. Media Page 2014 # Version 1
  7. pistachi-o (nutty-themes @ tumblr)
  8.  
  9. Theme Documentation:
  10. http://nutty-themes.tumblr.com/themedoc
  11.  
  12. Please Do Not:
  13. http://nutty-themes.tumblr.com/terms
  14.  
  15.  
  16. -->
  17.  
  18.  
  19. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  20.  
  21. <head>
  22.  
  23. <title>{Title}</title>
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  26.  
  27. <meta name="description" content="" />
  28.  
  29. <meta http-equiv="x-dns-prefetch-control" content="off"/>
  30.  
  31. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
  32. <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  33.  
  34.  
  35. <script src="http://static.tumblr.com/whx9ghv/6z9mam102/jquery.freetile.js"></script>
  36.  
  37. <script>
  38.  $('#tiles').freetile();
  39. </script>
  40.  
  41.  
  42. <style type="text/css">
  43.  
  44. /* Reset ----------------------------- */
  45.  
  46. body,div,dl,dt,dd,pre,form,fieldset,input,textarea,ul,p,th,td {margin:0;padding:0;}
  47.  
  48. /* Scrollbar ----------------------------- */
  49.  
  50. ::-webkit-scrollbar {width: 6px;}
  51. ::-webkit-scrollbar-track {background: #fafafa;}
  52. ::-webkit-scrollbar-thumb {background: #ff4e50;}
  53.  
  54. /* General ----------------------------- */
  55.  
  56. body {
  57. background: #FAFAFA;
  58. font-family: 'PT Serif', 'Arial', sans-serif;
  59. font-size: 11px;
  60. line-height: 130%;
  61. color: #000000;
  62. overflow-x: hidden;
  63. }
  64.  
  65. a:link, a:active, a:visited {
  66. color: #fc913a;
  67. text-decoration: none;
  68. }
  69.  
  70. a:hover {
  71. color: #ede574;
  72. text-decoration: none;
  73. }
  74.  
  75. b {
  76. color: #3e6b48;
  77. }
  78.  
  79. p {
  80. margin: 8px 0px;
  81. }
  82.  
  83. /* Sidebar ----------------------------- */
  84.  
  85. .sidebar {
  86. position: absolute;
  87. top: 0;
  88. right: 0;
  89. width: 25%;
  90. height: 100%;
  91. text-align: center;
  92. background: #131410;
  93. background: url('http://static.tumblr.com/52f32f34b4b5ce997df54e71e1bf29bd/whx9ghv/27Dmqgrp4/tumblr_static_7600119622_05953bd110_b.jpg');
  94. background-position: bottom;
  95. background-repeat: repeat;
  96. z-index: 9999;
  97. }
  98.  
  99. .slinks {
  100. font-family: 'Playfair Display', 'Georgia', sans-serif;
  101. display: inline-block;
  102. font-size: 12px;
  103. font-style: italic;
  104. text-transform: lowercase;
  105. text-align: center;
  106. }
  107.  
  108. .slinks a {
  109. margin: 5px;
  110. padding: 3px 10px;
  111. font-family: 'Playfair Display', 'Georgia', serif;
  112. background: #fafafa;
  113. font-size: 12px;
  114. line-height: 200%;
  115. text-align: center;
  116. font-style: italic;
  117. font-weight: 700;
  118. }
  119.  
  120. /* Spacing ----------------------------- */
  121.  
  122. .ca-container {
  123. position: absolute;
  124. margin: 0;
  125. width: 100%;
  126. height: 100%;
  127. }
  128.  
  129. .ca-wrapper {
  130. width: 100%;
  131. height: 100%;
  132. position: relative;
  133. background: #fafafa;
  134. }
  135.  
  136. /* Sections ----------------------------- */
  137.  
  138. .ca-item {
  139. position: relative;
  140. float: left;
  141. width: 25%;
  142. height: 100%;
  143. text-align: center;
  144. }
  145.  
  146. h1 {
  147. font-family: 'Playfair Display', 'Georgia', serif;
  148. text-transform: uppercase;
  149. font-size: 44px;
  150. color: #edd456;
  151. text-shadow: 1px 1px 1px #897c63;
  152. }
  153.  
  154. .desc {
  155. position: absolute;
  156. width: 260px;
  157. height: 260px;
  158. top: 50%;
  159. left: 50%;
  160. -webkit-transform: translateX(-50%) translateY(-50%);
  161. -moz-transform: translateX(-50%) translateY(-50%);
  162. -ms-transform: translateX(-50%) translateY(-50%);
  163. transform: translateX(-50%) translateY(-50%);
  164. overflow: hidden;
  165. }
  166.  
  167. .noted {
  168. font-family: 'Playfair Display', 'Georgia', serif;
  169. text-transform: lowercase;
  170. margin: 50px 0px 10px;
  171. border-top: 1px solid #fc913a;
  172. }
  173.  
  174. .ca-more {
  175. font-family: 'Playfair Display', 'Georgia', serif;
  176. position: absolute;
  177. margin-top: -10px;
  178. left: 160px;
  179. padding: 2px 15px;
  180. background: #fafafa;
  181. font-size: 14px;
  182. text-align: center;
  183. font-style: italic;
  184. font-weight: 700;
  185. }
  186.  
  187. .noted a {
  188. color: #ff4e50 !important;
  189. }
  190.  
  191. .ca-close {
  192. position: absolute;
  193. top: 10px;
  194. right: 10px;
  195. background: #FFF url(http://static.tumblr.com/whx9ghv/DM7mp29jh/cross.png) no-repeat center center;
  196. width: 27px;
  197. height: 27px;
  198. text-indent: -9000px;
  199. outline: none;
  200. -moz-box-shadow:1 px 1px 2px rgba(0,0,0,0.2);
  201. -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  202. box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  203. opacity: 0.7;
  204. }
  205.  
  206. .ca-close:hover {
  207. opacity: 1.0;
  208. }
  209.  
  210. /* Section Content ----------------------------- */
  211.  
  212. .ca-content-wrapper {
  213. background: #f7f7e4;
  214. position: absolute;
  215. width: 0px;
  216. height: 100%;
  217. top: 0px;
  218. text-align: left;
  219. z-index: 10000;
  220. overflow-x: hidden;
  221. overflow-y: auto;
  222. }
  223.  
  224. .ca-content {
  225. width: 100%;
  226. overflow: hidden;
  227. }
  228.  
  229. .text {
  230. margin: 150px; /* adjust this number according to your screen size and what looks better */
  231. }
  232.  
  233. /* Media Boxes ----------------------------- */
  234.  
  235. .box {
  236. padding: 25px 0px;
  237. text-align: left;
  238. min-height: 155px;
  239. border-bottom: 1px solid #fc913a;
  240. }
  241.  
  242. .box img {
  243. width: 110px;
  244. height: 155px;
  245. padding: 3px;
  246. border: 1px solid #ddd;
  247. }
  248.  
  249. .box:nth-of-type(odd) img {
  250. float: left;
  251. margin-right: 10px;
  252. }
  253.  
  254. .box:nth-of-type(even) img {
  255. float: right;
  256. margin-left: 10px;
  257. }
  258.  
  259. .screencap {
  260. width: 275px !important;
  261. }
  262.  
  263. .rating {
  264. margin: 5px 0px;
  265. font-family: 'sosa';
  266. font-size: 12px;
  267. color: #FFD700;
  268. text-transform: lowercase;
  269. font-style: normal;
  270. }
  271.  
  272. h3 {
  273. font-size: 12px;
  274. margin: 4px 0px;
  275. }
  276.  
  277. .syp {
  278. margin: 10px 0px;
  279. text-align: justify;
  280. }
  281.  
  282. .details {
  283. text-transform: uppercase;
  284. }
  285.  
  286. /* @font-face (SOSA) ----------------------------- */
  287.  
  288. @font-face {
  289. font-family: 'sosa';
  290.     src: url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot");
  291.     src:
  292.         url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot?#iefix") format('embedded-opentype'),
  293.         url("http://static.tumblr.com/whx9ghv/zwPmbwkjn/sosa.woff") format('woff'),
  294.         url("http://static.tumblr.com/whx9ghv/5Skmbwkja/sosa.ttf") format('truetype'),
  295.         url("http://static.tumblr.com/whx9ghv/KXgmbwkj1/sosa.svg#icons") format('svg');
  296. font-weight: normal;
  297. font-style: normal;
  298. }
  299.  
  300. </style>
  301. </head>
  302.  
  303.  
  304. <body>
  305.  
  306. <div id="container" class="ca-container">
  307.  
  308. <!---------------------------- START/ SIDEBAR ---------------------------->
  309.  
  310. <div class="sidebar"><div class="desc">
  311. <div class="slinks">
  312. <a href="/">Back Home</a>
  313. <a href="http://www.tumblr.com">Dashboard</a>
  314. <a href="http://nutty-themes.tumblr.com">Credit</a>
  315. </div>
  316. </div></div>
  317.  
  318. <!---------------------------- END/ SIDEBAR ---------------------------->
  319.  
  320. <div class="ca-wrapper">
  321.  
  322. <div class="ca-item ca-item-1"><div class="desc">
  323.  
  324. <!---------------------------- START/ FILM SECTION (TITLE) ---------------------------->
  325.  
  326. <h1>Films</h1>
  327. You can have some text here if you want, maybe a total count or a note of your favourites.
  328.  
  329. <!---------------------------- END/ FILM SECTION (TITLE) ---------------------------->
  330.  
  331. <div class="noted"><a href="#" class="ca-more">details...</a></div>
  332. </div>
  333.  
  334. <div class="ca-content-wrapper"><div class="ca-content">
  335. <a href="#" class="ca-close">close</a>
  336.  
  337. <div class="text">
  338.  
  339. <!---------------------------- START/ FILM SECTION (CONTENT) ---------------------------->
  340.  
  341.  
  342.         <!---------------------------- START/ EACH FILM ---------------------------->
  343.         <div class="box">
  344.         <img src="http://i.imgur.com/iF6r1iE.jpg">
  345.         <h3>Stoker (2013)</h3>
  346.         <div class="details"><a href="http://www.imdb.com/title/tt1682180/">IMDB</a> - Dir: Park Chan Wook - 01 March</div>
  347.         <div class="syp">After India's father dies, her Uncle Charlie, who she never knew existed, comes to live with her and her unstable mother. She comes to suspect this mysterious, charming man has ulterior motives and becomes increasingly infatuated with him.</div>
  348.         <div class="rating">eeeee</div>
  349.         </div>
  350.         <!---------------------------- END/ EACH FILM ---------------------------->
  351.  
  352.        
  353.         <!---------------------------- START/ EACH FILM ---------------------------->
  354.         <div class="box">
  355.         <img src="http://i.imgur.com/iF6r1iE.jpg">
  356.         <h3>Stoker (2013)</h3>
  357.         <div class="details"><a href="http://www.imdb.com/title/tt1682180/">IMDB</a> - Dir: Park Chan Wook - 01 March</div>
  358.         <div class="syp">After India's father dies, her Uncle Charlie, who she never knew existed, comes to live with her and her unstable mother. She comes to suspect this mysterious, charming man has ulterior motives and becomes increasingly infatuated with him.</div>
  359.         <div class="rating">eeeee</div>
  360.         </div>
  361.         <!---------------------------- END/ EACH FILM ---------------------------->
  362.  
  363.        
  364.         <!---------------------------- TO ADD/ START/ EACH FILM ---------------------------->
  365.         <div class="box">
  366.         <img src="IMAGE-URL-HERE">
  367.         <h3>Title (Year)</h3>
  368.         <div class="details"><a href="LINK-HERE">IMDB</a> - Director/Cast - Date Watched</div>
  369.         <div class="syp">Synopsis or Plot Details</div>
  370.         <div class="rating">eeeee</div>
  371.         </div>
  372.         <!---------------------------- TO ADD/ END/ EACH FILM ---------------------------->
  373.  
  374.  
  375.        
  376. <!---------------------------- END/ FILM SECTION (CONTENT) ---------------------------->
  377.  
  378. </div></div></div></div>
  379.  
  380. <div class="ca-item ca-item-2"><div class="desc">
  381.  
  382. <!---------------------------- START/ BOOK SECTION (TITLE) ---------------------------->
  383.  
  384. <h1>Books</h1>
  385. You can have some text here if you want, maybe a total count or a note of your favourites.
  386.  
  387. <!---------------------------- END/ BOOK SECTION (TITLE) ---------------------------->
  388.  
  389. <div class="noted"><a href="#" class="ca-more">details...</a></div>
  390. </div>
  391.  
  392. <div class="ca-content-wrapper"><div class="ca-content">
  393. <a href="#" class="ca-close">close</a>
  394.  
  395. <div class="text">
  396.  
  397. <!---------------------------- START/ BOOK SECTION (CONTENT) ---------------------------->
  398.  
  399.  
  400.         <!---------------------------- START/ EACH BOOK ---------------------------->
  401.         <div class="box">
  402.         <img src="http://i.imgur.com/J3iNaX1.jpg">
  403.         <h3>Frost Burned (Mercy Thompson #7)</h3>
  404.         <div class="details">By Patricia Briggs - <a href="http://www.goodreads.com/book/show/13413589-frost-burned">Goodreads</a> - 10 March</div>
  405.         <div class="syp">Mercy Thompson's life has undergone a seismic change. Becoming the mate of Adam Hauptman - the charismatic Alpha of the local werewolf pack - has made her a stepmother to his daughter Jesse, a relationship that brings moments of blissful normalcy to Mercy's life. But on the edges of humanity, a minor mishap on an ordinary day can turn into so much more. After an accident in bumper-to-bumper traffic, Mercy and Jesse can't reach Adam - or anyone else in the pack for that matter. They've all been abducted. Through their mating bond, all Mercy knows is that Adam is angry and in pain. Outclassed and on her own, Mercy may be forced to seek assistance from the most unlikely of allies: the vampire seethe.</div>
  406.         <div class="rating">eeeee</div>
  407.         </div>
  408.         <!---------------------------- END/ EACH BOOK ---------------------------->
  409.  
  410.  
  411.         <!---------------------------- START/ EACH BOOK ---------------------------->
  412.         <div class="box">
  413.         <img src="http://i.imgur.com/J3iNaX1.jpg">
  414.         <h3>Frost Burned (Mercy Thompson #7)</h3>
  415.         <div class="details">By Patricia Briggs - <a href="http://www.goodreads.com/book/show/13413589-frost-burned">Goodreads</a> - 10 March</div>
  416.         <div class="syp">Mercy Thompson's life has undergone a seismic change. Becoming the mate of Adam Hauptman - the charismatic Alpha of the local werewolf pack - has made her a stepmother to his daughter Jesse, a relationship that brings moments of blissful normalcy to Mercy's life. But on the edges of humanity, a minor mishap on an ordinary day can turn into so much more. After an accident in bumper-to-bumper traffic, Mercy and Jesse can't reach Adam - or anyone else in the pack for that matter. They've all been abducted. Through their mating bond, all Mercy knows is that Adam is angry and in pain. Outclassed and on her own, Mercy may be forced to seek assistance from the most unlikely of allies: the vampire seethe.</div>
  417.         <div class="rating">eeeee</div>
  418.         </div>
  419.         <!---------------------------- END/ EACH BOOK ---------------------------->
  420.        
  421.        
  422.         <!---------------------------- TO ADD/ START/ EACH BOOK ---------------------------->
  423.         <div class="box">
  424.         <img src="IMAGE-URL-HERE">
  425.         <h3>Title</h3>
  426.         <div class="details">Author Name - <a href="LINK-HERE">Goodreads</a> - Date Watched</div>
  427.         <div class="syp">Synopsis or Plot Details</div>
  428.         <div class="rating">eeeee</div>
  429.         </div>
  430.         <!---------------------------- TO ADD/ END/ EACH BOOK ---------------------------->
  431.        
  432.        
  433.        
  434. <!---------------------------- END/ BOOK SECTION (CONTENT) ---------------------------->
  435.  
  436. </div></div></div></div>
  437.  
  438. <div class="ca-item ca-item-3"><div class="desc">
  439.  
  440. <!---------------------------- START/ TV SECTION (TITLE) ---------------------------->
  441.  
  442. <h1>TV Shows</h1>
  443. You can have some text here if you want, maybe a total count or a note of your favourites.
  444.  
  445. <!---------------------------- END/ TV SECTION (TITLE) ---------------------------->
  446.  
  447. <div class="noted"><a href="#" class="ca-more">details...</a></div>
  448. </div>
  449.  
  450. <div class="ca-content-wrapper"><div class="ca-content">
  451. <a href="#" class="ca-close">close</a>
  452.  
  453. <div class="text">
  454. <!---------------------------- START/ TV SECTION (CONTENT) ---------------------------->
  455.  
  456.  
  457.         <!---------------------------- START/ EACH SHOW ---------------------------->
  458.         <div class="box">
  459.         <img src="http://i.imgur.com/cDePU.jpg" class="screencap">
  460.         <h3>Haven</h3>
  461.         <div class="details">Season Four, 13 Episodes - On Hiatus (Not Yet Renewed) <br> Favourite Episode: </div>
  462.         <div class="syp">FBI agent Audrey Parker arrives in Haven, Maine, to help the local police and joins forces with the Chief's son, Nathan Warnous. Whilst helping with everything in the small town Audrey finds out truths she never would've expected and together she and Nathan begin to unravel the 'troubles' that surround the local area and begin to become more and more engrossed with what is causing the strange occurences that are terrifying and even killing the locals.</div>
  463.         </div>
  464.         <!---------------------------- END/ EACH SHOW ---------------------------->
  465.  
  466.  
  467.         <!---------------------------- START/ EACH SHOW ---------------------------->
  468.         <div class="box">
  469.         <img src="http://i.imgur.com/cDePU.jpg" class="screencap">
  470.         <h3>Haven</h3>
  471.         <div class="details">Season Four, 13 Episodes - On Hiatus (Not Yet Renewed) <br> Favourite Episode: </div>
  472.         <div class="syp">FBI agent Audrey Parker arrives in Haven, Maine, to help the local police and joins forces with the Chief's son, Nathan Warnous. Whilst helping with everything in the small town Audrey finds out truths she never would've expected and together she and Nathan begin to unravel the 'troubles' that surround the local area and begin to become more and more engrossed with what is causing the strange occurences that are terrifying and even killing the locals.</div>
  473.         </div>
  474.         <!---------------------------- END/ EACH SHOW ---------------------------->
  475.        
  476.  
  477.         <!---------------------------- TO ADD/ START/ EACH BOOK ---------------------------->
  478.         <div class="box">
  479.         <img src="IMAGE-URL-HERE" class="screencap">
  480.         <h3>Title</h3>
  481.         <div class="details">Season/Episodes/Status <br> Favourite Episode: </div>
  482.         <div class="syp">Synopsis or Plot Details</div>
  483.         </div>
  484.         <!---------------------------- TO ADD/ END/ EACH BOOK ---------------------------->
  485.        
  486.  
  487.        
  488. <!---------------------------- END/ TV SECTION (CONTENT) ---------------------------->
  489.  
  490. </div></div></div></div>
  491.  
  492.  
  493.  
  494.  
  495. </div>
  496. </div>
  497. </div>
  498.  
  499.        
  500.        
  501.        
  502. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  503.  
  504.         <script type="text/javascript" src="http://static.tumblr.com/whx9ghv/fP6mp28rz/jquery.easing.1.3.js"></script>
  505.         <script type="text/javascript" src="http://static.tumblr.com/whx9ghv/V7hmyujb7/jquery.contentcarousel.js"></script>
  506.        
  507.         <script type="text/javascript">
  508.             $('#container').contentcarousel();
  509.         </script>
  510.        
  511.        
  512.     </body>
  513. </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!