Wanderers Venture - Rakoza Kimayne

dabblet.css

/**
 * Wanderers Venture - Rakoza Kimayne
 */
 
 
/*================================
               BODY
=================================*/

body {
  background-image: url('http://wallup.net/wp-content/uploads/2017/03/16/170258-sunset-drawing-animals-lake-landscape-deer-artwork-silhouette-nature-digital_art-trees-pine_trees-hills-clear_sky-vector-warm_colors-Firewatch-video_games.jpg');
  backdrop-filter: contrast(100%) saturate(100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  align-items: center;
  cursor: auto;
}






/*=================================
            NAVIGATION
=================================*/

.navigation {
  background: rgba(46, 21, 38,0.8);
  position: absolute;
  left:100px;
  margin-left: 0 auto;
  font-family: 'Poiret One', 'Alegreya Sans';
  display: block;
  z-index: 1;
}


/* Specifies amount of space between open dropdown tabs */
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: list-item;/
}


/* Specifies that open dropdown tabs go in straight, horizontal (--—)line if code below is omitted */
li {
  display: inline;
  position: relative;
}


/* Opens up all dropdown tabs if code below is omitted and dropdown tabs will extend downward into a straight line */
ul ul {
  position: absolute;
  display: none;
}


/* Code below refers to the visible, individual navigation tabs */
li:hover ul {
  display: block;
}


/* Code below refers to direction of where dropdown tabs will float to upon opening */
ul ul ul {
  left: 100%;
  top: 0px;
}


/* Function of code below is currently undetermined */
li: hover > ul {
  display: none;
}


/* The code below specifies all of navigation bar */
ul li {
  float: left;
  width:200px;
  height: 40px;
  background-color: black;
  opacity: 0.9;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-right: 2px;
}


/* Toggles text on and off for whole navigation bar */
ul li a {
  text-decoration: none;
  color: white;
  display: block;
}


/* Toggles text color for whole navigation bar (includes tabs) */
ul li a:hover {
  background-color: rgb(40, 13, 21);
  color: rgb(214, 52, 79);
  cursor: pointer;
  animation-name: visibleNavigation;
  animation: visibleNavigation ease-out 0.2s;
}


/* Toggle opacity on hover animation for whole navigation bar (includes tabs) */
@keyframes visibleNavigation {
0% {opacity: 0;}
25% {opacity: 0.25;}
50% {opacity: 0.5;}
75% {opacity:0.75;}
100% {opacity: 1;}
}


/* Toggles appearance */
ul li ul li {
  display: block;
  position: flex;
}


/* Toggles appearance and disappearance of sublevel 1 tabs when hovering over visible navigation tabs */
ul li:hover ul li {
  display: block;
  position: flex;
}








/*=================================
         CLEARER NAVIGATION
=================================*/

.Nav-0 {}


.Nav-0:hover {}


.Nav-1: hover > Nav-2 {
display:none !important; position: absolute !important;}


.Nav-1:hover {}


.Nav-2 {}


.Nav-2:hover {}


.Nav-3 {}


.Nav-3:hover {}


.Nav-4 {}


.Nav-4:hover {}





/*=================================
         NAVIGATION: SEARCH
=================================*/

.box {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
background: #2f3640;
height: 40px;
padding: 0px;
border-radius:40px;
display: block;
z-index: 1;
}
			   

.box:hover {
box-shadow: 0 0 4px #2f3640, 0 0 4px rgb(0,0,0,0.8);
}
			  

.box:hover > input {
width: 160px;
padding: 0 6px;	
}
			  

.box:hover > .searchButton {
background: white;
color: #2f3640;
}
	

.searchButton {
  color: #eb5757;
  float:right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2d3640;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;
  border: none;
}

			    
.searchButton i {
  font-size: 26px;
}
	

.search-input {
        				border: none;
        				background: none;
        				outline: none;
        				float: left;
        				padding: 0;
        				color: white;
        				font-size: 14px;
        				transition: 0.4s;
        				line-height: 40px;
        				width: 0px;
        }




/*================================
     NAV & BODY-CONTENT DIVIDER
=================================*/

.divider {
  background-color: black;
  opacity: 50%;
  position: absolute;
  top: 45px;
  left: 100px;
  width: 1614px;
  height: 320px;
  display: block;
  border-radius: 5px;
}


.top-divider {
  background-color: black;
  opacity: 50%;
  position: absolute;
  top: 0px;
  left: 100px;
  width: 1614px;
  height: 0px;
  display: block;
  border-radius: 5px;
}




/*================================
            BODY-CONTENT
=================================*/

.all-body {
  /*margin: 100px;*/
}


.true-body {
  text-align: left;
  width: 1150px;
  position: absolute;
  left: 300px;
  top: 360px;
  padding: 20px;
  margin: 10px;
  border: solid 2px rgb(8,9,14);
  border-radius: 5px;
  background-color: rgba(15,4,20,0.8);
  padding: 0 20px 20px;
}


.inner-body {
  padding-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
}


.chief-head {
  color: rgb(190,8,69);
  font-family: 'Poiret One';
  color: rgb(240,240,240) !important;
  font-size: 32px;
  font-weight: normal;
}


.head {
  color: rgb(190,8,69);
  color: rgb(240,240,240) !important;
  font-size: 19px;
  font-family: Open Sans, 'Montserrat';
  font-weight: normal;
  text-align: left;
}


h4 {
  color: white;
}


.info {
  color: rgb(240,240,240);
  font-size: 14px;
  font-family: Assistant;
  line-height: 20px;
  font-weight: normal;
}


hr {
  margin-top: -1.1em;
  display: inherit;
  border-bottom-width: 0.05px;
  border-bottom-style: inset;
  border-color: rgb(116,60,82);
  border-style: inset;
  border-width: 0.05px;
}









/*================================
              FOOTER
=================================*/

dabblet.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="css/animate.css">
  <title>Wanderers Venture - Rakoza Kimayne</title>
</head>
  
  
<body>
<!--==============================
         TOP DIVIDER BOX
================================-->
  <div class="top-divider"></div>
  
  
  
  
  
  
  
 <!--==============================
          NAVIGATION BAR
================================-->
  
  <div class="all-body">
  
<!--===============================
        NAVIGATION BAR: HOME
================================-->
  
  <div class="navigation">
    <ul>
      <li><a href="#"><div class="Nav-0">Home</div></a></li>
      
      
      
      
 <!--==============================
      NAVIGATION BAR: EPISODES
================================-->
      
      <li><a href="#"><div class="Nav-0">Episodes</div></a>
        <ul>
          <li><a href="#"><div class="Nav-1">Season 1</div></a>
          <ul>
            <li><a href="#"><div class="Nav-2">Episode 1</div></a></li>
            <li><a href="#"><div class="Nav-2">Episode 2</div></a></li>
            <li><a href="#"><div class="Nav-2">Episode 3</div></a></li>
          </ul>
      </li>
          
          
          <li><a href="#"><div class="Nav-1">Season 2</div></a>
          <ul>
            <li><a href="#"><div class="Nav-2">Episode 1</div></a></li>
            <li><a href="#"><div class="Nav-2">Episode 2</div></a></li>
            <li><a href="#"><div class="Nav-2">Episode 3</div></a></li>
          </ul>
          </li>
        </ul>
      </li>
      
      
      
      
<!--===============================
     NAVIGATION BAR: CHARACTERS
================================-->
      
      <li><a href="#"><div class="Nav-0">Characters</div></a>
      <ul>
        <li><a href="#"><div class="Nav-1">Groups</div></a>
          <ul>
            <li><a href="#"><div class="Nav-2">Rakoza's Group</div></a>
              <ul>
                <li><a href="#"><div class="Nav-3">Akia Vjarsai</div></a></li>
                <li><a href="#"><div class="Nav-3">Bheran Zro</div></a></li>
                <li><a href="#"><div class="Nav-3">Rakoza Kimayne</div></a></li>
                <li><a href="#"><div class="Nav-3">Laika Zaijyuni</div></a></li>
              </ul> 
            </li>
            
            
            <li><a href="#"><div class="Nav-2">Yrosae's Group</div></a>
              <ul>
                <li><a href="#"><div class="Nav-3">???</div></a></li>
                <li><a href="#"><div class="Nav-3">???</div></a></li>
                <li><a href="#"><div class="Nav-3">???</div></a></li>
                <li><a href="#"><div class="Nav-3">???</div></a></li>
                <li><a href="#"><div class="Nav-3">???</div></a></li>
              </ul>
              </li>
          </ul>
          </li>
        
        
        <li><a href="#"><div class="Nav-1">Solo</div></a>
          <ul>
            <li><a href="#"><div class="Nav-2">???</div></a></li>
            <li><a href="#"><div class="Nav-2">???</div></a></li>
            <li><a href="#"><div class="Nav-2">???</div></a></li>
          </ul>
        </li>
      </ul>
      
        
        
        
        
<!--===============================
       NAVIGATION BAR: WORLD
================================-->
      
      <li><a href="#"><div class="Nav-0">World</div></a>
        <ul>
          <li><a href="#"><div class="Nav-1">General History</div></a></li>
          <li><a href="#"><div class="Nav-1">Locations</div></a></li>
          <li><a href="#"><div class="Nav-1">Organizations</div></a></li>
          <li><a href="#"><div class="Nav-1">Peoples</div></a>
          <ul>
          <li><a href="#">Beastfolk</a></li>
          <li><a href="#">Fleurans</a></li>
          <li><a href="#">Humans</a></li>
          </ul>
          </li>
          <li><a href="#"><div class="Nav-1">Fauna</div></a></li>
          <li><a href="#"><div class="Nav-1">Flora</div></a></li>
          <li><a href="#"><div class="Nav-1">Items</div></a></li>
          <li><a href="#"><div class="Nav-1">Lore &amp; Legends</div></a></li>
        </ul>
      </li>
      
      
      
      
      
<!--===============================
       NAVIGATION BAR: MAGIC
================================-->
      
      <li><a href="#"><div class="Nav-0">Magic</div></a>
        <ul><li><a href="#"><div class="Nav-1">Casting</div></a>
          <ul>
      <li><a href="#"><div class="Nav-2">Fire</div></a></li>
      <li><a href="#"><div class="Nav-2">Earth</div></a></li>
      <li><a href="#"><div class="Nav-2">Water</div></a></li>
      <li><a href="#"><div class="Nav-2">Wind</div></a></li>
      <li><a href="#"><div class="Nav-2">Storm</div></a></li>
      <li><a href="#"><div class="Nav-2">Light</div></a></li>
      <li><a href="#"><div class="Nav-2">Shadow</div></a></li>
      <li><a href="#"><div class="Nav-2">More...</div></a></li>
            </ul>
        </ul>
        </li>
      
      
      
      
      
<!--===============================
      NAVIGATION BAR: SPIRITS
================================-->
      
      <li><a href="#"><div class="Nav-0">Spirits</div></a></li>
      
      
      
      
<!--===============================
      NAVIGATION BAR: ABOUT ME
================================-->
      
      <li><a href="#"><div class="Nav-0">About Me</div></a></li>
      
      
      
      
<!--===============================
      NAVIGATION BAR: SEARCH
================================-->
      
      <li>
        <a>
          <div class="box">
<input type="text" class="search-input" placeholder="Explore...">
            
<button class="searchButton">
  
<i class="material-icons">search</i>
</button>
			    </div>
			 </a>    
  </li>
      </ul>
      </div>
  
  
  
  
<!--===============================
     NAV & BODY-CONTENT DIVIDER
================================-->
  
  <div class="divider"></div>
  
  
  
  
<!--===============================
           BODY CONTENT
================================-->
  
  <div class="true-body">
    <div class="inner-body">
    
    
<!--===============================
            CHIEF HEAD
================================-->
    
    <h2 class="chief-head">
      Rakoza Kimayne
    </h2>
    
    
    
    
    
<!--===============================
            INTRO QUOTE
================================-->
    
    <h3 class="head"><!--Intro Quote--></h3>
    <p class="info"></p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
<!--===============================
            INTRODUCTION
================================-->
    
    <h3 class="head"><!--Introduction--></h3>
    <p class="info"></p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
<!--===============================
            BACKGROUND
================================-->
    
    <h3 class="head">Background</h3>
    <hr>
    <p class="info">Rakoza's background and origins are currently unknown.</p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
<!--===============================
            APPEARANCE
================================-->
    
    <h3 class="head">Appearance</h3>
    <hr>
    <p class="info">Rakoza is 5 feet and 4 inches tall with a lean, athletic figure. She has caramel brown skin, dark chestnut brown eyes, and wavy, dark seal brown hair. She typically wears blue denim skirts (although she is seen wearing khaki shorts or slightly baggy pants in wilderness areas), loose shirts with short sleeves, and sneakers (although she will wear black leather boots in the cold seasons. Rakoza is also seen wearing her glasses the majority of the time, as while she can see relatively well in close quarters without them on, she has trouble discerning facial expressions, recognizing people, or reading words from a distance a distance anymore than three yards away.</p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
<!--===============================
           PERSONALITY
================================-->
    
    <h3 class="head">Personality</h3>
    <hr>
    <p class="info">
      While Rakoza is reserved, formal, and overall unnervingly cold and unwelcoming toward strangers and acquaintances, her mannerisms toward those she knows well and trusts is quite different. In this regard, she is playful and cheery, often seen with a toothy grin and cracking jokes given the chance. She will put the needs and wants of people she cares deeply for ahead of her own and do so without complaint. Furthermore, she's kind and forgiving to those that manage to get close to her and will tolerate hurtful comments or actions with a smile or little reaction at all; Rakoza, herself is rarely, if ever, seen angry. In extension to this, while she dislikes emotionally charged conflicts and arguments and does her best to stop them before they start, she does enjoy fact based discussion and debates, and is willing to listen to others' view and understand them even if she may disagree them. In this regard, she is also not one to believe rumors and hearsay about other peoples, fauna, among other topics, much preferring to do her own research before coming to a conclusion.
    <br><br>
      
While she does have her golden moments, Rakoza is far from perfect. Due to her high tolerance and lack of reaction to words and actions she finds hurtful or offensive, most people that interact with her do not know her "sore" spots. Coupled with Rakoza's strong dislike for emotional and interpersonal discussions, Rakoza has a bad habit of distancing herself from such people rather than communicating with them. This then leads to people sensing the distance she's put between herself and them which more often than not leads to hurt and ultimately people losing interest in getting to know her due to her . She can also be quite paranoid, ex . In extension to this, she has a tendency to play dumb when directly asked if something is bothering her and 
    </p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
<!--===============================
           RELATIONSHIPS
================================-->
    
    <h3 class="head">Relationships</h3>
    <hr>
    <p class="info">
      <h4>Akia</h4>
      <p class="info"></p>
      
      
      <h4>Bheran</h4>
      <p class="info"></p>
      
      
      <h4>Laika</h4>
      <p class="info"></p>
    </p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
<!--===============================
         SKILLS & POWERS
================================-->
    
    <h3 class="head">Skills &amp; Powers</h3>
    <hr>
    <p class="info">Rakoza does seem to showcase an affinity for animals. Whether she is in posession of powers is currently unknown.</p>
    
    
    
    
    
    
    <br><br><br>
    
    
    
    
<!--===============================
              GALLERY
================================-->
    
    <h3 class="head">Gallery</h3>
    <hr>
    <br>
    
    
    <h4>Concept Art</h4>
    
    
    
    
    <br><br><br>
    
    
    
    
<!--===============================
              QUOTES
================================-->
    
    <h3 class="head">Quotes</h3>
    <hr>
    
    
    
    
    <br><br><br>
    
    
    
    
<!--===============================
              TRIVIA
================================-->
    
    <h3 class="head">Trivia</h3>
    <hr>
    <p class="info">
    &#9702;	Rakoza's personality was partly inspired by that of the creator. 
      <br><br>
    &#9702; While shown to enjoy hugs and physical contact from friends, she does not allow anyone outside of this circle to touch her and will backpedal or outright dodging incoming contact to avoid it.
      <br><br>
    &#9702; While her temperament may play a role in this, Rakoza does not entertain anger unlike her friends and overall seems afraid of getting to this point; this is often shown in the form of her walking off from her group if she feels even a little too
    irritated at that moment.
      <br><br>
    &#9702; While Rakoza does not stand up for herself very often, often ignoring blatant or underhanded insults directed her way to avoid confrontation, she has very little tolerance for people who treat her friends poorly. Contrary to her typical shyness 
    and strong aversion towards confrontation, she will stare down the person or people involved at the moment of insult with a cold, almost murderous gaze, and will refuse to break eye contact until the person or people show signs of discomfort or faltering. 
    <!--While she will speak of her displeasure with the person in question in private and in firm, gentle tones in order to keep the peace.-->
      <br><br>
    &#9702;
    </p>
      
    
      
    <br><br><br>

      
      
      
      
      
      
      
<!--===============================
           FOOTER SECTION
================================-->
      
  </div>
    </div>
  
    
    <div class="base"></div>
  
  
  
  
  
  
  </body>
  </html>

dabblet.js

$(document).ready(function() {
$("").addClass("animated ");
});

settings.json

{"view":"split","fontsize":"70","seethrough":"1","prefixfree":"1","page":"css"}