Blogroll 02 (static blogroll)

<!DOCTYPE html>
<html>
<!--Eudamia Page Pack: Blogroll 02 Evadne (Custom Blogroll Version) 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>Blogroll</h1>

    <div class="broll_cont">


<!--Static blogroll: copy / paste the following div to add more users. Texts to add in include link to a blog and etc.-->

    <!--one user-->
        <div class="followed_user">
            <div class="followed_img">
                <div>
        <img src="https://64.media.tumblr.com/e2da596a623fa7093789bbba06585057/f5a516df81d7d77b-58/s128x128u_c1/e0950fadc15b3ca1052540c8c4ace900597acbb7.png">
                </div>
            </div>
            <div class="followed_txt">
                <span>
                <b><a class="a-link" href="#">Blog URL</a></b><br>
                Blog Title
                </span>
            </div>
        </div>
    <!--/one user-->


<!--to here-->


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