page 14 // nova

<!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

  - filter tutorial & controls fix by @cyantists

  - icon font: https://feathericons.com/

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

<title>members</title><link rel="shortcut icon" href="{Favicon}">

<!---- scripts: no need to edit ---->

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Karla|Roboto+Mono:400,700" rel="stylesheet"><link href="//dl.dropbox.com/s/4rmswptv2h7043v/venus.css" rel="stylesheet"><script src="//dl.dropbox.com/s/kuve9uzc0u6fybt/vcolor.js"></script><script src="//dl.dropbox.com/s/h6bz6sg6ut14cko/venus.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//dl.dropbox.com/s/rptsu2g0s6n1832/nova.js"></script><script src="//dl.dropbox.com/s/5hnk5w8xmzsgkdn/feather.js"></script>
<link href="http://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" /><script src="http://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>

<script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script><script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>

<script>$(document).ready(function(){
var $grid = $(".grid"); $grid.imagesLoaded(function() {
   $grid.masonry({
       itemSelector: ".item",
       columnWidth: 270, /* needs to be 20 more than item width */
       horizontalOrder: true,
       fitWidth: true
   })
});
  $(".button").click(function(){
   $(this).addClass("selected");
   $(".button").not($(this)).removeClass("selected");
   var ssf = $(this).attr("filter");
   $(".item." + ssf).show();
   $(".item").not("." + ssf).hide();
   $grid.masonry();
});

$grid.on( 'click', '.item', function() {
  $(this).toggleClass('superlong');
  // trigger layout after item size changes
  $grid.masonry('layout');
});
});</script>

<style type="text/css">

/* colors */
:root {
  --background: #f5f5f5;
  --header: #fff;
  --items: #fff;
  --border: #f6f6f6;
  --text: #222!important;
  --links: #222;
  --links-hover: #666;
}

/* fonts */
body {font-family: 'karla';font-size: 12px;}
h1, .item .url {font-family: 'Roboto Mono', monospace;}

/* cursor */
.button, .long, a {cursor:pointer;}

/* header*/
.intro { /*content*/
    width: 30%;
    margin: 10vh auto -10px auto; /*first number = position from top*/
    text-align: justify;
}

.intro img { /*icon*/
    width: 25px;
    height: 25px;
    border-radius: 100%;
    margin-right: 10px;
}

nav {right: 10px;top: 10px;} /*navigation*/
.button.selected {text-decoration: line-through;} /*selected filter*/

/*items*/
.item {width: 250px;height: auto;} /* need to change js (at the top) as well */
.item img, .desc, .url span {width: 220px} /*keep 30 less than item*/

.desc, .item .url {text-align: left;}

.long {height: 30px;} /*length after which text gets cut off*/
.long:after {content: '. . . more';} /*text after cut out*/


</style><link href="//dl.dropbox.com/s/inp0mgl2nu4nsb7/style.css" rel="stylesheet" type="text/css" /></head>

<body>

<!--- header starts --->
<header>

<nav> <!--- links --->
<a href="https://www.tumblr.com/follow/{name}" title="follow"><i data-feather="plus"></i></a>
<a href="/" title="return"><i data-feather="x"></i></a>
</nav>

<div class="intro"><!--- header content --->
<img src="{PortraitURL-64}" /> <!--replace {PortraitURL-64} with an image url if you don't want your icon there -->
<h1>title here</h1>
<p>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</p>

<div class="filters"><!--- filters --->
<div class="button selected" filter="item">show all</div>
<div class="button" filter="filter1">filter one</div>
<div class="button" filter="filter2">filter two</div>
<div class="button" filter="filter3">filter three</div>
</div>

</div>
</header>
<!--- header ends --->

<!--- grid starts --->
<div class="grid">

<!--- edit the filters: replace filter1/filter2/etc with the filter names you set above (<div class="button" filter="THISISYOURFILTERNAME">filter one</div>) but do NOT delete 'item' --->

<!--- item starts --->
<div class="item filter1">

  <img src="https://images.unsplash.com/photo-1462743708072-4ed3a4a860be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=690&q=80" />

  <div class="desc">
  <h1>Name Here</h1>
  <p>Description Here</p>
  </div>

  <div class="url"><span><a href="/">@url here</a></span></div>

</div>
<!--- item ends: copy & paste as needed --->


<!----- DO NOT EDIT AFTER THIS LINE ---->
</div>
<div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>
<script>feather.replace()</script>
</body>
</html>