API tools faq
paste
dansmilth

Event Page

dansmilth
Jul 30th, 2015
1,501
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.71 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3.  
  4. <!-----------
  5.  
  6. EVENT PAGE by clumhood
  7.  
  8. :> ------------>
  9.  
  10. <title>EVENTS</title>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  14.  
  15. <link href='http://fonts.googleapis.com/css?family=Roboto:700,400' rel='stylesheet' type='text/css'>
  16.  
  17. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  18.  
  19. <script type="text/javascript">
  20. WebFontConfig = {
  21. google: { families: [ 'Roboto:700,400:latin' ] }
  22. };
  23. (function() {
  24. var wf = document.createElement('script');
  25. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  26. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  27. wf.type = 'text/javascript';
  28. wf.async = 'true';
  29. var s = document.getElementsByTagName('script')[0];
  30. s.parentNode.insertBefore(wf, s);
  31. })(); </script>
  32.  
  33. <!------- filter scripts -------->
  34. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  35. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  36. <script>
  37. $(function(){
  38.  
  39. <!------- filter scripts -------->
  40. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  41. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  42. <script>
  43. $(function(){
  44.  
  45. var $container = $('#container');
  46.  
  47. $container.isotope({
  48. itemSelector : '.story'
  49. });
  50.  
  51.  
  52. var $optionSets = $('#sort .option-set'),
  53. $optionLinks = $optionSets.find('a');
  54.  
  55. $optionLinks.click(function(){
  56. var $this = $(this);
  57. // don't proceed if already selected
  58. if ( $this.hasClass('selected') ) {
  59. return false;
  60. }
  61. var $optionSet = $this.parents('.option-set');
  62. $optionSet.find('.selected').removeClass('selected');
  63. $this.addClass('selected');
  64.  
  65. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  66. var options = {},
  67. key = $optionSet.attr('data-option-key'),
  68. value = $this.attr('data-option-filter');
  69. // parse 'false' as false boolean
  70. value = value === 'false' ? false : value;
  71. options[ key ] = value;
  72. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  73. // changes in layout modes need extra logic
  74. changeLayoutMode( $this, options )
  75. } else {
  76. // otherwise, apply new options
  77. $container.isotope( options );
  78. }
  79.  
  80. return false;
  81. });
  82.  
  83.  
  84. });
  85. </script>
  86.  
  87. <!-----end filter scripts------>
  88.  
  89. <!-----end filter scripts------>
  90.  
  91. <style type="text/css">
  92.  
  93. body {
  94. font-family:arial;
  95. font-size:12px;
  96. background:#f8f8f8; /**this is the color of the bg.*/
  97.  
  98. }
  99.  
  100. a {
  101. color:#676767; /**this is the color of the links.*/
  102. text-decoration:none;
  103. }
  104.  
  105. ::-webkit-scrollbar {
  106. background-color: white;
  107. height:8px;
  108. width:5px
  109. }
  110.  
  111. ::-webkit-scrollbar-thumb:vertical {
  112. background-color:black;
  113. height:50px
  114. }
  115.  
  116. ::-webkit-scrollbar-thumb:horizontal {
  117. background-color:black;
  118. height:8px!important
  119. }
  120.  
  121.  
  122. .top {
  123. width:1594px;
  124. background:white; /**this is the color of the topbar background.*/
  125. text-align:left;
  126. padding-bottom:0px;
  127. margin-bottom:30px;
  128. margin-top:-9px;
  129. margin-left:-7px;
  130. }
  131.  
  132. .top2 {
  133. width:1080px;
  134. background:white; /**this is the color of the filter titles topbar background.*/
  135. text-align:left;
  136. padding-bottom:0px;
  137. margin-bottom:20px;
  138. margin-top:10px;
  139. margin-left:-7px;
  140.  
  141. }
  142.  
  143. #sort {
  144. padding:10px;
  145. text-align:center;
  146. font-family:'roboto', sans-serif;
  147. font-size:15px;
  148. text-transform:uppercase;
  149. }
  150.  
  151. #sort a {
  152. margin-left:30px;
  153. }
  154.  
  155. #sort a:hover {
  156. color:black; /**this is the color of the filter links when you hover over them.*/
  157. }
  158.  
  159. .title {
  160. float:left;
  161. padding:30px;
  162. padding-top:30px;
  163. font-family:'roboto', sans-serif;
  164. font-size:15px;
  165. text-transform:uppercase;
  166. font-weight:bold;
  167. }
  168.  
  169. .links {
  170. width:1100px;
  171. text-align:center;
  172. padding:30px;
  173.  
  174.  
  175. }
  176.  
  177. .links a {
  178. font-family:'roboto', sans-serif;
  179. font-size:15px;
  180. text-transform:uppercase;
  181. padding:30px;
  182. border-left:1px solid #eee;
  183. margin-left:-3px;
  184.  
  185.  
  186. }
  187.  
  188. .links a:hover {
  189. background:black; /**this is the color of the background of the links when you hover over them.*/
  190. color:white; /**this is the color of the links when you hover over them.*/
  191.  
  192. }
  193.  
  194. .links a:last-child {
  195. border-right:1px solid #eee;
  196. }
  197.  
  198.  
  199. #container {
  200. width:1080px;
  201. margin-top:10px;
  202. }
  203.  
  204. #content {
  205. margin:10px;
  206. overflow:hidden;
  207. width:250px;
  208. float:left;
  209. box-shadow:0px 3px 10px rgba(0,0,0,.15);
  210. text-align:left;
  211. line-height:150%;
  212. background:white; /**this is the color of the background of each event.*/
  213. transition-duration:1s;
  214. -moz-transition-duration:1s;
  215. -webkit-transition-duration:1s;
  216. -o-transition-duration:1s;
  217. }
  218.  
  219. #content img {
  220. float:left;
  221. margin-right:5px;
  222. padding:10px;
  223. width:100px;
  224. height:100px;
  225. }
  226.  
  227.  
  228. .desc {
  229. padding:10px;
  230. margin-top:10px;
  231. font-size:11px;
  232. }
  233.  
  234. .tag {
  235. text-transform:uppercase;
  236. text-align:left;
  237. padding:5px;
  238. font-family:'roboto', sans-serif;
  239. margin-top:5px;
  240. }
  241.  
  242. .tag a {
  243. background:black; /**this is the color of the tag background on each event.*/
  244. padding:5px 30px 5px 30px;
  245. color:white; /**this is the color of the tag link on each event.*/
  246.  
  247. }
  248.  
  249. .tag a:hover {
  250. background:pink; /**this is the color of the tag background on each event when you hover of it.*/
  251. color:white; /**this is the color of the tag link on each event when you hover over it.*/
  252. transition-duration:1s;
  253. -moz-transition-duration:1s;
  254. -webkit-transition-duration:1s;
  255. -o-transition-duration:1s;
  256. }
  257.  
  258.  
  259. #content2 {
  260. margin:10px;
  261. overflow:hidden;
  262. width:250px;
  263. float:left;
  264. box-shadow:0px 3px 10px rgba(0,0,0,.15);
  265. text-align:left;
  266. line-height:150%;
  267. background:#f8f8f8; /**this is the color of the background of each past event.*/
  268. transition-duration:1s;
  269. -moz-transition-duration:1s;
  270. -webkit-transition-duration:1s;
  271. -o-transition-duration:1s;
  272. }
  273.  
  274. #content2 img {
  275. float:left;
  276. margin-right:5px;
  277. padding:10px;
  278. width:100px;
  279. width:100px;
  280. }
  281.  
  282. </style>
  283. </head>
  284.  
  285. <body>
  286.  
  287. <!-- MAIN TOPBAR LINKS -->
  288.  
  289. <div class="top">
  290. <div class="title"><i class="fa fa-diamond"></i> halseysource</div>
  291. <center><div class="links">
  292. <a href="/">Home</a>
  293. <a href="/ask">inbox</a>
  294. <a href="/">Link</a>
  295. <a href="/">Link</a>
  296. <a href="/">Link</a>
  297. <!-- DO NOT REMOVE THE CREDIT -->
  298. <a href="http://clumhood.tumblr.com/">credit</a>
  299. </div></center>
  300. </div>
  301.  
  302. <!-- FILTER LINKS -->
  303.  
  304. <center><div class="top2">
  305. <div id="sort">
  306. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  307.  
  308. <!-- CHOOSE A FILTER NAME FOR EACH TYPE OF EVENT. DONT TOUCH THE FIRST LINK .story THIS IS YOUR MAIN FILTER FOR EVERY EVENT. CHANGE THE NAME OF YOUR FILTER: EX .smt or .festival -->
  309. <a href="#filter" data-option-filter=".story">All</a>
  310. <a href="#filter" data-option-filter=".smt">Smoke + Mirrors</a>
  311. <a href="#filter" data-option-filter=".festival">Festivals</a>
  312. <a href="#filter" data-option-filter=".badlands">Badlands Tour</a>
  313. <a href="#filter" data-option-filter=".other">Others</a>
  314. <a href="#filter" data-option-filter=".past">Previous shows</a>
  315.  
  316. </ul>
  317. </div>
  318. </div></center>
  319.  
  320. <center><div id="container" class="clearfix">
  321.  
  322. <!-- AFTER class="story tags" CHANGE TO THE ACCURATE TAG. DONT REMOVE story ITS YOUR MAIN FILTER FOR WHEN YOU CLICK ON All IN THE FILTER TOPBAR -->
  323. <div id="content" class="story smt">
  324. <!-- THIS IS YOUR EVENT IMAGE -->
  325. <img src="http://static.tumblr.com/zy3qjic/VR3ns9emo/2.png"/>
  326. <div class="desc">
  327. <b>JULY 30TH</b>
  328. <br>Vancouver, CA
  329. <br>Rogers Arena
  330. <div class="tag"><a href="/tagged/smt vancouver">Tag</a></div>
  331. </div>
  332. </div>
  333.  
  334. <!-- FOR PAST EVENTS CHANGE <div id="content" to <div id="content2" -->
  335.  
  336. <div id="content2" class="story smt past">
  337. <img src="http://static.tumblr.com/zy3qjic/VR3ns9emo/2.png"/>
  338. <div class="desc">
  339. <b>JULY 28TH</b>
  340. <br>Salt Lake City, UT
  341. <br>EnergySolutions Arena
  342. <div class="tag"><a href="/tagged/smt slt">Tag</a></div>
  343. </div>
  344. </div>
  345.  
  346.  
  347.  
  348. </div></center>
  349.  
  350.  
  351.  
  352. </body>
  353. </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!