Untitled

<!DOCTYPE html>
<html>
<head>


<title>of game of thrones</title>


<link rel="shortcut icon" href="https://66.media.tumblr.com/4b71b4b89175dd71c279874e399d6305/tumblr_inline_pspfrlmO951wdaizp_540.png" />

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

<!-- CUSTOM FONTS -->

<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Satisfy&display=swap" rel="stylesheet">

<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>

<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Parisienne&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Lora&display=swap" rel="stylesheet">


</head>

<style type="text/css">

@font-face { font-family:"champagne"; src:url('https://static.tumblr.com/xekbux7/zVim6yitc /champagne___limousines.ttf');}

body {
     color:#323232;  /* body font color */
     background-color:#fff; /* background color */
     text-align:justify;
     font-family:'karla';
     font-size:10px;
}

.container {
    width:595px;
    height:525px;
    position: absolute;
    background: #fff; /* container background color */
    text-align:justify;
    border-radius:4px;
    overflow:auto;
    margin-top: 190px;
    margin-left: 580px;
    border: 2px solid #323232;
}

#navi {
    text-align:justify;
    margin-top: 750px;
    margin-left: 880px;
    font-weight: 900;
    font-size: 10px;
    text-transform: bold;
    position: absolute;
    color: #e3e3e3;
}

#sidebar {
    width:195px;
    height:521px;
    background: #fff; /* sidebar background color */
    position:absolute;
    overflow:auto;
    border: 2px solid #323232;
    border-radius: 4px;
    margin-top: 190px;
    margin-left: 290px;
}

/*-----------TAB LINKS----------*/
.tab {
    position:absolute;
    top:0px;
    left:0px;
}

.tab button {
    background:#fff;
    padding:none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    width:170px;
    height:70px;
    color:#8d8d8d;
    border-radius:6px;
    margin-top:10px;
}

.tab img {
    width:50px;
    height:50px;
    position:absolute;
    margin-left: -70px;
    margin-top: -10px;
}


/* Create an active/current tablink class */
.tab button.active {
    background-color:#5d5d5d;
    color:#fff;
}


#linedec1 {
    width: 500px;
    height: 4px;
    background-color: #323232;
    color: #323232;
    margin-top: 240px;
    margin-left: 380px;
    position: absolute;

}

#linedec2 {
    width: 500px;
    height: 4px;
    background-color: #323232;
    color: #323232;
    margin-top: 665px;
    margin-left: 380px;
    position: absolute;

}

#musedetails {
     text-align:right;
     font-family: 'Parisienne', cursive;
     font-size:16px;
     font-weight:200;
}

#musedetails2 {
     text-align:right;
     font-family: 'Lora', serif;
     font-size:8px;
}


</style>

<body>

<div id="navi">
<a href="/muselist" style="color: #e3e3e3">list version ○ for canons ● </a>
<a href="/muselistog" style="color: #6d6d6d">list version ○ for originals</a>

</div>

<div id="linedec1"></div>
<div id="linedec2"></div>
<div id="sidebar">
<div class="tab">

<!-- START CHARACTER 01 -->
<li><button class="tablinks active" onclick="openCity(event, 'tab1')">
<img src="https://via.placeholder.com/50">
<div id="musedetails">
<b>Robin Arryn</b></div>
<div id="musedetails2">
lord of the vale
</div>
</button></li>
<!-- END CHARACTER 01 -->

<!-- START CHARACTER 02 -->
<li><button class="tablinks" onclick="openCity(event, 'tab2')">
<img src="https://via.placeholder.com/50">
<div id="musedetails">
<b>Petyr Baelish</b></div>
<div id="musedetails2">
lord of baelish castle
</div>
</button></li>
<!-- END CHARACTER 02 -->

<!-- START CHARACTER 03 -->
<li><button class="tablinks" onclick="openCity(event, 'tab2')">
<img src="https://via.placeholder.com/50">
<div id="musedetails">
<b>Sandor Clegane</b></div>
<div id="musedetails2">
the hound
</div>
</button></li>
<!-- END CHARACTER 03 -->
</div>
</div>


</div>

</body>
</html>