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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                
<body>
	<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
	<div class="wrapper">
		<div class="sidebar">
			<nav class="links" id="navbar">
				<div class="title">
					<header> Git Documentation </header>
				</div>
				<ul>
					<li>
						<a class="nav-link" href="#Introduction">Introduction</a>
						<li>
							<a class="nav-link" href="#History_of_Git">History of Git</a>
						</li>
						<li>
							<a class="nav-link" href="#Git_Basics">Git Basics</a>
						</li>
						<li>
							<a class="nav-link" href="#Installing_Git">Installing Git</a>
						</li>
						<li>
							<a class="nav-link" href="#First_Time_Git_Setup">First Time Git Setup</a>
						</li>
						<li>
							<a class="nav-link" href="#Getting_Help">Getting Help</a>
						</li>
						<li>
							<a class="nav-link" href="#Summary">Summary</a>
						</li>
				</ul>
			</nav>
		</div>
		<div class="page-conent">
			<main id="main-doc">
				<section class="main-section" id="Introduction">
					<header>Introduction</header>
					<p>What is “version control”, and why should you care? Version control is a system that records changes to a file or set
						of files over time so that you can recall specific versions later. For the examples in this book, you will use software
						source code as the files being version controlled, though in reality you can do this with nearly any type of file on
						a computer.</p>
					<p>If you are a graphic or web designer and want to keep every version of an image or layout (whichyou would most certainly
						want to), a Version Control System (VCS) is a very wise thing to use. Itallows you to revert selected files back to
						a previous state, revert the entire project back to aprevious state, compare changes over time, see who last modified
						something that might be causinga problem, who introduced an issue and when, and more. Using a VCS also generally means
						that ifyou screw things up or lose files, you can easily recover. In addition, you get all this for very littleoverhead.</p>
					<h3>Local Version Control Systems </h3>
					<p>Many people’s version-control method of choice is to copy files into another directory (perhaps a time-stamped directory,
						if they’re clever). This approach is very common because it is so simple, butit is also incredibly error prone. It
						is easy to forget which directory you’re in and accidentally write to the wrong file or copy over files you don’t mean
						to.To deal with this issue, programmers long ago developed local VCSs that had a simple database that kept all the
						changes to files under revision control.</p>
				</section>

				<section class="main-section" id="History_of_Git">
					<header>History of Git</header>
					<p>As with many great things in life, Git began with a bit of creative destruction and fiery controversy.The Linux kernel
						is an open source software project of fairly large scope. For most of the lifetime of the Linux kernel maintenance
						(1991–2002), changes to the software were passed around as patches and archived files. In 2002, the Linux kernel project
						began using a proprietary DVCS called BitKeeper. In 2005, the relationship between the community that developed the
						Linux kernel and the commercial company that developed BitKeeper broke down, and the tool’s free-of-charge status was
						revoked. This prompted the Linux development community (and in particular Linus Torvalds, the creator of Linux) to
						develop their own tool based on some of the lessons they learned while using BitKeeper. Some of the goals of the new
						system were as follows:</p>
					<ul>
						<li> Speed</li>
						<li> Simple design</li>
						<li> Strong support for non-linear development (thousands of parallel branches)</li>
						<li> Fully distributed</li>
						<li> Able to handle large projects like the Linux kernel efficiently (speed and data size)</li>
					</ul>
					<p>Since its birth in 2005, Git has evolved and matured to be easy to use and yet retain these initial qualities. It’s
						amazingly fast, it’s very efficient with large projects, and it has an incredible branching system for non-linear development.</p>
				</section>

				<section class="main-section" id="Git_Basics">
					<header>Git Basics</header>
					<p>So, what is Git in a nutshell? This is an important section to absorb, because if you understand what Git is and the
						fundamentals of how it works, then using Git effectively will probably be much easie for you. As you learn Git, try
						to clear your mind of the things you may know about other VCSs, such as CVS, Subversion or Perforce — doing so will
						help you avoid subtle confusion when using the tool. Even though Git’s user interface is fairly similar to these other
						VCSs, Git stores and thinks about information in a very different way, and understanding these differences will help
						you avoid becoming confused while using it.</p>
				</section>
				<section class="main-section" id="Installing_Git">
					<header>Installing Git</header>
					<p>Before you start using Git, you have to make it available on your computer. Even if it’s already installed, it’s probably
						a good idea to update to the latest version. You can either install it as a package or via another installer, or download
						the source code and compile it yourself. This book was written using Git version 2.0.0. Though most of the commands
						we use should work even in ancient versions of Git, some of them might not or might act slightly differently if you’re
						using an older version. Since Git is quite excellent at preserving backwards compatibility, any version after 2.0 should
						work just fine.</p>
					<h3>Installing on Linux </h3>
					<p>If you want to install the basic Git tools on Linux via a binary installer, you can generally do so through the package
						management tool that comes with your distribution. If you’re on Fedora (or any closely-related RPM-based distribution,
						such as RHEL or CentOS), you can use dnf:<br>
						<pre>$ sudo dnf install git-all</pre><br> If you’re on a Debian-based distribution, such as Ubuntu, try apt:<br>
						<pre>$ sudo apt install git-all</pre><br> For more options, there are instructions for installing on several different Unix distributions on the Git website,
						at
						<a href="http://git-scm.com/download/linux" target="_blank">linux</a>.</p>

					<h3>Installing on Mac </h3>
					<p>There are several ways to install Git on a Mac. The easiest is probably to install the Xcode CommandLine Tools. On Mavericks
						(10.9) or above you can do this simply by trying to run git from theTerminal the very first time. <br>
						<pre>$ git --version</pre><br> If you don’t have it installed already, it will prompt you to install it.If you want a more up to date version,
						you can also install it via a binary installer. A macOS Gitinstaller is maintained and available for download at the
						Git website, at
						<a href="http://git-scm.com/download/mac" target="_blank">git</a>. </p>
					<h3> Installing on Windows </h3>
					<p>There are also a few ways to install Git on Windows. The most official build is available fordownload on the Git website.
						Just go to
						<a href="http://git-scm.com/download/win" target="_blank">git</a> the download willstart automatically. Note that this is a project called Git for Windows, which is separate
						from Git itself; for more information on it, go to
						<a href="https://git-for-windows.github.io/" target="_blank">git</a>.</p>

				</section>
				<section class="main-section" id="First_Time_Git_Setup">
					<header>First Time Git Setup</header>
					<p>Now that you have Git on your system, you’ll want to do a few things to customize your Gitenvironment. You should have
						to do these things only once on any given computer; they’ll stickaround between upgrades. You can also change them
						at any time by running through thecommands again.</p>
					<p>Git comes with a tool called <code>git config</code> that lets you get and set configuration variables that control
						all aspects of how Git looks and operates. These variables can be stored in three different places: </p>
					<ol>
						<li><code>/etc/gitconfig</code> file: Contains values applied to every user on the system and all theirrepositories. If
							you pass the option --system to git config, it reads and writes from this filespecifically. (Because this is a system
							configuration file, you would need administrative orsuperuser privilege to make changes to it.)</li>
						<li><code>~/.gitconfig </code> or <code class="red">~/.config/git/config</code> file: Values specific personally to you,
							the user. You canmake Git read and write to this file specifically by passing the --global option, and this affectsall
							of the repositories you work with on your system.</li>
						<li><code>config</code> file in the Git directory (that is, <code class="red">.git/config</code>) of whatever repository
							you’re currentlyusing: Specific to that single repository. You can force Git to read from and write to this file withthe
							--local option, but that is in fact the default. (Unsurprisingly, you need to be locatedsomewhere in a Git repository
							for this option to work properly.)</li>
					</ol>
					<p>Each leEach level overrides values in the previous level, so values in <code>.git/config</code> trump those in <code>/etc/gitconfig</code></p>.
					<p>On Windows systems, Git looks for the <code>.gitconfig</code> file in the <code>$HOME</code> directory <code>(C:\Users\$USER</code>						for most people). It also still looks for <code>/etc/gitconfig</code>, although it&rsquo;s relative to the MSys root,
						which is wherever you decide to install Git on your Windows system when you run the installer. If you are using version
						2.x or later of Git for Windows, there is also a system-level config file at <code>C:\Documents and Settings\All Users\Application Data\Git\config</code>on
						Windows XP, and in<code>C:\ProgramData\Git\config</code> on Windows Vista and newer. This config file can only be changed
						by <code>git config -f &lt;file&gt; </code> an admin.</p>
					<h3>Your Identity</h3>
					<p>The first thing you should do when you install Git is to set your user name and email address. This<br />is important
						because every Git commit uses this information, and it&rsquo;s immutably baked into the<br />commits you start creating:<br
						/>
						<pre>$ git config --global user.name "John Doe"</pre><br />
						<pre>$ git config --global user.email johndoe@example.com</pre><br /> Again, you need to do this only once if you pass the <code>--global </code>, because then Git will always<br
						/>use that information for anything you do on that system. If you want to override this with a<br />different name
						or email address for specific projects, you can run the command without the<br><code>--global</code> option when you&rsquo;re
						in that project.
						<p>Many of the GUI tools will help you do this when you first run them.</p>
				</section>
				<section class="main-section" id="Getting_Help">
					<header>Getting Help</header>
					<p>If you ever need help while using Git, there are two equivalent ways to get the comprehensive<br />manual page (manpage)
						help for any of the Git commands:<br />
						<pre>$ git help &lt;verb&gt;<br />$ man git-&lt;verb&gt;</pre><br />For example, you can get the manpage help for the git config command by running<br />
						<pre>$ git help config</pre><br />These commands are nice because you can access them anywhere, even offline. If the manpages<br />and this book
						aren&rsquo;t enough and you need in-person help, you can try the <code>#gi</code> or <code>#github</code> channel<br
						/>on the Freenode IRC server (irc.freenode.net). These channels are regularly filled with hundreds of<br />people who
						are all very knowledgeable about Git and are often willing to help.</p>
				</section>
				<section class="main-section" id="Summary">
					<header>Summary</header>
					<p>You should have a basic understanding of what Git is and how it&rsquo;s different from any centralized<br />version
						control systems you may have been using previously. You should also now have a working<br />version of Git on your
						system that&rsquo;s set up with your personal identity. It&rsquo;s now time to learn some<br />Git basics.</p>
					<p> source:
						<a href="https://git-scm.com/doc" target="_blank">Git Documentation</a>
					</p>
				</section>
			</main>
		</div>
	</div>
</body>

              
            
!

CSS

              
                /* entire page */
.wrapper {
  display: flex;
  align-items: stretch;
}
@media only screen and (max-width: 600px) {
    .wrapper {
      display: block; 
  }
}

/* start sidebar */
.sidebar {
  background-color: #7386D5;
  width: 250px;
  text-align: center;
}
@media only screen and (max-width: 600px) {
    .sidebar {
      width: 100%;
      max-height: 150px;
      overflow: scroll;
  
     
}
}
.sidebar nav{
  margin-top: 50%;
  background-color: rgb(146, 163, 235);
  padding: 30px;
  font-size: 20px;
  position: sticky;
  top: 0;
  z-index: 1020;
}
@media only screen and (max-width: 600px) {
    .sidebar nav {
      position: relative;
      bottom: 75px;
      left: 35px;
      width: 70%;
      margin-top: 100px;
      top: initial;
      
}
}
.sidebar .title{
  margin-top: 30px;
  text-align: center;
  color: #fff;
  font-size: 24px;
} 
.sidebar nav ul li{
    list-style-type: none;
    padding: 5px;
    color: #fff;
}
.sidebar nav ul li :hover{
  background-color: #FFF;
    color: #7386D5;
}
.sidebar nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border: 1px solid #FFF;
}
/* end sidebar */
/* start page content*/
.page-conent{
  overflow: auto;
  width: 80%;
  background-color:  #d6eaf8;
  margin: 15px;
padding: 15px;
;
}
.page-conent header{
  color: #7c795d; 
  font-family: 'Trocchi', serif; 
  font-size: 45px; 
  font-weight: normal; 
  line-height: 48px; 
  margin: 0;

}
.page-conent p {
  color: #4c4a37; 
  font-family: 'Source Sans Pro', sans-serif; 
  font-size: 18px; 
  line-height: 32px; 
  margin: 0 0 24px; 
  text-indent: 25px;
}
.page-conent pre{
background: #212121;
color: #eceff1;
font: 14px/20px Roboto Mono,monospace;
margin: 16px 0;
overflow-x: auto;
padding: 8px;
position: relative;
}
.page-conent a { color: #ff9900;  
text-decoration: none; 
}
.page-conent a :hover{
  color: #ffcc66 
}
.page-conent code{
  background-color: #fff;
  color: #f00;
  font-size: 16px;
  font-style: italic;
}
/* end page content*/

/* scroll top button*/
 
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}



              
            
!

JS

              
                // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}



              
            
!
999px

Console