API tools faq
paste
Advertisement
pneumathemes

about page #2: sumire

pneumathemes
Jul 6th, 2022
2,865
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 11.60 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>sumire: an about page.</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 #02: Sumire
  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.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  24.   <script src="https://unpkg.com/@popperjs/core@2"></script>
  25.   <script src="https://unpkg.com/tippy.js@6"></script>
  26.  
  27.   <head>
  28.     <style type="text/css">
  29.       @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap");
  30.  
  31.       iframe.tmblr-iframe {
  32.         display: none;
  33.       }
  34.  
  35.       #tumblr-controls {
  36.         position: fixed;
  37.       }
  38.  
  39.       /*attention! to change the colors of the page, look below!*/
  40.       /*change the colors of the page here!*/
  41.  
  42.       :root {
  43.         --accent: #dad7f2;
  44.         --body: #1f1f1f;
  45.         --background: #fff;
  46.         --border: #eee;
  47.         --navigation-container-background: #232323;
  48.       }
  49.  
  50.       body {
  51.         margin: 0;
  52.         padding: 0;
  53.         font-family: "Lato";
  54.         font-size: 13px;
  55.         color: var(--body);
  56.         background: var(--background)
  57.           url("https://static.tumblr.com/r7bx1qs/6murd3ahd/tumblr_m0leqewfjp1r9g6hvo2_400.png")
  58.           fixed;
  59.         /*change the background image on the url inside the '' sign. if you don't want to use the background, leave the url blank!*/
  60.       }
  61.  
  62.       a {
  63.         text-decoration: none;
  64.         color: var(--body);
  65.         box-shadow: 0 -5px inset var(--accent);
  66.         font-weight: 700;
  67.       }
  68.  
  69.       .tippy-box {
  70.         background: var(--accent);
  71.         color: var(--body);
  72.         font-size: 12px;
  73.       }
  74.  
  75.       #container {
  76.         display: flex;
  77.         align-items: center;
  78.         justify-content: space-between;
  79.         margin: 0 auto;
  80.         position: relative;
  81.         margin-top: 75px;
  82.         width: 70%;
  83.       }
  84.  
  85.       #main-container {
  86.         width: 80%;
  87.         position: relative;
  88.         height: 520px;
  89.         padding: 20px;
  90.         background: var(--background);
  91.         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  92.         backdrop-filter: blur(4px);
  93.         -webkit-backdrop-filter: blur(4px);
  94.         border-radius: 3px;
  95.       }
  96.  
  97.       #header {
  98.         width: 100%;
  99.         position: absolute;
  100.         top: 0;
  101.         border-top-left-radius: 3px;
  102.         border-top-right-radius: 3px;
  103.         left: 0;
  104.         height: 150px;
  105.         /*change the header image here!*/
  106.         background-image: url("https://static.tumblr.com/r7bx1qs/jc4rd55br/tumblr_mqretyucom1rl9td5o1_1280.png");
  107.         background-size: cover;
  108.       }
  109.  
  110.       #icon {
  111.         width: 60px;
  112.         height: 60px;
  113.         z-index: 2;
  114.         padding: 5px;
  115.         margin: 0 auto;
  116.         margin-top: 115px;
  117.         background: var(--background);
  118.         border-radius: 3px;
  119.       }
  120.  
  121.       #icon img {
  122.         border-radius: 3px;
  123.         width: 60px;
  124.         height: 60px;
  125.         max-width: 60px;
  126.         max-height: 60px;
  127.       }
  128.  
  129.       #about-container {
  130.         position: relative;
  131.         margin-top: 180px;
  132.         display: flex;
  133.         justify-content: center;
  134.       }
  135.  
  136.       #sidebar {
  137.         width: 30%;
  138.         display: flex;
  139.         flex-wrap: wrap;
  140.         justify-content: center;
  141.         background: white;
  142.         padding-right: 20px;
  143.       }
  144.  
  145.       /*sidebar content*/
  146.       #description {
  147.         text-align: center;
  148.         padding: 10px;
  149.         text-transform: lowercase;
  150.       }
  151.  
  152.       #quote-sign .lucide {
  153.         text-align: center;
  154.         width: 16px;
  155.         height: 16px;
  156.         padding: 10px;
  157.         background: var(--accent);
  158.       }
  159.  
  160.       #biodata-container {
  161.         text-transform: lowercase;
  162.         display: flex;
  163.         align-items: center;
  164.         justify-content: center;
  165.         flex-wrap: wrap;
  166.         width: calc(100% - 20px);
  167.         padding: 10px;
  168.         margin-top: 20px;
  169.       }
  170.  
  171.       .biodata-row {
  172.         display: flex;
  173.         align-items: center;
  174.         width: 100%;
  175.         padding: 10px;
  176.         justify-content: space-between;
  177.         border-bottom: 1px solid var(--border);
  178.       }
  179.  
  180.       #biodata-container .biodata-row:last-child {
  181.         border-bottom: none !important;
  182.       }
  183.  
  184.       .biodata-label {
  185.         padding: 5px;
  186.         background: var(--accent);
  187.         text-align: center;
  188.         font-weight: 700;
  189.       }
  190.  
  191.       #link-container {
  192.         width: 50px;
  193.         height: 500px;
  194.         padding: 10px;
  195.         margin: 0 auto;
  196.         top: 85px;
  197.         display: flex;
  198.         align-items: center;
  199.         flex-wrap: wrap;
  200.         justify-content: center;
  201.       }
  202.  
  203.       .links a {
  204.         display: block;
  205.         border-radius: 100%;
  206.         box-shadow: none !important;
  207.         margin-bottom: 20px;
  208.         background: var(--navigation-container-background);
  209.       }
  210.  
  211.       .links .lucide {
  212.         width: 20px;
  213.         height: 20px;
  214.         text-align: center;
  215.         color: var(--accent);
  216.         padding: 10px;
  217.       }
  218.  
  219.       /*about part*/
  220.       #about-text {
  221.         width: 70%;
  222.         padding-left: 20px;
  223.         border-left: 1px solid var(--border);
  224.       }
  225.  
  226.       #about-header {
  227.         width: 100%;
  228.         display: flex;
  229.         align-items: center;
  230.         justify-content: center;
  231.         border-bottom: 1px solid var(--border);
  232.       }
  233.  
  234.       .about-header-item {
  235.         display: flex;
  236.         align-items: center;
  237.         margin-right: 10px;
  238.         justify-content: space-between;
  239.         text-transform: lowercase;
  240.         font-style: italic;
  241.         font-weight: 700;
  242.         padding: 10px;
  243.       }
  244.  
  245.       .about-header-item .lucide {
  246.         width: 20px;
  247.         color: var(--accent);
  248.         padding: 5px;
  249.         height: 20px;
  250.         margin-right: 10px;
  251.       }
  252.  
  253.       #about-text-body {
  254.         padding: 10px;
  255.         height: 260px;
  256.         max-height: 260px;
  257.         overflow-y: scroll;
  258.         overflow-x: hidden;
  259.       }
  260.  
  261.       #about-text-body i,
  262.       em {
  263.         color: var(--accent);
  264.       }
  265.  
  266.       #about-text-body blockquote {
  267.         border-left: 5px solid var(--accent);
  268.         padding-left: 10px;
  269.       }
  270.  
  271.       #about-text-body::-webkit-scrollbar {
  272.         width: 2px;
  273.       }
  274.  
  275.       #about-text-body::-webkit-scrollbar-thumb {
  276.         background: var(--accent);
  277.         height: auto;
  278.       }
  279.     </style>
  280.   </head>
  281.  
  282.   <body>
  283.     <div id="container">
  284.       <div id="main-container">
  285.         <div id="header">
  286.           <div id="icon">
  287.             <!--change the icon here!-->
  288.             <img src="https://i.imgur.com/nPxbNDj.png" />
  289.           </div>
  290.         </div>
  291.         <div id="about-container">
  292.           <div id="sidebar">
  293.             <div id="quote-sign">
  294.               <i icon-name="quote"></i>
  295.             </div>
  296.             <div id="description">
  297.               <!--this is where your description is.-->
  298.               I confess I do not know why, but looking at the stars always makes
  299.               me dream.
  300.               <br />
  301.               icon by <a href="//acuite.tumblr.com">@acuite</a>.
  302.             </div>
  303.  
  304.             <div id="biodata-container">
  305.               <!--this part can accomodate up to four rows. follow for further instruction.-->
  306.  
  307.               <!--to add more rows, you will have to copy the entirety of this from here-->
  308.               <div class="biodata-row">
  309.                 <div class="biodata-label">name</div>
  310.                 rizu
  311.               </div>
  312.               <!--to here-->
  313.  
  314.               <div class="biodata-row">
  315.                 <div class="biodata-label">age</div>
  316.                 20+
  317.               </div>
  318.               <div class="biodata-row">
  319.                 <div class="biodata-label">pronouns</div>
  320.                 she/her/hers
  321.               </div>
  322.               <div class="biodata-row">
  323.                 <div class="biodata-label">timezone</div>
  324.                 GMT+7
  325.               </div>
  326.  
  327.               <!--before this line-->
  328.             </div>
  329.           </div>
  330.           <!--end sidebar-->
  331.           <div id="about-text">
  332.             <div id="about-header">
  333.               <!--this is the update header. to add items, you can read below.-->
  334.  
  335.               <!--to add more items, copy from here-->
  336.               <div class="about-header-item">
  337.                 <!--to change the icon, simply replace the name of the icon with whatever you want. -->
  338.                 <i icon-name="book-open"></i> The Orient Express
  339.               </div>
  340.               <!--to here-->
  341.  
  342.               <div class="about-header-item">
  343.                 <i icon-name="music"></i> Endwalker-Footfalls
  344.               </div>
  345.               <div class="about-header-item">
  346.                 <i icon-name="gamepad-2"></i> Final Fantasy XIV
  347.               </div>
  348.               <div class="about-header-item">
  349.                 <i icon-name="thermometer"></i> haze
  350.               </div>
  351.  
  352.               <!--before this line-->
  353.             </div>
  354.             <div id="about-text-body">
  355.               <!--this is your body text, you can write as much or as little as you want here!-->
  356.             </div>
  357.           </div>
  358.           <!--end about-text-->
  359.         </div>
  360.       </div>
  361.       <!--end main container-->
  362.  
  363.       <div id="link-container">
  364.         <div style="margin-top: 10px">
  365.           <div class="links">
  366.             <a href="/" title="home"><i icon-name="home"></i></a>
  367.           </div>
  368.  
  369.           <div class="links">
  370.             <a href="/" title="ask"><i icon-name="mail"></i></a>
  371.           </div>
  372.           <div class="links">
  373.             <!--to change the url, change where it says link 1 url here. the rest goes the same way.-->
  374.             <a href="link 1 url" title="link 1">
  375.               <!--to change the icon, simply replace the name of the icon with whatever you want. -->
  376.               <i icon-name="hexagon"></i>
  377.             </a>
  378.           </div>
  379.           <div class="links">
  380.             <a href="link 2 url" title="link 2"><i icon-name="infinity"></i></a>
  381.           </div>
  382.           <div class="links">
  383.             <a href="link 3 url" title="link 3"><i icon-name="octagon"></i></a>
  384.           </div>
  385.           <div class="links">
  386.             <a href="//pneuma-themes.tumblr.com" title="sumire by pneuma-themes"
  387.              ><i icon-name="code-2"></i
  388.            ></a>
  389.           </div>
  390.         </div>
  391.       </div>
  392.     </div>
  393.     <!--end container-->
  394.     <script src="https://unpkg.com/lucide@latest"></script>
  395.     <script>
  396.       lucide.createIcons();
  397.     </script>
  398.   </body>
  399.   <script>
  400.     $(document).ready(function () {
  401.       tippy("[title]", {
  402.         // change these to your liking
  403.         arrow: false,
  404.         placement: "right", // top, right, bottom, left
  405.         delay: 5, //ms
  406.         offset: [0, 20], //px or string
  407.         maxWidth: 300, //px or string
  408.  
  409.         // leave these as they are
  410.         followCursor: false,
  411.         allowHTML: true,
  412.         theme: "custom",
  413.         ignoreAttributes: true,
  414.         content(reference) {
  415.           const title = reference.getAttribute("title");
  416.           reference.removeAttribute("title");
  417.           return title;
  418.         },
  419.       });
  420.     });
  421.   </script>
  422. </html>
  423.  
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!