pneumathemes

about page #01: kardia

Mar 31st, 2022
2,557
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 17.47 KB | None | 0 0
  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