TOTARA [GIFT]

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Forum|Marck+Script|Pirata+One|Josefin+Sans|Satisfy|Cookie|Bebas+Neue');

body {
background-color: #AC0E00;
background-image: url('https://i.pinimg.com/originals/3a/c6/43/3ac64319d40413e0ab7517a24d5fb97f.jpg');
background-position: center;
background-size: 100%;
background-repeat:repeat;
}

#totara {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:0px;
height:0px;
}

#overlay {
position: fixed;
z-index: -1;
background-image: url('https://media0.giphy.com/media/RitMeEEVTSSZn9LGmG/giphy.gif');
background-repeat: repeat;
background-size: 10%;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}

#container {
position: absolute;
left: 11.5%;
top: 9%;
height: 550px;
width: 1050px;
background-color: #357A46;
border: 2px solid #357a46;
box-shadow: 0px 0px 8px 8px #232323;
}

#rimg {
position: absolute;
z-index: 1;
right: 10px;
top: 123px;
height: 400px;
width: 260px;
box-shadow: 0px 0px 7px 7px #011808;
border-top: 3px solid #015217;
border-right: 3px solid #002F0E;
background-image: url('https://i.imgur.com/9faH1tG.gif');
background-size: 130%;
background-position: center;
background-repeat: no-repeat;
border-left: 3px solid #015217;
border-bottom: 3px solid #002F0E;
filter: grayscale(30%);
}

#banner {
position: absolute;
right: 10px;
top: 10px;
height: 85px;
width: 400px;
box-shadow: 0px 0px 7px 7px #011808;
border-top: 3px solid #015217;
border-right: 3px solid #002F0E;
border-left: 3px solid #015217;
border-bottom: 3px solid #002F0E;
background-image: url('https://data.whicdn.com/images/281118664/original.gif');
background-size: 100%;
background-position: center;
}

#title {
position: absolute;
z-index: 2;
right: 8px;
bottom: -8px;
height: 140px;
width: 410px;
background-image: url('https://i.ibb.co/fnSJNf8/Totara-title.png');
background-size: 100%;
background-repeat: no-repeat;
}

#icon1 {
position: absolute;
right: 300px;
top: 123px;
box-shadow: 0px 0px 7px 7px #011808;
border-bottom: 3px solid #015217;
border-top: 3px solid #002F0E;
border-right: 3px solid #015217;
border-left: 3px solid #002F0E;
height: 109px;
width: 109px;
background-image: url('https://data.whicdn.com/images/228700180/original.gif');
background-position: right;
background-size: 225%;
background-repeat: no-repeat;
}

#icon2 {
position: absolute;
right: 300px;
top: 262px;
box-shadow: 0px 0px 7px 7px #011808;
border-bottom: 3px solid #015217;
border-top: 3px solid #002F0E;
border-right: 3px solid #015217;
border-left: 3px solid #002F0E;
height: 109px;
width: 109px;
background-image: url('https://hips.hearstapps.com/mac.h-cdn.co/assets/17/10/1280x640/landscape-1489091910-priyanka4.gif?resize=1200:*');
background-position: center;
background-size: 200%;
background-repeat: no-repeat;
}

#greenbar {
position: absolute;
z-index: 1;
top: 10px;
right: 440px;
height: 519px;
width: 14px;
background-color: #042F0C;
box-shadow: 0px 0px 7px 7px #011808;
border-radius: 0%;
}

#students {
position: absolute;
top: 10px;
right: 477px;
height: 503px;
padding: 5px;
overflow-y: auto;
box-shadow: 0px 0px 7px 7px #011808;
background-color: #000;
border-top: 3px solid #015217;
border-bottom: 3px solid #002F0E;
border-right: 3px solid #015217;
border-left: 3px solid #002F0E;
width: 235px;
background-image: url('');
background-repeat: no-repeat;
background-size: 82%;
background-position: bottom left;
}

#ooc {
position: absolute;
top: 10px;
right: 751px;
height: 223px;
padding: 5px;
overflow-y: auto;
box-shadow: 0px 0px 7px 7px #011808;
background-color: #000;
border-top: 3px solid #015217;
border-bottom: 3px solid #002F0E;
border-right: 3px solid #015217;
border-left: 3px solid #002F0E;
width: 272px;
background-image: url('');
background-repeat: no-repeat;
background-size: 82%;
background-position: bottom left;
font-family: 'Josefin Sans';
color: #fff;
font-size: 11px;
line-height: 16.5px;
}

#connections {
position: absolute;
bottom: 22px;
right: 751px;
height: 200px;
padding: 5px;
overflow-y: auto;
box-shadow: 0px 0px 7px 7px #011808;
background-color: #000;
border-top: 3px solid #015217;
border-bottom: 3px solid #002F0E;
border-right: 3px solid #015217;
border-left: 3px solid #002F0E;
width: 272px;
background-image: url('');
background-repeat: no-repeat;
background-size: 82%;
background-position: bottom left;
font-family: 'Josefin Sans';
color: #fff;
font-size: 11px;
line-height: 16.5px;
}

.quote2 {
width:207px;
height:55px;
margin: 80px;
margin-top:1px;
margin-bottom:10px;
float:left;
margin-left:6px;
background:#10B83D;
color: #fff;
font-family: 'Forum';
font-size: 12px;
text-align: center;
border-left: 3px solid #054A19;
border-right: 3px solid #054A19;
overflow-y: auto;
padding: 5px;
}

.friend {
width: 65px;
height:41px;
opacity: 1;
border: 1px dashed green;
border-Radius: 10%;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
opacity: 0.8;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
}

.friend:hover {
opacity: 0.7;
border: 1px dashed gray;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
}

#tab1 {
position: absolute;
z-index: 1;
left: 40px;
bottom: 250px;
height: 45px;
width: 45px;
background-image: url('https://media0.giphy.com/media/XIF2uqCWKgmMP4Cu6C/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab2 {
position: absolute;
z-index: 1;
left: 132px;
bottom: 250px;
height: 45px;
width: 45px;
background-image: url('https://media0.giphy.com/media/XIF2uqCWKgmMP4Cu6C/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

#tab3 {
position: absolute;
z-index: 1;
left: 220px;
bottom: 250px;
height: 45px;
width: 45px;
background-image: url('https://media0.giphy.com/media/XIF2uqCWKgmMP4Cu6C/giphy.gif');
background-size: 100%;
background-repeat: no-repeat;
}

b {
font-family: 'Pirata One';
color: #32B054;
}

i {
font-family: 'Marck Script';
color: #666;
}

a {
font-family: 'Satisfy';
color: yellow;
text-decoration: none;
}

a:hover {
color: green;
text-decoration: underline;
}

h1 {
font-family: 'Cookie';
font-size: 20px;
background-color: #00320E;
background-image: url('https://img1.picmix.com/output/stamp/thumb/9/6/4/6/1606469_f1f53.gif');
line-height: 20px;
background-size: 16%;
background-repeat: repeat;
color: #fff;
text-align: center;
margin-top: 3px;
letter-spacing: 2px;
margin-bottom: 4px;
}

</style>
<div id="totara" oncontextmenu="return false;">
<div id="overlay"></div>
<div id="container">
<div id="rimg"></div>
<div id="banner"></div>
<div id="title"></div>
<div id="icon1"></div>
<div id="icon2"></div>
<div id="greenbar"></div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#1"><div id="tab3"></div></a>
<div id="students">
<h1>Student Roster</h1>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
<div class="quote2"><font style=float:left><img style="border: 3px solid #054A19; height: 50px; width:50px; border-radius: 0%;" src="https://s3.scoopwhoop.com/anj2/5d0a0de8d0aa383f98799354/a5f59d92-80b1-4df5-aea4-07ac2c0b3302.gif"></font> <a href="//roleplay.chat/profile.php?user=" target="_blank">Name Here</a>;<br>
Description here, I guess. Try not to make it too long. But the box scrolls, so. Go wild.<br>
</div>
</div>
<div id="ooc"><h1>Out of Character</h1>
<B>00.</B> Coded by <a href="//roleplay.chat/profile.php?user=Sailor+Chuu" target="_blank">Chuu</a> for Totara's use <u>only</u>!! Do not steal any part of this code. If you'd like something similar, just ask!<br>
<B>01.</B> OOC here.<br>
<B>02.</B> OOC here.<br>
</div>
<div id="connections">
<div style="height: 200px; overflow: hidden;">
<a name="1"></a>
<div style="height: 200px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24.4em;">
<h1>Statistics</h1>
</div></div>
<a name="2"></a>
<div style="height: 200px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24.4em;">
<h1>Personality</h1>
Words words words.
<h1>History</h1>
</div></div>
<a name="3"></a>
<div style="height: 200px; overflow-y: auto;">
<div style="margin: 0 auto; width: 24.4em;">
<h1>Connections</h1>
<center>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://data.whicdn.com/images/276909544/original.gif" title="Info here" class="friend"></a>
</center>
</div></div></div></div>
</div>
</div>