page 04 // calypso

<!DOCTYPE html>
<head>

 <!-- THEME BY @LEEJORDAN / @VENUSTHMS
                           do not remove the credit

-------------------------------------------------------------------------

  - terms of use: venusthms.tumblr.com/terms

  - I'm using the honeybee icon font by @suiomi on this page

  - message me if you got any problems or questions about the code

  - icon font https://suiomi.com/font#_=_

  - you'll find instructions about customization through out the code

---------------------------------------------------------------------->

<title>about</title><link rel="shortcut icon" href="{Favicon}"> <!-- change (tab) title here -->

<!---- SCRIPT - DO NOT TOUCH ---->

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla|Montserrat|Playfair+Display|Quicksand|Raleway" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/x588bjvxik63gsp/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<link href="https://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="https://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script>
<script>
!function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);
</script>


<style type="text/css">

/* tooltips */

#s-m-t-tooltip {
  max-width: 250px;
  margin:24px 14px 7px 12px;
  padding:5px 8px;
  background: #fff;
  border-radius:2px;
  font-family: 'Karla';
  letter-spacing: 1px;
  font-size:11px;
  color:#000;
  box-shadow: none;
}

/* scrollbar */

::-webkit-scrollbar {
   width:4px;
   height:0;
   background-color: #F6F6F6;
}
::-webkit-scrollbar-track {
   background-color: #F6F6F6;
   border-radius: 10px;
}
::-webkit-scrollbar-thumb {
   background-color: #8DD6FA;
   min-height:30px;
   min-width:24px;
   border-radius: 10px;
}

/* selection */

::-moz-selection { background:#eee;color:#000; }
::selection { background:#eee;color:#000; }

/* gradient
replace:
#a8edea = first gradient color
#fed6e3 = second gradient color */
body {
background: #a8edea; /* for broweser that don't support gradients */
background: -moz-linear-gradient(-45deg, #a8edea 0%, #fed6e3 100%);
background: -webkit-linear-gradient(-45deg, #a8edea 0%,#fed6e3 100%);
background: linear-gradient(135deg, #a8edea 0%,#fed6e3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8edea', endColorstr='#fed6e3',GradientType=1 );
background-attachment:fixed;
}

/* container */

.container {
    border-radius: 5px; /* delete this if you want sharp edges*/
    background: #f6f6f6;
}

/* wave header */

.header {
    background: lighten(#F6C5E6, 10%); /* color of the last wave */
}

.wave.-two {
  opacity: .1;
  animation: drift 7000ms infinite linear;
  background: #F6C5E6 /* color of the last wave */
}

.wave {
    background: #44BCF8; /* color of the first + second wave */
}

/* title */

.title {
  font-family: 'quicksand';
  font-size: 24px;
  color: #fff;
}

/*  navigation */

.linkss {
    font-family: 'quicksand';
    font-size: 10px;
}

.linkss a {
    color: #fff;
    background: none;
}

/* text section */

.text {
    text-align: justify;
    font-family: 'karla';
    font-size: 12px;
    color: #000;
}

/* facts section */

.facts {
    font-family: 'karla';
    font-size: 12px;
}

.facts span { /* left part */
    background: #7AD0FB;
    color: #fff;
}

/* circle section */

.circle {
    background: #8DD6FA;
}

.circle p { /* circle text */
    font-family: 'karla';
    font-size: 10px;
    color: #fff;
}

.circle .th { /* circle icons */
    color: #fff;
}

/* links */

a {
    text-decoration: none;
    padding: 1px;
    cursor: help;
    border-radius: 3px;
    background: #8DD6FA;
    color: #000;
}

a:hover {
    background: #f6f6f6;
    color: #8DD6FA;
}

</style>
</head>
<body>

<div class="container">

<!---- header: don't edit the wave part ----->
<div class="header">
  <div class='wave -one'></div>
  <div class='wave -two'></div>
  <div class='wave -three'></div>
  <div class='title'>about the blogger</div> <!-- title goes here -->
  <div class="linkss"> <!-- navigation links here, don't add more -->
    <a href="/">home</a>
    <a href="/ask">message</a>
    <a href="/">link</a>
  </div>
</div>

<!----- here goes your text ------->
<div class="text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

<!---- facts section ----->
<div class="facts">
    <span>name:</span> <em>[name]</em>
    <span>pronouns:</span> <em>[pronouns]</em>
    <span>age:</span> <em>[age]</em>
    <span>location:</span> <em>[location]</em>
    <span>hogwarts:</span> <em>[house]</em>
    <span>occupation:</span> <em>[occupation]</em>
    <!--- copy & paste as needed ---->
</div>

<!---- circle section: get more icons at https://suiomi.com/font#_=_ ----->
<div class="circles">
  <div class="circle"><span class="th th-crystal-ball-o"></span><p>[something]</p></div>
  <div class="circle"><span class="th th-mountain-o"></span><p>[something]</p></div>
  <div class="circle"><span class="th th-pizza-o"></span><p>[something]</p></div>
<!--- copy & paste as needed ---->
</div>

</div>

<!----- credit: DO NOT REMOVE OR EDIT ---->
<div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
</body>
</html>