Advertisement
ninapattz

05. Ängie

Jul 1st, 2019
2,384
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 16.28 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.  
  6.     <!----------------------------------------------------------------------
  7.        Ängie by lewispastel
  8.        Please, do not remove the credits.
  9.    ----------------------------------------------------------------------->
  10.  
  11.         <title>{Title}</title>
  12.         <meta charset="utf-8">
  13.         <meta name="viewport" content="width=device-width, initial-scale=1">
  14.         <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  15.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  16.         <link href="https://fonts.googleapis.com/css?family=Lora&display=swap" rel="stylesheet">
  17.         <link href="https://fonts.googleapis.com/css?family=Dancing+Script&display=swap" rel="stylesheet">
  18.         <link href="https://fonts.googleapis.com/css?family=Catamaran&display=swap" rel="stylesheet">
  19.         <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
  20.         <link rel="shortcurt icon" href="{Favicon}">
  21.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  22.         <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  23.         <script>(function($){$(document).ready(function(){$("a[title]").style_my_tooltips({tip_follows_cursor:true,
  24.         tip_delay_time:90, tip_fade_speed:600,attribute:"title"});});})(jQuery);</script>
  25.         <meta name="color:Background" content="#fbfbfb"/>
  26.         <meta name="color:Posts Background" content="#ffffff"/>
  27.         <meta name="color:Sidebar Background" content="#ffffff"/>
  28.         <meta name="color:Title Tumblr" content="#f8003b"/>
  29.         <meta name="color:Menu Background" content="#f2f2f2"/>
  30.         <meta name="color:Menu Text" content="#000000"/>
  31.         <meta name="color:Menu Text Hover" content="#f8003b"/>
  32.         <meta name="color:Title Post" content="#000000"/>
  33.         <meta name="color:Link" content="#f8003b"/>
  34.         <meta name="color:Link Hover" content="#000000"/>
  35.         <meta name="color:Blockquote" content="#f8003b"/>
  36.         <meta name="color:Text Selection" content="#ffffff"/>
  37.         <meta name="color:Selection" content="#f8003b"/>
  38.         <meta name="color:Scrollbar Background" content="#f2f2f2"/>
  39.         <meta name="color:Scrollbar Front" content="#f8003b"/>
  40.         <meta name="color:Question Background" content="#f2f2f2"/>
  41.         <meta name="color:Question Color" content="#000000"/>
  42.         <meta name="color:Asker Background" content="#f8003b"/>
  43.         <meta name="color:Asker Text" content="#ffffff"/>
  44.         <meta name="image:Sidebar" content="https://66.media.tumblr.com/071129e2dde77d50d082e4270da5991f/tumblr_inline_ptvfk6nwmg1tc6nae_540.png"/>
  45.         <meta name="text:Link One" content="/"/>
  46.         <meta name="text:Link One Title" content="Index"/>
  47.         <meta name="text:Link Two" content="/ask"/>
  48.         <meta name="text:Link Two Title" content="Contact"/>
  49.         <meta name="text:Link Three" content="/"/>
  50.         <meta name="text:Link Three Title" content="Navigation"/>
  51.         <meta name="text:Link Four" content="/"/>
  52.         <meta name="text:Link Four Title" content="About Me"/>
  53.         <meta name="text:Link Five" content="/archive"/>
  54.         <meta name="text:Link Five Title" content="History"/>
  55.  
  56.  
  57.         <style type="text/css">
  58.                                                    
  59.             body{
  60.                 background: {color:Background};
  61.                 font-family: 'Montserrat', sans-serif;
  62.                 font-size: 12px;
  63.                 text-align: justify;
  64.             }
  65.  
  66.             #content{
  67.                 width: 800px;
  68.                 margin-left: 40%;
  69.                 background: transparent;
  70.                 margin-top: 50px;
  71.             }
  72.  
  73.             #posts{
  74.                 width: 540px;
  75.             }
  76.  
  77.             .posts{
  78.                 width: 540px;
  79.                 padding: 20px;
  80.                 background: {color:Posts Background};
  81.                 margin-top: 15px;
  82.             }
  83.  
  84.             #sidebar{
  85.                 width: 220px;
  86.                 margin-left: -320px;
  87.                 background: {color:Sidebar Background};
  88.                 padding: 10px;
  89.                 position: fixed;
  90.             }
  91.  
  92.             .imgside{
  93.                 width: 200px;
  94.                 padding: 10px;
  95.             }
  96.  
  97.             .title{
  98.                 font-size: 16pt;
  99.                 text-align: center;
  100.                 font-family: 'Dancing Script', cursive;
  101.                 color: {color:Title Tumblr};
  102.             }
  103.  
  104.             .description{
  105.                 font-size:8pt;
  106.                 text-align:justify;
  107.                 padding:10px;
  108.                 margin-top:-20px;
  109.                 width: 200px;
  110.                 margin-bottom: 5px;
  111.             }  
  112.                                                
  113.             .menu{
  114.                 padding: 10px;
  115.                 font-size: 10px;
  116.                 margin-bottom:-10px;
  117.             }
  118.  
  119.             .menu ul{
  120.                 list-style-type: none;
  121.                 margin: 0;
  122.                 padding: 0;
  123.                 width: 210px;
  124.             }
  125.  
  126.             .menu li{
  127.                 width: 20px;
  128.                 height: 20px;
  129.                 background:{color:Menu Background};
  130.                 display: inline;
  131.                 margin-right: 3px;
  132.                 padding: 10px
  133.             }
  134.  
  135.             .menu a{
  136.                 color: {color:Menu Text};
  137.                 text-decoration:none;
  138.                 text-align: center;
  139.                 -webkit-transition: all 1s ease;
  140.                 -moz-transition:all 1s ease;
  141.                 -o-transition: all 1s ease;
  142.                 transition: all 1s ease;
  143.                 }
  144.  
  145.             .menu a:hover{
  146.                 color: {color:Menu Text Hover};
  147.                 -webkit-transition: all 1s ease;
  148.                 -moz-transition:all 1s ease;
  149.                 -o-transition: all 1s ease;
  150.                 transition: all 1s ease;
  151.                 opacity: 1.0;
  152.             }
  153.  
  154.             .menu i{
  155.                 font-size: 12px;
  156.             }
  157.  
  158.             h2{
  159.                 font-family: 'Dancing Script', cursive;
  160.                 color:{color:Title Post};
  161.             }
  162.  
  163.             a{
  164.                 text-decoration:none;
  165.                 color:{color:Link};
  166.             }
  167.  
  168.             a:hover{
  169.                 -webkit-transition: all 1s ease;
  170.                 -moz-transition:all 1s ease;
  171.                 -o-transition: all 1s ease;
  172.                 transition: all 1s ease;
  173.                 color:{color:Link Hover};
  174.             }
  175.  
  176.             ol{
  177.                 list-style-type: upper-roman;
  178.             }
  179.  
  180.             ul{
  181.                 list-style-type: square;
  182.             }
  183.  
  184.             blockquote{
  185.                 border-left: 2px {color:Blockquote} solid;
  186.                 padding: 10px;
  187.                 font-size: 12px;
  188.             }
  189.  
  190.             ::-moz-selection {
  191.                 color: {color:Text Selection};
  192.                 background: {color:Selection};
  193.             }
  194.  
  195.             ::selection {
  196.                 color: {color:Text Selection};
  197.                 background: {color:Selection};
  198.             }
  199.  
  200.             ::-webkit-scrollbar-track {
  201.                 background-color: {color:Scrollbar Background};
  202.             }
  203.  
  204.             ::-webkit-scrollbar {
  205.                 width: 6px;
  206.                 background: {color:Scrollbar Background};
  207.             }
  208.  
  209.             ::-webkit-scrollbar-thumb {
  210.                 background: {color:Scrollbar Front};
  211.             }
  212.  
  213.             .button{
  214.                 background: {color:Menu Background};
  215.                 width: 26px;
  216.                 height: 26px;
  217.                 text-align: center;
  218.                 border-style: none;
  219.             }
  220.                                                    
  221.             .button:hover{
  222.                 -webkit-transition: all 1s ease;
  223.                 -moz-transition:all 1s ease;
  224.                 -o-transition: all 1s ease;
  225.                 transition: all 1s ease;
  226.                 color:{color:Link};
  227.             }
  228.  
  229.             .barra{
  230.                 height: 25px;
  231.                 width: 145px;
  232.                 margin-left:12px;
  233.                 border: {color:Menu Background} solid 1px;
  234.             }
  235.  
  236.             .quote{
  237.                 font-family: 'Catamaran', sans-serif;
  238.                 font-size: 30px;
  239.             }
  240.  
  241.             .source{
  242.                 text-align: right;
  243.             }
  244.  
  245.             .question{
  246.                 background-color: {color:Question Background};
  247.                 padding: 10px;
  248.                 color: {color:Question Color};
  249.             }
  250.  
  251.             .asker-avatar{
  252.                 border:solid 3px {color:Asker Background};
  253.             }
  254.  
  255.             .asker{
  256.                 padding: 5px;
  257.                 color:{color:Asker Text};
  258.                 background-color: {color:Asker Background};
  259.                 margin-top: -40px;
  260.                 margin-left:0px;
  261.                 text-align: left;
  262.                 width: auto;
  263.             }
  264.  
  265.             .chat .lines{
  266.                 background:{color:Menu Background};
  267.                 padding: 5px;
  268.                 margin-top: 5px;
  269.                 width: 500px;
  270.             }
  271.  
  272.             .page{
  273.                 width: 30px;
  274.                 height: 20px;
  275.                 background-color: {color:Menu Background};
  276.                 color:{color:Menu Text};
  277.                 padding: 5px;
  278.             }
  279.  
  280.             .page:hover{
  281.                 color: {color:Menu Text Hover};
  282.                 -webkit-transition: all 1s ease;
  283.                 -moz-transition:all 1s ease;
  284.                 -o-transition: all 1s ease;
  285.                 transition: all 1s ease;
  286.                 opacity: 1.0;
  287.             }
  288.                                    
  289.             .perma{
  290.                 padding: 8px;
  291.                 background-color: {color:Menu Background};
  292.                 font-size: 8pt;
  293.             }
  294.  
  295.             .perma a{
  296.                 color: {color:Menu Text};
  297.             }
  298.  
  299.             .perma a:hover{
  300.                 color: {color:Menu Text Hover};
  301.                 -webkit-transition: all 1s ease;
  302.                 -moz-transition:all 1s ease;
  303.                 -o-transition: all 1s ease;
  304.                 transition: all 1s ease;
  305.                 opacity: 1.0;
  306.             }
  307.  
  308.             .like{
  309.                 margin-top: -19px;
  310.                 margin-left: 460px;
  311.                 padding: 5px;
  312.             }
  313.  
  314.             .reblog{
  315.                 margin-top: -26px;
  316.                 margin-left: 430px;
  317.                 padding: 5px;
  318.             }
  319.  
  320.             .tags{
  321.                 font-size: 8pt;
  322.                 display: inline;
  323.             }
  324.  
  325.             .tags a{
  326.                 color:{color:Menu Text};
  327.             }
  328.  
  329.             .tags a:hover{
  330.                 color: {color:Menu Text Hover};
  331.                 -webkit-transition: all 1s ease;
  332.                 -moz-transition:all 1s ease;
  333.                 -o-transition: all 1s ease;
  334.                 transition: all 1s ease;
  335.                 opacity: 1.0;
  336.             }
  337.  
  338.             #perma{
  339.                 width:540px;
  340.                 background: {color:Posts Background};
  341.                 padding: 20px;
  342.                 margin-top:15px;
  343.             }
  344.  
  345.             ol.notes{
  346.                 list-style:none;
  347.                 margin-left: -42px;
  348.                 margin-top: -20px;
  349.             }
  350.                        
  351.             ol.notes img{
  352.                 margin-right: 5px;
  353.             }
  354.  
  355.             ol.notes li{
  356.                 margin:3px;
  357.                 width: 500px;
  358.                 padding:3px;
  359.                 background:{color:Menu Background};
  360.                 color:{color:Menu Text};
  361.                 font-size:9pt;
  362.             }
  363.  
  364.             ol.notes a{
  365.                 color:{color:Link};
  366.             }
  367.  
  368.             ol.notes a:hover{
  369.                 color: {color:Link Hover};
  370.                 -webkit-transition: all 1s ease;
  371.                 -moz-transition:all 1s ease;
  372.                 -o-transition: all 1s ease;
  373.                 transition: all 1s ease;
  374.                 opacity: 1.0;
  375.             }
  376.  
  377.             .credits{
  378.                 right: 25px;
  379.                 bottom: 25px;
  380.                 font-weight: bold;
  381.                 position: fixed;
  382.                 text-align: center;
  383.             }
  384.  
  385.             .credits a{
  386.                 color:{color:Link};
  387.             }
  388.  
  389.             .credits a:hover{
  390.                 color: {color:Link Hover};
  391.                 -webkit-transition: all 1s ease;
  392.                 -moz-transition:all 1s ease;
  393.                 -o-transition: all 1s ease;
  394.                 transition: all 1s ease;
  395.                 opacity: 1.0;
  396.             }
  397.  
  398.             #s-m-t-tooltip{
  399.                 background: {color:Menu Background};
  400.                 color:{color:Menu Text};
  401.                 max-width: 300px;
  402.                 padding: 5px;
  403.                 font-size: 9pt;
  404.                 margin:20px 0px 20px 0px;
  405.             }
  406.            
  407.             .more{
  408.                 position: relative;
  409.                 margin:20px;
  410.                 margin-left: auto;
  411.                 margin-right: auto;
  412.                 display: block;
  413.             }
  414.            
  415.             .more a:link{
  416.                 -webkit-transition: all 1s ease;
  417.                 -moz-transition:all 1s ease;
  418.                 -o-transition: all 1s ease;
  419.                 transition: all 1s ease;
  420.                 padding:5px;
  421.                 border-bottom: 1px solid transparent;
  422.                 background: transparent;
  423.                 color: {color:Menu Text};
  424.             }
  425.            
  426.             .more a:hover{
  427.                 color: {color:Menu Text Hover};
  428.                 border-bottom: solid 1px {color:Menu Text Hover};
  429.                 -webkit-transition: all 1s ease;
  430.                 -moz-transition:all 1s ease;
  431.                 -o-transition: all 1s ease;
  432.                 transition: all 1s ease;
  433.             }
  434.            
  435.         </style>
  436.  
  437.     </head>
  438.                                            
  439.     <body>
  440.  
  441.         <div class="credits">
  442.             <center><a href="https://lewispastel.tumblr.com/" title="lewispastel">
  443.                 <i class="fa fa-heart" aria-hidden="true"></i>
  444.             </a></center>
  445.         </div>
  446.  
  447.         <div id="content">
  448.  
  449.             <div id="sidebar">
  450.  
  451.                 <img src="{image:Sidebar}" class="imgside">
  452.  
  453.                 <div class="title">
  454.                     {Title}
  455.                 </div>
  456.  
  457.                 <br>
  458.  
  459.                 <div class="description">
  460.                     {Description}
  461.                 </div>
  462.  
  463.                 <div class="menu">
  464.                     <ul>
  465.                         <li><a href="{text:Link One}" title="{text:Link One Title}"><i class="fa fa-home"></i></a></li>
  466.                         <li><a href="{text:Link Two}" title="{text:Link Two Title}"><i class="fa fa-envelope"></i></a></li>
  467.                         <li><a href="{text:Link Three}" title="{text:Link Three Title}"><i class="fa fa-bars"></i></a></li>
  468.                         <li><a href="{text:Link Four}" title="{text:Link Four Title}"><i class="fa fa-cog"></i></a></li>
  469.                         <li><a href="{text:Link Five}" title="{text:Link Five Title}"><i class="fa fa-archive"></i></a></li>
  470.                     </ul><br><br>
  471.                 </div>
  472.                
  473.                 <form action="/search" method="get">
  474.                     <input type="text" name="q" value="{SearchQuery}" class="barra"/>
  475.                     <button type="submit" class="button"><i class="fa fa-search"></i></button>
  476.                 </form>
  477.  
  478.                 <br><center>
  479.  
  480.                 {block:Pagination}
  481.                     {block:PreviousPage}
  482.                         <a href="{PreviousPage}" class="page"><i class="fa fa-chevron-left"></i></a>
  483.                     {/block:PreviousPage}
  484.                     {block:NextPage}
  485.                         <a href="{NextPage}" class="page"><i class="fa fa-chevron-right"></i></a>
  486.                     {/block:NextPage}
  487.                 {/block:Pagination}
  488.  
  489.                 </center>
  490.  
  491.             </div>
  492.  
  493.             <div id="posts">
  494.                
  495.                 {block:Posts}
  496.                    
  497.                     <div class="posts">
  498.  
  499.                         {block:Text}
  500.                             {block:Title}
  501.                             <center>
  502.                             <h2><a href="{Permalink}">{Title}</a></h2>
  503.                             </center>
  504.                             {/block:Title}
  505.                             {Body} 
  506.                             {block:More}<center>
  507.                             <div class="more">
  508.                             <a href="{Permalink}" class="more-btn">
  509.                             Read More</a>
  510.                             </div></center>
  511.                             {/block:More}
  512.                         {/block:Text}
  513.  
  514.                         {block:Photo}
  515.                             <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  516.                             {block:Caption}
  517.                             {Caption}
  518.                             {block:More}<center>
  519.                             <div class="more">
  520.                             <a href="{Permalink}" class="more-btn">
  521.                             Read More</a>
  522.                             </div></center>
  523.                             {/block:More}
  524.                             {/block:Caption}
  525.                         {/block:Photo}
  526.  
  527.                         {block:Panorama}
  528.                             {LinkOpenTag}
  529.                             <img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>
  530.                             {LinkCloseTag}
  531.                             {block:Caption}
  532.                             {Caption}
  533.                             {block:More}<center>
  534.                             <div class="more">
  535.                             <a href="{Permalink}" class="more-btn">
  536.                             Read More</a>
  537.                             </div></center>
  538.                             {/block:More}
  539.                             {/block:Caption}
  540.                         {/block:Panorama}
  541.  
  542.                         {block:Photoset}
  543.                             {Photoset-500}
  544.                             {block:Caption}
  545.                             {Caption}
  546.                             {block:More}<center>
  547.                             <div class="more">
  548.                             <a href="{Permalink}" class="more-btn">
  549.                             Read More</a>
  550.                             </div></center>
  551.                             {/block:More}
  552.                             {/block:Caption}
  553.                         {/block:Photoset}
  554.  
  555.                         {block:Quote}
  556.                             <div class="quote">&ldquo;{Quote}&rdquo;</div>
  557.                             {block:Source}
  558.                             <div class="source">&ndash; {Source}</div><br>
  559.                             {/block:Source}
  560.                         {/block:Quote}
  561.  
  562.                         {block:Link}
  563.                             <center><h2><a href="{URL}" class="link" {Target}>{Name}</a></h2></center>
  564.                             {block:Description}
  565.                             {Description}
  566.                             {block:More}<center>
  567.                             <div class="more">
  568.                             <a href="{Permalink}" class="more-btn">
  569.                             Read More</a>
  570.                             </div></center>
  571.                             {/block:More}
  572.                             {/block:Description}
  573.                         {/block:Link}
  574.  
  575.                         {block:Chat}
  576.                             {block:Lines}
  577.                             <div class="chat">
  578.                             <div class="lines">{block:Label}
  579.                             <span><b>{Label}</b></span>
  580.                             {/block:Label}
  581.                             {Line}</div></div>
  582.                             {/block:Lines}
  583.                             <div style="margin-bottom: 15px"></div>
  584.                         {/block:Chat}
  585.  
  586.                         {block:Video}
  587.                             {Video-500}{block:Caption}
  588.                             {Caption}
  589.                             {/block:Caption}
  590.                         {/block:Video}
  591.  
  592.                         {block:Audio}
  593.                             {AudioEmbed}{block:Caption}
  594.                             {Caption}
  595.                             {/block:Caption}
  596.                         {/block:Audio}
  597.  
  598.                         {block:Answer}
  599.                             <div class="question">
  600.                             <img class="asker-avatar" src="{AskerPortraitURL-48}" alt="">
  601.                             <div style="margin-left: 54px;"><div class="asker">{Asker} asked:</div></div><br>
  602.                             {Question}</div>
  603.                             {block:Answerer}
  604.                             {Answer}
  605.                             {/block:Answerer}
  606.                             {Replies}
  607.                         {/block:Answer}
  608.                        
  609.                         <div class="perma">
  610.                             &nbsp;&nbsp;
  611.                             {block:Date}{TimeAgo}{/block:Date}
  612.                             &nbsp;&nbsp;&nbsp;&nbsp;
  613.                             {block:NoteCount}<a href="{Permalink}" title="Permalink">{NoteCount} Notes</a>{/block:NoteCount}
  614.                             <div class="like">
  615.                             {LikeButton size="13"}</div>
  616.                             <div class="reblog">
  617.                             {ReblogButton size="13"}</div>
  618.                         </div>
  619.                    
  620.                        
  621.                         {block:HasTags}{block:Tags}<div class="tags">#<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;</div>{/block:Tags}{/block:HasTags}
  622.  
  623.                     </div>
  624.                                
  625.                     {block:PermalinkPage}
  626.                         <div id="perma">
  627.                         {block:PostNotes}{PostNotes-16}&nbsp;&nbsp;{PostNotes}{/block:PostNotes}
  628.                         </div> 
  629.                     {/block:PermalinkPage}
  630.                    
  631.  
  632.                 {/block:Posts}
  633.            
  634.             </div>
  635.  
  636.         </div><br><br>
  637.                                            
  638.     </body>
  639.  
  640. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement