API tools faq
paste
Advertisement
mebuckner

Custom Order - Dark Halo - Tumblr

mebuckner
Nov 9th, 2020
1,409
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.03 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.         {block:Description}
  7.             <meta name="description" content="{MetaDescription}" />
  8.         {/block:Description}
  9.        
  10.  
  11.    
  12. <style type="text/css">
  13.  
  14. @import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
  15.  
  16. /*---------------- GENERAL ----------------*/
  17.  
  18.     body {
  19.         margin: 0;
  20.         background-image:url('https://i.imgur.com/VTaiuzR.jpg');
  21.         background-attachment: fixed;
  22.         background-size:cover;
  23.     }
  24.  
  25.      sub, sup, small {
  26.         font-size: 14px;
  27.     }
  28.    
  29.  
  30. /*---------------- CONTAINERS ----------------*/
  31.  
  32.     #upper {
  33.         width: 1051px;
  34.         margin: auto;
  35.     }
  36.    
  37.     #lower {
  38.         width: 1051px;
  39.         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 */
  40.         padding-top: 30px;
  41.         margin: auto;
  42.         margin-bottom: -21px;
  43.         background: #fff;
  44.         margin-top:-4px;
  45.     }
  46.    
  47.     #postblock {
  48.         width: 264px;
  49.         margin: auto;
  50.     }
  51.  
  52. /*---------------- HEADER ----------------*/
  53.  
  54.     #navigation {
  55.     position: fixed;
  56.     margin-top: 0;
  57.     width: 1031px;
  58.     height: 50px;
  59.     background: #c5b0d2;
  60.     text-align: center;
  61.     padding-right: 20px;
  62.     }
  63.    
  64.     a.topNavLinks:link, a.topNavLinks:visited {
  65.         background-color: #c5b0d2;
  66.         color: white;
  67.         padding: 14px 25px;
  68.         text-align: center;
  69.         text-decoration: none;
  70.         display: inline-block;
  71.         font-family: Playfair Display;
  72.         text-transform: uppercase;
  73.         letter-spacing: 3px;
  74.     }
  75.    
  76.     a.topNavLinks:hover, a.topNavLinks:active {
  77.       color: black;
  78.     }
  79.    
  80.     h1{
  81.             margin: 0;
  82.     text-align: center;
  83.     text-transform: uppercase;
  84.     font-weight: 100;
  85.     font-size: 21px;
  86.     background: #7d76b3;
  87.     padding-top: 10px;
  88.     padding-bottom: 10px;
  89.     color: #fff;
  90.     margin-bottom: 10px;
  91.     }
  92.    
  93.     a {
  94.     font-family: 'Playfair Display';
  95.     font-size: 12px;
  96.     color: #52315f;
  97.     text-decoration: none;
  98. }
  99.    
  100.     strong{
  101.         background:#8c78ad;
  102.         padding:5px;
  103.         line-height:32px;
  104.         color:#fff;
  105.     }
  106.  
  107.    
  108.     #banner {
  109.         margin-top: 50px;
  110.         width: 1050px;
  111.         /* the height of your headerdepends on the height of your image--- there is no minimum or maximum */
  112.     }
  113.  
  114. /*---------------- SIDEBARS ----------------*/
  115.  
  116.     #left {
  117.         float: left;  
  118.         margin-left: 25px;
  119.         width: 300px;
  120.     }
  121.    
  122.    
  123. /*---------------- BOXES ----------------*/
  124.  
  125.     .boxheader {
  126.            width: 280px;
  127.     padding: 10px;
  128.     color: white;
  129.     background: black;
  130.     background-image: url(https://i.imgur.com/VTaiuzR.jpg);
  131.     padding-top: 20px;
  132.     padding-bottom: 20px;
  133.     font-family: 'Playfair Display';
  134.     font-size: 27px;
  135.     text-transform: uppercase;
  136.     letter-spacing: 10px;
  137.     text-shadow: 2px 2px #582577ba;
  138.     }
  139.    
  140.     .boxtitle {
  141.         text-align: center;
  142.     }
  143.    
  144.     .box {
  145.            width: 280px;
  146.     padding: 10px;
  147.     margin-bottom: 15px;
  148.     background: white;
  149.     font-family: 'Playfair Display';
  150.     font-size: 12px;
  151.     text-align: justify;
  152.     color: #000;
  153.     }
  154.    
  155.     .aboutMeBox{
  156.             width: 177px;
  157.     height: 97px;
  158.     background: #fff;
  159.     padding: 20px;
  160.     color: #000;
  161.     display: inline-block;
  162.     vertical-align: top;
  163.     font-family: 'Playfair Display';
  164.     font-size: 12px;
  165.     text-align: justify;
  166.     overflow: auto;
  167.     padding: 0;
  168.     }
  169.    
  170.     #project {
  171.     margin-left: -3px;
  172.     background: #8c78ad;
  173.     height: 80px;
  174.     border-radius: 3px;
  175.     width: 281px;
  176.     margin-bottom: 10px;
  177. }
  178.  
  179. .project {
  180.     float: right;
  181.     display: inline-block;
  182.     width: 206px;
  183.     text-align: center;
  184.     font-size: 9px;
  185.     text-transform: uppercase;
  186.     color: #ffffff;
  187.     font-weight: 700;
  188.     letter-spacing: 2px;
  189.     line-height: 18px;
  190.     margin-top: 23px;
  191.     font-family: Playfair Display;
  192.     font-weight: 100;
  193.     vertical-align: top;
  194. }
  195.  
  196. #clientOrder{
  197.     width: 241px;
  198.     background: #8c78ad;
  199.     padding:20px;
  200.     color:#fff;
  201.     margin-top:5px;
  202. }
  203.  
  204. .clientName{
  205.     font-family:Playfair Display;
  206.     font-size:12px;
  207.     font-weight:bold;
  208.     width:100px;
  209.     text-align:left;
  210.     display:inline-block;
  211.     vertical-align:top;
  212. }
  213.  
  214. .clientStatus{
  215.     font-family:Playfair Display;
  216.     font-size:12px;
  217.     width:136px;
  218.     text-align:right;
  219.     display:inline-block;
  220.     vertical-align:top;
  221. }
  222.  
  223.    
  224. /*---------------- AFFILIATES ----------------*/
  225.  
  226.     .aff {
  227.         display: inline-block;
  228.         margin: 3px;
  229.     }
  230.  
  231. /*---------------- ROLEPLAYS ----------------*/
  232.  
  233.     .rpgname {
  234.         margin-top: 10px;
  235.         margin-bottom: 5px;
  236.         font-size: 20px;
  237.         text-transform: uppercase;
  238.     }
  239.  
  240.     .rpgimg {
  241.         float: left;
  242.     }
  243.    
  244.     .rpginfo {
  245.         height: 55px;
  246.         width: 195px;
  247.         padding: 5px 5px 5px 75px;
  248.         background: #dbdbdb;
  249.     }
  250.  
  251. /*---------------- POSTS ----------------*/
  252.  
  253.    .posts {
  254.     width: 500px;
  255.     padding: 30px;
  256.     margin-bottom: 21px;
  257.     background: #c5b0d2;
  258.     font-family: 'Playfair Display';
  259.     font-size: 12px;
  260.     color: #fff;
  261.     text-align: justify;
  262. }
  263.  
  264. /*---------------- PAGINATION ----------------*/
  265.  
  266.     .pagination {
  267.         width: 400px;
  268.         padding-bottom: 20px;
  269.         margin-left: auto;
  270.         margin-right: auto;
  271.         margin-top: 20px;
  272.         text-align: center;
  273.         text-transform: uppercase;
  274.     }
  275.  
  276.     .jump_page {
  277.             padding: 11px;
  278.     background: #c5b0d2;
  279.     width: 15px;
  280.     display: inline-block;
  281.     color: #fff;
  282.     }
  283.    
  284.     .current_page {
  285.         margin-left: 5px;
  286.     }
  287.    
  288.     .current_page, .jump_page:hover {
  289.         padding: 10px;
  290.     }
  291.  
  292. /*---------------- FOOTER ----------------*/
  293.  
  294.     #footer {
  295.     width: 1051px;
  296.     padding-top: 20px;
  297.     margin: auto;
  298.     padding-bottom: 20px;
  299.     margin-bottom: 0;
  300.     color: white;
  301.     background: #c5b0d2;
  302.     text-align: center;
  303.     font-family: 'Playfair Display';
  304.     font-size: 12px;
  305.     text-transform: uppercase;
  306.     }
  307.    
  308.     ::-webkit-scrollbar {display:none;}
  309.  
  310. </style></head><body>
  311.  
  312. <!---------------- HEADER START ---------------->
  313.  
  314. <div id="upper">
  315.  
  316.     <div id="navigation">
  317.        <a href="/" class="topNavLinks">Link Here</a>
  318.        <a href="/" class="topNavLinks">Link Here</a>
  319.        <a href="/" class="topNavLinks">Link Here</a>
  320.        <a href="/" class="topNavLinks">Link Here</a>
  321.        <a href="/" class="topNavLinks">Link Here</a>
  322.        
  323.     </div>
  324.        
  325.     <img src="https://i.imgur.com/ma2cYU2.png" id="banner">  
  326.  
  327. </div>
  328.  
  329. <!---------------- HEADER END ---------------->
  330.  
  331. <!---------------- LOWER BODY START ---------------->
  332.  
  333. <div id="lower">
  334.  
  335. <!---------------- LEFT SIDEBAR START ---------------->
  336.  
  337. <div id="left">
  338.  
  339. <!-------- ABOUT BOX START -------->
  340.    
  341.     <div class="boxheader">
  342.         <div class="boxtitle">About</div>
  343.     </div>  
  344.     <div class="box">
  345.     <img src="https://i.imgur.com/qhbmwiM.png">
  346.         <div class="aboutMeBox">
  347.         <h1>Welcome</h1>
  348.             talk about your site here, what makes it special, what you offer, everything you want people to know. This, of course, scrolls so no worries in that. Just keep going until you feel like you've told them everything about you.
  349.         </div>
  350.     </div>
  351.    
  352. <!-------- ABOUT END -------->    
  353.  
  354.  
  355. <!-------- UPDATES BOX START -------->
  356.    
  357.     <div class="boxheader">
  358.         <div class="boxtitle">Updates</div>
  359.     </div>  
  360.     <div class="box" style="height:150px; overflow:auto;">
  361.         <strong>00.00</strong> talk about the update here <br>
  362.         <strong>00.00</strong> talk about the update here <br>
  363.         <strong>00.00</strong> talk about the update here <br>
  364.         <strong>00.00</strong> talk about the update here <br>
  365.         <strong>00.00</strong> talk about the update here <br>
  366.         <strong>00.00</strong> talk about the update here <br>
  367.         <strong>00.00</strong> talk about the update here <br>
  368.         <strong>00.00</strong> talk about the update here <br>
  369.         <strong>00.00</strong> talk about the update here <br>
  370.         <strong>00.00</strong> talk about the update here <br>
  371.         <strong>00.00</strong> talk about the update here <br>
  372.         <strong>00.00</strong> talk about the update here <br>
  373.         <strong>00.00</strong> talk about the update here <br>
  374.     </div>
  375.    
  376. <!-------- UPDATES END -------->    
  377.  
  378. <!-------- CLIENT ORDERS BOX START -------->
  379.    
  380.     <div class="boxheader">
  381.         <div class="boxtitle">Clinet Orders</div>
  382.     </div>  
  383.     <div class="box">
  384.         <div id="clientOrder">
  385.             <div class="clientName">Client Name</div>
  386.             <div class="clientStatus">In progress</div>
  387.         </div>
  388.         <div id="clientOrder">
  389.             <div class="clientName">Client Name</div>
  390.             <div class="clientStatus">In progress</div>
  391.         </div>
  392.         <div id="clientOrder">
  393.             <div class="clientName">Client Name</div>
  394.             <div class="clientStatus">In progress</div>
  395.         </div>
  396.         <div id="clientOrder">
  397.             <div class="clientName">Client Name</div>
  398.             <div class="clientStatus">In progress</div>
  399.         </div>
  400.         <div id="clientOrder">
  401.             <div class="clientName">Client Name</div>
  402.             <div class="clientStatus">In progress</div>
  403.         </div>
  404.     </div>
  405.    
  406. <!-------- CLIENT ORDERS END -------->    
  407.  
  408. <!-------- CURRENT PROJECTS BOX START -------->
  409.    
  410.     <div class="boxheader">
  411.         <div class="boxtitle">Current Projects</div>
  412.     </div>  
  413.     <div class="box">
  414.         <div id="project">
  415.             <img src="https://via.placeholder.com/70" style="width: 70px; margin-top: 5px; margin-left: 5px;">
  416.             <div class="project">
  417.                 Layout/PSD/EDITS
  418.                 <br><span>
  419.                 Description of what it is</span>
  420.             </div>
  421.         </div>
  422.         <div id="project">
  423.             <img src="https://via.placeholder.com/70" style="width: 70px; margin-top: 5px; margin-left: 5px;">
  424.             <div class="project">
  425.                 Layout/PSD/EDITS
  426.                 <br><span>
  427.                 Description of what it is</span>
  428.             </div>
  429.         </div>
  430.         <div id="project">
  431.             <img src="https://via.placeholder.com/70" style="width: 70px; margin-top: 5px; margin-left: 5px;">
  432.             <div class="project">
  433.                 Layout/PSD/EDITS
  434.                 <br><span>
  435.                 Description of what it is</span>
  436.             </div>
  437.         </div>
  438.         <div id="project">
  439.             <img src="https://via.placeholder.com/70" style="width: 70px; margin-top: 5px; margin-left: 5px;">
  440.             <div class="project">
  441.                 Layout/PSD/EDITS
  442.                 <br><span>
  443.                 Description of what it is</span>
  444.             </div>
  445.         </div>
  446.     </div>
  447.    
  448. <!-------- CURRENT PROJECTS END -------->    
  449.  
  450. </div>
  451.  
  452. <!---------------- LEFT SIDENBAR END ---------------->
  453.  
  454. <!---------------- POSTS START ---------------->
  455.  
  456. <div id="postblock">
  457.  
  458. {block:Posts}
  459.  
  460. <div class="posts">
  461.  
  462. <!-------- GENERAL CONTENT -------->
  463.  
  464. {block:Text}
  465.     {block:Title}{Title}{/block:Title}
  466.     {Body}
  467. {/block:Text}
  468.  
  469. <!-------- SINGLE IMAGE -------->
  470.  
  471. {block:Photo}
  472.     <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  473.     {block:Caption}{Caption}{/block:Caption}
  474. {/block:Photo}
  475.  
  476. <!-------- CHAT -------->
  477.  
  478. {block:Chat}
  479.     {block:Title}{Title}{/block:Title}
  480.     {block:Lines}
  481.         <li class="line {Alt}">
  482.         {block:Label}{Label}{/block:Label}
  483.         {Line}
  484.     {/block:Lines}
  485. {/block:Chat}
  486.  
  487. <!-------- PHOTOSETS -------->  
  488.  
  489. {block:Panorama}
  490.     {LinkOpenTag}
  491.     <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  492.     {LinkCloseTag}
  493.     {block:Caption}{Caption}{block:Caption}
  494. {/block:Panorama}
  495.  
  496. {block:Photoset}
  497.     {Photoset-500}
  498.     {block:Caption}{Caption}{/block:Caption}
  499. {/block:Photoset}
  500.  
  501. <!-------- QUOTE -------->
  502.  
  503. {block:Quote}
  504.     {Quote}
  505.     {block:Source}{Source}{/block:Source}
  506. {/block:Quote}
  507.  
  508. <!-------- LINK -------->
  509.  
  510. {block:Link}
  511.     <a href="{URL}" class="link">{Target}{Name}</a>
  512.     {block:Description}{Description}{/block:Description}
  513. {/block:Link}
  514.  
  515. <!-------- VIDEO -------->
  516.  
  517.                        
  518. {block:Video}
  519.     {Video-500}
  520.     {block:Caption}{Caption}{/block:Caption}
  521. {/block:Video}
  522.  
  523. <!-------- AUDIO -------->
  524.  
  525. {block:Audio}
  526.     {AudioEmbed}
  527.     {block:Caption}{Caption}{/block:Caption}
  528. {/block:Audio}
  529.  
  530. <!-------- ASK -------->
  531.  
  532. {block:Answer}
  533.  
  534.     {Asker}
  535.     {Question}
  536.     {Answer}
  537.  
  538. {/block:Answer}
  539.  
  540. <!---------------- POSTS END ---------------->
  541.  
  542.    
  543. </div>
  544.  
  545. {/block:Posts}
  546.  
  547. <!---------------- PAGINATION START ---------------->
  548.  
  549. {block:Pagination}
  550. <div class="pagination">
  551.  
  552.     {block:PreviousPage}
  553.         <a href="{PreviousPage}">Previous</a>
  554.     {/block:PreviousPage}
  555.       {block:JumpPagination length="10"}
  556.             {block:CurrentPage}
  557.                   <span class="current_page"> {PageNumber} </span>
  558.             {/block:CurrentPage}
  559.  
  560.             {block:JumpPage}
  561.                  <a class="jump_page" href="{URL}"> {PageNumber} </a>
  562.             {/block:JumpPage}
  563.       {/block:JumpPagination}
  564.      
  565.     {block:NextPage}
  566.         <a href="{NextPage}">Next</a>
  567.     {/block:NextPage}
  568.      
  569. </div>
  570. {/block:Pagination}  
  571.  
  572. </div>
  573.  
  574. <!---------------- PAGINATION END ---------------->
  575.  
  576. </div>
  577.  
  578. <!---------------- FOOTER START ---------------->
  579.  
  580. <div id="footer">
  581.     This tumblr theme was created by Edits by M.
  582. </div>
  583.  
  584. <!---------------- FOOTER END ---------------->
  585.  
  586. <!---------------- LOWER BODY END ---------------->
  587.  
  588. </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!