API tools faq
paste
pneumathemes

about page #01: kardia

pneumathemes
Mar 31st, 2022
2,425
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 17.47 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en" data-theme="light">
  3.   <head>
  4.     <title>kardia: an about page.</title>
  5.     <!--change the title of the page here! this will appear as the title at your current tab.-->
  6.  
  7.     <link rel="shortcut icon" href="{Favicon}" />
  8.     <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  9.     <meta charset="utf-8" />
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  11.  
  12.     <!--
  13.  
  14.    Page #01: Kardia
  15.    coded by pneuma-themes
  16.    
  17.    1. Don't remove the credit.
  18.    2. Don't move the credit. Just leave it there.
  19.    3. Don't use as a base code.
  20.    4. Please enjoy! If you find any bugs, please contact me! c:
  21.    
  22.    -->
  23.  
  24.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  25.     <script>
  26.       const storedTheme =
  27.         localStorage.getItem("theme") ||
  28.         (window.matchMedia("(prefers-color-scheme: dark)").matches
  29.           ? "dark"
  30.           : "light");
  31.       if (storedTheme)
  32.         document.documentElement.setAttribute("data-theme", storedTheme);
  33.     </script>
  34.  
  35.     <script src="https://unpkg.com/@popperjs/core@2"></script>
  36.     <script src="https://unpkg.com/tippy.js@6"></script>
  37.     <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
  38.     <script nomodule="" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.js"></script>
  39.  
  40.     <style type="text/css">
  41.       @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  42.      
  43.       /*attention! to change the colors of the page, look below!*/
  44.       /*make changes here to change the colors on light mode. please leave LightOn and LightOff variables be!*/
  45.       :root,
  46.       html[data-theme="light"] {
  47.         --LightOn: flex;
  48.         --LightOff: none;
  49.         --accent: #6465a6;
  50.         --body: #1f1f1f;
  51.         --background: #fff;
  52.         --border: #eee;
  53.         --Columns:3;
  54.         --Column-Spacing:15px;
  55.         --Item-Spacing:15px;
  56.       }
  57.      
  58.       /*make changes here to change the colors on dark mode. please leave LightOn and LightOff variables be!*/
  59.       html[data-theme="dark"] {
  60.         --LightOn: none;
  61.         --LightOff: flex;
  62.         --body: #d3d4d4;
  63.         --border: #d3d4d4;
  64.         --background: #1a1a1a;
  65.       }
  66.  
  67.       html.theme-transition,
  68.       html.theme-transition *,
  69.       html.theme-transition *:before,
  70.       html.theme-transition *:after {
  71.         transition: 0s !important;
  72.         transition-delay: 0 !important;
  73.       }
  74.  
  75.       iframe.tmblr-iframe {
  76.         display: none !important;
  77.       }
  78.      
  79.       ::-webkit-scrollbar{
  80.           width:6px;
  81.       }
  82.      
  83.       ::-webkit-scrollbar-thumb:vertical{
  84.           background:var(--accent);
  85.           height:auto;
  86.       }
  87.  
  88.       body {
  89.         margin: 0;
  90.         padding: 0;
  91.         font-family: "PT Sans";
  92.         font-size: 14px;
  93.         color: var(--body);
  94.         background: var(--background);
  95.       }
  96.  
  97.       a {
  98.         text-decoration: none;
  99.         color: var(--body);
  100.       }
  101.      
  102.       .tippy-box{
  103.           background:var(--accent);
  104.           color:#fff;
  105.           font-size:12px;
  106.       }
  107.  
  108.       #decorative-sidebar {
  109.         width: 15px;
  110.         height: 100%;
  111.         background: var(--accent);
  112.         position: fixed;
  113.         left: 0;
  114.         top: 0;
  115.       }
  116.  
  117.       #sidebar {
  118.         width: 350px;
  119.         height: 100%;
  120.         position: fixed;
  121.         left: 15px;
  122.         top: 0;
  123.       }
  124.  
  125.       #sidebar-content {
  126.         display: flex;
  127.         flex-wrap: wrap;
  128.         align-items: center;
  129.         justify-content: center;
  130.         min-height: 150px;
  131.         margin-top: 100px;
  132.       }
  133.  
  134.       #sidebar-image {
  135.         width: 64px;
  136.         height: 64px;
  137.         padding: 5px;
  138.         margin-right: 20px;
  139.         border: 1px solid var(--border);
  140.         /**delete this line if you want a square icon**/
  141.         border-radius: 100%;
  142.       }
  143.  
  144.       #sidebar-image img {
  145.         width: 64px;
  146.         height: 64px;
  147.         max-width: 64px;
  148.         max-height: 64px;
  149.         /**delete this line if you want a square icon**/
  150.         border-radius: 100%;
  151.       }
  152.  
  153.       #title {
  154.         font-family: "PT Serif";
  155.         font-size: 20px;
  156.         text-align: center;
  157.         font-weight: 700;
  158.         padding: 10px;
  159.       }
  160.  
  161.       #desc {
  162.         border: 1px solid var(--border);
  163.         text-align: justify;
  164.         padding: 20px;
  165.         margin: 20px;
  166.         /*delete this line if you want a sharp border*/
  167.         border-radius: 5px;
  168.       }
  169.  
  170.       #desc a{
  171.           color:var(--accent);
  172.           font-weight:700;
  173.       }
  174.  
  175.       #navigation {
  176.         width: 100%;
  177.         display: flex;
  178.         margin: 20px;
  179.         align-items: center;
  180.         justify-content: center;
  181.       }
  182.  
  183.       .navigation-links a {
  184.         text-transform: uppercase;
  185.         font-size: 12px;
  186.         font-weight: 700;
  187.         box-shadow: 0 -5px inset var(--accent);
  188.         margin-right: 15px;
  189.       }
  190.  
  191.       .navigation-links a:last-child {
  192.         margin-right: 0;
  193.       }
  194.  
  195.       #credit {
  196.         position: fixed;
  197.         right: 20px;
  198.         bottom: 20px;
  199.         background: var(--background);
  200.         padding: 10px;
  201.         text-align: center;
  202.         font-size: 12px;
  203.         border: 1px solid var(--accent);
  204.       }
  205.  
  206.       #credit a {
  207.         color: var(--accent);
  208.       }
  209.  
  210.       .dark-switch {
  211.         position: fixed;
  212.         top: 20px;
  213.         right: 20px;
  214.         width: 20px;
  215.         padding: 10px;
  216.         height: 20px;
  217.         font-size: 20px;
  218.         border: 1px solid var(--border);
  219.         text-align: center;
  220.         /*delete this line if you want a sharp border*/
  221.         border-radius: 5px;
  222.         color: var(--body);
  223.       }
  224.  
  225.       .light-on {
  226.         display: var(--LightOn);
  227.       }
  228.  
  229.       .light-off {
  230.         display: var(--LightOff);
  231.       }
  232.      
  233.       /**about container**/
  234.       #about-container{
  235.           width:65%;
  236.           display:flex;
  237.           margin-left:400px;
  238.           position:relative;
  239.           display:flex;
  240.           margin-top:50px;
  241.           margin-bottom:50px;
  242.       }
  243.      
  244.       #about-sidebar{
  245.           width:25%;
  246.           margin-right:50px;
  247.       }
  248.      
  249.       .about-box{
  250.           border:1px solid var(--border);
  251.           width:100%;
  252.           min-height:150px;
  253.           margin-bottom:20px;
  254.         /*delete this line if you want a sharp border*/
  255.         border-radius: 5px;
  256.       }
  257.      
  258.       .about-box:last-child{
  259.           margin-bottom:0 !important;
  260.       }
  261.      
  262.       .about-box-header{
  263.           display:flex;
  264.           padding:20px;
  265.           align-items:center;
  266.           border-bottom:1px solid var(--border);
  267.           text-transform:uppercase;
  268.           font-weight:700;
  269.       }
  270.      
  271.       .about-box-header ion-icon{
  272.           font-size:24px;
  273.           color:var(--accent);
  274.           margin-right:20px;
  275.       }
  276.      
  277.       .about-box-text{
  278.           padding:20px;
  279.       }
  280.      
  281.       .about-box-text-row{
  282.           display:flex;
  283.           align-items:center;
  284.           justify-content:space-between;
  285.           margin-top:10px;
  286.           font-size:12px;
  287.       }
  288.      
  289.       .about-box-text-row a{
  290.           box-shadow:0 -3px inset var(--accent);
  291.       }
  292.      
  293.       .about-box-text-row-label{
  294.           font-weight:700;
  295.           text-transform:uppercase;
  296.       }
  297.      
  298.       #about-text{
  299.           width:80%;
  300.       }
  301.      
  302.       #quote{
  303.           padding:20px;
  304.           width:100%;
  305.           font-family:'PT Serif';
  306.           font-style:italic;
  307.           font-size:25px;
  308.           font-weight:700;
  309.           position:relative;
  310.       }
  311.      
  312.       #quote:before{
  313.           content:'';
  314.           position:absolute;
  315.           background-color:var(--accent);
  316.           width:20%;
  317.           left:20px;
  318.           padding:2px;
  319.           bottom:0;
  320.       }
  321.      
  322.       #about-text-body{
  323.           padding:20px;
  324.           text-align:justify;
  325.       }
  326.      
  327.       #about-text-body a{
  328.           font-weight:700;
  329.           box-shadow:0 -5px inset var(--accent);
  330.       }
  331.      
  332.       #about-text-body i, em{
  333.           color:var(--accent);
  334.       }
  335.      
  336.       #about-text-body blockquote{
  337.           border-left:4px solid var(--border);
  338.           padding-left:20px;
  339.       }
  340.      
  341.       #about-text-body:first-letter{
  342.           font-family:'PT Serif';
  343.           font-size:20px;
  344.           padding:10px;
  345.           background:var(--accent);
  346.           float:left;
  347.           margin-right:5px;
  348.           text-align:center;
  349.           width:10px;
  350.           height:20px;
  351.           line-height:100%;
  352.           font-weight:700;
  353.           color:#fff;
  354.       }
  355.     </style>
  356.   </head>
  357.  
  358.   <body>
  359.     <div class="dark-switch" id="theme-toggle">
  360.       <ion-icon name="moon-outline" class="light-on" title="dark mode"></ion-icon>
  361.       <ion-icon name="sunny-outline" class="light-off" title="light mode"></ion-icon>
  362.     </div>
  363.     <div id="decorative-sidebar"></div>
  364.    
  365.     <div id="sidebar">
  366.       <div id="sidebar-content">
  367.         <div id="sidebar-image">
  368.           <!--change your icon here-->
  369.           <img src="https://i.imgur.com/jA9b1gh.png" />
  370.         </div>
  371.         <div id="title">symphonies</div>
  372.         <div id="navigation">
  373.           <div class="navigation-links">
  374.             <a href="/">home</a>
  375.             <a href="/ask">ask</a>
  376.             <a href="/archive">past</a>
  377.             <a href="">one</a>
  378.             <a href="">two</a>
  379.             <a href="">three</a>
  380.           </div>
  381.         </div>
  382.         <div id="desc">
  383.         now that we've come this far, just hold on
  384.         <br>
  385.         there's nothing to fear, for i am right beside you
  386.         <br>
  387.         for all my life, i am yours.
  388.         </div>
  389.       </div>
  390.       <!--end sidebar-content-->
  391.     </div>
  392.    
  393.     <div id="about-container">
  394.         <div id="about-sidebar">
  395.             <!--Please read this first!
  396.            To add more boxes, copy from where it says "copy from here" until the part where it says "to here".-->
  397.            
  398.             <!--copy from here-->
  399.             <div class="about-box">
  400.                 <div class="about-box-header">
  401.                 <!--you can change the icons here, specifically where it says "name="...". refer to ionicons for the complete list of icons.-->
  402.                 <ion-icon name="list-circle-outline"></ion-icon>
  403.                 personal information
  404.                 </div>
  405.                
  406.                 <div class="about-box-text">
  407.                 <!--if you need to add more row, copy the entirety of "about-box-text-row".-->
  408.                     <!--copy from here-->
  409.                     <div class="about-box-text-row">
  410.                         <div class="about-box-text-row-label">name</div>
  411.                         rizu
  412.                     </div>
  413.                     <!--to here-->
  414.                    
  415.                     <div class="about-box-text-row">
  416.                         <div class="about-box-text-row-label">age</div>
  417.                         20+
  418.                     </div>
  419.                     <div class="about-box-text-row">
  420.                         <div class="about-box-text-row-label">pronouns</div>
  421.                         she/her/hers
  422.                     </div>
  423.                     <div class="about-box-text-row">
  424.                         <div class="about-box-text-row-label">name</div>
  425.                         rizu
  426.                     </div>
  427.                 </div><!--end about-box-text-->
  428.             </div><!--end about-box-->
  429.             <!--to here-->
  430.            
  431.             <div class="about-box">
  432.                 <div class="about-box-header">
  433.                     <ion-icon name="calendar-outline"></ion-icon>
  434.                     updates
  435.                 </div>
  436.                
  437.                 <div class="about-box-text">
  438.                     <div class="about-box-text-row">
  439.                         <div class="about-box-text-row-label">30/3/2022</div>
  440.                         start working
  441.                     </div>
  442.                     <div class="about-box-text-row">
  443.                         <div class="about-box-text-row-label">1/4/2022</div>
  444.                         happy april mop!
  445.                     </div>
  446.                     <div class="about-box-text-row">
  447.                         <div class="about-box-text-row-label">19/8/2022</div>
  448.                         happy birthday d!
  449.                     </div>
  450.                 </div>
  451.             </div>
  452.            
  453.             <div class="about-box">
  454.                 <div class="about-box-header">
  455.                     <ion-icon name="pin-outline"></ion-icon>
  456.                     on the internet
  457.                 </div>
  458.                
  459.                 <div class="about-box-text">
  460.                     <div class="about-box-text-row">
  461.                         <div class="about-box-text-row-label">twitter</div>
  462.                         <a href="">@pneuma-themes</a>
  463.                     </div>
  464.                     <div class="about-box-text-row">
  465.                         <div class="about-box-text-row-label">spotify</div>
  466.                         <a href="">pneumathemes</a>
  467.                     </div>
  468.                     <div class="about-box-text-row">
  469.                         <div class="about-box-text-row-label">instagram</div>
  470.                         <a href="">@pneuma-themes</a>
  471.                     </div>
  472.                     <div class="about-box-text-row">
  473.                         <div class="about-box-text-row-label">tumblr</div>
  474.                         <a href="">@pneuma-themes</a>
  475.                     </div>
  476.                 </div>
  477.             </div>
  478.         </div><!--end about sidebar-->
  479.        
  480.         <div id="about-text">
  481.             <div id="quote">and i will still be here, stargazing.</div><!--change your quote here!-->
  482.            
  483.             <div id="about-text-body">
  484.             <!--write your about here! you can write as much as you want.-->
  485.             <p>Hello and welcome! This is the preview of <b>Kardia</b>, a simple about page I release under <a href="//pneuma-themes.tumblr.com">@pneuma-themes</a> and coincidentally, my first release! Yay!</p>
  486.            
  487.             <p>This is a very simple about page that has boxes where you can put literally anything. I put a <i>personal information, updates</i> and a <i>custom link</i> box where I put custom links. You can, of course, customize it to your liking. I have put notes inside the code to edit, so please make sure you have thoroughly read the code! I hope my notes are understandable but if not, do feel free to send me an ask.</p>
  488.            
  489.             <blockquote><b>Kardia (κᾰρδῐ́ᾱ, (kardíā))</b>
  490.             is an Ancient Greek term referring to heart as the source of feeling and emotions, and used in modern age as a term referring to the medical term of heart.
  491.             </blockquote>
  492.            
  493.             <p>Features included in this page are as the following:
  494.                 <ul>
  495.                     <li>The ability to add as many boxes as you want.</li>
  496.                     <li>The ability to write your about as long or as short as you want.</li>
  497.                     <li>A quote above the about text.</li>
  498.                     <li>Customizable icons, please refer to the notes I included in the code on how to change it!</li>
  499.                     <li>Sidebar includes a custom icon, a title and a description where you can write as long or as short as you want.</li>
  500.                     <li>Customizable colors for light and dark mode.</li>
  501.                 </ul>
  502.                 As this is a <b>page</b> theme, posts on your blog will <i>not</i> be displayed.
  503.             </p>
  504.            
  505.             <p>I think that about covers it. Thank you so much if you choose to use this page, and I hope you enjoy it! If you have any questions, do leave me an ask, and if you like this page, please like and reblog the theme post!</p>
  506.             </div>
  507.         </div>
  508.        
  509.     </div><!--end about container-->
  510.  
  511.     <div id="credit">
  512.       <a href="//pneuma-themes.tumblr.com" title="kardia by pneumathemes">code</a>
  513.     </div>
  514.  
  515.     <script>
  516.       const toggle = document.getElementById("theme-toggle");
  517.       toggle.onclick = function () {
  518.         document.documentElement.classList.add("theme-transition");
  519.         let currentTheme = document.documentElement.getAttribute("data-theme");
  520.         let targetTheme = "light";
  521.         if (currentTheme === "light") {
  522.           targetTheme = "dark";
  523.         }
  524.  
  525.         window.setTimeout(function () {
  526.           document.documentElement.classList.remove("theme-transition");
  527.         }, 50);
  528.         document.documentElement.setAttribute("data-theme", targetTheme);
  529.         localStorage.setItem("theme", targetTheme);
  530.       };
  531.     </script>
  532.   </body>
  533.   <script>
  534.     $(document).ready(function () {
  535.       tippy("[title]", {
  536.         // change these to your liking
  537.         arrow: false,
  538.         placement: "left", // top, right, bottom, left
  539.         delay: 5, //ms
  540.         offset: [0,20], //px or string
  541.         maxWidth: 300, //px or string
  542.  
  543.         // leave these as they are
  544.         followCursor: false,
  545.         allowHTML: true,
  546.         theme: "custom",
  547.         ignoreAttributes: true,
  548.         content(reference) {
  549.           const title = reference.getAttribute("title");
  550.           reference.removeAttribute("title");
  551.           return title;
  552.         },
  553.       });
  554.     });
  555.   </script>
  556. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!