Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
- <!----------------✧ ☾ ☆ ☄ ⁛ THEMES BY ASTRAEAWRITES ⁛ ☄ ☾ ✧
- DO NOT STEAL OR CLAIM AS YOURS!
- report problems or questions @ astraeawrites.tumblr.com
- FILTER TUTORIAL BY CYANTISTS
- SATURNTHMS ICONS-------------------------------->
- <html>
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></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: 200
- });
- });
- $(".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();
- });
- });</script>
- <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,tip_delay_time:90,tip_fade_speed:600,attribute:"title"});});})(jQuery);</script>
- <link href="https://fonts.googleapis.com/css?family=Crimson+Text|Karla|Open+Sans|Roboto" rel="stylesheet">
- <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
- <style type="text/css">
- /*---------------BASICS---------------*/
- ::-webkit-scrollbar-thumb:vertical {
- display:none;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- display:none;
- }
- ::-webkit-scrollbar {
- display:none;
- }
- ::selection {
- background-color:black;
- color: #fff;
- }
- #s-m-t-tooltip {
- max-width:400px;
- background-color:#f6f6f6;
- font-size:8.5px;
- color:#000;
- text-transform:uppercase;
- border:1px solid #ddd;
- padding:6.5px;
- line-height:100%;
- margin:20px 0px 0px 20px;
- z-index:99999999999999999999999999999999;
- border-radius:1px;
- box-shadow:1px 1px 3px rgba(0,0,0,.0);
- }
- a{
- text-decoration:none;
- color:black;
- }
- body{
- background-color:#f6f6f6;
- font-size:10px;
- }
- p{
- margin:0px;
- padding:0px;
- margin-top:10px;
- margin-bottom:10px;
- }
- /*---------------EVERYTHING---------------*/
- #topbar {
- position:fixed;
- top:0;
- left:0;
- width:100vw;
- height:55px;
- background:#fff;
- border-bottom:1px solid #eee;
- z-index:99;
- line-height:20px;
- padding-top:20px;
- }
- #topbar h1{
- margin:0px;
- padding:0px;
- font-family:"crimson text";
- text-transform:lowercase;
- font-style:italic;
- font-size:28px;
- font-weight:100;
- text-align:center;
- cursor:default;
- }
- #topbar h2{
- margin:0px;
- padding:0px;
- font-family:"karla";
- text-transform:uppercase;
- font-size:12px;
- font-weight:100;
- text-align:center;
- cursor:default;
- }
- #everything{
- border:1px solid #ddd;
- border-radius:2px;
- background:white;
- position:fixed;
- width:806px;
- height:550px;
- left:50%;
- margin-left:-403px;
- top:50%;
- margin-top:-255px;
- }
- /*---------------SIDEBAR---------------*/
- .sidebar{
- border-right:1px solid #ddd;
- width:180px;
- height:550px;
- margin:0px;
- margin-top:0px;
- position:fixed;
- overflow-y:hidden;
- }
- .sidebar span{
- font-size:9px;
- margin-right:10px;
- }
- .sidebar article{
- margin-bottom:20px;
- line-height:10.5px;
- }
- .sidebar article:first-child{
- margin-top:10px;
- }
- .sidebarimg img{
- border-radius:50%;
- overflow:hidden;
- width:80px;
- height:80px;
- margin-left:45px;
- margin-bottom:25px;
- margin-top:50px;
- border:5px solid #fff;
- background:#eee;
- position:fixed;
- }
- .sidebar h1{
- font-size:14px;
- font-family:"karla";
- text-transform:uppercase;
- margin-top:-5px;
- padding:8px 10px 8px 10px;
- border-bottom:1px solid #eee;
- width:140px;
- margin-bottom:10px;
- margin-left:10px;
- margin-right:10px;
- cursor:default;
- text-align:center;
- }
- .top{
- width:181px;
- height:100px;
- background:#9baeae;
- position:fixed;
- margin-left:-0.5px;
- margin-top:-0.5px;
- }
- .within{
- margin-top:-12.5px;
- overflow:scroll;
- height:402.5px;
- position:fixed;
- margin-top:146.5px;
- }
- .description{
- font-size:10px;
- font-family:"karla";
- width:150px;
- margin-left:10px;
- margin-top:0px;
- margin-right:10px;
- padding:0px 5px 0px 5px;
- text-align:center;
- }
- .navigation{
- margin-top:0px;
- width:100%;
- position:relative;
- text-align:center;
- }
- .navigation ul{
- margin:0px;
- padding:0px;
- }
- .navigation li{
- display:inline-block;
- list-style:none;
- }
- .navigation a{
- background:#f6f6f6;
- border:1px solid #ddd;
- padding:4px 3.5px 4px 3.5px;
- margin-left:1px;
- margin-right:1px;
- display:inline-block;
- text-transform:uppercase;
- font-size:10px;
- font-family:"roboto";
- border-radius:2px;
- color:black;
- width:26px;
- text-decoration:none;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .navigation a:hover{
- color:#fff;
- background:#9baeae;
- border-radius:2px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .filters{
- margin-top:0px;
- margin-left:10px;
- margin-right:10px;
- width:160px;
- }
- .filters ul{
- list-style-type:none;
- margin:0px;
- padding:0px;
- text-align:center;
- margin-top:7.5px;
- margin-bottom:7.5px;
- width:100%;
- }
- .filters ul:first-child{
- margin-top:0px;
- }
- .filters ul:last-child{
- margin-bottom:0px;
- }
- .filters li{
- display:inline-block;
- margin-top:2.5px;
- margin-bottom:2.5px;
- }
- .reset{
- text-align:center;
- width:148.5px;
- }
- .button {
- cursor:pointer;
- border:1px solid #ddd;
- padding:3.5px 4.5px 3.5px 5.5px;
- background:#f6f6f6;
- border-radius:2px;
- color:black;
- text-decoration:none;
- text-transform:uppercase;
- font-size:10px;
- font-family:"roboto";
- }
- .buttoned{
- width:65px;
- margin-left:.88px;
- margin-right:.88px;
- }
- .button:hover{
- color:#fff;
- background:#9baeae;
- border-radius:2px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .button.selected {
- color:#fff;
- background:#9baeae;
- border-radius:2px;
- border:1px solid #bbb;
- }
- /*---------------GRID---------------*/
- .grid{
- width:610.5px;
- max-height:550px !important;
- min-height:550px !important;
- position:absolute;
- margin:20px;
- padding-left:5px;
- margin-top:0px;
- margin-left:182.5px;
- overflow:auto;
- }
- .innergrid{
- width:610.5px;
- margin-top:30px;
- height:auto;
- position:absolute;
- }
- /*---------------MUSE BASE---------------*/
- .item{
- width:168px;
- height:auto;
- background:white;
- border:1px solid #ddd;
- border-radius:2px;
- margin:0px 15px 40px 15px;
- display:block;
- position:relative;
- padding-bottom:10px;
- }
- /*---------------MUSE DETAILS---------------*/
- .itemtop{
- width:100%;
- height:70px;
- margin-top:-1px;
- margin-left:-1px;
- background:#9baeae;
- border-top-right-radius:2px;
- border-top-left-radius:2px;
- border:1px solid #ddd;
- }
- .item img{
- border-radius:50%;
- overflow:hidden;
- width:60px;
- height:60px;
- border:4px solid #fff;
- background:#eee;
- z-index:9999;
- margin-left:50px;
- margin-top:-40px;
- }
- .innermuse{
- width:157px;
- margin-top:5px;
- margin-left:0.5px;
- padding:5px;
- text-align:center;
- }
- .innermuse h1{
- text-align:center;
- font-size:12px;
- font-family:"karla";
- text-transform:uppercase;
- margin-top:2.5px;
- padding:5px 10.5px 5px 10.5px;
- background:#eee;
- width:86.5%;
- cursor:default;
- font-weight:600;
- }
- .innermusedescription {
- width:93.5%;
- padding-left:5px;
- padding-right:5px;
- margin-bottom:-5px;
- font-size:10px;
- text-align:center;
- font-family:"karla";
- }
- .innermusenavi{
- width:100%;
- padding:0px;
- margin-top:15px;
- margin-bottom:-5px;
- }
- .innermusenavi a{
- cursor: pointer;
- border: 1px solid #ddd;
- padding: 3px 4px 3px 4px;
- background: #f6f6f6;
- border-radius: 2px;
- margin:2px;
- color: black;
- text-decoration: none;
- text-transform: uppercase;
- font-size: 9px;
- position:relative;
- display: inline-block;
- font-family: "roboto";
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .innermusenavi a:hover{
- color:#fff;
- background:#9baeae;
- border-radius:2px;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- /*---------------CREDIT, DO NOT MOVE OR MAKE LESS VISIBLE!!---------------*/
- .credit a{
- font-size:12px;
- position:fixed;
- font-family:"roboto";
- font-weight:900;
- text-align:right;
- right:20px;
- bottom:20px;
- color:black;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- .credit a:hover{
- color:#ddd;
- text-decoration:none;
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- }
- {CustomCSS}
- </style>
- </head>
- <body>
- <div id="topbar">
- <h1>magnolia.</h1>
- <h2>oh, you sweet thing !</h2>
- </div>
- <!---------------EVERYTHING ------------------>
- <div id="everything">
- <!---------------SIDEBAR ------------------>
- <div class="sidebar">
- <div class="top"></div>
- <div class="sidebarimg">
- <img src="https://i.imgbox.com/bGm0Bkd2.png">
- </div>
- <div class="within">
- <article>
- <h1><span class="sf sf-navigation-o"></span> links</h1>
- <div class="navigation">
- <ul>
- <li><a href="/">001.</a></li>
- <li><a href="/">002.</a></li>
- <li><a href="/">003.</a></li>
- <li><a href="/">004.</a></li>
- </ul>
- </div>
- </article>
- <!---------------SIDEBAR DESCRIPTION ------------------>
- <article>
- <h1><span class="sf sf-user"></span> about</h1>
- <div class="description">
- <p>i am <strong>sorry</strong> this is <em>always</em> how it goes. the wind <u>blows</u> loudest <strong>when</strong> you've got your eyes <s><em>closed</em></s></p>
- <p>keep this description short. the sidebar will scroll if you need it, but it looks better short and neat !</p>
- </div>
- </article>
- <!---------------SIDEBAR FILTERS //
- please read everything before asking questions!!!!
- if you would like to add another filters section, you can do so by adding the following:
- <ul>
- <li><div class="button" filter="FILTERNAME">FILTER NAME</div></li>
- <li><div class="button" filter="FILTERNAME">FILTER NAME</div></li>
- </ul>
- when adding a new section, it's important to do it with unordered lists. adding a filter with only the <li> will only add a new filter, not a new section.
- with that being said, to add a new filter to an existing section, all you have to do is add the following:
- <li><div class="button" filter="FILTERNAME">FILTER NAME</div></li>
- make sure the new filter is within the <ul></ul> tag.
- now, for creating new filters, you also need to remember to change the filter name. let's use the gender filter as an example. if you want to add a non-binary filter, use the following:
- <li><div class="button" filter="nonbinary">non-binary</div></li>
- notice how the filter="nonbinary" has no spaces. it should remain that way.
- ------------------>
- <article>
- <h1><span class="sf sf-apps-o"></span>filters</h1>
- <div class="filters">
- <ul>
- <li><div class="button buttoned" filter="male">male</div></li>
- <li><div class="button buttoned" filter="female">female</div></li>
- </ul>
- <ul>
- <li><div class="button buttoned" filter="active">active</div></li>
- <li><div class="button buttoned" filter="inactive">inactive</div></li>
- </ul>
- <ul>
- <li><div class="button selected reset" filter="item">show all</div></li>
- </ul>
- </div>
- </article>
- </div>
- </div>
- <!---------------GRID //
- please read before asking questions !!!!!!!!!!!
- okay, to add a new muse section, copy and paste the following:
- <div class="item FILTER">
- <div class="itemtop"></div>
- <img src="IMAGE URL">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>MUSE NAME</h1>
- <div class="innermusedescription">
- <p>YOUR DESCRIPTION</p>
- </div>
- <div class="innermusenavi">
- <a href="URL"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>LINK</a>
- <a href="URL"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>LINK</a>
- <a href="URL"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>LINK</a>
- <a href="URL"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>LINK</a>
- <a href="URL"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>LINK</a>
- </div>
- </div>
- </div>
- QUICK TIP!!!
- do NOT delete the "item" part of the first div class. doing this will make the muse not show up on the "show all" filter. keep the item part and fill out your filters like this:
- <div class="item female active">
- commas are not necessary, just write out the filters like that.
- ------------------>
- <div class="grid">
- <div class="innergrid">
- <!---------------BEGINNING FIRST MUSE ----------------->
- <div class="item male active">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/8B4jSOzL.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>max bernard</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING FIRST MUSE ----------------->
- <!---------------BEGINNING SECOND MUSE ----------------->
- <div class="item male inactive">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/sCx4PGBj.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>daniel mcclune</h1>
- <div class="innermusedescription"><p>you can also have your description be at different lengths since the boxes don't have a set height. look at this. it's at different lengths, but its not screwing up the placement.</p>
- <p>its also best if you make sure the boxes are done in threes. this means you need have a full row of three</p>
- </div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING SECOND MUSE ----------------->
- <!---------------BEGINNING THIRD MUSE ----------------->
- <div class="item female inactive">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/OqmApoUx.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>alice lambert</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING THIRD MUSE ----------------->
- <!---------------BEGINNING FOURTH MUSE ----------------->
- <div class="item male inactive">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/vFkt8K2s.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>james avery</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING FOURTH MUSE ----------------->
- <!---------------BEGINNING FIFTH MUSE ----------------->
- <div class="item female active">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/5kDG9Bi0.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>aurelia avery</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING FIFTH MUSE ----------------->
- <!---------------BEGINNING SIXTH MUSE ----------------->
- <div class="item female active">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/4uOirvFM.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>jenny hill</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING SIXTH MUSE ----------------->
- <!---------------BEGINNING SEVENTH MUSE ----------------->
- <div class="item male active">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/MYAMDm0x.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>dylan elder</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING SEVENTH MUSE ----------------->
- <!---------------BEGINNING EIGTH MUSE ----------------->
- <div class="item male inactive">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/F6bh46og.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>tyler benson</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING EIGTH MUSE ----------------->
- <!---------------BEGINNING NINTH MUSE ----------------->
- <div class="item female inactive">
- <div class="itemtop"></div>
- <img src="https://i.imgbox.com/ZPKLDzKv.png">
- <div class="innermuse">
- <h1><span class="sf sf-heart" style="font-size:9px;margin-right:10px;"></span>marissa caldwell</h1>
- <div class="innermusedescription"><p>this is your description. i recommend keeping it shorter, but it's ok if it isn't. 3-5 lines of text will look best!</p></div>
- <div class="innermusenavi">
- <a href="url"><span class="sf sf-write" style="font-size:7.5px;margin-right:6px;"></span>blog</a>
- <a href="url"><span class="sf sf-picture" style="font-size:7.5px;margin-right:6px;"></span>inspo</a>
- <a href="url"><span class="sf sf-plus-2" style="font-size:7.5px;margin-right:6px;"></span>opp</a>
- <a href="url"><span class="sf sf-cog" style="font-size:7.5px;margin-right:6px;"></span>link</a>
- <a href="url"><span class="sf sf-aero-cursor
- " style="font-size:7.5px;margin-right:6px;"></span>link</a>
- </div>
- </div>
- </div>
- <!---------------ENDING NINTH MUSE ----------------->
- </div>
- </div>
- </div>
- <!---------------CREDIT // DO NOT REMOVE OR ALTER PLS !! ------------------>
- <div class="credit"><a href="https://astraeawrites.tumblr.com/">AW</a></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment