API tools faq
paste
Advertisement
southcodes

chaise longue | all in one page

southcodes
Jul 17th, 2023 (edited)
1,689
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.73 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - all in one page 'chaise longue' by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.  
  8.     - fonts by google
  9.     - tabs by https://www.w3schools.com/howto/howto_js_tabs.asp
  10.  
  11. -->
  12.  
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.     <title>{title}</title>
  17.  
  18.     <meta charset="UTF-8">
  19.     <meta name="description" content="{MetaDescription}"/>
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24.    
  25.     <!-- fonts -->
  26.     <link rel="preconnect" href="https://fonts.googleapis.com">
  27.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  28.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700;1,800&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap" rel="stylesheet">
  29.    
  30. <style>
  31. :root {
  32.     --background:#fff;
  33.     --text: #333;
  34.     --links: lightblue;
  35.     --links-hover: blue;
  36.     --borders:#eee
  37. }
  38.  
  39. *:not(ul,ol,li) {margin:0;padding:0;box-sizing: border-box;}
  40. p {margin:1rem 0}
  41. html{font-size: 14px}
  42. body {font: 1rem 'Karla', sans-serif;color:var(--text);background:var(--background);}
  43. a {text-decoration: none;color:var(--links);}
  44. a:hover {color:var(--links-hover);}
  45. b {font-weight: 600}
  46. hr {border:0;border-top:1px solid var(--borders);margin:auto;width: 100%;}
  47.  
  48. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links);}
  49. ::-webkit-scrollbar {width:6px;height:0;}
  50. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  51.  
  52. h1,h2,h3,h4,h5,h6 {
  53.     font-family: 'Lora', serif;
  54.     font-weight: 500;
  55. }
  56.  
  57. /* containers */
  58.  
  59. #container {
  60.     display: flex;
  61.     justify-content: center;
  62.     align-items: center;
  63.     width: 100%;
  64.     height: 100vh;
  65. }
  66.  
  67. main {
  68.     max-width: 50rem;
  69.     width: 90vw;
  70. }
  71.  
  72. /* title and navigation links */
  73.  
  74. header {
  75.     display: flex;
  76.     justify-content: space-between;
  77.     align-items: center;
  78.     border:1px solid #eee;
  79.     border-left:0;
  80.     border-right:0;
  81.     padding:1.7rem  2rem ;
  82. }
  83.  
  84. header h2 {
  85.     font-weight: 400;
  86.     letter-spacing: .06rem ;
  87.     font-size: 1.3rem;
  88. }
  89.  
  90. header h2 a {color:var(--text)}
  91.  
  92. #tab-navigation ul{
  93.     display: flex;
  94.     margin:0;padding:0;list-style: none;
  95. }
  96.  
  97. #tab-navigation li{
  98.     font-weight: 600;
  99.     margin:0 1rem;
  100.     cursor: pointer;
  101. }
  102.  
  103. #tab-navigation li:hover {color: var(--links);}
  104.  
  105. #tab-navigation li.active {color: var(--links);}
  106.  
  107. /* tabs */
  108.  
  109. #tab-container {
  110.     display: flex;
  111.     flex-direction: row;
  112.     height: 30rem;
  113. }
  114.  
  115. .tabcontent {
  116.     display: none;
  117.     height: 30rem;
  118.     overflow: auto;
  119.     width: 50%;
  120.     padding: 2rem;
  121.     animation: fadeEffect 1s;}
  122. @keyframes fadeEffect {from {opacity: 0;} to {opacity: 1;}}
  123.  
  124. .tabcontent h2 {margin-bottom: 2rem;}
  125.  
  126. /* tab image */
  127.  
  128. .about-image{    
  129.     width: 100%;
  130.     height: 30rem;
  131.     display: block;
  132.     object-fit: cover;
  133. }
  134.  
  135. figure.about-image {width: 50%;}
  136.  
  137. /* about tab */
  138.  
  139. #about { padding: 0;}
  140.  
  141. #blog-title {
  142.     font-size: 2rem;
  143.     margin:2rem;
  144. }
  145.  
  146. #details ul{margin:0;padding:0;list-style: none;}
  147.  
  148. #details li {
  149.     padding: 1rem 1.3rem;
  150.     border-top:1px solid var(--borders);
  151. }
  152.  
  153. #details li:last-of-type {border-bottom:1px solid var(--borders);}
  154.  
  155. #about-text {padding:2rem}
  156.  
  157. /* contact tab */
  158.  
  159. #contact .faq-question {
  160.     list-style:none;
  161.     font-weight: 600;
  162.     margin-top: 2rem;
  163.     text-decoration: underline;
  164. }
  165.  
  166. #contact .faq-answer {
  167.     list-style:none;
  168.     margin: 1rem 0;
  169.     padding-bottom: 2rem;
  170.     border-bottom: 1px solid var(--borders);
  171. }
  172.  
  173. /* navigation tab */
  174.  
  175. #navigation * {list-style: none;margin: 0;padding: 0;}
  176. #navigation ul {margin-top: 2rem;}
  177.  
  178. /* links */
  179.  
  180. #navigation #navigation-links li {
  181.     border-bottom: 1px solid var(--borders);
  182.     padding: .6rem 0;
  183.     margin-bottom: 1rem;
  184. }
  185.  
  186. /* tags */
  187. #navigation-tags li{
  188.     border:1px solid var(--borders);
  189.     border-radius: 3px;
  190.     padding: .4rem .6rem;
  191.     display: inline-block;
  192.     margin-right: 1rem;
  193. }
  194.  
  195. /* MEDIA */
  196.  
  197. @media only screen and (min-height:0px) and (max-height:420px) {
  198.  
  199.     #container {
  200.         display: block;
  201.         width: 100%;
  202.         height: 100%;
  203.         margin: 3rem 0;
  204.     }  
  205.  
  206.     main {
  207.         margin: auto;
  208.     }
  209. }
  210.  
  211. </style>
  212. </head>
  213. <body>
  214.  
  215. <section id="container">
  216.  
  217. <main>
  218.  
  219. <header>
  220.  
  221.     <h2><a href="/">@{name}</a></h2>
  222.  
  223.     <nav id="tab-navigation"><ul>
  224.        
  225.         <li id="defaultOpen" class="tablinks" onclick="openTab(event, 'about')">about</li>
  226.        
  227.         {block:AskEnabled}<li class="tablinks" onclick="openTab(event, 'contact')">contact</li>{/block:AskEnabled}
  228.        
  229.         <li class="tablinks" onclick="openTab(event, 'navigation')">navigation</li>
  230.        
  231.     </ul></nav>
  232.  
  233. </header>
  234.  
  235. <section id="tab-container">
  236.  
  237.     <figure class="about-image"><img src="SIDEBAR IMAGE URL" alt="" class="about-image"></figure>
  238.  
  239.     <!-- about tab -->
  240.     <div id="about" class="tabcontent">
  241.            
  242.         <h1 id="blog-title">page title</h1>
  243.  
  244.         <article id="details"><ul>
  245.  
  246.             <li>name</li>
  247.             <li>age</li>
  248.             <li>location</li>
  249.  
  250.         </ul></article>
  251.  
  252.         <article id="about-text">
  253.        
  254.             <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo odio cumque eaque distinctio adipisci voluptatibus possimus. Accusantium quibusdam deleniti recusandae nesciunt unde dolore voluptate quisquam, aliquam, similique reprehenderit labore?</p>
  255.            
  256.             <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Non nemo odio cumque eaque distinctio adipisci voluptatibus possimus. Accusantium quibusdam deleniti recusandae nesciunt unde dolore voluptate quisquam, aliquam, similique reprehenderit labore?</p>
  257.            
  258.         </article>
  259.  
  260.     </div>
  261.     <!-- about tab end -->
  262.  
  263.  
  264.     <!-- contact tab -->
  265.     {block:AskEnabled}<div id="contact" class="tabcontent">
  266.  
  267.         <h2>contact</h2>
  268.  
  269.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque saepe, quis dolores vero minus a maxime est, ipsum, labore sed aut assumenda incidunt maiores! Doloremque saepe atque enim iusto aliquid.</p>
  270.  
  271.         <li class="faq-question">question</li>
  272.         <li class="faq-answer">answer</li>
  273.  
  274.         <li class="faq-question">question</li>
  275.         <li class="faq-answer">answer</li>
  276.  
  277.         <li class="faq-question">question</li>
  278.         <li class="faq-answer">answer</li>
  279.  
  280.         <iframe id="ask-iframe" frameborder="0" scrolling="no" width="100%" height="300" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  281.  
  282.     </div>{/block:AskEnabled}
  283.     <!-- contact tab end -->
  284.  
  285.    
  286.     <!-- navigation tab -->
  287.     <div id="navigation" class="tabcontent">
  288.        
  289.         <h2>navigation</h2>
  290.        
  291.         <ul id="navigation-links">
  292.             <li><a href="">link</a></li>
  293.             <li><a href="">link</a></li>
  294.             <li><a href="">link</a></li>
  295.             <li><a href="">link</a></li>
  296.         </ul>
  297.  
  298.         <ul id="navigation-tags">
  299.             <li><a href="">tag</a></li>
  300.             <li><a href="">tag</a></li>
  301.             <li><a href="">tag</a></li>
  302.         </ul>
  303.  
  304.     </div>
  305.     <!-- navigation tab end -->
  306.  
  307. </section>   <!-- tab container -->
  308.  
  309.  
  310. </main>
  311.  
  312. </section> <!-- container -->
  313.  
  314.  
  315. <!-- do not touch -->
  316. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  317.  
  318. <script>
  319.  
  320. function openTab(evt, tabName) {
  321.   // Declare all variables
  322.   var i, tabcontent, tablinks;
  323.  
  324.   // Get all elements with class="tabcontent" and hide them
  325.   tabcontent = document.getElementsByClassName("tabcontent");
  326.   for (i = 0; i < tabcontent.length; i++) {
  327.     tabcontent[i].style.display = "none";
  328.   }
  329.  
  330.   // Get all elements with class="tablinks" and remove the class "active"
  331.   tablinks = document.getElementsByClassName("tablinks");
  332.   for (i = 0; i < tablinks.length; i++) {
  333.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  334.   }
  335.  
  336.   // Show the current tab, and add an "active" class to the button that opened the tab
  337.   document.getElementById(tabName).style.display = "block";
  338.   evt.currentTarget.className += " active";
  339. }
  340.  
  341. document.getElementById("defaultOpen").click();
  342. </script>
  343. </body>
  344. </html>
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!