API tools faq
paste
altraviolence

page 08 - creo (commissions/portfolio)

altraviolence
Dec 2nd, 2017
1,163
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.  
  5. CREO page (08) by PEACHTHMS | peachthms.tumblr.com
  6. V1.0
  7.  
  8. - do not claim this page or any of the code as your own
  9. - do not redistribute this page or any of the code as your own
  10. - do not mix my code with another theme maker's code
  11. - do not remove or edit the credit in anyway; it must remain visible in the code and on the page
  12.  
  13. saturnthms - icon font
  14.  
  15. TO CHANGE ICONS
  16.  
  17. To change the icons, visit http://saturnthms.com/font and change
  18. sf-switch, sf-check-2, sf-cross-2 to whatever icon name you want to use.
  19.  
  20. E.G.
  21.  
  22. sf-wrench - wrench icon
  23.  
  24. TO EDIT FILTERS
  25.  
  26. 1. Find <ul id="filters">
  27.  
  28.    <li class="filter" data-filter="c1">category 1</li>
  29.  
  30.    Change the data-filter value between the quotation marks, " " to a single word you wish to use for your filter.
  31.  
  32.    E.G.
  33.    <li class="filter" data-filter="digital">digital art</li>
  34.  
  35.  
  36. 2. Find the corresponding div with
  37.  
  38.    <div class="grid-item">
  39.  
  40.    Add your matching filter after grid-item between the quotation marks, " ". Make sure that you do not delete grid-item.
  41.  
  42.    E.G.
  43.    <div class="grid-item digital">
  44.  
  45. -->
  46.  
  47. <head>
  48.  
  49. <title>commissions</title>
  50.  
  51. <meta charset="UTF-8">
  52. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  53.  
  54. <link rel="shortcut icon" href="{Favicon}">
  55.  
  56. <link href="https://fonts.googleapis.com/css?family=Lato|Playfair+Display" rel="stylesheet">
  57. <script src="https://use.fontawesome.com/976063c1b7.js"></script>
  58. <link href="https://dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  59. <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  60.  
  61. <style type="text/css">
  62.  
  63. * {
  64.     margin: 0;
  65.     padding: 0;
  66. }
  67.  
  68. ::-moz-selection {
  69.     background-color: #aaaaaa;
  70. }
  71.  
  72. ::selection {
  73.     background-color: #aaaaaa;
  74. }
  75.  
  76. ::-webkit-scrollbar {
  77.     width: 4px;
  78.     height: 4px;
  79. }
  80.  
  81. ::-webkit-scrollbar-thumb {
  82.     background: #aaaaaa;
  83. }
  84.  
  85. ::-webkit-scrollbar-track {
  86.     background: #ffffff;
  87. }
  88.  
  89. .tmblr-iframe-compact .tmblr-iframe--unified-controls {
  90.     z-index: 99999999999;
  91.     transform: scale(0.7,0.7);
  92.     -webkit-filter: invert(50%);
  93.     filter: invert(50%);
  94. }
  95.  
  96. a {
  97.     color: #686868;
  98.     text-decoration: none;
  99. }
  100.  
  101. a:hover {
  102.     color: #aaaaaa;
  103.     transition: 0.4s ease-in-out;
  104. }
  105.  
  106. body {
  107.     background: #f1f1f1;
  108.     color: #686868;
  109.     font-family: 'Lato', sans-serif;
  110.     font-size: 12px;
  111.     line-height: 1.7em;
  112. }
  113.  
  114. #container {
  115.     width: 100%;
  116.     height: 100%;
  117.     display: inline-block;
  118. }
  119.  
  120. #left {
  121.     position: fixed;
  122.     padding: 30px;
  123.     width: 200px;
  124.     height: calc(100vh - 60px);
  125.     overflow-y: auto;
  126.     background: #ffffff;
  127. }
  128.  
  129. #left h1 {
  130.     font-family: 'Playfair Display', serif;
  131.     font-size: 2em;
  132.     margin-bottom: 30px;
  133. }
  134.  
  135. .box {
  136.     margin: 30px auto;
  137. }
  138.  
  139. .boxtitle {
  140.     width: calc(100% - 10px);
  141.     padding: 5px;
  142.     background: #f1f1f1;
  143. }
  144.  
  145. .boxtitle .sf {
  146.     margin-top: 2px;
  147.     float: right;
  148. }
  149.  
  150. .boxtitle .sf::after {
  151.     content: '';
  152.     display: table;
  153.     clear: right;
  154. }
  155.  
  156. .boxinfo {
  157.     display: block;
  158. }
  159.  
  160. .boxinfo li {
  161.     list-style: none;
  162.     padding: 4px 0;
  163.     margin: 5px;
  164. }
  165.  
  166. .active {
  167.     color: #aaaaaa;
  168. }
  169.  
  170. #right {
  171.     width: calc(100% - 200px);
  172.     float: right;
  173. }
  174.  
  175. #right::after {
  176.     content: '';
  177.     display: table;
  178.     clear: right;
  179. }
  180.  
  181. #grid {
  182.     margin: 0 auto;
  183.     width: 80%;
  184.     column-count: 3;
  185.     column-gap: 100px;
  186. }
  187.  
  188. .grid-item {
  189.     width: 100%;
  190.     margin: 50px 0;
  191.     background: #ffffff;
  192.     display: inline-block;
  193.     page-break-inside: avoid;
  194.     break-inside: avoid;
  195. }
  196.  
  197. .grid-item img {
  198.     max-width: 100%;
  199. }
  200.  
  201. .grid-info {
  202.     padding: 10px;
  203. }
  204.  
  205. .grid-info ul, .grid-info ol {
  206.     margin: 10px 15px;
  207. }
  208.  
  209. .grid-info ul:last-of-type, .grid-info ol:last-of-type {
  210.     margin-bottom: 0;
  211. }
  212.  
  213. .filter:hover {
  214.     cursor: help;
  215. }
  216.  
  217. .credit {
  218.     position: fixed;
  219.     bottom: 10px;
  220.     left: 17px;
  221.     font-size: 14px;
  222. }
  223.  
  224. .credit a {
  225.     font-weight: normal;
  226. }
  227.  
  228. .credit span {
  229.     padding: 6px 9px;
  230.     font-size: 10px;
  231.     background: #686868;
  232.     color: #ffffff;
  233.     border-radius: 6px;
  234.     opacity: 0;
  235.     transition-duration: 0.5s;
  236.     -moz-transition-duration: 0.5s;
  237.     -webkit-transition-duration: 0.5s;
  238. }
  239.  
  240. .credit:hover span {
  241.     margin-left: 15px;
  242.     opacity: 1;
  243. }
  244.  
  245. .credit:before {
  246.     content: '\e2b0';
  247.     font-family: 'saturnicons';
  248. }
  249.  
  250. .credit:hover:before {
  251.     color: #686868;
  252. }
  253.  
  254. .mobilecredit {
  255.     display: none;
  256. }
  257.  
  258. @media only screen and (max-width : 1400px) {
  259.  
  260.     #grid {
  261.         width: 75%;
  262.         column-count: 2;
  263.         column-gap: 40px;
  264.     }
  265.  
  266.     .grid-item {
  267.         margin: 20px 0;
  268.     }
  269.  
  270.     .credit {
  271.         bottom: 2px;
  272.         left: 9px;
  273.     }
  274.  
  275. }
  276.  
  277. @media only screen and (min-width : 100px) and (max-width : 736px) {
  278.     #left {
  279.         margin: 0 auto;
  280.         padding-bottom: 0;
  281.         width: calc(100% - 60px);
  282.         height: auto;
  283.         position: static;
  284.         overflow: none;
  285.     }
  286.  
  287.     #right {
  288.         float: none!important;
  289.         width: 100%;
  290.         display: block;
  291.     }
  292.  
  293.     #grid {
  294.         margin: 20px auto;
  295.         width: 90%;
  296.         column-count: 1;
  297.     }
  298.  
  299.     .boxinfo {
  300.         display: none;
  301.     }
  302.  
  303.  
  304.     .credit {
  305.         display: none;
  306.     }
  307.  
  308.     .mobilecredit {
  309.         display: block;
  310.         margin: 50px auto 100px auto;
  311.         width: 100%;
  312.         font-family: 'Playfair Display', serif;
  313.         text-align: center;
  314.         font-weight: bold;
  315.     }
  316.  
  317. }
  318.  
  319. </style>
  320.  
  321. </head>
  322.  
  323. <body>
  324.  
  325. <section id="container">
  326.  
  327. <aside id="left">
  328.     <h1>commissions</h1>
  329.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  330.  
  331.     <div class="box">
  332.         <div class="boxtitle">commission status <span class="sf sf-switch"></span></div>
  333.         <div class="boxinfo">
  334.             <ul>
  335.                 <li>open</li>
  336.             </ul>
  337.         </div>
  338.     </div>
  339.  
  340.     <div class="box">
  341.         <div class="boxtitle">what I do <span class="sf sf-check-2"></span></div>
  342.         <div class="boxinfo">
  343.             <ul>
  344.                 <li>list item</li>
  345.             </ul>
  346.         </div>
  347.     </div>
  348.  
  349.     <div class="box">
  350.         <div class="boxtitle">what I don't do <span class="sf sf-cross-2"></span></div>
  351.         <div class="boxinfo">
  352.             <ul>
  353.                 <li>list item</li>
  354.             </ul>
  355.         </div>
  356.     </div>
  357.  
  358.     <div class="box">
  359.         <div class="boxtitle">filters <span class="sf sf-tags"></span></div>
  360.         <div class="boxinfo">
  361.             <ul id="filters">
  362.                 <li class="filter active" data-filter="grid-item">refresh</li>
  363.                 <li class="filter" data-filter="c1">category 1</li>
  364.                 <li class="filter" data-filter="c2">category 2</li>
  365.                 <li class="filter" data-filter="c3">category 3</li>
  366.                 <li class="filter" data-filter="c4">category 4</li>
  367.             </ul>
  368.         </div>
  369.     </div>
  370.  
  371. </aside>
  372.  
  373. <aside id="right">
  374.  
  375. <div id="grid">
  376.  
  377.     <div class="grid-item c2">
  378.         <img src="http://placehold.it/900x900/dddddd/dddddd">
  379.         <div class="grid-info">
  380.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  381.             <ul>
  382.                 <li>list item</li>
  383.                 <li>list item</li>
  384.                 <li>list item</li>
  385.                 <li>list item</li>
  386.             </ul>
  387.         </div>
  388.     </div>
  389.  
  390.     <div class="grid-item c3">
  391.         <img src="http://placehold.it/900x400/dddddd/dddddd">
  392.         <div class="grid-info">
  393.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  394.         </div>
  395.     </div>
  396.  
  397.     <div class="grid-item c4">
  398.         <img src="http://placehold.it/900x200/dddddd/dddddd">
  399.         <div class="grid-info">
  400.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  401.         </div>
  402.     </div>
  403.  
  404.     <div class="grid-item c1">
  405.         <img src="http://placehold.it/900x600/dddddd/dddddd">
  406.         <div class="grid-info">
  407.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  408.         </div>
  409.     </div>
  410.  
  411.     <div class="grid-item c2">
  412.         <img src="http://placehold.it/900x600/dddddd/dddddd">
  413.         <div class="grid-info">
  414.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  415.             <ol>
  416.                 <li>list item</li>
  417.                 <li>list item</li>
  418.                 <li>list item</li>
  419.                 <li>list item</li>
  420.             </ol>
  421.         </div>
  422.     </div>    
  423.    
  424.     <div class="grid-item c3">
  425.         <img src="http://placehold.it/900x600/dddddd/dddddd">
  426.         <div class="grid-info">
  427.             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  428.         </div>
  429.     </div>
  430.  
  431. </div>
  432.  
  433. </aside>
  434.  
  435. <div class="mobilecredit"><a href="http://peachthms.tumblr.com">page by peachthms</a></div>
  436.  
  437. </section>
  438.  
  439. <div class="credit"><a href="http://peachthms.tumblr.com"><span>page by peachthms</span></a></div>
  440.  
  441. <script>
  442. var $item = $(".grid-item");
  443. var $filter = $(".filter").on("click", function() {
  444.     var active =
  445.         $filter.removeClass("active").filter(this).addClass("active").data("filter");
  446.         $item.hide().filter( "." + active ).fadeIn(500);
  447. });
  448. </script>
  449.  
  450. <script>
  451. $(document).ready(function(){
  452.     if ( $(window).width() > 740) {
  453.       // larger screen resolutions
  454.     }
  455.     else {
  456.       // smaller screen resolutions
  457.      $('.boxtitle').click(function(){
  458.          $(this).next().toggle('500');
  459.      });
  460.     }
  461. });
  462. </script>
  463.  
  464. </body>
  465.  
  466. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
  • Phoenix
    YAML | 4 min ago | 0.46 KB
  • Scare
    YAML | 5 min ago | 0.94 KB
  • Launch
    YAML | 7 min ago | 0.57 KB
  • Slingshot
    YAML | 9 min ago | 0.67 KB
  • Nulify
    YAML | 12 min ago | 1.19 KB
  • Untitled
    C++ | 13 min ago | 0.84 KB
  • Rush
    YAML | 13 min ago | 0.77 KB
  • Untitled
    YAML | 15 min ago | 0.75 KB
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!