API tools faq
paste
Advertisement
pistachi-o

media 2014 (v3)

pistachi-o
Jan 2nd, 2014
1,239
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.10 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 3 (No Frills)
  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.  
  32. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  33.  
  34. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
  35. <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  36.  
  37.  
  38.  
  39.  
  40. <style type="text/css">
  41.  
  42. /* Reset ----------------------------- */
  43.  
  44. body,div,dl,dt,dd,pre,form,fieldset,input,textarea,ul,p,th,td {margin:0;padding:0;}
  45.  
  46. /* Scrollbar ----------------------------- */
  47.  
  48. ::-webkit-scrollbar {width: 6px;}
  49. ::-webkit-scrollbar-track {background: #fafafa;}
  50. ::-webkit-scrollbar-thumb {background: #ff4e50;}
  51.  
  52. /* General ----------------------------- */
  53.  
  54. body {
  55. background: #FAFAFA;
  56. font-family: 'PT Serif', 'Arial', sans-serif;
  57. font-size: 11px;
  58. line-height: 130%;
  59. color: #000000;
  60. overflow-x: hidden;
  61. }
  62.  
  63. a:link, a:active, a:visited {
  64. color: #fc913a;
  65. text-decoration: none;
  66. }
  67.  
  68. a:hover {
  69. color: #ede574;
  70. text-decoration: none;
  71. }
  72.  
  73. b {
  74. color: #3e6b48;
  75. }
  76.  
  77. p {
  78. margin: 10px 0px;
  79. }
  80.  
  81. /* Sidebar ----------------------------- */
  82.  
  83. .sidebar {
  84. position: absolute;
  85. top: 0;
  86. right: 0;
  87. width: 25%;
  88. height: 100%;
  89. text-align: center;
  90. background: #131410;
  91. background: url('http://static.tumblr.com/52f32f34b4b5ce997df54e71e1bf29bd/whx9ghv/27Dmqgrp4/tumblr_static_7600119622_05953bd110_b.jpg');
  92. background-position: bottom;
  93. background-repeat: repeat;
  94. z-index: 9999;
  95. }
  96.  
  97. .slinks {
  98. font-family: 'Playfair Display', 'Georgia', sans-serif;
  99. display: inline-block;
  100. font-size: 12px;
  101. font-style: italic;
  102. text-transform: lowercase;
  103. text-align: center;
  104. }
  105.  
  106. .slinks a {
  107. margin: 5px;
  108. padding: 3px 10px;
  109. font-family: 'Playfair Display', 'Georgia', serif;
  110. background: #fafafa;
  111. font-size: 12px;
  112. line-height: 200%;
  113. text-align: center;
  114. font-style: italic;
  115. font-weight: 700;
  116. }
  117.  
  118. /* Spacing ----------------------------- */
  119.  
  120. .ca-container {
  121. position: absolute;
  122. margin: 0;
  123. width: 100%;
  124. height: 100%;
  125. }
  126.  
  127.  
  128. .ca-item {
  129. position: relative;
  130. float: left;
  131. width: 25%;
  132. height: 100%;
  133. text-align: center;
  134. background: #fafafa;
  135. }
  136.  
  137. .ca-content {
  138. position: relative;
  139. float: left;
  140. width: 50%;
  141. height: 100%;
  142. background: #f7f7e4;
  143. z-index: 10000;
  144. overflow-x: hidden;
  145. overflow-y: auto;
  146. }
  147.  
  148. .text {
  149. margin: 15%; /* adjust this number according to your screen size and what looks better */
  150. }
  151.  
  152. h1 {
  153. font-family: 'Playfair Display', 'Georgia', serif;
  154. text-transform: uppercase;
  155. font-size: 44px;
  156. color: #edd456;
  157. text-shadow: 1px 1px 1px #897c63;
  158. }
  159.  
  160. .desc {
  161. position: absolute;
  162. width: 260px;
  163. height: 260px;
  164. top: 50%;
  165. left: 50%;
  166. -webkit-transform: translateX(-50%) translateY(-50%);
  167. -moz-transform: translateX(-50%) translateY(-50%);
  168. -ms-transform: translateX(-50%) translateY(-50%);
  169. transform: translateX(-50%) translateY(-50%);
  170. overflow: hidden;
  171. }
  172.  
  173. /* Media Boxes ----------------------------- */
  174.  
  175. .box {
  176. padding: 25px 0px;
  177. text-align: left;
  178. min-height: 155px;
  179. border-bottom: 1px solid #fc913a;
  180. }
  181.  
  182. .box img {
  183. width: 110px;
  184. height: 155px;
  185. padding: 3px;
  186. border: 1px solid #ddd;
  187. }
  188.  
  189. .box:nth-of-type(odd) img {
  190. float: left;
  191. margin-right: 10px;
  192. }
  193.  
  194. .box:nth-of-type(even) img {
  195. float: right;
  196. margin-left: 10px;
  197. }
  198.  
  199. .screencap {
  200. width: 275px !important;
  201. }
  202.  
  203. .rating {
  204. margin: 5px 0px;
  205. font-family: 'sosa';
  206. font-size: 12px;
  207. color: #FFD700;
  208. text-transform: lowercase;
  209. font-style: normal;
  210. }
  211.  
  212. h3 {
  213. font-size: 12px;
  214. margin: 4px 0px;
  215. }
  216.  
  217. .syp {
  218. margin: 10px 0px;
  219. text-align: justify;
  220. }
  221.  
  222. .details {
  223. text-transform: uppercase;
  224. }
  225.  
  226. #tiles {
  227. width: 500px;
  228. margin: 0px auto;
  229. }
  230.  
  231. .stylewrap {
  232. float: left;
  233. width: 230px;
  234. margin: 10px;
  235. background: #DDD;
  236. }
  237.  
  238. .stylewrap a {
  239. display: block;
  240. margin: 5px;
  241. background: rgba(250, 250, 250, 0.4);
  242. padding: 2px 5px;
  243. text-transform: uppercase;
  244. font-size: 10px;
  245. }
  246.  
  247. h4 {
  248. background: #edd456;
  249. font-family: 'Playfair Display', 'Georgia', sans-serif;
  250. font-size: 14px;
  251. text-transform: uppercase;
  252. text-align: center;
  253. color: #ff4e50;
  254. margin: 0px;
  255. padding: 5px 0px;
  256. }
  257.  
  258. /* @font-face (SOSA) ----------------------------- */
  259.  
  260. @font-face {
  261. font-family: 'sosa';
  262.     src: url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot");
  263.     src:
  264.         url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot?#iefix") format('embedded-opentype'),
  265.         url("http://static.tumblr.com/whx9ghv/zwPmbwkjn/sosa.woff") format('woff'),
  266.         url("http://static.tumblr.com/whx9ghv/5Skmbwkja/sosa.ttf") format('truetype'),
  267.         url("http://static.tumblr.com/whx9ghv/KXgmbwkj1/sosa.svg#icons") format('svg');
  268. font-weight: normal;
  269. font-style: normal;
  270. }
  271.  
  272.  
  273. </style>
  274. </head>
  275.  
  276.  
  277. <body>
  278.  
  279. <div id="container" class="ca-container">
  280.  
  281. <!---------------------------- START/ SIDEBAR ---------------------------->
  282.  
  283. <div class="sidebar"><div class="desc">
  284. <div class="slinks">
  285. <a href="/">Back Home</a>
  286. <a href="http://www.tumblr.com">Dashboard</a>
  287. <a href="http://nutty-themes.tumblr.com">Credit</a>
  288. </div>
  289. </div></div>
  290.  
  291. <!---------------------------- END/ SIDEBAR ---------------------------->
  292.  
  293. <div class="ca-item"><div class="desc">
  294.  
  295. <!---------------------------- START/ ABOUT SECTION (TITLE) ---------------------------->
  296.  
  297. <h1>Media 2014</h1>
  298. You can have some text here if you want, maybe a total count or a note of your favourites.
  299.  
  300. <!---------------------------- END/ ABOUT SECTION (TITLE) ---------------------------->
  301.  
  302. </div></div>
  303.  
  304. <div class="ca-content">
  305.  
  306. <div class="text">
  307.  
  308. <!---------------------------- START/ MEDIA SECTION (CONTENT) ---------------------------->
  309.  
  310.  
  311.         <!---------------------------- START/ EACH FILM ---------------------------->
  312.         <div class="box">
  313.         <img src="http://i.imgur.com/iF6r1iE.jpg">
  314.         <h3>Stoker (2013)</h3>
  315.         <div class="details"><a href="http://www.imdb.com/title/tt1682180/">IMDB</a> - Dir: Park Chan Wook - 01 March</div>
  316.         <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>
  317.         <div class="rating">eeeee</div>
  318.         </div>
  319.         <!---------------------------- END/ EACH FILM ---------------------------->
  320.  
  321.        
  322.         <!---------------------------- START/ EACH BOOK ---------------------------->
  323.         <div class="box">
  324.         <img src="http://i.imgur.com/J3iNaX1.jpg">
  325.         <h3>Frost Burned (Mercy Thompson #7)</h3>
  326.         <div class="details">By Patricia Briggs - <a href="http://www.goodreads.com/book/show/13413589-frost-burned">Goodreads</a> - 10 March</div>
  327.         <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>
  328.         <div class="rating">eeeee</div>
  329.         </div>
  330.         <!---------------------------- END/ EACH BOOK ---------------------------->
  331.        
  332.  
  333.         <!---------------------------- START/ EACH SHOW ---------------------------->
  334.         <div class="box">
  335.         <img src="http://i.imgur.com/cDePU.jpg" class="screencap">
  336.         <h3>Haven</h3>
  337.         <div class="details">Season Four, 13 Episodes - On Hiatus (Not Yet Renewed) <br> Favourite Episode: </div>
  338.         <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>
  339.         </div>
  340.         <!---------------------------- END/ EACH SHOW ---------------------------->
  341.        
  342.        
  343.        
  344. <!---------------------------- END/ MEDIA SECTION (CONTENT) ---------------------------->
  345.  
  346. </div></div></div></div>
  347.  
  348.  
  349.  
  350.  
  351.  
  352.  
  353. </div>
  354. </div>
  355. </div>
  356.  
  357.  
  358. </body>
  359. </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!