API tools faq
paste
Advertisement
b0rn-to-be-wild

- Icons Page (bright) -

b0rn-to-be-wild
Aug 23rd, 2016
190
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.42 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. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <!----
  5.  
  6. © borntobewildthemes.tumblr.com | "Icons page" (bright)
  7.  
  8.  
  9. + Please do not redistribute this theme or remove credits.
  10. + You are allowed to make changes as long as you keep our credits.
  11. + If you have any questions or concerns, just contact us.
  12. + Thanks for using our page! We hope that you enjoy it!
  13.  
  14. ---->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <!--- Change the title of the page here --->
  21.  
  22. <title>{title}</title>
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <!--- Google fonts --->
  27.  
  28. <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  29.  
  30. <link href='http://fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
  31.  
  32. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  33.  
  34.  
  35. <style type="text/css">
  36.  
  37. /* -------- BASICS ------- */
  38.  
  39. body {
  40. background: #f6f6f6;
  41. margin:0;
  42. width:100%;
  43. height:100%;
  44. font-family:Helvetica, Arial;
  45. font-size:12px;
  46. }
  47.  
  48. /* Links */
  49.  
  50. a {
  51. text-decoration:none;
  52. outline:none;
  53. -webkit-transition: all 0.5s ease-in-out;
  54. -moz-transition: all 0.5s ease-in-out;
  55. -o-transition: all 0.5s ease-in-out;
  56. }
  57.  
  58. a:hover {
  59. color:#eee;
  60. -webkit-transition: all 0.5s ease-in-out;
  61. -moz-transition: all 0.5s ease-in-out;
  62. -o-transition: all 0.5s ease-in-out;
  63. }
  64.  
  65. /* Webkit scrollbar */
  66.  
  67. ::-webkit-scrollbar {
  68. background-color:#E1D5EB;
  69. border:2px solid #fff;
  70. height:5px;
  71. width:5px;
  72. }
  73.  
  74. ::-webkit-scrollbar-thumb:vertical {
  75. background-color:#E1D5EB;
  76. border:1px solid #fff;
  77. height:40px;
  78. }
  79.  
  80. ::-webkit-scrollbar-thumb:horizontal {
  81. background-color:#E1D5EB;
  82. border:1px solid #fff;
  83. height:8px!important
  84. }
  85.  
  86. /* -------- CONTAINER ------- */
  87.  
  88. #maincontainer{
  89. position:fixed;
  90. left:50%;
  91. top:50%;
  92. width:550px;
  93. height:auto;
  94. background:#fff;
  95. border:1px solid #eee;
  96. overflow:hidden;
  97. -webkit-transform: translateX(-50%) translateY(-50%);
  98. -moz-transform: translateX(-50%) translateY(-50%);
  99. -ms-transform: translateX(-50%) translateY(-50%);
  100. transform: translateX(-50%) translateY(-50%);
  101. }
  102.  
  103. /* -------- HEADER ------- */
  104.  
  105. #header{
  106. position:absolute;
  107. margin:0px;
  108. width:550px;
  109. background:#fff;
  110. height:57px;
  111. border-bottom:1px solid #eee;
  112. z-index:10000;
  113. }
  114.  
  115. /* Blog title */
  116.  
  117. .blogtitle{
  118. position:absolute;
  119. margin-left:15px;
  120. margin-top:0px;
  121. font-size:30px;
  122. line-height:57px;
  123. height:57px;
  124. width:360px;
  125. font-family:Oswald;
  126. color:#E4CEE5;
  127. }
  128.  
  129. /* Navigation icons */
  130.  
  131. .mainlinks{
  132. position:absolute;
  133. margin-left:455px;
  134. margin-top:19px;
  135. height:50px;
  136. width:90px;
  137. font-family:Oswald;
  138. color:#eee;
  139. }
  140.  
  141. .mainlinks i{
  142. display:inline-block;
  143. margin-left:2px;
  144. margin-bottom:3px;
  145. background:#d4f7d7;
  146. color:#333;
  147. padding:3px;
  148. font-size:11px;
  149. width:11px;
  150. }
  151.  
  152. .mainlinks i:hover{
  153. background:#fff;
  154. color:#CFE8F1;
  155. }
  156.  
  157. /* -------- CONTENT ------- */
  158.  
  159. #container{
  160. position:relative;
  161. margin-left:0px;
  162. margin-top:61px;
  163. width:546px;
  164. min-height:340px;
  165. max-height:340px;
  166. padding-left:10px;
  167. padding-top:5px;
  168. overflow-y:auto;
  169. }
  170.  
  171. .story{
  172. width:50px;
  173. margin:4px;
  174. padding:2.5px;
  175. transition-duration:1s;
  176. -moz-transition-duration:1s;
  177. -webkit-transition-duration:1s;
  178. -o-transition-duration:1s;
  179. }
  180.  
  181. /* Image container */
  182.  
  183. #icon{
  184. width:50px;
  185. height:50px;
  186. background:#fff;
  187. border:1px solid #eee;
  188. padding:3px;
  189. }
  190.  
  191. #icon img{
  192. width:100%;
  193. height:100%;
  194. }
  195.  
  196. /* -------- SORTING CONTENT ------- */
  197.  
  198. /* Sort box style */
  199.  
  200. #sort{
  201. position:relative;
  202. margin-left:auto;
  203. margin-right:auto;
  204. margin-top:5px;
  205. height:auto;
  206. padding-top:15px;
  207. padding-bottom:5px;
  208. width:100%;
  209. background:#fff;
  210. border-top:1px solid #eee;
  211. z-index:10000;
  212. text-align:center;
  213. }
  214.  
  215. #sort ul {
  216. list-style: none;
  217. margin-top:0px;
  218. padding-right:25px;
  219. }
  220.  
  221. /* Sort links */
  222.  
  223. #sort li {
  224. display:inline-block;
  225. text-align:center;
  226. list-style: none;
  227. margin-left:0px;
  228. max-height:10px;
  229. text-transform:uppercase;
  230. }
  231.  
  232. /* Sort link style */
  233.  
  234. #sort a {
  235. color:#333;
  236. margin:2px;
  237. border:1px solid #eee;
  238. background:#C7EBF3;
  239. border:1px solid transparent;
  240. display:inline;
  241. padding:5px;
  242. font-size:10px;
  243. }
  244.  
  245. #sort a:hover {
  246. color:#E1D5EB;
  247. background:#eee;
  248. }
  249.  
  250. #sort li a.selected {
  251. color:#fff;
  252. background:#eee;
  253. border:1px solid transparent;
  254. }
  255.  
  256. /* Color sort box style */
  257.  
  258. #colors{
  259. margin-top:0px;
  260. margin-left:0px;
  261. width:530px;
  262. padding:15px;
  263. padding-top:10px;
  264. padding-bottom:13px;
  265. height:15px;
  266. line-height:15px;
  267. background:#fff;
  268. border-top:1px solid #eee;
  269. text-align:center;
  270. }
  271.  
  272. #colors ul{
  273. padding:0;
  274. list-style:none;
  275. display:inline;
  276. }
  277.  
  278. #colors li{
  279. list-style:none;
  280. display:inline;
  281. }
  282.  
  283. #colors a{
  284. display:inline-block;
  285. width:15px;
  286. height:15px;
  287. margin-left:5px;
  288. margin-right:5px;
  289. list-style:none;
  290. border:1px solid #eee;
  291. }
  292.  
  293. /* ----------------------- CREDITS ----------------------------- */
  294.  
  295. #credits {
  296. position:fixed;
  297. right:10px;
  298. top:30px;
  299. z-index:100000;
  300. }
  301.  
  302. #credits img{
  303. border:1px solid #eee;
  304. }
  305.  
  306.  
  307. </style>
  308.  
  309. <!--Important sripts-->
  310.  
  311. <script type="text/javascript"
  312. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  313.  
  314. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  315.  
  316. <script>
  317. $(document).ready(function(){
  318. $(".user").click(function(){
  319. $("#about").slideToggle(1);
  320. });
  321. });
  322. </script>
  323.  
  324.  
  325. <!-- Filter scripts -->
  326.  
  327. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  328. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  329.  
  330. <script>
  331. $(function(){
  332.  
  333. var $container = $('#container');
  334.  
  335. $container.isotope({
  336. itemSelector : '.story'
  337. });
  338.  
  339.  
  340. var $optionSets = $('#sort .option-set'),
  341. $optionLinks = $optionSets.find('a');
  342.  
  343. $optionLinks.click(function(){
  344. var $this = $(this);
  345. // don't proceed if already selected
  346. if ( $this.hasClass('selected') ) {
  347. return false;
  348. }
  349. var $optionSet = $this.parents('.option-set');
  350. $optionSet.find('.selected').removeClass('selected');
  351. $this.addClass('selected');
  352.  
  353. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  354. var options = {},
  355. key = $optionSet.attr('data-option-key'),
  356. value = $this.attr('data-option-filter');
  357. // parse 'false' as false boolean
  358. value = value === 'false' ? false : value;
  359. options[ key ] = value;
  360. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  361. // changes in layout modes need extra logic
  362. changeLayoutMode( $this, options )
  363. } else {
  364. // otherwise, apply new options
  365. $container.isotope( options );
  366. }
  367.  
  368. return false;
  369. });
  370.  
  371. });
  372. </script>
  373.  
  374. <script>
  375. $(function(){
  376.  
  377. var $container = $('#container');
  378.  
  379. $container.isotope({
  380. itemSelector : '.story'
  381. });
  382.  
  383.  
  384. var $optionSets = $('#colors .option-set'),
  385. $optionLinks = $optionSets.find('a');
  386.  
  387. $optionLinks.click(function(){
  388. var $this = $(this);
  389. // don't proceed if already selected
  390. if ( $this.hasClass('selected') ) {
  391. return false;
  392. }
  393. var $optionSet = $this.parents('.option-set');
  394. $optionSet.find('.selected').removeClass('selected');
  395. $this.addClass('selected');
  396.  
  397. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  398. var options = {},
  399. key = $optionSet.attr('data-option-key'),
  400. value = $this.attr('data-option-filter');
  401. // parse 'false' as false boolean
  402. value = value === 'false' ? false : value;
  403. options[ key ] = value;
  404. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  405. // changes in layout modes need extra logic
  406. changeLayoutMode( $this, options )
  407. } else {
  408. // otherwise, apply new options
  409. $container.isotope( options );
  410. }
  411.  
  412. return false;
  413. });
  414.  
  415. });
  416. </script>
  417.  
  418. <!-----end filter scripts------>
  419.  
  420.  
  421. <meta charset="utf-8">
  422. <title>{Title}</title>
  423. <link rel="shortcut icon" href="{Favicon}">
  424. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  425.  
  426. </head>
  427.  
  428. <body>
  429.  
  430. <div id="maincontainer">
  431.  
  432. <div id="header">
  433.  
  434. <div class="blogtitle">Icons page</div>
  435.  
  436. <div class="mainlinks">
  437. <a href="/"><i class="fa fa-home"></i></a>
  438. <a href="/ask"><i class="fa fa-envelope"></i></a>
  439. <a href="/submit"><i class="fa fa-pencil"></i></a>
  440. <a href="/archive"><i class="fa fa-clock-o"></i></a>
  441. </div>
  442.  
  443. <!----- Filter links (here you add tags as ".header", ".sidebar", ".infinitescroll" etc. Do not change ".story" tag, it refreshes the page) ------>
  444.  
  445. </div>
  446. <!--End header-->
  447.  
  448. <div id="container" class="clearfix">
  449.  
  450. <!---- theme containers
  451.  
  452. in class="story tag1" "tag1" is actually a theme tag you can add, to add more tags for the same theme simply put "tag1 tag2 tag3" for example: class="story actor poc homme yellow" where yellow is a color tag I suggest you writing two word tags as one word tag
  453.  
  454. ----->
  455.  
  456. <!--1st icon-->
  457.  
  458. <div id="icon" class="story tag1 pink">
  459. <img src="https://67.media.tumblr.com/5e93f7b0bbf3a0e66da8361c3cb99a4d/tumblr_ocd5w13ssZ1secvrho6_500.png"></a>
  460. </div>
  461.  
  462. <!--2nd icon-->
  463.  
  464. <div id="icon" class="story tag2 orange">
  465. <img src="https://65.media.tumblr.com/bc65987249df2822061a9b7a2f43d85d/tumblr_ocd5w13ssZ1secvrho7_540.png"></a>
  466. </div>
  467.  
  468. <!--3rd icon-->
  469.  
  470. <div id="icon" class="story tag3 monochrome">
  471. <img src="https://66.media.tumblr.com/1f725af402004d20d44fac0631fe4f71/tumblr_ocd5w13ssZ1secvrho8_540.png"></a>
  472. </div>
  473.  
  474.  
  475. <!--4th icon-->
  476.  
  477. <div id="icon" class="story tag4 red">
  478. <img src="https://65.media.tumblr.com/5579bab19bceb9ae6943b78374f71955/tumblr_ocd5w13ssZ1secvrho9_540.png"></a>
  479. </div>
  480.  
  481. <!--5th icon-->
  482.  
  483. <div id="icon" class="story tag5 black">
  484. <img src="https://65.media.tumblr.com/5b67c75e189caa672f9c0d910e498f5e/tumblr_ocd5w13ssZ1secvrho10_540.png"></a>
  485. </div>
  486.  
  487. <!--6th icon-->
  488.  
  489. <div id="icon" class="story tag1 tag2 pink">
  490. <img src="https://66.media.tumblr.com/9ea1b9257def483832600dab88f4e89c/tumblr_ocd5w13ssZ1secvrho1_500.png"></a>
  491. </div>
  492.  
  493. <!--7th icon-->
  494.  
  495. <div id="icon" class="story tag3 tag4 blue">
  496. <img src="https://66.media.tumblr.com/72afb73b1fdc6803ac06b2c109f574c6/tumblr_ocd5w13ssZ1secvrho2_500.png"></a>
  497. </div>
  498.  
  499. <!--8th icon-->
  500.  
  501. <div id="icon" class="story tag5 tag6 yellow">
  502. <img src="https://66.media.tumblr.com/7c02de702258f81482db5c24bda81ac4/tumblr_ocd5w13ssZ1secvrho3_500.png"></a>
  503. </div>
  504.  
  505. <!---- Icon containers end, to add more containers just copy/paste:
  506.  
  507. <div id="icon" class="story tag5 tag6 yellow">
  508. <img src="https://66.media.tumblr.com/7c02de702258f81482db5c24bda81ac4/tumblr_ocd5w13ssZ1secvrho3_500.png"></a>
  509. </div>
  510.  
  511. ---->
  512.  
  513. </div>
  514. <!--End container-->
  515.  
  516. <div id="sort">
  517.  
  518. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  519.  
  520. <!-- These are tags. Only replace .tag and it's name. You can add more tags. -->
  521.  
  522. <li><a href="#filter" data-option-filter=".story">all icons</a></li>
  523. <li><a href="#filter" data-option-filter=".tag1">tag1</a></li>
  524. <li><a href="#filter" data-option-filter=".tag2">tag2</a></li>
  525. <li><a href="#filter" data-option-filter=".tag3">tag3</a></li>
  526. <li><a href="#filter" data-option-filter=".tag4">tag4</a></li>
  527. <li><a href="#filter" data-option-filter=".tag3">tag5</a></li>
  528. <li><a href="#filter" data-option-filter=".tag4">tag6</a></li>
  529.  
  530. </ul>
  531. </div>
  532. <!--End sort-->
  533.  
  534. <div id="colors">
  535.  
  536. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  537.  
  538. <!-- These are color tags. Only replace .color and #colorcode. You can add more colors. -->
  539.  
  540. <li><a href="#filter" data-option-filter=".black" style="background-color:#222"></a></li>
  541. <li><a href="#filter" data-option-filter=".grayscale" style="background-color:#ccc"></a></li>
  542. <li><a href="#filter" data-option-filter=".white" style="background-color:#fff"></a></li>
  543. <a href="#filter" data-option-filter=".yellow" style="background-color:#FFFDB6"></a>
  544. <a href="#filter" data-option-filter=".orange" style="background-color:#FDDC99"></a>
  545. <a href="#filter" data-option-filter=".brown" style="background-color:#B08C77"></a>
  546. <a href="#filter" data-option-filter=".red" style="background-color:#E95C5F"></a>
  547. <a href="#filter" data-option-filter=".pink" style="background-color:#FFB3BA"></a>
  548. <a href="#filter" data-option-filter=".purple" style="background-color:#E4CEE5"></a>
  549. <a href="#filter" data-option-filter=".blue" style="background-color:#94CCCD"></a>
  550. <a href="#filter" data-option-filter=".green" style="background-color:#B8F4BD"></a>
  551.  
  552. </ul>
  553. </div>
  554. <!--End colors-->
  555.  
  556. </div>
  557. <!--End maincontainer-->
  558.  
  559. <!--CREDIT (DO NOT REMOVE)-->
  560. <a href="http://borntobewildthemes.tumblr.com" title="Page ICONS PAGE by borntobewildthemes"><div id="credits">
  561. <img src="http://i57.tinypic.com/301g6eg.jpg"></div></a>
  562.  
  563. </body>
  564.  
  565.  
  566. </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!