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

              
                <div class="container-fluid">
    <div class="row">
        <div id="DesignLink" class="col-sm-4 heading-design">
            <h5 class="mb-0">01.</h5>
            <h1 class="mb-0"><strong>Design</strong></h1>
        </div>
        <div id="ProgLink" class="col-sm-4 heading-prog">
            <h5 class="mb-0">02.</h5>
            <h1 class="mb-0"><strong>Programming</strong></h1>
        </div>
        <div id="SupportLink" class="col-sm-4 heading-music">
            <h5 class="mb-0">03.</h5>
            <h1 class="mb-0"><strong>Support</strong></h1>
        </div>
    </div>
</div>

<div id="Design" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Design is Human.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/head_vector_styled.svg" alt="Line art of human head." class="imf-fluid img-custwidth">
            </div>
        <div class="col-sm-6 right-content">
            <h3><strong>Design is human. Design is making ideas real.</strong></h3>
            <p>Human centered design is at the core of product development. Empathetic communication with the client is a key part of the development process from the beginning until the product launch and support phases.</p>
            <p>Design thinking is iterative, and cyclic. Combining raw creative out with theoretical structure is the best way to deliver high quality products to clients. Listening and guiding are core communication principles between the developer and client.</p>
            <p>When developing new web sites and applications our job as a development studio is to meet client needs through empathetic research and interaction. Listening to the client is key when solving in an unfamiliar domain of expertise. Guiding must be approached as a craft of finess to bridge the gulf between possible and not possible.</p>
        </div>
    </div>
        <div class="row">
        </div>
    </div>
</div>
<div id="Programming" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Programming Delivers Solutions.</strong><br>
                <img src="http://nickfazz.me/codepen_assets/vectors/code_art.svg" alt="Binary digits and line art." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Programming Delivers Solutions. Engineering and Development Thrive on Strong Design.</strong></h3>
            <p>Using current software development technologies and proven best practices in software engineering, coupled with a formal background in computer science drives and delivers high quality web development solutions.</p>
            <p>Adaptive development methods ensure cross-device and cross-platform consistent software solutions.</p>
            <p>Understanding client levels of technical knowledge is important. We understand that some clients require to be more involved in the development process than others. Transparency is a key factor which addresses security and technical issues across domains. When working with clients from the science and engineering field open communication and input regarding technology is welcome. We are always open to learning and compormise.</p>
            </div>
        </div>
    </div>
</div>
<div id="Support" class="container-fluid tab-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 left-content">
                <strong>Support is Trust.</strong>
                <img src="http://nickfazz.me/codepen_assets/vectors/support_vector.svg" alt="Line art of key." class="imf-fluid img-custwidth">
            </div>
            <div class="col-sm-6 right-content">
                <h3><strong>Support is Trust. Product Life Cycle Beyond Development.</strong></h3>
            <p>Client support is rooted in the mindset of client empathy and need. Delivering emerging technologies to strengthen the product and both user and client experience are integral to our support role.</p>
            <p>Security features are updated to protect against current threats to protect the business, technology, and users. Best practices are communicated and implemented with the client and user in mind.</p>
            <p>Support is an ongoing role which extends the development period of the software. Scale, security and usability are key support concepts which we deliver in our product support role.</p>
            </div>
        </div>
    </div>
</div>
              
            
!

CSS

              
                .heading-design {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-design:hover {
    background-color: #ff9800;
    border-bottom: solid 1px #ff9800;
}

.heading-prog {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
    transition: color 0.5s ease;
}

.heading-prog:hover {
    color: #eeeeee;
    background-color: #212121;
    border-bottom: solid 1px #212121;
}

.heading-music {
    cursor: pointer;
    background-color: #fff;
    border-bottom: solid 1px #212121;
    padding: 2rem;
    transition: background-color 0.5s ease;
}

.heading-music:hover {
    background-color: #ff6f61;
    border-bottom: solid 1px #ff6f61;
}

.tab-content {
    display: none;
}

.left-content {
    padding-left: 4rem;
    padding-top: 4rem;
    font-size: 3.75rem;
}

.right-content {
    padding-left: 4rem;
    padding-top: 4rem;
}

.img-custwidth {
    padding-top: 4rem;
    width: 512px;
}
              
            
!

JS

              
                // Author: Nicholas Fazzolari
// Basic tab switching code in pure ES6

// TODO:   Add default tab open feature with an on off switch
//         Make the event listener assignments general

function openTab(tabName) {
    let i;
    let tabContent;
    
    tabContent = document.getElementsByClassName("tab-content");
    
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }
    
    document.getElementById(tabName).style.display = "flex";
}


// This needs to DRY'ed up so it can be used with a CMS
let designLinkEl = document.getElementById("DesignLink");
let progLinkEl = document.getElementById("ProgLink");
let musicLinkEl = document.getElementById("SupportLink");

designLinkEl.addEventListener("click", function(){openTab("Design")}, false);
progLinkEl.addEventListener("click", function(){openTab("Programming")}, false);
musicLinkEl.addEventListener("click", function(){openTab("Support")}, false);
              
            
!
999px

Console