API tools faq
paste
seiche

page six: poppy

seiche
Mar 22nd, 2021 (edited)
7,782
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.37 KB | None | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>{Title} / Media</title>
  5.  
  6. <link rel="shortcut icon" href="{Favicon}">
  7. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  8. <meta charset="utf-8">
  9. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.  
  11. <!---
  12.  
  13. POPPY MEDIA PAGE BY SEYCHE.TUMBLR.COM
  14.  
  15. CREDITS:
  16. -feather icons by Cole Bemis
  17. -tippy.js tooltips by atomiks
  18. -isotope filtering by metafizzy / tutorial by @magnusthemes
  19. (full list of credits @ seyche.tumblr.com/credits)
  20.  
  21. --->
  22.  
  23. <link rel="preconnect" href="https://fonts.gstatic.com">
  24. <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
  25.  
  26. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  27.  
  28. <script src="https://unpkg.com/feather-icons"></script>
  29.  
  30. <style type="text/css">
  31.  
  32. /*----- VARIABLES: EDIT THIS SECTION!!!! -----*/
  33.  
  34. :root {
  35.  
  36. /*----- colours -----*/
  37.  
  38. --background: #f0f0f0;
  39. --content-background: #fff;
  40. --text: #525252;
  41. --links: #8c8c8c;
  42. --accent: #c9183f;
  43. --title: #212121;
  44. --drop-shadow: #e7e7e7;
  45. --rating-star: #fad21e;
  46. --favourite-heart: #de2121;
  47. --popup-background: #3a3a3a;
  48. --popup-text: #fafafa;
  49.  
  50. --filter-title: #212121;
  51. --filter-text: #5a5a5a;
  52. --filter-link: #8c8c8c;
  53.  
  54. /*--- images / item widths are 250px in width and can't be changed without making the page non-responsive for small screens. however, feel free to change image heights. default image ratio is 2 : 3 and images will resize automatically. ---*/
  55.  
  56. --media-image-height: 375px;
  57.  
  58. /*----- font styling -----*/
  59.  
  60. --body-font: 'Fira Sans', sans-serif;
  61. --title-font: 'Montserrat', sans-serif;
  62. --font-size: 15px;
  63.  
  64. }
  65.  
  66. /*----- END VARIABLES: you don't need to edit the css after here -----*/
  67.  
  68. </style>
  69.  
  70. <link rel="stylesheet" href="https://seyche.github.io/external-files-hosting/pages/poppymedia.css">
  71.  
  72. </head>
  73. <body>
  74.  
  75. <!----- HEADER ----->
  76.  
  77. <header>
  78. <div class="header-left">
  79.  
  80. <!----- ================================
  81.  
  82. START EDITING HERE: fill in your title here
  83.  
  84. ================================= ----->
  85.  
  86. <!-- this is your blog icon. if you want a different image to show up, replace {PortraitURL-128} with the image URL of your choice. -->
  87.  
  88. <img src="{PortraitURL-128}" class="icon" alt="blog avatar icon"/>
  89.  
  90. <div class="title-details">
  91. <div class="title">Media</div>
  92. </div>
  93.  
  94. </div>
  95.  
  96. <!-- nav links. icons are from feathericons.com; if you want to change them or add more links, go to the site, fint the name of the new icon you want, and replace it below. -->
  97.  
  98. <nav>
  99. <a href="/" title="return home"><i data-feather="home"></i></a>
  100. <a href="/ask" title="ask"><i data-feather="mail"></i></a>
  101. <a href="/archive" title="archive"><i data-feather="grid"></i></a>
  102. <a href="https://tumblr.com/dashboard" title="dashboard"><i data-feather="compass"></i></a>
  103. </nav>
  104.  
  105. </header>
  106.  
  107. <!----- END OF HEADER ----->
  108.  
  109. <!----- MAIN CONTENT ----->
  110.  
  111. <main>
  112.  
  113. <!----- ================================
  114.  
  115. START EDITING FILTERS HERE:
  116.  
  117. ================================= ----->
  118.  
  119. <div id="filters">
  120.  
  121. <!---
  122.  
  123. start editing filter title and description here. if you want to include a description after the title, copy:
  124. <div class="filter-desc">Optional description.</div>
  125.  
  126. and paste it right AFTER <div class="title">Filter</div>.
  127.  
  128. --->
  129.  
  130. <div class="title">Filter</div>
  131.  
  132. <!--
  133.  
  134. ADDING MORE FILTER GROUPS:
  135.  
  136. a filter group looks like this:
  137.  
  138. <div class="filter-wrap">
  139. <ul class="filter option-set" data-filter-group="GROUP1">
  140. <li class="subtitle">TITLE:</li>
  141. <li><a href="#" data-filter-value=".FILTER">FILTER</a></li>
  142. </ul>
  143. </div>
  144.  
  145. copy and paste that to add additional filter groups. you can have multiple groups.
  146.  
  147. the values in CAPITALS are where you need to edit. data-filter-group MUST be "groupX" where X = the number of the group. so for a third group, it would be "group3", a fourth would be "group4", etc.
  148.  
  149. if you add the class "exclusive" to <ul></ul>, the filters in that group will be exclusive, meaning you won't be able to select multiple filters in that group.
  150.  
  151. ===================================
  152.  
  153. ADDING FILTERS WITHIN GROUPS:
  154.  
  155. every filter looks like this:
  156.  
  157. <li><a href="#" data-filter-value=".FILTER">FILTER NAME</a></li>
  158.  
  159. the spots above in capital letters are where you need to edit. don't change the other parts. data-filter-value is where you enter the filter in the filtering system, and "FILTER NAME" is the filter link that actually shows up in the header. the value of data-filter-value must have a "." in front of it.
  160.  
  161. to apply the filters on the items, add the name of the new filter as a class to <article></article>. it must match exactly the value you gave to your filter in the new group, MINUS the ".", so it should look like: <article class="FILTER">. as long as you adhere to both of those conditions, you can name data-filter-value whatever you want, and you can have as many filters as you want on <article>.
  162.  
  163. -->
  164.  
  165. <!-- filter group one -->
  166.  
  167. <div class="filter-wrap">
  168.  
  169. <ul class="filter option-set exclusive" data-filter-group="group1">
  170. <li class="subtitle">Type:</li>
  171. <li><a href="#" data-filter-value="" class="selected">All media</a></li>
  172. <li><a href="#" data-filter-value=".film">Films</a></li>
  173. <li><a href="#" data-filter-value=".tv">TV Shows</a></li>
  174. <li><a href="#" data-filter-value=".book">Books</a></li>
  175.  
  176. <!-- make sure any filters you add in this group go above this line -->
  177.  
  178. </ul>
  179.  
  180. </div>
  181.  
  182. <!-- filter group two -->
  183.  
  184. <div class="filter-wrap">
  185.  
  186. <ul class="filter option-set" data-filter-group="group2">
  187. <li class="subtitle">Rating:</li>
  188. <li><a href="#" data-filter-value=".one">One</a></li>
  189. <li><a href="#" data-filter-value=".two">Two</a></li>
  190. <li><a href="#" data-filter-value=".three">Three</a></li>
  191. <li><a href="#" data-filter-value=".four">Four</a></li>
  192. <li><a href="#" data-filter-value=".five">Five</a></li>
  193. </ul>
  194.  
  195. </div>
  196.  
  197. <!-- any additional filters groups must go above this line -->
  198.  
  199. </div>
  200.  
  201. <!----- END OF FILTERS ----->
  202.  
  203. <!----- MEDIA GRID ----->
  204.  
  205. <section>
  206.  
  207. <!----- ================================
  208.  
  209. START EDITING MEDIA ITEMS HERE:
  210.  
  211. every media item looks like this:
  212.  
  213. <article>
  214. <img src="https://via.placeholder.com/250x375.png" alt="media image">
  215.  
  216. <div class="popup">
  217. Description here.
  218. <nav>
  219. <a href="/">link</a>
  220. </nav>
  221. </div>
  222.  
  223. <div class="item-desc">
  224. <a class="more"><i data-feather="plus"></i></a>
  225.  
  226. <div class="subtitle">Media Title</div>
  227. <i>Subtitle</i>
  228. <div class="rating">
  229. <i data-feather="star"></i>
  230. </div>
  231. </div>
  232. </article>
  233.  
  234. copy and paste it as many times as you want, and don't forget to add filters on <article>.
  235.  
  236. if you don't want the popup, delete everything between and including <div class="popup"></div> AND <a class="more" title="more info"><i data-feather="plus"></i></a>.
  237.  
  238. if you want to use the popup, you CAN'T delete the images.
  239.  
  240. ================================= ----->
  241.  
  242. <!-- item one -->
  243.  
  244. <article class="tv five">
  245. <img src="https://via.placeholder.com/250x375.png" alt="media image">
  246.  
  247. <div class="popup">
  248. Slide-in description goes here.
  249. <nav>
  250. <a href="/">link</a>
  251. </nav>
  252. </div>
  253.  
  254. <div class="item-desc">
  255. <a class="more"><i data-feather="plus"></i></a>
  256.  
  257. <div class="subtitle">Title</div>
  258. <i>Subtitle</i>
  259. <div class="rating">
  260. <i data-feather="star"></i>
  261. <i data-feather="star"></i>
  262. <i data-feather="star"></i>
  263. <i data-feather="star"></i>
  264. <i data-feather="star"></i>
  265. </div>
  266. </div>
  267. </article>
  268.  
  269. <!-- item two -->
  270.  
  271. <article class="film one">
  272. <img src="https://via.placeholder.com/250x375.png" alt="media image">
  273.  
  274. <div class="popup">
  275. <p>
  276. Slide-in description goes here.
  277. </p>
  278. <p>
  279. You can even write multiple paragraphs, separated by < p > and < /p >, if you want, and add fancy text styles, like <b>bold</b>, <i>italic</i>, and <u>underlined</u>.
  280. </p>
  281. <nav>
  282. <a href="/">link</a>
  283. </nav>
  284. </div>
  285.  
  286. <div class="item-desc">
  287. <a class="more"><i data-feather="plus"></i></a>
  288.  
  289. <div class="subtitle">Title</div>
  290. <i>Subtitle</i>
  291. <div class="rating">
  292. <i data-feather="star"></i>
  293. </div>
  294. </div>
  295. </article>
  296.  
  297. <!-- ALL NEW MEDIA ITEMS MUST BE ADDED ABOVE THIS LINE -->
  298.  
  299. </section>
  300.  
  301. <!----- ================================
  302.  
  303. END OF MEDIA GRID. STOP EDITING HERE.
  304.  
  305. ================================= ----->
  306.  
  307. <div id="k"><a href="https://seyche.tumblr.com/">poppy page by seyche</a></div>
  308.  
  309. </main>
  310.  
  311. <!----- JQUERY, DON'T TOUCH ----->
  312.  
  313. <!----- ISOTOPE FILTERS, LICENSED UNDER A GPLV3 LICENSE ----->
  314.  
  315. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  316. <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  317. <script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script>
  318.  
  319. <!----- TOOLTIPS ----->
  320.  
  321. <script src="https://unpkg.com/popper.js@1"></script>
  322. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  323.  
  324. <script src="https://seyche.github.io/external-files-hosting/pages/poppy.js"></script>
  325.  
  326. <script>feather.replace()</script>
  327.  
  328. </body>
  329. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!