page 19 // phoebe

<!DOCTYPE html>
<head>

<!-- PHOEBE by @venusthms

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

    - do no redistribute any part of this theme or remove the credit
    - terms of use: venusthms.tumblr.com/terms

    - icons https://fontawesome.com/
    - filters: https://isotope.metafizzy.co/
    - more credits https://venusthms.tumblr.com/credits

    - message me if you encounter any problems with this page

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

<!----- tab title ----->
<title>Media Page</title><link rel="shortcut icon" href="{Favicon}">

<!----- scripts ----->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Scada:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/7donh9k4jonbmw5/venus.css" rel="stylesheet"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://kit.fontawesome.com/2e832dfefc.js" crossorigin="anonymous"></script><script src="//dl.dropbox.com/s/qxwy3ik34kqna5q/venus.js"></script>

<script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script><script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script><script src="//dl.dropbox.com/s/5nt6vqnl9ne82ox/grid.js"></script>

<!-- if you don't want the icons of the header to change, delete from here -->
<script>
$(document).ready(function() {
    $("header").hover(function () {
    $('header i').toggleClass("fa-smile"); //default icon
    $('header i').toggleClass("fa-grin-beam"); //icon on hover
  });
});
</script>
<!----- to here----->


<style type="text/css">


/*colors*/
:root {
  --background: #f6f7f9;
  --text: #333;
  --box-shadows: rgba(0,0,0,.08);

  --header: #fff;
  --header-text: #bbb;
  --header-accent: #a5d0ec;

  --filters: #bbb;
  --filters-accent: #a5d0ec;

  --searchbar: #fafafa;
  --searchbar-text: #bbb;

  --items: #fff;
  --items-borders: #eee;
  --items-text: #aaa;
  --items-accent-bg: #f6f6f6; /*will not show up on the customization page*/
  --progress-bar: #f5a623;
  --progress-bar-bg: #eee;

  --header-top-position: 50px;
  --header-height: 65px;
}

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


/* controls */
iframe.tmblr-iframe {
    opacity:0.4;
    /* delete invert(1) from here */
    filter:invert(1) contrast(150%);
    -webkit-filter:invert(1) contrast(150%);
    -o-filter:invert(1) contrast(150%);
    -moz-filter:invert(1) contrast(150%);
    -ms-filter:invert(1) contrast(150%);
    /* to here if you want light controls */
}

iframe.tmblr-iframe:hover {opacity:0.6!important;}


/* font  styling */
body {font-size:13px;font-family:'Karla', sans-serif;}
.search input[type=text], #filters button, #sorting button {font-family: 'Scada', sans-serif}

/* accent text font stylings */
header h1, header a, .search input[type=text], #filters button, #sorting button, .title h1, .rating span, .progress {text-transform:uppercase;letter-spacing:1px}

header h1, header a, .title h1 {font-size:1em;}
.search input[type=text], #filters button,.rating span, .progress, #sorting button {font-size:.9em;}


/* box shadows */
header {box-shadow:0 6px 6px -4px var(--box-shadows)}
.item {box-shadow:0 0px 4px 1px var(--box-shadows)}
.title {box-shadow:0 6px 6px -4px var(--box-shadows)}


/* links */
.desc a, a, #filters button, #sorting button {cursor:pointer}

/* in-text links */
.desc a {color:var(--text);border-bottom: 2px solid var(--progress-bar);}
.desc a:hover {border-bottom: 2px solid var(--items-text);}


/* items */
.item {margin-bottom:15px;} /*vertical space between items*/
.item div:nth-child(2) {background: var(--items-accent-bg)} /*accent bg*/

/* item title */
.title {justify-content:flex-start;height:60px}
.title img {height:35px;width:35px;border:1px solid var(--items-borders);border-radius:100%} /*image*/

/* rating */
.rating i {margin-right:3px} /*space between stars*/
.rating span {letter-spacing:1.5px}

/* description */
.desc {padding:15px;border-bottom:1px solid var(--items-borders);text-align:justify}

/* progress bar */
.progress {text-align:center} /*text above bar*/
.bar, .bar-fill {height:5px}


</style>
<link href="//dl.dropbox.com/s/n0s4vsnjwpdla9p/style.css" rel="stylesheet">
</head>
<body>

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

<!--- icon --->
<!--- find more icons at https://fontawesome.com/ --->
<!--- you need to change the javascript at the top as well --->
<i class="fas fa-smile"></i>

<!--- title --->
<h1>media page</h1>

<!--- links --->
<a href="/">return</a>
<a href="/ask">contact</a>
<a href="#" class="filter-b">filter</a> <!-- reveals filters -->
<a href="#" class="sort-b">sort</a> <!-- reveals sorting -->

<!--- search bar --->
<div class="search">
<input type="text" class="quicksearch" placeholder="Search..." />
</div>

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

<!----- filters ----->
<!-- you can change the filter names (eg. .filter1) but keep the . at the beginning -->
<div id="filters" class="filter-group">
  <button class="button selected" data-filter="*">everything</button>
  <button class="button" data-filter=".filter1">filter one</button>
  <button class="button" data-filter=".filter2">filter two</button>
  <!-- copy & paste as needed -->
</div>

<!----- sorting ----->
<!-- you don't need to change anything here-->
<div id="sorting">
  <button class="button selected" data-sort-value="original-order">default</button>
  <button class="button" data-sort-value="name">alphabetically</button>
  <button class="button" data-sort-value="random">randomize</button>
</div>

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


<!--- item starts --->
<div class="item filter1"> <!-- filter names go here (without the .) -->

<!--- title --->
<div class="title">
  <img src="IMAGE URL HERE" />
  <h1>Title</h1>
</div>

<!--- rating --->
<div class="rating">
  <i class="fas fa-star" style="color:#f5a623"></i>
  <i class="fas fa-star" style="color:#f5a623"></i>
  <i class="fas fa-star" style="color:#f5a623"></i>
  <i class="fas fa-star" style="color:#bbb"></i>
  <i class="fas fa-star" style="color:#bbb"></i>
  <span>[comment]</span>
</div>

<!--- description --->
<div class="desc">
  Here goes your description.
</div>

<!--- progress bar --->
<div class="progress">
  <span>last seen: episode 12</span>
  <div class="bar">
  <span class="bar-fill" style="width:70%;"></span> <!-- change percentage -->
  </div>
</div>

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


</div>
<!----- grid ends ----->


<!----- credit----->
<!----- do not remove or edit !----->
<a href="https://venusthms.tumblr.com/" title="venusthms">
<div class="venus-icon"></div>
</a>

</body>
</html>