BCN page pack: Navigation page

<!DOCTYPE html>
<html>
<!--Navigation Page (from Barcelona page pack) by liohnelmessi

© 2018 by liohnelmessi (an imprint of antoniosvivaldi / athenathms)

Note:

- Optimised for modern browsers e.g. Google Chrome / Opera
- Optimised for computer monitor sizes 13in. ~ 15in.
- Common terms of use apply
- Feel free to tweak the layout as long as the credit stays intact

-->
    <head>

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="{Favicon}">
        <title>{Title}</title>

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>

<link href="https://fonts.googleapis.com/css?family=Rosario:400,400i,700,700i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Tinos:700,700i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora:400,400i" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">

 <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

  <link rel="stylesheet" href="https://static.tumblr.com/xbvpdcx/iHJpiyu5u/bcnnavi-style.css">


<style type="text/css">

.naviimg {
    background-repeat: no-repeat;
    background-size:cover;
}


/*Customisable sections*/
@media screen and (min-width: 960px) {
 #sidelinks a {
    background:rgba(255,255,255,0.3);
    color:#fff;
 }

}

 #sidelinks a:hover {
     color:#fff;
    background: rgba(187, 209, 229, 0.8);
 }

.sectstuff:not(.broll) a:hover {
    color:#BBD1E5; /*replace the hexcode to a different hexcode if you want*/
    border-bottom:1px solid #BBD1E5; /*this as well*/
}


/*background images of each page section*/
.naviimg {
    /*change the image URL here*/
    background-image: url('https://static.tumblr.com/4f2083dfe2681f5747ae38664c29d1e0/qp1dgt3/QL2pgsyjh/tumblr_static_1jxi4ekc2toko4cokgowoscw4.png');

    /*change the position of the image*/
    background-position: 50% 50%;
}


</style>
    </head>
<body class="animsition">


<div id="sidelinks">

<a class="a-link"href="/"title="home"><span class="lnr lnr-home"></span></a>

<!--a link here-->
<a class="a-link"href="/"  title="a link"><span class="lnr lnr-bookmark"></span></span></a>
<!--/ a link here-->


<!--a link here-->
<a class="a-link"href="/" title="a link"><span class="lnr lnr-link"></span></a>
<!--/ a link here-->


</div>

<!--main container-->
<main>
<section class="infosect">
    <!--sidebar image-->
    <div class="imgs naviimg"></div>
    <!--/sidebar image-->


  <article class="texts">
      <h1>Navigation</h1>

<div class="sectstuff navisect">

<!--navi block-->
<div class="navi-tag-box">
    <!--navi block heading-->
    <h6>Heading</h6>
    <!--/navi block heading-->

    <!--Tags-->
    <ul>
        <!--tag link: for links inside your blog, e.g just add "page" so that the href attribute reads "/page". For links OUTSIDE of your blog, you need the full HTML URL.-->
        <li><a href="/">Link</a></li>
        <!--/tag link-->

        <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>

        <!--To add more tags just add more <li></liL> -->
    </ul>
    <!--/Tags-->
</div>
<!--/navi block-->


<!--navi block-->
<div class="navi-tag-box">
    <!--navi block heading-->
    <h6>Heading</h6>
    <!--/navi block heading-->

    <!--Tags-->
    <ul>
        <!--tag link-->
        <li><a href="#">Link</a></li>
        <!--/tag link-->

        <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>

        <!--To add more tags just add more <li></liL> -->
    </ul>
    <!--/Tags-->
</div>
<!--/navi block-->


<!--navi block-->
<div class="navi-tag-box">
    <!--navi block heading-->
    <h6>Heading</h6>
    <!--/navi block heading-->

    <!--Tags-->
    <ul>
        <!--tag link-->
        <li><a href="#">Link</a></li>
        <!--/tag link-->

        <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>

        <!--To add more tags just add more <li></liL> -->
    </ul>
    <!--/Tags-->
</div>
<!--/navi block-->


<!--navi block-->
<div class="navi-tag-box">
    <!--navi block heading-->
    <h6>Heading</h6>
    <!--/navi block heading-->

    <!--Tags-->
    <ul>
        <!--tag link-->
        <li><a href="#">Link</a></li>
        <!--/tag link-->

        <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>

        <!--To add more tags just add more <li></liL> -->
    </ul>
    <!--/Tags-->
</div>
<!--/navi block-->

<!--navi block-->
<div class="navi-tag-box">
    <!--navi block heading-->
    <h6>Heading</h6>
    <!--/navi block heading-->

    <!--Tags-->
    <ul>
        <!--tag link-->
        <li><a href="#">Link</a></li>
        <!--/tag link-->

        <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>

        <!--To add more tags just add more <li></liL> -->
    </ul>
    <!--/Tags-->
</div>
<!--/navi block-->

<!--navi block-->
<div class="navi-tag-box">
    <!--navi block heading-->
    <h6>Heading</h6>
    <!--/navi block heading-->

    <!--Tags-->
    <ul>
        <!--tag link-->
        <li><a href="#">Link</a></li>
        <!--/tag link-->

        <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>

        <!--To add more tags just add more <li></liL> -->
    </ul>
    <!--/Tags-->
</div>
<!--/navi block-->


</div>
  </article>


</section>
</main>
<!--/main container-->

<!--Don't mess with the credit-->
<div class="creds">
    <figure>
        <figcaption>
                <p>
<a href="https://liohnelmessi.tumblr.com" title="liohnelmessi">
                <span>T</span>
                <span>H</span>
                <span>M</span>
</a>
                </p>
        </figcaption>
    </figure>
</div>
<!--Don't mess with the credit-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- animsition.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/css/animsition.min.css">

<!-- animsition.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>

<script>
$(document).ready(function() {

  $(".animsition").animsition({
    inClass: 'fade-in',
    outClass: 'fade-out',
    inDuration: 1500,
    outDuration: 800,
    linkElement: '.a-link',
    loading: true,
    loadingParentElement: 'body',
    loadingClass: 'animsition-loading',
    loadingInner: '',
    timeout: true,
    timeoutCountdown: 1800,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });


});

</script>

<script src="https://static.tumblr.com/p0knose/nRYp3ktqo/jquery.style-my-tooltips.js"></script>

<script>
$(document).ready(function(){

$("a[title],img[title],[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:30,

tip_fade_speed:300,

attribute:"title"

});

});

</script>
</body>
</html>