Jump to content
  • Summertime Fun - Articles

       (0 reviews)

    A colourful guidebook with a list of links on the left that you click on to display the relevant information on the right. Includes a space for additional links if necessary. As always, you're welcome and encouraged to edit anything!


    Actual Template Responsive

    Guidebook

    Lorem Ipsum here
    One Lorem ipsum
    Two Lorem Ipsum

    Template code

    <!-- you shouldn't need this bit -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>
    <!-- end thing you shouldn't need -->
    
    <link href="https://fonts.googleapis.com/css?family=Princess+Sofia&display=swap" rel="stylesheet">
    
    <div id="thearticles">
      <div class="articles_header">
        <h1>Guidebook</h1>
        Lorem Ipsum here
      </div>
      <aside>
        <ul class="article_container_list">
          <h3>Lore Index</h3>
          <li><a class="container_links" href="#" data-showdiv="article_1">Link 1</a></li>
          <li><a class="container_links" href="#" data-showdiv="article_2">Link 2</a></li>
        </ul>
      </aside>
      <div class="article_content">
        <div id="article_1" class='articles' style="display: block">
          <!-- JCINK users, use webpage keys https://rpginitiative.com/guides/coding/a-guidebook-for-jcink-r195/ -->
          One Lorem ipsum
        </div>
        <div id="article_2" class='articles'>
          Two Lorem Ipsum
        </div>
      </div>
      <div class="article_footer">
        <ul>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div>
    </div>
    
    <script>
      $(".container_links").click(function(){
        $(".articles:visible").hide();
        $("#"+$(this).attr("data-showdiv")).show();
    });
    
    $('.container_links').click( function(){
        if ( $(this).hasClass('active') ) {
            $(this).removeClass('active');
        } else {
            $('.container_links.active').removeClass('active');
            $(this).addClass('active');    
        }
    });
    
    $('a.container_links').click(function(e)
    {
        e.preventDefault();
    });
    </script>
    
    <style>
    
    #thearticles {
      font: 14px sans-serif
    }
    
    #thearticles .articles {
      position: relative;
      display: none
    }
    
    .articles_header {
      color: #5f4102;
      background: #fbb829;
      padding: 1%;
      grid-area: article-header
    }
    
    .articles_header h1 {
      font: 3rem 'Princess Sofia', cursive;
      margin: 0;
      padding: 0
    }
    
    #thearticles aside {
      color: #5f4102;
      padding: 20px;
      background: #ffe545;
      border-right: 2px solid #fbb829;
      grid-area: article-sidebar
    }
    
    .article_container_list,
    .article_footer ul {
      list-style-type: none;
      margin: 0;
      padding: 0
    }
    
    .article_container_list a {
      color: inherit;
      text-decoration: none;
      display: block;
      padding: 5px 0;
      margin-top: 3px;
      border-bottom: 1px dotted #5f4102
    }
    
    .article_container_list a:hover,
    a.container_links.active {
      border-bottom-style: solid
    }
    
    a.container_links.active {
      font-weight: 700
    }
    
    .article_container_list h3 {
      font: 2rem;
      margin: 0;
      padding: 0
    }
    
    .article_content {
      padding: 1%;
      color: #000;
      grid-area: article-content
    }
    
    .article_footer {
      border-top: 2px solid rgba(0,0,0, .2);
      padding-bottom: 1px;
      text-align: center;
      background: #026374;
      grid-area: article-footer
    }
    
    .article_footer ul li {
      display: inline-block
    }
    
    .article_footer ul li:last-child {
      border: 0
    }
    
    .article_footer ul li a {
      color: white;
      text-decoration: none;
      text-shadow: 0 0 5px rgba(0,0,0, 1);
      border-radius: 3px;
      text-transform: uppercase;
      display: block;
      padding: 15px
    }
    
    .article_footer ul li a:hover {
      box-shadow: inset 0 0 5px rgba(0,0,0, .7)
    }
    
    #thearticles {
      background: #ffee84;
      display: grid;
      grid-template-columns: 15% 1fr 1fr;
      grid-template-areas:
        "article-header article-header article-header"
        "article-sidebar article-content article-content"
        "article-footer article-footer article-footer"
    }
    
    @media screen and (max-width: 767px) {
      #thearticles { display: block }
      #thearticles aside { border-right: 0 }
    }
    </style>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.