page 10 // hippolyta

<!DOCTYPE html>
<head>

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

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

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

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

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

  - I'm using the slick carousel on this page https://kenwheeler.github.io/slick/

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

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

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

<link href="https://fonts.googleapis.com/css?family=Karla|Montserrat|Playfair+Display|Quicksand|Raleway" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/hippolyta/slick.css"><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/hippolyta/style.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//venusthms.github.io/pages/hippolyta/slick.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>

<!--- you can find more settings for the carousel at https://kenwheeler.github.io/slick/ (i wouldn't recommend to play with the settings unless you have a knowledge about js/css/html) ---->
<script type="text/javascript">
    $(document).ready(function(){
  $('.content').slick({
  infinite: true,
  slidesToShow: 4,
  slidesToScroll: 1,
  swipeToSlide: true,
  variableWidth: true,
  centerMode: true,
  prevArrow: $('.prev'),
  nextArrow: $('.next')
  });
});
</script>


<style type="text/css">

/* tooltips */

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

/* scrollbar */

::-webkit-scrollbar {
   width:5px;
   height:17px;
   background-color: #F6F6F6;
}
::-webkit-scrollbar-track {
   background-color: #F6F6F6;
}
::-webkit-scrollbar-thumb {
   background-color: #fff;
   min-height:24px;
   min-width:24px;
}

/* selections */

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

/* general */

body {
    cursor: default;
    background: #fff;
    font-size: 12px;
    font-family: 'karla'; /* font family */
}

/* header */

.header {
   bottom: 400px; /* position from top */
   text-align: center;
}

h1 { /*title */
    text-transform: uppercase;
    font-weight: normal;
    font-size: 20px;
    box-shadow: 0 -8px 0 #f9e5ef inset; /* underline */
}

.nav a { /* link boxes */
    border: 1px solid #555;
    border-radius: 3px;
}

.nav a:hover { /* link boxes hover*/
    background: #f9e5ef;
}

/* members */

.member {
    height: 250px;
    width: 250px;
}

.member img {
    height: 250px;
    width: 250px;
}

.hovern { /* hover info */
    height: 250px;
    width: 250px;
    text-align: center;
    background: #f8f0ef;
}

.hovern h2 { /* name */
   font-weight: normal;
   text-transform: uppercase;
}

.quote { /* text */
    text-align: center;
}

/* links */

.desc a {/* header text links */
    box-shadow: 0 -11px 0 #f9e5ef inset;
}

.desc a:hover {/* header text links hover*/
    color: #000;
    box-shadow: 0 -4px 0 #f9e5ef inset;
}

a { /* other links */
    color: #000;
    text-decoration: none;
    cursor: help
}

a:hover {  /* other links hover */
    color: #C39B9B; /* links hover colour */
}

</style>
</head>

<body>

<!---- header ----->
<div class="header">
    <h1>title</h1>
    <p class="desc">here goes your description.</p>
    <div class="nav">
        <a href="/" title="return"></a>
        <a href="/ask" title="ask"></a>
        <a href="/" title="link"></a>
        <a href="/" title="link"></a>
    </div>
</div>

<!---- members start
- how many members are shown on the screen depends on your screensize
- IMPORTANT: if you have too less members on this page it will look weird
- template:

<div class="member"><div class="hovern">
  <h2>name</h2>
  <a class="url" href="/">@username</a>
  <p class="quote">description</p></div>
  <img src="IMGURL"></img>
</div>
----->
<div class="next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
<div class="content">

<div class="member"><div class="hovern">
  <h2>name</h2>
  <a class="url" href="/">@username</a>
  <p class="quote">description</p></div>
  <img src="https://78.media.tumblr.com/f57440ae0b7c199b9a4856b828c4f2f8/tumblr_p9h03aDyBr1vvb2yko3_r1_1280.png"></img>
</div>


<!----- DO NOT EDIT AFTER THIS LINE ---->
</div><div class="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div><div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>

</body>
</html>