API tools faq
paste
Advertisement
mebuckner

Custom Order - Ginger - Layouts Page

mebuckner
Nov 16th, 2020
991
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.16 KB | None | 0 0
raw download clone embed print report
  1. <! DOCTYPE HTML>
  2.     <head>
  3.         <title>{Title}</title>
  4.         <link rel="shortcut icon" href="{Favicon}">
  5.         <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6.  
  7.   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  8.    
  9. <style type="text/css">
  10.  
  11. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
  12.  
  13. /*---------------- GENERAL ----------------*/
  14.  
  15.     body {
  16.         margin: 0;
  17.         background-image:url('https://i.imgur.com/VTaiuzR.jpg');
  18.         background-attachment: fixed;
  19.         background-size:cover;
  20.     }
  21.  
  22.      sub, sup, small {
  23.         font-size: 14px;
  24.     }
  25.    
  26.  
  27. /*---------------- CONTAINERS ----------------*/
  28.  
  29.     #upper {
  30.         width: 1051px;
  31.         margin: auto;
  32.     }
  33.    
  34.     #lower {
  35.         width: 1051px;
  36.         min-height: 1500px; /* this should be adjusted the more content you have in your sidebars--- it makes it so your sidebars aren't longer than your lower container */
  37.         padding-top: 30px;
  38.         margin: auto;
  39.         margin-bottom: -21px;
  40.         background: #fff;
  41.         margin-top:-4px;
  42.     }
  43.    
  44.     #postblock {
  45.             width: 664px;
  46.     margin: auto;
  47.     background: #fff;
  48.     margin-left: 353px;
  49.     height: 800px;
  50.     overflow: auto;
  51.     }
  52.  
  53. /*---------------- HEADER ----------------*/
  54.  
  55.     #navigation {
  56.     position: fixed;
  57.     margin-top: 0;
  58.     width: 1031px;
  59.     height: 50px;
  60.     background: #c5b0d2;
  61.     text-align: center;
  62.     padding-right: 20px;
  63.     }
  64.    
  65.     a.topNavLinks:link, a.topNavLinks:visited {
  66.         background-color: #c5b0d2;
  67.         color: white;
  68.         padding: 14px 25px;
  69.         text-align: center;
  70.         text-decoration: none;
  71.         display: inline-block;
  72.         font-family: Playfair Display;
  73.         text-transform: uppercase;
  74.         letter-spacing: 3px;
  75.     }
  76.    
  77.     a.topNavLinks:hover, a.topNavLinks:active {
  78.       color: black;
  79.     }
  80.    
  81.     h1{
  82.             margin: 0;
  83.     text-align: center;
  84.     text-transform: uppercase;
  85.     font-weight: 100;
  86.     font-size: 21px;
  87.     background: #7d76b3;
  88.     padding-top: 10px;
  89.     padding-bottom: 10px;
  90.     color: #fff;
  91.     margin-bottom: 10px;
  92.     }
  93.    
  94.     h2 {
  95.     margin: 0;
  96.     font-size: 21px;
  97.     text-transform: uppercase;
  98.     color: #7d76b3;
  99.     font-weight: 100;
  100. }
  101.    
  102.     a {
  103.     font-family: 'Playfair Display';
  104.     font-size: 12px;
  105.     color: #52315f;
  106.     text-decoration: none;
  107. }
  108.    
  109.     strong{
  110.         background:#8c78ad;
  111.         padding:5px;
  112.         line-height:32px;
  113.         color:#fff;
  114.     }
  115.  
  116.    
  117.     #banner {
  118.         margin-top: 50px;
  119.         width: 1050px;
  120.         /* the height of your headerdepends on the height of your image--- there is no minimum or maximum */
  121.     }
  122.  
  123. /*---------------- SIDEBARS ----------------*/
  124.  
  125.     #left {
  126.         float: left;  
  127.         margin-left: 25px;
  128.         width: 300px;
  129.     }
  130.    
  131.    
  132. /*---------------- BOXES ----------------*/
  133.  
  134.     .boxheader {
  135.            width: 280px;
  136.     padding: 10px;
  137.     color: white;
  138.     background: black;
  139.     background-image: url(https://i.imgur.com/VTaiuzR.jpg);
  140.     padding-top: 20px;
  141.     padding-bottom: 20px;
  142.     font-family: 'Playfair Display';
  143.     font-size: 27px;
  144.     text-transform: uppercase;
  145.     letter-spacing: 10px;
  146.     text-shadow: 2px 2px #582577ba;
  147.     }
  148.    
  149.     .boxtitle {
  150.         text-align: center;
  151.     }
  152.    
  153.     .sideBox {
  154.            width: 280px;
  155.     padding: 10px;
  156.     margin-bottom: 15px;
  157.     background: white;
  158.     font-family: 'Playfair Display';
  159.     font-size: 12px;
  160.     text-align: justify;
  161.     color: #000;
  162.     }
  163.    
  164.     .aboutMeBox{
  165.             width: 177px;
  166.     height: 97px;
  167.     background: #fff;
  168.     padding: 20px;
  169.     color: #000;
  170.     display: inline-block;
  171.     vertical-align: top;
  172.     font-family: 'Playfair Display';
  173.     font-size: 12px;
  174.     text-align: justify;
  175.     overflow: auto;
  176.     padding: 0;
  177.     }
  178.    
  179.     #project {
  180.     margin-left: -3px;
  181.     background: #8c78ad;
  182.     height: 80px;
  183.     border-radius: 3px;
  184.     width: 281px;
  185.     margin-bottom: 10px;
  186. }
  187.  
  188. .project {
  189.     float: right;
  190.     display: inline-block;
  191.     width: 206px;
  192.     text-align: center;
  193.     font-size: 9px;
  194.     text-transform: uppercase;
  195.     color: #ffffff;
  196.     font-weight: 700;
  197.     letter-spacing: 2px;
  198.     line-height: 18px;
  199.     margin-top: 23px;
  200.     font-family: Playfair Display;
  201.     font-weight: 100;
  202.     vertical-align: top;
  203. }
  204.  
  205. #clientOrder{
  206.     width: 241px;
  207.     background: #8c78ad;
  208.     padding:20px;
  209.     color:#fff;
  210.     margin-top:5px;
  211. }
  212.  
  213. .clientName{
  214.     font-family:Playfair Display;
  215.     font-size:12px;
  216.     font-weight:bold;
  217.     width:100px;
  218.     text-align:left;
  219.     display:inline-block;
  220.     vertical-align:top;
  221. }
  222.  
  223. .clientStatus{
  224.     font-family:Playfair Display;
  225.     font-size:12px;
  226.     width:136px;
  227.     text-align:right;
  228.     display:inline-block;
  229.     vertical-align:top;
  230. }
  231.  
  232. b {
  233.     font-family: 'Playfair Display';
  234.     font-size: 12px;
  235. }
  236.  
  237.    
  238. /*---------------- AFFILIATES ----------------*/
  239.  
  240.     .aff {
  241.         display: inline-block;
  242.         margin: 3px;
  243.     }
  244.  
  245. /*---------------- ROLEPLAYS ----------------*/
  246.  
  247.     .rpgname {
  248.         margin-top: 10px;
  249.         margin-bottom: 5px;
  250.         font-size: 20px;
  251.         text-transform: uppercase;
  252.     }
  253.  
  254.     .rpgimg {
  255.         float: left;
  256.     }
  257.    
  258.     .rpginfo {
  259.         height: 55px;
  260.         width: 195px;
  261.         padding: 5px 5px 5px 75px;
  262.         background: #dbdbdb;
  263.     }
  264.  
  265. /*---------------- POSTS ----------------*/
  266.  
  267.    .posts {
  268.     width: 500px;
  269.     padding: 30px;
  270.     margin-bottom: 21px;
  271.     background: #c5b0d2;
  272.     font-family: 'Playfair Display';
  273.     font-size: 12px;
  274.     color: #fff;
  275.     text-align: justify;
  276. }
  277.  
  278. /*---------------- PAGINATION ----------------*/
  279.  
  280.     .pagination {
  281.         width: 400px;
  282.         padding-bottom: 20px;
  283.         margin-left: auto;
  284.         margin-right: auto;
  285.         margin-top: 20px;
  286.         text-align: center;
  287.         text-transform: uppercase;
  288.     }
  289.  
  290.     .jump_page {
  291.             padding: 11px;
  292.     background: #c5b0d2;
  293.     width: 15px;
  294.     display: inline-block;
  295.     color: #fff;
  296.     }
  297.    
  298.     .current_page {
  299.         margin-left: 5px;
  300.     }
  301.    
  302.     .current_page, .jump_page:hover {
  303.         padding: 10px;
  304.     }
  305.  
  306. /*---------------- FOOTER ----------------*/
  307.  
  308.     #footer {
  309.     width: 1051px;
  310.     padding-top: 20px;
  311.     margin: auto;
  312.     padding-bottom: 20px;
  313.     margin-bottom: 0;
  314.     color: white;
  315.     background: #c5b0d2;
  316.     text-align: center;
  317.     font-family: 'Playfair Display';
  318.     font-size: 12px;
  319.     text-transform: uppercase;
  320.     }
  321.    
  322.     ::-webkit-scrollbar {display:none;}
  323.    
  324.     .filter ul{
  325.   list-style: none;
  326.   overflow: auto;
  327.   border-bottom: 1px solid #eee;
  328. }
  329. .filter li{
  330.   padding: 10px;
  331.   cursor: pointer;
  332. }
  333. .boxes{
  334.   padding-left: 20px;
  335.   width: 793px;
  336. }
  337. .box{
  338.       width: 200px;
  339.     height: 224px;
  340.     float: left;
  341.     margin: 1px;
  342.     text-align: center;
  343. }
  344.  
  345.  
  346. </style></head><body>
  347.  
  348. <!---------------- HEADER START ---------------->
  349.  
  350. <div id="upper">
  351.  
  352.     <div id="navigation">
  353.        <a href="/" class="topNavLinks">Link Here</a>
  354.        <a href="/" class="topNavLinks">Link Here</a>
  355.        <a href="/" class="topNavLinks">Link Here</a>
  356.        <a href="/" class="topNavLinks">Link Here</a>
  357.        <a href="/" class="topNavLinks">Link Here</a>
  358.        
  359.     </div>
  360.        
  361.     <img src="https://i.imgur.com/ma2cYU2.png" id="banner">  
  362.  
  363. </div>
  364.  
  365. <!---------------- HEADER END ---------------->
  366.  
  367. <!---------------- LOWER BODY START ---------------->
  368.  
  369. <div id="lower">
  370.  
  371. <!---------------- LEFT SIDEBAR START ---------------->
  372.  
  373. <div id="left">
  374.  
  375. <!-------- ABOUT BOX START -------->
  376.    
  377.     <div class="boxheader">
  378.         <div class="boxtitle">Layouts</div>
  379.     </div>  
  380.     <div class="sideBox">
  381.     <img src="https://i.imgur.com/qhbmwiM.png">
  382.         <div class="aboutMeBox">
  383.         <h1>Gingers Layouts</h1>
  384.            talk about how if they've gotten this far they better have read the rules and they shouldnt jock shit and stuff.
  385.         </div>
  386.     </div>
  387.    
  388. <!-------- ABOUT END -------->    
  389.  
  390.  
  391. <!-------- ABOUT BOX START -------->
  392.    
  393.     <div class="boxheader">
  394.         <div class="boxtitle">Filters</div>
  395.     </div>  
  396.     <div class="sideBox">
  397.    <ul class="filter">
  398.       <li class="filter" data-type="all">All</li>
  399.       <li class="filter" class="filter" data-type="one">One Column</li>
  400.       <li class="filter" data-type="two">Two column</li>
  401.       <li class="filter" data-type="themed">Themed</li>
  402.       <li class="filter" data-type="site">Site or RPG</li>
  403.       <li class="filter" data-type="blogs">Blogs</li>
  404.       <li class="filter" data-type="snippets">Snippets</li>
  405.       <li class="filter" data-type="headliners">Headliners</li>
  406.       <li class="filter" data-type="christmas">Christmas</li>
  407.       <li class="filter" data-type="halloween">halloween</li>
  408.     </ul>
  409.     </div>
  410.    
  411. <!-------- ABOUT END -------->    
  412.  
  413. </div>
  414.  
  415. <!---------------- LEFT SIDENBAR END ---------------->
  416.  
  417. <!---------------- POSTS START ---------------->
  418.  
  419. <div id="postblock">
  420.  
  421.  
  422.     <div class="boxes">
  423.    
  424.     <!--start of box-->
  425.       <div class="box two filter">
  426.         <h1>Layout name</h1>
  427.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  428.         <h2>two column</h2>
  429.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  430.        
  431.       </div>
  432.       <!--end of box-->
  433.      
  434.        <!--start of box-->
  435.       <div class="box one filter">
  436.         <h1>Layout name</h1>
  437.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  438.         <h2>one column</h2>
  439.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  440.        
  441.       </div>
  442.       <!--end of box-->
  443.      
  444.      
  445.        <!--start of box-->
  446.       <div class="box themed filter">
  447.         <h1>Layout name</h1>
  448.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  449.         <h2>themed</h2>
  450.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  451.        
  452.       </div>
  453.       <!--end of box-->
  454.      
  455.      
  456.        <!--start of box-->
  457.       <div class="box site filter">
  458.         <h1>Layout name</h1>
  459.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  460.         <h2>site/rpg</h2>
  461.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  462.        
  463.       </div>
  464.       <!--end of box-->
  465.      
  466.        <!--start of box-->
  467.       <div class="box blogs filter">
  468.         <h1>Layout name</h1>
  469.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  470.         <h2>blog</h2>
  471.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  472.        
  473.       </div>
  474.       <!--end of box-->
  475.      
  476.        <!--start of box-->
  477.       <div class="box snippets filter">
  478.         <h1>Layout name</h1>
  479.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  480.         <h2>writing snippet</h2>
  481.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  482.        
  483.       </div>
  484.       <!--end of box-->
  485.      
  486.        <!--start of box-->
  487.       <div class="box headliners filter">
  488.         <h1>Layout name</h1>
  489.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  490.         <h2>headliner</h2>
  491.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  492.        
  493.       </div>
  494.       <!--end of box-->
  495.      
  496.        <!--start of box-->
  497.       <div class="box christmas filter">
  498.         <h1>Layout name</h1>
  499.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  500.         <h2>christmas</h2>
  501.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  502.        
  503.       </div>
  504.       <!--end of box-->
  505.      
  506.        <!--start of box-->
  507.       <div class="box halloween filter">
  508.         <h1>Layout name</h1>
  509.         <img src="https://via.placeholder.com/200x100" style="margin-bottom:10px;">
  510.         <h2>halloween</h2>
  511.         <b>preview: </b><a href="LINK">here.</a> || <b>code: </b><a href="LINK">here.</a>
  512.        
  513.       </div>
  514.       <!--end of box-->
  515.      
  516.     </div>
  517.  
  518.  
  519.    
  520. </div>
  521.  
  522.  
  523. </div>
  524.  
  525. <!---------------- PAGINATION END ---------------->
  526.  
  527. </div>
  528.  
  529. <!---------------- FOOTER START ---------------->
  530.  
  531. <div id="footer">
  532.     This tumblr theme was created by Edits by M.
  533. </div>
  534.  
  535. <!---------------- FOOTER END ---------------->
  536.  
  537. <!---------------- LOWER BODY END ---------------->
  538.  
  539. <script>
  540.     $(function(){
  541.  
  542.   var selectedtype="";
  543.  
  544.   $("li").click(function(){
  545.     selectedtype = $(this).attr('data-type');
  546.     if(selectedtype == "all"){
  547.       setTimeout(function(){
  548.         $(".box").fadeIn();
  549.       },500);
  550.     }else{
  551.     $(".boxes").fadeTo(100,0.1);
  552.     $(".box").not("."+selectedtype).fadeOut();
  553.     setTimeout(function(){
  554.       $("."+selectedtype).fadeIn();
  555.       $(".boxes").fadeTo(500,1);
  556.     },500);
  557.     }
  558.   });
  559. });
  560.  
  561. </script>
  562. </body></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!