Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main-doc">

  <nav id="navbar">
    <header id="nav-header">ThisApp Technical documentation page</header>
    <ul id="nav-list">
      <li><a href="#1.What_you_need_to_know" class="nav-link">1.What you need to know</a><ul>
      <li><a href="#hw_specs">1.1.Recommended hardware specs</a></li>
        <li><a href="#sw_specs">1.2.Recommended software specs</a></ul></li>
      <li><a href="#2.Installing_ThisApp" class="nav-link">2.Installing ThisApp</a></li>
      <li><a href="#3.Using_ThisApp" class="nav-link">3.Using ThisApp</a><ul>
      <li><a href="#GUI">3.1.Graphical user interface</a></li>
        <li><a href="#CMD">3.2.Command line environment</a></li></ul>
      <li><a href="#4.Uninstalling_ThisApp" class="nav-link">4.Uninstalling ThisApp</a></li>
      <li><a href="#5.Dowlaod_Links" class="nav-link">5.Dowlaod Links</a></li>
      <li><a href="#6.FAQs" class="nav-link">6.FAQs</a></li>
      <li><a href="#7.Troubleshooting_ThisApp" class="nav-link">7.Troubleshooting ThisApp</a></li>
    </ul>
  </nav>
  <div id="docs">
 <h1 id="title">ThisApp Technical documentation page</h1>
<section class="main-section" id="1.What_you_need_to_know">
  <header id="section1">1.What you need to know
  </header>
  <h4 id="hw_specs">1.1.Recommended hardware specs</h4>
  <p>ThisApp requires a system capable of multitasking. For optimal Performance, the following specs are recommended:</p>
  <ul>
    <li>CPU: min. AMD: Ryzen 5 1600, Intel:Core i7 8700k or equivalent 6 core 12 htreads processor with clock speed not less than 3.5 Ghz to avoid stutters. </li>
    <li>RAM: min. 16GB of DDR4 RAM (for Ryzen system make sure RAM speed is at least 3200 Mhz for optimal performance).</li>
    <li>Graphics: a GPU with 4GB VRAM or better is recommended.</li>
    <li>Disk space: 5GB min. empty disk space is required for operation with additional 5GB for future updates, SSDs are highly recommended to avoid slow performance.</li>
    <li>Internet connection: min 2 mbps.</li>
  </ul>
    <h4 id="sw_specs">1.2.Recommended software specs</h4>
  <p>ThisApp has been tested on Micorsoft Windows 10 x64 with latest security updates and drivers installed. For optimal Performance, always makes sure your system and drivers are updated (General advice).</p>
  </section>
<section class="main-section" id="2.Installing_ThisApp">
  <header id="section2">2.Installing ThisApp
  </header>
  <p> Installing ThisApp is simple, the installer will do everything for you, just follow these steps:</p>
  <ol>
    <li>Accept the EULA in the splash screen.</li>
    <li>Click next, and select the install path, the installer will automatically detect system space available and whether it can install on that drive or not, it will also suggest feature set based on system specs and available space, you can customize it to your liking, however.</li>
    <li>Click next, and let installer download prerequisite software, download time will depend on you internet connection speed.</li>
    <li>After the installer finishes downloading prerequisite software, click next to allow the software to install.</li>
    <li>After the installer finishes insalling ThisApp click finish to exit the intaller.</li>
    <li>After finishing the installation process, the installer will ask you to restart your system, click yes to restart now (please save all your work, all unsaved work will be lost).
    Please note that, it is recommended to restart your system even if the installer didn't ask you to do so.</li>
  </ol>
  </section>
<section class="main-section" id="3.Using_ThisApp">
  <header id="section3">3.Using ThisApp
  </header>
  <p>ThisApp can be used in two ways:</p>
  <ol>
    <li>Graphical user interface (GUI).</li>
    <li>Command line environment (CMD)</li>
  </ol>
    Both will be explained in this chapter.
    <h4 id="GUI">3.1.Graphical user interface</h4>
    <p>This is user interface where you can use your mouse and keybaord to interact with ThisApp, it consists of:</p>
    <ul>
      <li>Menu bar, containing commands like file and save and others, commands are self explanatory, but if you need help, you can always check help files (they are optional to install but very useful).</li>
      <li>Panels, like system browser, main working panel and other (also explained in help files in details), they can be draged and rearranged to your liking, they also support multi-monitor setups.</li>
    </ul>
    <h4 id="CMD">3.2.Command line environment</h4>
  <p>This console command user interface supports a number of commands, for example:</p>
 <ol id="CMD-list">
   <li><code>{installpath}\ThisApp.exe /start</code> To start the background processes.</li>
   <li><code>{installpath}\ThisApp.exe /kill</code> To end the background processes.</li>
   <li><code>{installpath}\ThisApp.exe /override -[setting] [value]</code> To override default settings, for list of settings and their valid values refer to the bundeled help documentation.</li>
<li><code>{installpath}\ThisApp.exe /help</code> To view available commands and their use cases.</li>
   </ol>
   <p id="notice">Note that <code>{installpath}</code> Refers to ThisApp install path. For example if you have ThisApp installed to "C:\Program Files\ThisApp" (The default install destination) <code>{installpath}\ThisApp.exe</code> will be equal to <code>C:\Program Files\ThisApp\ThisApp.exe</code></p>
  
  </section>
<section class="main-section" id="4.Uninstalling_ThisApp">
  <header id="section4">4.Uninstalling ThisApp
  </header>
  <p>ThisApp comes with an Uninstaller, you can use any of the following ways to unistall ThisApp:</p>
  <ul>
    <li>Using Control Panel > Programs and Features > ThisApp
      Then click (Unistall/Change) and follow Onscreen Steps.</li>
    <li>Use the uninstaller found in the start menu ThisApp folder.</li>
  </ul>
  </section>
<section class="main-section" id="5.Dowlaod_Links">
  <header id="section5">5.Dowlaod Links
  </header>
  <p>You can use the this <a href=#>Link</a> to download ThisApp.</p>
  </section>
<section class="main-section" id="6.FAQs">
  <header id="section6">6.FAQs
  </header>
  <p>[WIP]</p>
  </section>
<section class="main-section" id="7.Troubleshooting_ThisApp">
  <header id="section7">7.Troubleshooting ThisApp
  </header>
  <p>[WIP]</p>
  </section>
</div>
 </main>

              
            
!

CSS

              
                body {
  background-color:RGB(255, 250, 240);
  font-family: 'Forum', cursive;
color:RGB(20, 19, 17);
}

header {
  font-size:23px;
}


code {
  background-color:RGB(235, 220, 176);
  padding:10px;
  border-radius:5px;
}

#CMD-list li {
  margin:2em;
}

#notice {
line-height:2.5em;  
}

#navbar {
background-color:RGB(217, 208, 156);
padding:1em;
margin-right:1em;
position:fixed;
  height:100%;

}

#docs {
  margin-left:420px;
}

#main-doc {
  display:flex;

    }

@media(max-width:1080px) {
  #main-doc {
  display:flex;
 flex-direction:column;
}
}

#nav-list {
  list-style:none;
  line-height:40px;
 }

#nav-list li {
  list-style:none;
  line-height:40px;
 }

#nav-list a {
color:RGB(20, 19, 17);
text-decoration:none;
 }

#nav-list a:hover {
color:RGB(20, 19, 17);
text-decoration:none;
 }
              
            
!

JS

              
                
              
            
!
999px

Console