[79] Lots o' Info: Page-ception

[lina_trinch]

Live Preview Here!




Code:
<div style="width: 800px; display: flex; flex-direction: column; margin: auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px;"> <!--tabs--> <div style="width: 100%; height: 25px; margin-bottom: 10px; display: flex; flex-direction: row; justify-content: flex-start; font-weight: bold;"> <a href="#one" style="color: #000; text-decoration: none;"> <div style="min-width: 100px; height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 0 2px 0 0;">Part A</div> </a> <a href="#two" style="color: #000; text-decoration: none;"> <div style="min-width: 100px; height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 0 2px;">Part B</div> </a> <a href="#three" style="color: #000; text-decoration: none;"> <div style="min-width: 100px; height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 0 2px;">Part C</div> </a> <!--ADD MORE TABS ABOVE THIS LINE--> </div> <!--body--> <div style="width: 100%; height: 400px; overflow: hidden;"> <!--Page One--> <a name="one" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: hidden; text-align: justify; display: flex; flex-direction: row;"> <!--Page One Tabs--> <div style="width: 20%; font-weight: bold; margin-right: 10px;"> <a href="#Aone" style="color: #000; text-decoration: none;"> <div style="min-height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 4px 0 4px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">Tab 1-A</div> </a> <a href="#Atwo" style="color: #000; text-decoration: none;"> <div style="min-height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 4px 0 4px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">Tab 2-A</div> </a> <!--ADD MORE TABS FOR PAGE ONE ABOVE THIS LINE--> </div> <!--inner body--> <div style="width: 80%; height: 400px; overflow: hidden; background: #fff;"> <!--PAGE ONE CONTENT - PART A--> <a name="Aone" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; padding: 10px; text-align: justify;"> <!--header--> <div style="font-size: 30px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; color: #000;"> Header A </div> <!--divider--> <div style="width: 100%; height: 2px; margin: 0 0 10px 0; background: #000;"></div> <!--image on the left--> <div style="float: left; width: 150px; height: 200px; margin: 0 10px 10px 0; background: center/cover url('IMAGE');"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--image on the right--> <div style="float: right; width: 150px; height: 200px; margin: 0 0 10px 10px; background: center/cover url('IMAGE');"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--ADD MORE CONTENT ABOVE THIS LINE--> </div> <!--PAGE ONE CONTENT - PART B--> <a name="Atwo" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; padding: 10px; text-align: justify;"> <!--header--> <div style="font-size: 30px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; color: #000;"> Header A </div> <!--divider--> <div style="width: 100%; height: 2px; margin: 0 0 10px 0; background: #000;"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--ADD MORE CONTENT ABOVE THIS LINE--> </div> </div> <!--ADD MORE PAGES HERE--> </div> <!--Page Two--> <a name="two" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: hidden; text-align: justify; display: flex; flex-direction: row;"> <!--Page Two Tabs--> <div style="width: 20%; font-weight: bold; margin-right: 10px;"> <a href="#Bone" style="color: #000; text-decoration: none;"> <div style="min-height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 4px 0 4px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">Tab 1-B</div> </a> <a href="#Btwo" style="color: #000; text-decoration: none;"> <div style="min-height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 4px 0 4px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">Tab 2-B</div> </a> <!--ADD MORE TABS FOR PAGE ONE ABOVE THIS LINE--> </div> <!--inner body--> <div style="width: 80%; height: 400px; overflow: hidden; background: #fff;"> <!--PAGE TWO CONTENT - PART A--> <a name="Bone" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; padding: 10px; text-align: justify;"> <!--header--> <div style="font-size: 30px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; color: #000;"> Header B </div> <!--divider--> <div style="width: 100%; height: 2px; margin: 0 0 10px 0; background: #000;"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--ADD MORE CONTENT ABOVE THIS LINE--> </div> <!--PAGE TWO CONTENT - PART B--> <a name="Btwo" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; padding: 10px; text-align: justify;"> <!--header--> <div style="font-size: 30px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; color: #000;"> Header B </div> <!--divider--> <div style="width: 100%; height: 2px; margin: 0 0 10px 0; background: #000;"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--ADD MORE CONTENT ABOVE THIS LINE--> </div> </div> <!--ADD MORE PAGES HERE--> </div> <!--Page Three--> <a name="three" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: hidden; text-align: justify; display: flex; flex-direction: row;"> <!--Page Three Tabs--> <div style="width: 20%; font-weight: bold; margin-right: 10px;"> <a href="#Cone" style="color: #000; text-decoration: none;"> <div style="min-height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 4px 0 4px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">Tab 1-C</div> </a> <a href="#Ctwo" style="color: #000; text-decoration: none;"> <div style="min-height: 30px; padding: 0 10px; background: #BBBFCA; border-radius: 5px; display: flex; align-items: center; margin: 4px 0 4px 4px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">Tab 2-C</div> </a> <!--ADD MORE TABS FOR PAGE ONE ABOVE THIS LINE--> </div> <!--inner body--> <div style="width: 80%; height: 400px; overflow: hidden; background: #fff;"> <!--PAGE THREE CONTENT - PART A--> <a name="Cone" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; padding: 10px; text-align: justify;"> <!--header--> <div style="font-size: 30px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; color: #000;"> Header C </div> <!--divider--> <div style="width: 100%; height: 2px; margin: 0 0 10px 0; background: #000;"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--ADD MORE CONTENT ABOVE THIS LINE--> </div> <!--PAGE THREE CONTENT - PART B--> <a name="Ctwo" style="display: block; height: 0;"></a> <div style="width: 100%; height: 400px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; overflow-y: auto; padding: 10px; text-align: justify;"> <!--header--> <div style="font-size: 30px; text-transform: lowercase; font-variant: small-caps; font-weight: bold; color: #000;"> Header C </div> <!--divider--> <div style="width: 100%; height: 2px; margin: 0 0 10px 0; background: #000;"></div> <p style="color: #000;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum non inventore, autem fugiat vero porro quia ipsum et neque ducimus optio vitae, consectetur tenetur quo odio. Soluta vero ullam velit?</p> <!--ADD MORE CONTENT ABOVE THIS LINE--> </div> </div> <!--ADD MORE PAGES HERE--> </div> <!--ADD MORE PAGES/TABS ABOVE THIS LINE--> </div> </div> <div style="width: 800px; margin: 10px auto; font-size: 8px; font-family: monospace; font-weight: bold; letter-spacing: 2px; text-align: center;"> <a href="https://killthecake.dreamwidth.org/" style="color: #000; text-decoration: none;"> CODE </a> </div>

❖ This code was released early on the Patreon! Feel free to check out things over there if you want early codes or some exclusive content. ❖ Make sure Disable Auto-Formatting is checked when you copy/paste the code into your post. ❖ Each link at the top will open a new section. Each section has a sidebar of tabs. Each tab will open new pages in the window on the right. You can add as many sections/tabs/pages/etc. as you want. By default, there are 3 sections with 2 tabs each to get you started. ❖ I've tried to label everything as clearly as possible, but let me know if you have any trouble! Ctrl+F & Replace: ❖ IMAGE - Image placeholder. ❖ Page/Tab - Placeholder for anchor link text. ❖ Header A/B/C - Headers placeholder. ❖ Lorem ipsum - Text placeholder. #000 Text. #BBBFCA Background of the anchor links. #FFF Background of the page.