API tools faq
paste
Advertisement
Guest User

The Sim Seeker

a guest
Jan 18th, 2020
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.00 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <!--theme by raven at ikilledtherpc don't be a dick --->
  4.  
  5. <html>
  6.  
  7. <head>
  8.  
  9.  
  10.    <title>{Title}</title>
  11.    <link rel="shortcut icon" href="{Favicon}">
  12.    <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  14.  
  15. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  16. <!--fontawesome-->
  17. <link rel=stylesheet href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  18. <!-- filter scripts -->
  19. <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  20. <script src="//unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  21. <script src="//unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
  22. <script src="//unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
  23.  
  24.  
  25. <script type="text/javascript">
  26.    $(document).ready(function() {
  27.        // init Isotope
  28.        var $grid = $('.grid').isotope({
  29.            itemSelector: '.grid-item',
  30.            masonry: {
  31.                columnWidth: 250,
  32.                fitWidth: true,
  33.                gutter: 3
  34.            },
  35.            hiddenStyle: {
  36.                opacity: 0
  37.            },
  38.            visibleStyle: {
  39.                opacity: 1
  40.            },
  41.            transitionDuration: '0.5s'
  42.        });
  43.        // layout Isotope after each image loads
  44.        $grid.imagesLoaded().progress(function() {
  45.            $grid.isotope('layout');
  46.        });
  47.        // store filter for each group
  48.        var filters = {};
  49.        $('.filters').on('click', '.button', function() {
  50.            var $this = $(this);
  51.            // get group key
  52.            var $buttonGroup = $this.parents('.button-group');
  53.            var filterGroup = $buttonGroup.attr('data-filter-group');
  54.            // set filter for group
  55.            filters[filterGroup] = $this.attr('data-filter');
  56.            // combine filters
  57.            var filterValue = concatValues(filters);
  58.            // set filter for Isotope
  59.            $grid.isotope({
  60.                filter: filterValue
  61.            });
  62.        });
  63.        // change is-checked class on buttons
  64.        $('.button-group').each(function(i, buttonGroup) {
  65.            var $buttonGroup = $(buttonGroup);
  66.            $buttonGroup.on('click', 'button', function() {
  67.                $buttonGroup.find('.is-checked').removeClass('is-checked');
  68.                $(this).addClass('is-checked');
  69.            });
  70.        });
  71.    });
  72.    // flatten object by concatting values
  73.    function concatValues(obj) {
  74.        var value = '';
  75.        for (var prop in obj) {
  76.            value += obj[prop];
  77.        }
  78.        return value;
  79.    }
  80. </script>
  81.  
  82. <script>
  83.    function goBack() {
  84.        window.history.back();
  85.    }
  86. </script>
  87.  
  88. <style type="text/css">
  89.  
  90. ::-webkit-scrollbar{width: 6px;}
  91. ::-webkit-scrollbar-thumb{background-color:#acacac; border-radius: 3px; }
  92. ::-webkit-scrollbar-track{background-color:#f5f5f5}
  93. ::-moz-selection{background-color:#acacac;color:#fff}
  94. ::selection{background-color:#acacac;color:#fff}
  95.  
  96.  
  97.  
  98.    *, figure {
  99.         box-sizing: border-box;
  100.         margin: 0;
  101.         padding: 0;
  102.         border: none;
  103.         background: none;
  104.    }
  105.    
  106.    
  107.    body {
  108.         font-size: 13px;
  109.         color: #1d1d1d;
  110.         background: #f5f5f5;
  111.         font-family: heebo, helvetica neue, helvetica, arial, sans-serif;
  112.         overflow-x:hidden;
  113.        
  114.        background-image: url(https://i.imgur.com/tYylWa0.jpg);
  115.         background-size: auto 100% ;
  116.     }
  117.    
  118.    
  119.    header {
  120.         font-size: 10px;
  121.         position: absolute;
  122.         top: 0;
  123.         z-index: 99999;
  124.         width: 100%;
  125.         padding: 50px 75px;
  126.         color: #f5f5f5;
  127.         background: rgb(151, 200, 190);
  128.    }
  129.    
  130.    
  131.    h1 {
  132.         font-size: 30px;
  133.    }
  134.    
  135.    .desc {
  136.         width: 40vw;
  137.    }
  138.    
  139.    h1, h2, h3, h4, h5, h6 {
  140.         font-family: helvetica neue, helvetica, arial, heebo, sans-serif;
  141.    }
  142.    
  143.    .back {
  144.         text-align: right;
  145.         font-weight: bold;
  146.         text-transform: uppercase;
  147.         color: inherit;
  148.         font-family: helvetica neue, helvetica, arial, heebo, sans-serif;
  149.    }
  150.    
  151.    nav {
  152.         position: fixed;
  153.         top: 0;
  154.         width: 400px;
  155.         height: 100%;
  156.         margin-bottom: 7px;
  157.         padding: 300px 75px 50px;
  158.         color: #fff;
  159.         background-image: url(https://i.imgur.com/rT1GaGM.jpg);
  160.         background-size: auto 100% ;
  161.         background-position:fixed
  162.    }
  163.    
  164.    h3 {
  165.         letter-spacing: .5px;
  166.         margin: 5px 0
  167.    }
  168.    
  169.    
  170.    
  171.    .filters .button-group {
  172.         margin: 20px 0 0;
  173.    }
  174.    
  175.    .filters button {
  176.         font-family: heebo, helvetica neue, helvetica, arial, sans-serif;
  177.         font-size: 13px;
  178.         display: block;
  179.         outline: none;
  180.         color: inherit;
  181.         padding: 1px 0
  182.    }
  183.    
  184.    .filters button:before {
  185.         font-family: FontAwesome;
  186.         display: inline-block;
  187.         width: 15px;
  188.         content: '\f096';
  189.         vertical-align: middle;
  190.         text-align: left;
  191.         color: #fff;
  192.         color: rgba(255, 255, 255, 0.7)
  193.    }
  194.    
  195.    .filters .button.is-checked::before {
  196.         content: '\f046';
  197.         color: #fff;
  198.    }
  199.    
  200.    .filters button:hover {
  201.         cursor: pointer;
  202.    }
  203.    
  204.    main {
  205.         margin-top: 200px;
  206.         margin-left: 300px;
  207.    }
  208.    
  209.    .grid {
  210.         line-height: 100%;
  211.         position: fixed;
  212.         top: 80px;
  213.         margin: 0 auto;
  214.         margin-bottom: 100px;
  215.    }
  216.    
  217.    .grid-item {
  218.         float: left;
  219.         width: 250px;
  220.         height: auto;
  221.         margin-bottom: 3px;
  222.         box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
  223.    }
  224.    
  225.    figure {
  226.         overflow: hidden;
  227.         background: #bababa;
  228.    }
  229.    
  230.    .content {
  231.         font-size: 14px;
  232.         min-height: 60px;
  233.         padding: 10px 10px 30px;
  234.         background: #fff;
  235.    }
  236.    
  237.     a {
  238.        color:inherit;
  239.    }
  240.    
  241.    .info a {
  242.         font-weight: bold;
  243.         text-decoration: none;
  244.         color: inherit;
  245.         background-image: linear-gradient(#fff 50%, #cecece 50%);
  246.         background-repeat: repeat-x;
  247.         background-position: 0 1.15em;
  248.         background-size: 1em 2px;
  249.    }
  250.    
  251.    
  252.    h2 {
  253.         font-size: 18px;
  254.         text-transform: uppercase;
  255.    }
  256.    
  257.    .name {
  258.         font-family: helvetica neue, helvetica, arial, heebo, sans-serif;
  259.         line-height: 15px;
  260.    }
  261.    
  262.  
  263.    
  264.    .grid-item img {
  265.         float: left;
  266.         width: 100%;
  267.    }
  268.    
  269.    
  270.    
  271.    /*scale when hovering, but not on expand*/
  272.    
  273.    .grid-item:not(.expand) figure img {
  274.         -webkit-transition: .4s;
  275.         -o-transition: .4s;
  276.         -moz-transition: .4s;
  277.         transition: .4s;
  278.         -webkit-transform: scale(1);
  279.         -ms-transform: scale(1);
  280.         -o-transform: scale(1);
  281.         -moz-transform: scale(1);
  282.         transform: scale(1);
  283.    }
  284.    
  285.    .grid-item:not(.expand) figure:hover img {
  286.         -webkit-transform: scale(1.1);
  287.         -ms-transform: scale(1.1);
  288.         -o-transform: scale(1.1);
  289.         -moz-transform: scale(1.1);
  290.         transform: scale(1.1);
  291.    }
  292.    
  293.  
  294.    
  295.    .expand {
  296.         z-index: 99999999;
  297.         width: 502px;
  298.    }
  299.    
  300.    .info {
  301.         font-size: 13px;
  302.         line-height: 150%;
  303.         display: none;
  304.         margin: 15px 0;
  305.         padding: 0 10px;
  306.         text-align: justify;
  307.         border-left: 1px solid #cecece;
  308.    }
  309.    
  310.    .expand .info {
  311.         display: inline-block;
  312.    }
  313.    
  314.    .info p {
  315.         padding: 5px 0;
  316.    }
  317.    
  318.    .info p:first-of-type {
  319.         padding-top: 0;
  320.    }
  321.    
  322.    .info p:last-of-type {
  323.         padding-bottom: 0;
  324.    }
  325.    
  326.    
  327.    
  328.  
  329.    #credit{line-height:100%;border-radius:50%;position:fixed;bottom:10px;right:10px;color:#fff;background:rgba(0,0,0,.2);padding:5px;width:20px;height:20px;overflow:hidden;font-size:10px;font-weight:100;white-space:nowrap;-moz-transition:all .6s ease-in-out;-ms-transition:all .6s ease-in-out;-o-transition:all .6s ease-in-out;-webkit-transition:all .6s ease-in-out;transition:all .6s ease-in-out}#credit:hover{background:#000;width:80px;border-radius:15px}#credit:before{font-size:10px;content:'\f292';font-family:FontAwesome;padding-right:5px}
  330.  
  331. </style>
  332.  
  333.  
  334.  
  335. </head>
  336.  
  337. <body>
  338.  
  339. <!-----------------------------HEADER----------------------------->
  340.  
  341.    <header>
  342.        <h1>Sim Seeker CC Finds</h1>
  343.        <div class="desc">
  344.            This is more so for private use.<button class="back" onclick="goBack()"><i aria-hidden="true" class="fa fa-chevron-left"></i>&nbsp;Go Back.</button>
  345.        </div>
  346.    </header>
  347.  
  348. <!-----------------------------SIDEBAR----------------------------->
  349.  
  350. <nav data-0="padding-top:300px;overflow:hidden;" data-250="padding-top:70px; overflow:auto;">
  351.  <div class="filters">
  352.  
  353.    <!-- category one -->
  354.    <div class="button-group" data-filter-group="CAS">
  355.      <h3>CAS</h3>
  356.      <button class="button is-checked" data-filter="">All</button>
  357.      <button class="button" data-filter=".Tops">Tops</button>
  358.      <button class="button" data-filter=".Bottoms">Bottoms</button>
  359.      <button class="button" data-filter=".Full Body">Full Body</button>
  360.      <button class="button" data-filter=".Accesories">Accesories</button>
  361.      <button class="button" data-filter=".Shoes">Shoes</button>
  362.    </div>
  363.    
  364.    <!-- category two -->
  365.    <div class="button-group" data-filter-group="Hair">
  366.      <h3>Hair</h3>
  367.      <button class="button is-checked" data-filter="">all</button>
  368.      <button class="button" data-filter=".Eyebrows">Eyebrows</button>
  369.      <button class="button" data-filter=".Long">Long</button>
  370.      <button class="button" data-filter=".Curly">Curly</button>
  371.    </div>
  372.    
  373.    <!-- category three -->
  374.    <div class="button-group" data-filter-group="Presets">
  375.      <h3>Presets</h3>
  376.      <button class="button is-checked" data-filter="">all</button>
  377.      <button class="button" data-filter=".Lip">Lip</button>
  378.      <button class="button" data-filter=".Body">Body</button>
  379.      <button class="button" data-filter=".Nose">Nose</button>
  380.    </div>
  381.    
  382.    <!-- category four -->
  383.    <div class="button-group" data-filter-group="Preferences">
  384.      <h3>PREFERENCES</h3>
  385.      <button class="button is-checked" data-filter="">all</button>
  386.      <button class="button" data-filter=".Female">Female</button>
  387.      <button class="button" data-filter=".Male">Male</button>
  388.      <button class="button" data-filter=".">Male</button>
  389.    </div>
  390.    
  391.    <!-- category five -->
  392.    <div class="button-group" data-filter-group="Make Up">
  393.      <h3>Make Up</h3>
  394.      <button class="button is-checked" data-filter="">all</button>
  395.      <button class="button" data-filter=".Eye Shadow">Eye Shadow</button>
  396.      <button class="button" data-filter=".Eyeliner">Eyeliner</button>
  397.      <button class="button" data-filter=".Blush">Blush</button>
  398.      <button class="button" data-filter=".Lipstick">Lipstick</button>
  399.    </div>
  400.    
  401.    <!-- category six -->
  402.    <div class="button-group" data-filter-group="Genetics">
  403.      <h3>Genetics</h3>
  404.      <button class="button is-checked" data-filter="">all</button>
  405.      <button class="button" data-filter=".Skin Detail">Skin Details</button>
  406.      <button class="button" data-filter=".Skintone">Skintone</button>
  407.      <button class="button" data-filter=".Tattoes">Tattoes</button>
  408.      <button class="button" data-filter=".Eyes">Eyes</button>
  409.    </div>
  410.    
  411.    
  412.    
  413.  
  414.  </div>
  415. </nav>
  416.  
  417. <!---------------------------MAIN CONTENT--------------------------->
  418.  
  419. <main>
  420. <div class="grid">
  421.  
  422.  
  423.  
  424.  
  425.  
  426.    
  427.    
  428.    
  429. </div>
  430. </main>
  431.  
  432.  
  433. <!-------------------------- END MAIN CONTENT --------------------------
  434.  
  435. do me a favor and don't delete my credit.
  436. its small and unobtrustive for a reason
  437. --->
  438.  
  439. <a href="http://www.ikilledtherpc.tumblr.com">
  440.   <div id="credit">ikilledtherpc.</div>
  441. </a>
  442. </body>
  443.  
  444. <!---script! don't touch=-->
  445.  
  446. <script src=
  447. "https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js" type=
  448. "text/javascript"></script>
  449. <script type="text/javascript">
  450.    var s = skrollr.init();
  451. </script>
  452.  
  453. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!