Navi 02

<!DOCTYPE html>
<html>
<!--Eudamia Page Pack: Navi 02 Xiala by antoniosvivaldi / athenathms

antoniosvivaldi © 2021

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 https-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 href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Elsie:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">

<style type="text/css">

/*Customise stuff here*/

:root {

/*font size*/
--fontsize:18px;

/*accent colours*/
--accent: #53759b;
--highlight: #cfe9f6;

/*accent colours with opacity*/

/*
convert the accent & highlight hex codes to RGB values using the following website:

https://www.rapidtables.com/convert/color/hex-to-rgb.html

*/

--accentalpha: 83, 117, 155;
--highlightalpha: 207, 233, 246;

/* available blend modes:

- Normal
- Multiply
- Scren
- Color Burn
- Color Dodge
- Overlay
- Soft Light
- Hard Light
- Hue
- Color


*/

--abtblend:multiply;
--faqblend:multiply;


}

/*Available body fonts:

- Fira Sans
- Open Sans
- Karla
- Source Sans Pro

*/

body {
    font-family:'Fira Sans',sans-serif;
}

/*Available heading fonts:

- Playfair Display
- Elsie
- Unna
- Libre Baskerville

*/

h1, h2, .tilter__title {font-family:'Playfair Display',serif;}


</style>

<!--the rest of the CSS stylesheet-->
<link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/orEr5hqe4/eudamia-main-v2.css">

    </head>

<!--How to use different theme modes: in the body tag below

Light theme: day-mode
Dark theme: night-mode
Alternating theme: remove day-mode / night-mode from the classname and uncomment the script at the end of the HTML

-->
<body class="animsition day-mode">

<div class="topbar">
    <div class="topbar__inner">

<!--If you want to change the title, just replace the 3 "{Title}" below to your desired heading title-->
        <h1><a class="a-link tbrefresh" href="/">{Title}
        <span class="tbletters" data-letters="{Title}"></span>
        <span class="tbletters" data-letters="{Title}"></span>
        </a></h1>


    </div>
</div>


<main class="smooth">
<div id="wrapper">
    <!--Posts and hero image-->
    <section class="tabs" id="tab1">

    <h1>Navigation</h1>

    <div class="navi_cont">

<!--Navigation category-->
        <div class="navi_box">
        <!--Rename category if you want-->
            <h2>Category 1</h2>
<ul>
<!--links-->
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
</ul>
        </div>
<!--/Navigation category-->


<!--Navigation category-->
        <div class="navi_box">
        <!--Rename category if you want-->
            <h2>Category 2</h2>
<ul>
<!--links-->
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
</ul>
        </div>
<!--/Navigation category-->

<!--Navigation category-->
        <div class="navi_box">
        <!--Rename category if you want-->
            <h2>Category 3</h2>
<ul>
<!--links-->
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
</ul>
        </div>
<!--/Navigation category-->

<!--Navigation category-->
        <div class="navi_box">
        <!--Rename category if you want-->
            <h2>Category 4</h2>
<ul>
<!--links-->
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
</ul>
        </div>
<!--/Navigation category-->

<!--Navigation category-->
        <div class="navi_box">
        <!--Rename category if you want-->
            <h2>Category 5</h2>
<ul>
<!--links-->
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
</ul>
        </div>
<!--/Navigation category-->

<!--Navigation category-->
        <div class="navi_box">
        <!--Rename category if you want-->
            <h2>Category 6</h2>
<ul>
<!--links-->
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
   <li><a class="a-link"href="/">link</a></li>
</ul>
        </div>
<!--/Navigation category-->

    </div>


<footer>
    <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
</footer>

    </section>
    <!--/Posts and hero image-->


</div>
</main>


<!--Please do not alter the credit!-->
<div id="athena_wrapper">
	<a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
</div>
<!--/credit-->

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


<!-- 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: 3000,
    onLoadEvent: true,
    browser: [ 'animation-duration', '-webkit-animation-duration'],
    overlay : false,
    overlayClass : 'animsition-overlay-slide',
    overlayParentElement : 'body',
    transition: function(url){ window.location.href = url; }
  });


});

</script>


<!-- Uncomment this if you want to use alternating theme colours

<script>

    (function($) {

    var url, hour = new Date().getHours();
    if (hour > 18 || hour < 8) {
        jQuery('body').addClass('night-mode');
    } else  {
        jQuery('body').addClass('day-mode');
    }

    }(jQuery));


</script>

-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
jQuery.noConflict();
(function($){

$(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"

});

});

})(jQuery);
</script>

</body>
</html>