API tools faq
paste
Advertisement
pneumathemes

about page #3: temperance

pneumathemes
Aug 30th, 2023
1,642
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.31 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <!--change the title of the page here! this will appear as the title at your current tab.-->
  4.     <title>temperance</title>
  5.  
  6.     <link rel="shortcut icon" href="{Favicon}" />
  7.     <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  8.     <meta charset="utf-8" />
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  10.  
  11.     <!--
  12.  
  13.    Page #03: Temperance
  14.    coded by pneuma-themes
  15.    
  16.    1. Don't remove the credit.
  17.    2. Don't move the credit. Just leave it there.
  18.    3. Don't use as a base code.
  19.    4. Please enjoy! If you find any bugs, please contact me! c:
  20.    
  21.  -->
  22.  
  23.     <link rel="preconnect" href="https://fonts.bunny.net" />
  24.     <link
  25.         href="https://fonts.bunny.net/css?family=rubik:400,400i,700,700i"
  26.         rel="stylesheet"
  27.     />
  28.     <link
  29.         href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
  30.         rel="stylesheet"
  31.     />
  32.     <link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css" />
  33.  
  34.     <head>
  35.         <style type="text/css">
  36.             iframe.tmblr-iframe {
  37.                 display: none;
  38.             }
  39.  
  40.             #tumblr-controls {
  41.                 position: fixed;
  42.             }
  43.  
  44.             :root {
  45.                 --Accent: #f4caca;
  46.                 --Body: #191919;
  47.                 --FontSize: 13px;
  48.                 --Background: #fbfbfb;
  49.                 --ContainerBackground: #fff;
  50.                 --Border: #eee;
  51.             }
  52.  
  53.             body {
  54.                 margin: 0;
  55.                 padding: 0;
  56.                 background: var(--Background);
  57.                 font-family: 'Rubik';
  58.                 font-size: var(--FontSize);
  59.                 color: var(--Color);
  60.             }
  61.  
  62.             a {
  63.                 text-decoration: none;
  64.                 color: var(--Color);
  65.             }
  66.  
  67.             #main-container {
  68.                 width: 80%;
  69.                 height: 700px;
  70.                 margin: 0 auto !important;
  71.                 top: 60px;
  72.                 position: relative;
  73.                 border: 1px solid var(--Border);
  74.                 display: flex;
  75.                 background: var(--ContainerBackground);
  76.             }
  77.  
  78.             #sidebar {
  79.                 height: 100%;
  80.                 width: 30%;
  81.                 border-right: 1px solid var(--Border);
  82.                 display: flex;
  83.                 justify-content: center;
  84.                 background: var(--ContainerBackground);
  85.             }
  86.  
  87.             #sidebar-content {
  88.                 width: 100%;
  89.             }
  90.  
  91.             #sidebar-image {
  92.                 width: 100%;
  93.                 height: 300px;
  94.             }
  95.  
  96.             #sidebar-image img {
  97.                 width: 100%;
  98.                 height: 300px;
  99.                 max-width: 100%;
  100.                 max-height: 300px;
  101.             }
  102.  
  103.             #desc {
  104.                 padding: 20px;
  105.                 display: flex;
  106.                 align-items: center;
  107.                 justify-content: center;
  108.                 text-align: justify;
  109.                 border-bottom: 1px solid var(--Border);
  110.             }
  111.  
  112.             #desc a {
  113.                 box-shadow: 0 -2px inset var(--Accent);
  114.             }
  115.  
  116.             #desc i {
  117.                 color: var(--Accent);
  118.                 font-size: 20px;
  119.                 margin-right: 20px;
  120.             }
  121.  
  122.             #navlinks {
  123.                 display: flex;
  124.                 align-items: center;
  125.                 margin-top: 20px;
  126.                 border-bottom: 1px solid var(--Border);
  127.                 padding-bottom: 20px;
  128.                 justify-content: center;
  129.             }
  130.  
  131.             .navlinks {
  132.                 display: flex;
  133.                 align-items: center;
  134.                 justify-content: space-between;
  135.                 border-right: 1px solid var(--Border);
  136.                 padding-right: 8px;
  137.                 padding-left: 8px;
  138.             }
  139.  
  140.             .navlinks:last-of-type {
  141.                 border-right: none !important;
  142.             }
  143.  
  144.             .navlinks i,
  145.             .other-links i {
  146.                 margin-right: 10px;
  147.                 font-size: 16px;
  148.             }
  149.  
  150.             .navlinks a,
  151.             .other-links a,
  152.             .custom-links a {
  153.                 font-weight: 700;
  154.                 text-transform: uppercase;
  155.                 box-shadow: 0 -10px inset var(--Accent);
  156.             }
  157.  
  158.             #other-links,
  159.             #custom-links {
  160.                 display: flex;
  161.                 align-items: center;
  162.                 justify-content: center;
  163.                 flex-wrap: wrap;
  164.                 margin-top: 20px;
  165.                 border-bottom: 1px solid var(--Border);
  166.                 padding-bottom: 20px;
  167.             }
  168.  
  169.             #custom-links {
  170.                 border-bottom: none !important;
  171.             }
  172.  
  173.             .custom-links {
  174.                 display: flex;
  175.                 flex-wrap: wrap;
  176.                 align-items: center;
  177.                 justify-content: center;
  178.             }
  179.  
  180.             .other-links {
  181.                 display: flex;
  182.                 align-items: center;
  183.                 justify-content: space-between;
  184.                 padding: 8px;
  185.                 margin-bottom: 2px;
  186.             }
  187.  
  188.             .custom-links a {
  189.                 margin-right: 8px;
  190.                 margin-bottom: 8px;
  191.                 min-width: 50px;
  192.             }
  193.  
  194.             #about {
  195.                 width: 70%;
  196.                 background: var(--ContainerBackground);
  197.                 height: 100%;
  198.             }
  199.  
  200.             #about-info {
  201.                 width: 100%;
  202.                 border-bottom: 1px solid var(--Border);
  203.             }
  204.  
  205.             #about-info-text {
  206.                 display: flex;
  207.                 align-items: center;
  208.                 justify-content: space-between;
  209.                 padding: 20px;
  210.                 flex-wrap: wrap;
  211.                 padding-bottom: 0 !important;
  212.             }
  213.  
  214.             .about-info-rows {
  215.                 display: flex;
  216.                 align-items: center;
  217.                 width: 49%;
  218.                 justify-content: space-between;
  219.                 background: #fff;
  220.                 border-right: 1px solid var(--Border);
  221.                 margin-bottom: 20px;
  222.             }
  223.  
  224.             .about-info-rows:nth-of-type(odd) {
  225.                 padding-right: 20px;
  226.                 width: 45%;
  227.             }
  228.  
  229.             .about-info-rows:nth-of-type(even) {
  230.                 border-right: none !important;
  231.             }
  232.  
  233.             .about-info-label {
  234.                 background: var(--Accent);
  235.                 text-transform: uppercase;
  236.                 padding: 6px;
  237.                 font-weight: 700;
  238.                 border-radius: 2px;
  239.             }
  240.  
  241.             #about-text {
  242.                 padding: 20px;
  243.                 overflow-y: scroll;
  244.                 overflow-x: hidden;
  245.                 max-height: calc(100% - 180px);
  246.             }
  247.  
  248.             #about-text::-webkit-scrollbar {
  249.                 width: 2px;
  250.             }
  251.  
  252.             #about-text::-webkit-scrollbar-thumb:vertical {
  253.                 background: var(--Accent);
  254.             }
  255.  
  256.             #about-text a {
  257.                 box-shadow: 0 -2px inset var(--Accent);
  258.             }
  259.  
  260.             #about-text blockquote {
  261.                 border-left: 1px solid var(--Border);
  262.                 padding-left: 20px;
  263.             }
  264.  
  265.             #about-text li {
  266.                 margin-bottom: 5px;
  267.             }
  268.  
  269.             #about-text li:last-of-type {
  270.                 margin-bottom: 0;
  271.             }
  272.  
  273.             #credit {
  274.                 position: fixed;
  275.                 bottom: 20px;
  276.                 right: 20px;
  277.                 background: #fff;
  278.                 border: 1px solid var(--Border);
  279.                 border-radius: 2px;
  280.                 line-height: 100%;
  281.             }
  282.  
  283.             #credit i {
  284.                 font-size: 20px;
  285.                 padding: 8px;
  286.             }
  287.         </style>
  288.     </head>
  289.     <body>
  290.         <div id="main-container">
  291.             <div id="sidebar">
  292.                 <div id="sidebar-content">
  293.                     <div id="sidebar-image">
  294.                         <!--change your sidebar image here!-->
  295.                         <img
  296.                             src="https://static.tumblr.com/r7bx1qs/8WUs03e0h/tumblr_471547ce284bbed073e3b3c6ef51b3fd_13e28e65_20481.png"
  297.                         />
  298.                     </div>
  299.                     <div id="navlinks">
  300.                         <div class="navlinks">
  301.                             <i class="bx bx-home-alt"></i><a href="/">home</a>
  302.                         </div>
  303.                         <div class="navlinks">
  304.                             <i class="bx bx-envelope-open"></i><a href="/ask">ask</a>
  305.                         </div>
  306.  
  307.                         <div class="navlinks">
  308.                             <i class="bx bx-archive"></i><a href="/archive">archive</a>
  309.                         </div>
  310.                     </div>
  311.                     <div id="desc">
  312.                         <i class="bx bxs-quote-alt-left"></i>
  313.                         <div id="desc-text">
  314.                             <!--this is the description box-->
  315.                             the hunger and the longing, the wonder and the will.
  316.                             <br />
  317.                             your world is enchanted when your mind is still.
  318.                             <br />
  319.                             <br />
  320.                             sidebar image:
  321.                             <b
  322.                                 ><a href="https://xathrid.tumblr.com/post/718199740607627264"
  323.                                     >@xathrid</a
  324.                                 ></b
  325.                             >
  326.                         </div>
  327.                     </div>
  328.                     <!--end desc-->
  329.  
  330.                     <div id="other-links">
  331.                         <!--to add more links, copy from here-->
  332.                         <div class="other-links">
  333.                             <!--to change the icon, change the name of icon *after* the dash. in this example: twitter-->
  334.                             <i class="bx bxl-twitter"></i>
  335.                             <a href="/">twitter</a>
  336.                         </div>
  337.                         <!--to here-->
  338.  
  339.                         <div class="other-links">
  340.                             <i class="bx bxl-spotify"></i><a href="/">spotify</a>
  341.                         </div>
  342.                         <div class="other-links">
  343.                             <i class="bx bxl-twitch"></i><a href="/">twitch</a>
  344.                         </div>
  345.                         <div class="other-links">
  346.                             <i class="bx bxl-instagram"></i><a href="/">instagram</a>
  347.                         </div>
  348.                         <div class="other-links">
  349.                             <i class="bx bxl-discord-alt"></i><a href="/">discord</a>
  350.                         </div>
  351.                         <div class="other-links">
  352.                             <i class="bx bxl-pinterest"></i><a href="/">pinterest</a>
  353.                         </div>
  354.                         <!--before this line-->
  355.                     </div>
  356.                     <!--end other links-->
  357.  
  358.                     <!--this is the custom links. you can add as much or not add anything. if you want to delete this section altogether, then just comment the entire section from here-->
  359.                     <div id="custom-links">
  360.                         <div class="custom-links">
  361.                             <a href="">link one</a>
  362.                             <a href="">link two</a>
  363.                             <a href="">link three</a>
  364.                             <a href="">link four</a>
  365.                             <a href="">link five</a>
  366.                             <a href="">link six</a>
  367.                         </div>
  368.                     </div>
  369.                     <!--end custom-links-->
  370.                     <!--to here-->
  371.                 </div>
  372.             </div>
  373.             <!--end sidebar-->
  374.  
  375.             <div id="about">
  376.                 <div id="about-info">
  377.                     <div id="about-info-text">
  378.                         <div class="about-info-rows">
  379.                             <div class="about-info-label">
  380.                                 name
  381.                                 <!--change the label here-->
  382.                             </div>
  383.                             rizu
  384.                         </div>
  385.                         <div class="about-info-rows">
  386.                             <div class="about-info-label">timezone</div>
  387.                             gmt +7
  388.                         </div>
  389.                         <div class="about-info-rows">
  390.                             <div class="about-info-label">pronouns</div>
  391.                             she/her/hers
  392.                         </div>
  393.                         <div class="about-info-rows">
  394.                             <div class="about-info-label">age</div>
  395.                             20+
  396.                         </div>
  397.                     </div>
  398.                 </div>
  399.                 <!--end about info header-->
  400.                 <div id="about-text">
  401.                     <!--this is the about body! you can write whatever you want here.-->
  402.                 </div>
  403.             </div>
  404.         </div>
  405.  
  406.         <!--please don't touch this!-->
  407.         <div id="credit">
  408.             <a
  409.                 href="//pneuma-themes.tumblr.com"
  410.                 data-balloon-pos="left"
  411.                 aria-label="temperance by pneuma-themes"
  412.                 ><i class="bx bx-code"></i
  413.             ></a>
  414.         </div>
  415.     </body>
  416. </html>
  417.  
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!