Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!--
- All-In-One Theme Base Code by Paige @neonbikethemes.tumblr.com
- RULES OF THE BASE CODE:
- - Don't steal and repost as your own
- - Leave a little line in the code somewhere that says the base code is by neonbike themes. You can delete the rules.
- - please like/reblog the post
- - if you have questions don't hesitate to ask!
- Thanks!
- -->
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link href="https://fonts.googleapis.com/css?family=Cinzel|Dosis|Permanent+Marker|Satisfy&display=swap" rel="stylesheet">
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <meta charset="utf-8">
- <meta name="viewport" content="initial-scale=1.0, width=device-width" />
- <title>{Title}{block:TagPage} - {Tag} {/block:TagPage} {block:SearchPage} - {lang:Search results for SearchQuery}{/block:SearchPage}{block:PostSummary}- {PostSummary} {/block:PostSummary}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <meta name="image:background" content="/" />
- <meta name="color:links" content="#000000" />
- <meta name="color:links hover" content="#a0a0a0" />
- <meta name="color:text" content="#000000" />
- <meta name="color:posts" content="#ffffff" />
- <meta name="text:Tab 1 Title" content="Tab 1 Title" />
- <meta name="text:Tab 2 Title" content="Tab 2 Title" />
- <meta name="text:Tab 3 Title" content="Tab 3 Title" />
- <meta name="text:Tab 4 Title" content="Tab 4 Title" />
- <meta name="text:Tab 5 Title" content="Tab 5 Title" />
- <meta name="if:hide captions" content="0"/>
- <!-- IMPORTED SCRIPTS - DON'T REMOVE -->
- <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
- <script src="https://static.tumblr.com/wgijwsy/Ebfm2v4gy/jquery.masonry.min.js"></script>
- <!-- TOOLTIP SCRIPT (REMOVE ONYL IF YOU WANT STANDARD BROWSER TOOLTIPS) -->
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:90,
- tip_fade_speed:600,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <style type="text/css">
- /* ---------------------------- GENERAL ----------------------------- */
- /* -------- SELECTION TOOL ------- */
- ::-moz-selection {
- background: {color:text};
- color: {color:background};
- }
- ::selection {
- background: {color:text};
- color: {color:background};
- }
- /* -------- SCROLLBAR ------- */
- ::-webkit-scrollbar {
- width: 9px;
- }
- /* Track */
- ::-webkit-scrollbar-track {
- background:{color:background};
- }
- /* Handle */
- ::-webkit-scrollbar-thumb {
- background:{color:text};
- }
- ::-webkit-scrollbar-thumb:window-inactive {
- background: transparent;
- }
- /* -------- BASICS ------- */
- body {
- background:url({image:Background});
- background-attachment:fixed;
- background-size:cover;
- background-repeat:no-repeat;
- color: {color:text};
- font-family: helvetica, arial;
- font-size: 11px;
- margin: 0;
- padding: 0;
- word-wrap: break-word;
- line-height:150%;
- }
- a {
- color: {color:links};
- text-decoration: none;
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s;
- }
- a:hover{
- color:{color:links hover};
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s;
- }
- blockquote {
- border-left: 1px solid {color:text};
- margin: 10px;
- padding-left:25px;
- padding-top:3px;
- padding-bottom:3px;
- }
- iframe, img, embed, object, video {
- max-width: 100%;
- }
- p{
- margin-bottom:10px;
- }
- img {
- height: auto;
- width:auto;
- max-width:100%;
- }
- h1{
- text-transform:uppercase;
- font-size:13px;
- }
- ul{
- list-style-type:square;
- }
- ol{
- list-style-type:;
- }
- #bigcon{
- width:520px;
- margin-right:300px;
- padding-left:100px;
- }
- .tabcontent {
- position:static;
- margin-left:auto;
- margin-right:auto;
- width: 520px;
- text-align:center;
- margin-bottom:200px;
- }
- #postcontainer {
- position:static;
- margin-left:auto;
- margin-right:auto;
- width: 520px;
- overflow:hidden;
- text-align:center;
- margin-bottom:150px;
- }
- /* ----------------------------- HEADER STUFF ---------------------------*/
- #topbar{
- position:fixed;
- margin-top:280px;
- margin-bottom:50px;
- text-align:center;
- float:right;
- width:600px;
- right:0;
- margin-right:80px;
- font-size:15px;
- }
- #navbar{
- display:inline-block;
- text-align:center;
- }
- /* ------------------------------ TABS ------------------------------ */
- .tabs {
- width:100%;
- margin-left:0px;
- display:inline-block;
- color:white;
- }
- /*----- Tab Links -----*/
- /* Clearfix */
- .tab-links:after {
- display:block;
- clear:both;
- content:'';
- }
- .tab-links li {
- margin-right:5px;
- display:inline-block;
- list-style:none;
- text-transform:uppercase;
- }
- .tab-links a {
- padding:7px;
- display:inline-block;
- color:white;
- transition:all linear 0.15s;
- border-bottom:1px solid transparent;
- }
- .tab-links a:hover {
- border-bottom:1px solid white;
- text-decoration:none;
- color:pink;
- }
- li.active a, li.active a:hover {
- background:transparent;
- color:#b86b77;
- border-bottom:1px solid white;
- background:white;
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s;
- }
- /*----- Content of Tabs -----*/
- .tab-content {
- }
- .tab {
- display:none;
- }
- .tab.active {
- display:block;
- }
- /* --------------------------- POSTS (articles) --------------------- */
- article {
- float:left;
- background:{color:posts};
- padding: 10px;
- width: 500px;
- text-align:justify;
- margin-bottom:80px;
- margin-top:40px;
- }
- /* ---------------------------- POST INFO -----------------------------*/
- .postinfo{
- margin-top:10px;
- font-weight:bold;
- }
- .tags {
- margin-top:5px;
- font-weight:normal;
- }
- /* ---------------------------- POST NOTES ------------------------- */
- ol.notes {
- display:block;
- text-align:left;
- list-style-type:none;
- margin-left:-40px;
- }
- ol.notes li.note{
- margin-bottom:5px;
- }
- .pagenotes {
- text-align:left;
- margin-top:15px;
- }
- .pagenotes img{
- padding-right:5px;
- padding-top:5px;
- margin-bottom:-5px;
- }
- /* -------------------------- POST TYPES -------------------------- */
- /* CHAT */
- ul.chat{
- list-style:none;
- margin-left:-40px;
- }
- .chat span {
- float: left;
- }
- /* QUOTES */
- .quote{
- font-size:20px;
- line-height:150%;
- }
- .quotesource{
- text-align:right;
- margin-bottom:10px;
- }
- /* QUESTIONS */
- .question{
- margin-bottom:15px;
- }
- .answer {
- font-size:11px;
- }
- .askerimg{
- position:relative;
- display:inline-block;
- margin-right:10px;
- }
- /* AUDIO */
- .songart{
- float:left;
- margin-right:10px;
- }
- .songart img{
- width:80px;
- height:80px;
- }
- .songtitle{
- margin-bottom:10px;
- margin-left:90px;
- }
- .songauthor{
- margin-bottom:10px;
- font-size:8px;
- margin-left:90px;
- }
- .tumblr_audio_player {
- height: 50px;
- }
- /* ------------------------- PAGINATION ------------------------- */
- #pagination{
- position:static;
- margin-top:30px;
- text-align:center;
- }
- .pagibutton{
- position:relative;
- display:inline-block;
- background:{color:posts};
- padding:15px;
- }
- /*----------------------------ABOUT-----------------------------------*/
- .author h1{
- padding-left:180px;
- margin-bottom:-30px;
- margin-top:50px;
- color:#b86b77;
- font-family: 'Satisfy', cursive;
- font-size:25px;
- text-shadow:5px 5px 5px #000000;
- }
- .sideimg img{
- width:400px;
- padding:50px;
- }
- .box {
- border: 1px solid;
- padding: 10px;
- box-shadow: 3px 5px black;
- width:400px;
- border-radius:30px;
- position:absolute;
- margin-left:550px;
- margin-top:150px;
- color:#b86b77;
- background-color:white;
- text-align:justify;
- font-family: 'Dosis', sans-serif;
- font-size:20px;
- line-height:1.5;
- }
- .info{
- color:#b86b77;
- padding:10px;
- width:300;
- margin-left:70px;
- text-align:center;
- font-size:20px;
- bottom:-30;
- font-size:22;
- font-family: 'Satisfy', cursive;
- margin-top:-30px;
- text-shadow:5px 5px 5px #000000;
- }
- .info li{
- color:white;
- font-size:13px;
- list-style:none;
- font-family: 'Dosis', sans-serif;
- }
- /* Style all font awesome icons */
- .fa {
- padding: 10px;
- width: auto;
- text-align: center;
- text-decoration: none;
- border-radius:40px;
- }
- /* Add a hover effect if you want */
- .fa:hover {
- opacity: 0.7;
- }
- .socialmedia{
- color:white;
- }
- /*---------------------------------FAQ-------------------------------*/
- #tab3 a {
- color: #92d1e8; /*LINK COLOR*/
- text-decoration: underline;
- }
- #tab3 a:hover {
- letter-spacing: 1px;
- -webkit-transition: 0.8s;
- -moz-transition: 0.8s;
- transition: 0.8s;
- }
- #tab3 b {
- color: #92d1e8; /*BOLD COLOR. ALSO CHANGES THE QUESTION COLOR.*/
- }
- #tab3 i {
- color: #92d1e8; /*ITALICS COLOR*/
- }
- #contain {
- width: 650px;
- height: 600px;
- overflow-y: scroll;
- overflow-x: hidden;
- background-color: white; /*FAQ CONTAINER BACKGROUND COLOR*/
- border: 1px solid #eeeeee; /*CONTAINER BORDER COLOR*/
- border-radius: 5px;
- margin: auto;
- margin-top: 100px;
- padding: 20px;
- padding-top: 10px;
- }
- #tab3 .question {
- background-color: #fcfcfc; /*QUESTION/ANSWER BACKGROUND COLOR*/
- border: 1px solid #eeeeee; /*QUESTION/ANSWER BORDER*/
- border-radius: 5px;
- padding: 7px;
- text-align: right;
- font-size: 10px;
- cursor: help;
- margin-top: 10px;
- }
- #tab3 .answer {
- display: none;
- text-align: left;
- color: #d1cccc; /*ANSWER TEXT COLOR*/
- padding: 10px;
- }
- /* --------------------------- Thanks -------------------------- */
- .thanks{
- width:600px;
- border-radius:30px;
- color:#b86b77;
- line-height:1.8;
- text-align:justify;
- left:0;
- margin-top:50px;
- padding:10px;
- color:#b87b77;
- background-color: rgba(255, 255, 255, 0.9);
- font-size:15px;
- }
- .thanks b{
- color:pink;
- }
- .thanks i{
- color:#afeeee ;
- }
- .thanks h1{
- text-align:center;
- line-height:1;
- font-size:19px;
- color:black;
- }
- /* --------------------------- Custom CSS -------------------------- */
- {CustomCSS}
- </style>
- </head>
- <body>
- <!--TOPBAR-->
- <div id="topbar">
- <div id="navbar">
- <div class="tabs">
- <ul class="tab-links">
- <li class="active" style="margin-left:-30px">
- THE BOOK</li>
- <li><a href="/">Pre-Written Campaign</a>
- <li><a href="#tab2">{text:Tab 2 Title}</a></li>
- <li><a href="#tab3">{text:Tab 3 Title}</a></li>
- <li><a href="#tab4">{text:Tab 4 Title}</a></li>
- <li><a href="#tab5">{text:Tab 5 Title}</a></li>
- <li><a href="#tab1">{text:Tab 1 Title}</a></li>
- </ul>
- </div>
- </div>
- </div>
- <!-- --------------------------- TABS -------------------------- -->
- <div id="bigcon">
- <div class="tabs">
- <!-- --------------------------- TAB 1 -------------------------- -->
- <div class="tab-content">
- <div id="tab1" class="tab active">
- <div id="postcontainer">
- {block:Posts}
- <article>
- <!--TEXT POST-->
- {block:Text}
- {block:Title}
- <h1 class="title">
- <a href="{Permalink}">{Title}</a></h1>
- {/block:Title}
- {Body}
- {/block:Text}
- <!--PHOTO POST-->
- {block:Photo}
- {block:IndexPage}
- {LinkOpenTag}
- <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
- {LinkCloseTag}
- {/block:IndexPage}
- {block:PermalinkPage}
- {LinkOpenTag}
- <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
- {LinkCloseTag}{/block:PermalinkPage}
- {/block:Photo}
- <!--PHOTOSET POST-->
- {block:Photoset}
- {block:IndexPage}{Photoset-500}{/block:IndexPage}
- {block:PermalinkPage}{Photoset-500}{/block:PermalinkPage}
- {/block:Photoset}
- <!--QUOTE POST-->
- {block:Quote}
- <div class="quote">{Quote}</div>
- {block:Source}
- <div class="quotesource">{Source}</div>
- {/block:Source}
- {/block:Quote}
- <!--LINK POST-->
- {block:Link}
- <h1 class="title"><a href="{URL}">{Name}</a></h1>
- {block:Description}{Description}{/block:Description}
- {/block:Link}
- <!--CHAT POST-->
- {block:Chat}
- <ul class="chat">
- {block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
- </ul>
- {/block:Chat}
- <!--AUDIO POST-->
- {block:Audio}
- {block:AlbumArt}
- <div class="songart">
- <img src="{AlbumArtURL}">
- </div>
- {/block:AlbumArt}
- <div class="songtitle">
- {block:TrackName}
- {TrackName}
- {/block:TrackName}
- </div>
- <div class="songauthor">
- By
- {block:Artist}
- {Artist}
- {/block:Artist}
- </div>
- {AudioPlayerWhite}
- {/block:Audio}
- <!--VIDEO POST-->
- {block:Video}
- <div class="video">
- <div class="video-player">{Video-500}</div>
- {/block:Video}
- <!--ANSWER POST-->
- {block:Answer}
- <div class="askerimg"><img src="{AskerPortraitURL-16}"></div>
- <b>{Asker}:</b></span>
- <span class="question">{Question}</span>
- <p><div class="answer">{Answer}</div>
- {/block:Answer}
- <!--CAPTIONS-->
- {block:Ifhidecaptions}
- {block:permalink}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:permalink}
- {/block:Ifhidecaptions}
- {block:Ifnothidecaptions}
- {block:Caption}
- {Caption}
- {/block:Caption}
- {/block:Ifnothidecaptions}
- <!--POST INFORMATION-->
- <div class="postinfo">
- <!--PERMALINK-->
- <a href="{Permalink}">
- {block:Date}
- {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {12Hour}:{Minutes} {AmPm}
- {/block:Date}
- </a>
- <!--NOTES-->
- {block:NoteCount}
- <a href="{Permalink}"> + {NoteCount} </a>
- {/block:NoteCount}
- <!--VIA AND SOURCE-->
- {block:RebloggedFrom}
- ( <a href="{ReblogParentURL}">Via</a>
- {/block:RebloggedFrom}
- {block:ContentSource}
- & <a href="{SourceURL}">Source</a>
- {/block:ContentSource}
- {block:RebloggedFrom} ){/block:RebloggedFrom}
- <!--TAGS-->
- {block:HasTags}
- <div class="tags">
- {block:Tags}
- <a href="{TagURL}">#{Tag},</a>
- {/block:Tags}
- </div>
- {/block:HasTags}
- </div>
- <!--POST NOTES-->
- {block:PostNotes}
- <div class="pagenotes">{PostNotes-16}</div>
- {/block:PostNotes}
- </article>
- {/block:Posts}
- <!--Close of article-->
- <!--PAGINATION-->
- {block:Pagination}
- <div class="pagination">
- {block:PreviousPage}
- <a href="{PreviousPage}">
- <div class="pagibutton">Previous</div></a>
- {/block:PreviousPage}
- {block:NextPage}
- <a href="{NextPage}">
- <div class="pagibutton">Next</div></a>
- {/block:NextPage}
- </div>
- {/block:Pagination}
- </div>
- </div>
- <!-- -------------------------- TAB 2 -------------------------- -->
- <div id="tab2" class="tab">
- <div class="tabcontent">
- <div class="box">
- <p>
- French speaker from Montreal, Quebec, Canada, Catherine has a bachelor in Political Communication at UQAM and a BFA in Film Studies at Condordia.<br> <br>
- She is the unique author of<i>Further Than Fillory: An unofficial The Magicians Tabletop roleplaying Game guide</i> first and second edition and aivd fanfiction writer. Catherine has been working into different fandoms through the year. With her Etsy Shop and her writing projects, she aims to prove that one can still be passionate about a show, a book, and/or a movie and yet live her life as an adult.
- </p>
- </div>
- <div class="author"> <h1>About The Author</h1>
- <div class="sideimg"><img src="https://66.media.tumblr.com/268e69e6cf5715a844b8d7806c4d3532/tumblr_pwhv4dUG661xy5c7zo5_1280.jpg"></div>
- <div class="info">
- Catherine Gilbert
- <ul>
- <li>29 years old</li>
- <li>Quebec, Canada</li>
- <li>30% Anxiety, 70% Fandom</li>
- </ul>
- <div class="socialmedia">
- <a href="bit.ly/fillorian" class="fa fa-etsy"></a>
- <a href="highkingfen.tumblr.com" class="fa fa-tumblr"></a>
- <a href="twitter.com/highkingfen" class="fa fa-twitter"></a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- -------------------------- TAB 3 -------------------------- -->
- <div id="tab3" class="tab">
- <div class="tabcontent">
- <div id="contain">
- <!--QUESTION 1-->
- <div class="question"><b>IS THE BOOK FREE</b>
- <div class="answer">
- Yes! As I do not own any of the intellectual right of any of <i>The magicians</i> content. I will not and can not charge for writing a book that has in a large part about Lev Grossman creation,
- </div>
- </div>
- <!--END OF QUESTION 1-->
- <!--QUESTION 2-->
- <div class="question"><b>THEN WHY DO YOU CHARGE FOR THE PRE-WRITTEN CAMPAIGN </b>
- <div class="answer">
- The writing of this campaign has nothing to do with the universe of <i>The Magicians</i> created by Lev Grossman and use mainly the Fillorian system which I created for the purpose of the book. As it is original containt, I ask for a donation to help me support myself.
- </div>
- </div>
- <!--END OF QUESTION 2-->
- <!--QUESTION 3-->
- <div class="question"><b>CAN I USE IT WITH MY FRIEND TO PLAY?</b>
- <div class="answer">
- OF COURSE! The idea of this book is to help you create your own quest and challenges! Never hesitate to message me and tell me your adventures
- </div>
- </div>
- <!--END OF QUESTION 3-->
- <!--QUESTION 4-->
- <div class="question"><b>WILL THERE BE A 3RD EDITION</b>
- <div class="answer">
- Yes! Most likely, as season 5 end, there will be a 3rd edition with updated contain in the section that talks about the lore. Plus in the meantime, I and other will have use the Fillorian System and it will be updated and better for a more enjoyable gameplay!
- </div>
- </div>
- <!--END OF QUESTION 4-->
- <!--QUESTION 4-->
- <div class="question"><b>CAN I EMAIL YOU INSTEAD OF THE TUMBLR MESSAGE BOX?</b>
- <div class="answer">
- Yes. To avoid phishing, I will write my email adress in a format that bots are not able to pick and steal, but a smart human like you can figure it out and send me something! It is gilbert.catherine89 at gmail dot com
- </div>
- </div>
- <p><iframe frameborder="0" height="200px" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/unofficialmagiciansdnd.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe></p>
- </div>
- <!--DON'T TOUCH ANYTHING HERE EXCEPT FOR #000 TO CHANGE LINK COLOR-->
- <div style="position:fixed;bottom:8px; right:15px; font-size:9px; font-family:calibri; height: 15px;"><a style="color:#000; text-decoration:none;" href="https://arithemes.tumblr.com/">A</a></center></div>
- </div>
- </div>
- <!-- -------------------------- TAB 4 -------------------------- -->
- <div id="tab4" class="tab">
- <div class="tabcontent">
- <div class="thanks">
- <div class="thanks">
- <h1>THIS SECOND EDITION WOULD HAVE NOT HAPPEN<br> WITHOUT THE HELP OF THOSE AMAZING FILLORIANS</h1>
- <b>Art by</b> Waxanie, Denise Campbell, Catherine Gilbert,Annah Kennedy, Dave Macleod and JLS Drawing.<br><br>
- <b>Website Background and Image cover by by</b> Dave Macleod<br><br>
- <b>Edition and corrections:</b> Lexi and Seth Day <br><br>
- <b> special thank you to the players in the podcast <i>Further Than Fillory: the podcast</i></b> whom have been play testing the first edition and helped me with the building of the second. Jasper, Elliot, Denise and Seth, you are have been an anchor and deeply inspiring. I can't wait to start the second season with this edition!<br><br>
- Of course thank you <b>Lev Grossman</b> for creating a world that makes many of us feel like home,<br><br>
- <b>Fillorian Kickstarter Patrons</b>Aaron H, Ally Dunlap, Anastasia Okuonghae, Andrea Abraham, Caitlin Kagawa, Cameron Makkle Miller, Christ Striker, Christin Cassano, David Brown, Denise Campbell, Dorothy Lee, Dutch, Elaina Dunbar, Elliot Waugh, Eloathane, Emily Gracia, Eric Harlacher, Erica Freeman, Espen Borgen, Hannah Paige, Heike Austermann, Ian McFarlin, Inanna Gabriel, Isabelle Gilbert, Jake Samuels, Jeff Harden, John Doyle, Kelly Batchelor, Kenn Hogentogler, Kiera Exley, Kristoffer Kjos-Kendall, Lea Hamelin-Couture, Lucas Elliott, Luis Sanchez, Marc-Anothny Taylor, Marijke Lange, Nymphaea, Paulsilver, Per Stalby, Rachel Dickinson, Rob Enzlin, Samantha Watterson, Skylar Mathews, Tanya Hawkins, Timothy, Tuva Skjaevik, Wynter Dorr, Zax Newton <br><br>
- <b>And a royal thank you to </b>
- Carol Day-Nelson, Cassandra Lee, Jake, Kate Allen, Ken Nihart, Regan Walden, Ronen, Travis Case DeJong

- </div>
- </div>
- </div>
- </div>
- <!-- -------------------------- TAB 5 -------------------------- -->
- <div id="tab5" class="tab">
- <div class="tabcontent">
- Tab five content here
- </div>
- </div>
- <!-- END OF TABS -->
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
- <script>
- $(document).ready(function() {
- $('.tabs .tab-links a').on('click', function(e) {
- var currentAttrValue = $(this).attr('href');
- // Show/Hide Tabs
- $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
- // Change/remove current tab to active
- $(this).parent('li').addClass('active').siblings().removeClass('active');
- e.preventDefault();
- });
- });
- </script>
- <script>
- $(document).ready(function() {
- $('#filterOptions li a').click(function() {
- // fetch the class of the clicked item
- var ourClass = $(this).attr('class');
- // reset the active class on all the buttons
- $('#filterOptions li').removeClass('active');
- // update the active state on our clicked button
- $(this).parent().addClass('active');
- if(ourClass == 'all') {
- // show all our items
- $('#ourHolder').children('div.item').show();
- }
- else {
- // hide all elements that don't share ourClass
- $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
- // show all elements that do share ourClass
- $('#ourHolder').children('div.' + ourClass).show();
- }
- return false;
- });
- });
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment