cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

            
              <div id="top"></div>
<div id="content-wrapper" class="row">
  <div class="hide-for-small show-for-medium medium-2 columns" >
    <div id="sidebar" data-sticky-container>
      <nav class=" sticky" style="width:100%" data-sticky data-margin-top="10">
        <ul class="vertical menu">
          <li><a id="who-link" href="#who">Who is Linus Torvalds</a></li>
          <li><a id="what-link" href="#what">Why is he famous </a></li>
          <li><a id="where-link" href="#where">Where is he now</a></li>
          <li><a id="microsoft-link" href="#microsoft">What about Microsoft</a></li>
          <li><a id="awards-link" href="#awards">Awards &amp; Achievements</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="small-12 medium-10 columns">
    <header>
      <div class="small-6 columns text-left">
        <a href="//ogzcoder.com" target="_blank">ogzcoder</a>
      </div>
      <div class="small-6 columns text-right">
        <a href="//www.facebook.com/ogzcoder/" target="_blank"><i class="fa fa-facebook"></i></a>
        <a href="//twitter.com/ogzcoder" taget="_blank"><i class="fa fa-twitter"></i></a>
        <a href="//github.com/ogzcoder" target="_blank"><i class="fa fa-github"></i></a>
        <a href="//codepen.io/ogzcoder" target="_blank"><i class="fa fa-codepen"></i></a>
        <a href="//stackoverflow.com/users/5831695/ogzcoder" target="_blank"><i class="fa fa-stack-overflow"></i></a>
      </div>
    </header>
    <div id="content" class="content">
      <div class="hero">
        <img src="//projects.ogzcoder.com/img/lt/header-bg.jpg" alt="" />
        <div id="visible-button" class="hero-text">
          <h2><i class="fa fa-quote-left"></i> My name is Linus,<br> and I am your God <i class="fa fa-quote-right"></i></h2>
          <cite class="lead">Linus Torvalds</cite>
        </div>
      </div>
      <div class="row">
        <div class="small-12 columns">
          <section>
            <h3 id="who">Who is Linus Torvalds</h3>
            <p>Torvalds was born in 1969 and grew up in Helsinki. When he was ten years old he began to dabble in computer programming
              on his grandfather's Commodore VIC-20. Once in college Torvalds considered himself such a skilled and experienced
              computer programmer that he began the insane task of developing an operating system customizable to meet his
              own personal needs and ideas. He was less than satisfied with Microsoft's MS-DOS that shipped with his first
              foray into the world of personal computers.
            </p>
            <blockquote>
              <i class="fa fa-quote-left"></i> I'd like to say that I knew this would happen, that it's all part of the plan
              for world domination.
              <cite>Linus Torvalds</cite>
            </blockquote>
          </section>
          <section>
            <h3 id="what">What is Linus Torvalds Known For</h3>
            <p>Linus Torvalds is the creative genius behind the Linux kernel operating system. He wrote it as a part of his
              Master’s thesis titled, "Linux: A Portable Operating System" at the young age of 21. The Linux kernal would
              one day be the chosen operating system that powers approximately 12% of the worlds computers and an even higher
              percentage of the servers currently in use across the internet. Upon the Linux platform, the popular Android
              operating system found on the majority of smart phones and tablets, as well as ChromeOS from Google, have been
              built. He was also greatly responsible for developing the GIT version control system used by many programmers
              to develop and track issues with new and old projects alike.
            </p>
            <blockquote>
              <i class="fa fa-quote-left"></i> Talk is cheap. Show me the code.
              <cite>Linus Torvalds</cite>
            </blockquote>
          </section>
          <section>
            <h3 id="where">Where is Linus Torvalds and Linux Now</h3>
            <p>I think the best answer to this question comes from a comment made by Tovalds himself, "I was never a 'big thinker'.
              One of my philosophies in Linux has always been to not worry about the future too much, but make sure that
              we make the best of what we have now - together with keeping our options open for the future and not digging
              us into a hole.</p>
            <p> And I'm not a big believer in revolutions. What people call revolutions in technology were more of a shift in
              perception - from big machines to PC's ,the technology just evolved, and fairly slowly at that, and from PC's
              to the internet. The next "revolution" is going to be the same thing - not about the technology itself being
              revolutionary, but a shift in how you look at it and how you use it."
            </p>
            <blockquote>
              <i class="fa fa-quote-left"></i> Those that can, do. Those that can't, complain.
              <cite>Linus Torvalds</cite>
            </blockquote>
          </section>
          <section>
            <h3 id="microsoft">What About Microsoft</h3>
            <p>Windows certainly hasn't disappeared, but it's no longer the only, "gotta have it" platform that it once was.
              Even Microsoft is venturing into the world of linux in the developer features of it's latest OS Windows 10,
              where the Windows Subsytem for Linux can be found running Linux applications on the Windows platform. Microsoft
              has also recently become a part of the Linux Foundation. And in the end has developed the latest .NET libraries,
              known as .NET Core, for developers wanting to use programming languages such as Microsoft's C# to build applications
              for the Linux desktop as well. A little fun fact in regards to these events can be found in a 1998 (19 Years
              Ago) quote from Linus Torvalds himself.
            </p>
            <blockquote>
              <i class="fa fa-quote-left"></i> If Microsoft ever does applications for Linux it means I've won.
              <cite>Linus Torvalds</cite>
            </blockquote>
          </section>
          <section class="awards">
            <h3 id="awards">Awards &amp; Achievements</h3>
            <table class="awards-table">
              <tr>
                <td align="top">1991</td>
                <td width="200">Linux is Born</td>
                <td align="top">The original source code for the Linux kernel was released to the public.</td>
              </tr>
              <tr>
                <td align="top">1994</td>
                <td align="top">Linux 1.0 Hits the Mainstream</td>
                <td align="top">Linux is now a full fledged operating system.</td>
              </tr>
              <tr>
                <td align="top">1995</td>
                <td align="top">Running Linux on AlphaStation</td>
                <td align="top">In the period 1994–1999 Torvalds developed specialized kernel versions of Linux for early AlphaServer systems.
                </td>
              </tr>
              <tr>
                <td align="top">1996</td>
                <td align="top">The Asteroid</td>
                <td align="top">The asteroid 9793 Torvalds was named after the Linux king himself.</td>
              </tr>
              <tr>
                <td align="top">1998</td>
                <td align="top">The EFF Pioneer Award</td>
                <td align="top">The Electronic Frontier Foundation awards Tovald with the award for people who have made significant contributions
                  to the empowerment of individuals in using computers.</td>
              </tr>
              <tr>
                <td align="top">2000</td>
                <td align="top">The Lovelace Medal</td>
                <td align="top">The Lovelace Medal is awarded to those who have advanced information systems or clarified our understanding
                  regarding these technologies.</td>
              </tr>
              <tr>
                <td align="top">2001</td>
                <td align="top">The Takeda Award</td>
                <td align="top">The Takeda Award was given to those who encouraged social/economic well-being.</td>
              </tr>
              <tr>
                <td align="top">2005</td>
                <td align="top">The Vollum Award</td>
                <td align="top">The Vollum Award was presented to those with distinguished accomplishment in science and technology.</td>
              </tr>
              <tr>
                <td align="top">2008</td>
                <td align="top">The Hall of Fellows</td>
                <td align="top">Tovald was inducted into the Hall of Fellows of the Computer History Museum in Mountain View, California
                  for the creation of the Linux kernel and the management of open source development of the widely used Linux
                  operating system.</td>
              </tr>
              <tr>
                <td align="top">2010</td>
                <td align="top">The C&amp;C Prize</td>
                <td align="top">He was awarded the C&amp;C Prize by the NEC Corporation for his contributions to the advancement of the information
                  technology industry and the improvement of our lives.</td>
              </tr>
              <tr>
                <td align="top">2012</td>
                <td align="top">Millenium Technology Prize</td>
                <td align="top">Torvalds was declared one of two winners of that year's Millennium Technology Prize, widely described as
                  technology's equivalent of the Nobel Prize.</td>
              </tr>
              <tr>
                <td align="top">2012</td>
                <td align="top">The Internet Hall of Fame</td>
                <td align="top">At the Internet Society's Global INET conference in Switzerland, Tovalds was inducted for his work in computer
                  innovation.
                </td>
              </tr>
              <tr>
                <td align="top">2014</td>
                <td align="top">IEEE Computer Pioneer Award</td>
                <td align="top">The Institute of Electrical and Electronics Engineers named Torvalds as the 2014 recipient of the IEEE Computer
                  Society's Computer Pioneer Award for his contributions to the concepts and advancements in the field of
                  computers as a whole .</td>
              </tr>
            </table>
          </section>
          <section id="links">
            <div class="row text-center">
              <div class="small-12 columns">
                <h5>Linus Torvalds Related Links</h5>
              </div>
              <div class="small-12 columns">
                <ul class="menu">
                  <div class="small-12 medium-4 columns">
                    <li><a href="//www.wired.com/2012/03/mr-linux/" target="_blank">King of Geeks</a></li>
                  </div>
                  <div class="small-12 medium-4 columns">
                    <li><a href="//www.ted.com/talks/linus_torvalds_the_mind_behind_linux" target="_blank">@Ted Talks</a></li>
                  </div>
                  <div class="small-12 medium-4 columns">
                    <li><a href="//en.wikipedia.org/wiki/Linus_Torvalds" target="_blank">On Wikipedia</a></li>
                  </div>
                </ul>
              </div>
            </div>
          </section>
          <footer id="footer">
            <div class="small-12 columns">
            </div>
            <div class="copy">
              <i class="fa fa-copyright"></i> 2017 | Written &amp; Coded by Joshua Riddle (aka
              <a href="//ogzcoder.com" target="_blank">OGZCoder</a>) |
              <a href="//www.facebook.com/ogzcoder/" target="_blank"><i class="fa fa-facebook"></i></a> |
              <a href="//twitter.com/ogzcoder" taget="_blank"><i class="fa fa-twitter"></i></a> |
              <a href="//github.com/ogzcoder" target="_blank"><i class="fa fa-github"></i></a> |
              <a href="//codepen.io/ogzcoder" target="_blank"><i class="fa fa-codepen"></i></a> |
              <a href="//stackoverflow.com/users/5831695/ogzcoder" target="_blank"><i class="fa fa-stack-overflow"></i></a>              | All Rights Reserved
            </div>
          </footer>
        </div>
      </div>
    </div>
  </div>
</div>
<a href="#top" id="top-button" class="button"><span class="fa fa-angle-double-up"></span></a>
            
          
!
            
              // Fonts
@import url('https://fonts.googleapis.com/css?family=Roboto|Anonymous+Pro:400,700');

// Colors 
$white: #d5d5d5;
$black: #0f0f0f;
$charcoal: #1f1f1f;
$blue: #0f3248;

// General Style
body {
    background: $black;
    color: $white;
    font-family: 'roboto', arial, sans-serif;
}

h1,
h2,
h4,
h5,
h6 {
    font-family: 'anonymous pro', 'roboto', arial, sans-serif;
    font-weight: 700;
}

h3 {
    font-size: 33px;
    font-family: 'anonymous pro', 'roboto', arial, sans-serif;
    font-weight: 700;
    @media screen and (max-width: 39.9375em) {
        font-size: 24px;
    }
}

a {
    color: lighten($blue, 12%);
    transition: all .2s ease;
    &:hover {
        color: lighten($blue, 20%);
    }
}

a.button {
    background: lighten($blue, 12%);
    &:hover {
        background: lighten($blue, 20%);
    }
}

#top-button {
    opacity: 0;
    position: fixed;
    bottom: 3px;
    right: 24px;
    transition: opacity .4s ease, background .2s ease;
    &.visible {
        display: block;
        opacity: 1;
    }
}

blockquote {
    color: darken(silver, 15%);
    font-size: 22px;
    margin-top: 40px;
    background: #0C0C0C;
    padding-top: 24px;
    padding-bottom: 24px;
    border-left: 1px solid $blue;
    @media screen and (max-width: 39.9375em) {
        font-size: 16px;
    }
}

cite {
    color: darken(gainsboro, 30%);
}

// Sidebar Style
#sidebar {
    padding-right: 10px;
    font-size: 14px;
    li>a {
        padding-left: 3px;
        padding-right: 3px;
        &.button {
            text-align: left;
            padding-left: 3px;
            padding-right: 3px;
        }
    }
}

//Header Style
header {
    div.columns {
        padding: 6px 0;
        i {
            display: inline-block;
            margin-left: 6px;
        }
    }
}

// General Content Style
.content {
    div.hero {
        position: relative;
        div.hero-text {
            position: absolute;
            top: 50%;
            left: 30px;
            transform: translateY(-50%);
            h2 {
                color: $white;
                i {
                    display: inline-block;
                    font-size: 18px;
                    vertical-align: top;
                }
            }
        }
    }
}

section {
    padding-top: 8px;
    padding-bottom: 12px;
    h3,
    h5 {
        margin: 12px 0 0;
        color: $blue;
        margin-top: 0;
        margin-bottom: 24px;
    }
    &:first-child {
        h3 {
            margin-top: 24px;
        }
    }
}

// Table Style 
table.awards-table {
    background: transparent;
    display: table;
    border-collapse: separate;
    border-spacing: 4p;
    border: $black;
    border-left: none;
    margin: 12px 0 0;
    padding-bottom: 0;
    tr {
        th {
            background: $black;
        }
        td {
            background: transparent;
            border: none;
        }
        &:nth-child(odd) {
            background: #0C0C0C;
        }
        &:nth-child(even) {
            background: $black;
        }
    }
    @media screen and (max-width: 39.9375em) {
        font-size: 12px;
    }
}

table,
th,
td {
    border: none;
}

section#links {
    margin-bottom: 24px;
    li>a {
        padding-left: 0;
        padding-top: 0;
        padding-right: 35px;
    }
}

// Footer Style
footer {
    div.copy {
        font-size: 12px;
        padding: 10px;
        text-align: center;
        background: rgba(black, .2);
        border: 1px solid rgba(black, .3);
        i {
            display: inline-block;
            margin: 0 4px;
        }
    }
}

header {
  position:relative;
  z-index:10000;
}

.hero {
  z-index:1000;
}
            
          
!
            
              // Init controller
var controller = new ScrollMagic.Controller();

// Change behavior of controller
// to animate scroll instead of jump
controller.scrollTo(function (target) {

    TweenMax.to(window, 0.5, {
        scrollTo: {
            y: target - 200, // scroll position of the target along y axis
            autoKill: true // allows user to kill scroll action smoothly
        },
        ease: Cubic.easeInOut
    });

});

//  Bind scroll to anchor links
$('a[href^="#"').on("click", function (e) {
    var id = $(this).attr("href");
    if ($(id).length > 0) {
        e.preventDefault();

        // trigger scroll
        controller.scrollTo(id);

        // If supported by the browser we can also update the URL
        if (window.history && window.history.pushState) {
            history.pushState("", document.title, id);
        }
    }

});

//  Bind scroll to Back to top
$('#top-button').on("click", function (e) {
    console.log("Top Clicked");
    e.preventDefault();

    // trigger scroll
    controller.scrollTo("#top");

    // If supported by the browser we can also update the URL
    if (window.history && window.history.pushState) {
        history.pushState("", document.title, "#top");
    }

});

var classes = new ScrollMagic.Controller();

new ScrollMagic.Scene({
        triggerElement: "#visible-button"
    })
    .triggerHook(.1)
    .setClassToggle("#top-button", "visible") // add class toggle
    //.addIndicators() // add indicators (requires plugin)
    .addTo(classes);

new ScrollMagic.Scene({
        triggerElement: "#who"
    })
    .duration(348)
    .setClassToggle("#who-link", "button") // add class toggle
    //.addIndicators() // add indicators (requires plugin)
    .addTo(classes);

new ScrollMagic.Scene({
        triggerElement: "#what"
    })
    .duration(398)
    .setClassToggle("#what-link", "button") // add class toggle
    //.addIndicators() // add indicators (requires plugin)
    .addTo(classes);

new ScrollMagic.Scene({
        triggerElement: "#where"
    })
    .duration(415)
    .setClassToggle("#where-link", "button") // add class toggle
    //.addIndicators() // add indicators (requires plugin)
    .addTo(classes);

new ScrollMagic.Scene({
        triggerElement: "#microsoft"
    })
    .duration(400)
    .setClassToggle("#microsoft-link", "button") // add class toggle
    //.addIndicators() // add indicators (requires plugin)
    .addTo(classes);

new ScrollMagic.Scene({
        triggerElement: "#awards"
    })
    .setClassToggle("#awards-link", "button") // add class toggle
    //.addIndicators() // add indicators (requires plugin)
    .addTo(classes);

    $(document).foundation();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console