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="warning" class="visible">
    <div id="inner-block" class="center-vertical">
        <p>This site is now live and maintained at <i><a href="https://tommoore.me.uk" target="_blank">tommoore.me.uk</a></i></p>
    </div>
</div>

<div class="wrapper">

    <!--NAVBAR-->
    <div id="navbar" class="navbar-fixed-top">
        <div class="content expand-vertical text-uppercase">
            <div class="center-vertical">
                <div class="pull-left">
                    <a id="logo" href="https://tommoore.me.uk" target="_blank">Tom Moore</a>
                </div>
                <div class="pull-right">
                    <div id="nav-menu-toggle">
                        <div class="vertical-bar"></div>
                        <div class="horizontal-bar"></div>
                    </div>
                </div>
                <div class="clear-collapsed"></div>
                <nav id="nav-menu-collapsible" class="">
                    <ul class="list-unstyled">
                        <li><a href="#page-home" class="active">Home</a></li>
                        <li><a href="#page-about">About</a></li>
                        <li><a href="#page-portfolio">Portfolio</a></li>
                        <li><a href="#page-contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="clear-floats"></div>
        </div>
    </div>

    <!--PAGE-HOME-->
    <div id="page-home" class="page page-full-height bkgr-mid-blue">
        <div class="content expand-vertical text-off-white">
            <header id="site-header" class="center-vertical">
                <h1 class="linowrite">tom<br><span class="text-light-blue">moore</span></h1>
            </header>
            <ul class="social-links list-unstyled center-vertical text-right text-align-vertical">
                <li>
                    <a href="https://www.freecodecamp.com/tomchkk" target="_blank">freeCodeCamp <i class="fa fa-fire"></i></a>
                </li>
                <li>
                    <a href="https://github.com/tomchkk" target="_blank">GitHub <i class="fa fa-github"></i></a>
                </li>
                <li>
                    <a href="https://twitter.com/tomchkk" target="_blank">Twitter <i class="fa fa-twitter"></i></a>
                </li>
            </ul>
        </div>
        <!--DOWN-ARROW-->
        <div id="arrow-container-outer" class="expand-horizontal">
            <div id="arrow-container-inner" class="center-horizontal">
                <a href="#page-about" class="peek-a-boo">
                    <div class="expand-horizontal expand-vertical">
                        <div id="arrow" class="center-horizontal">
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>

    <!--PAGE-ABOUT-->
    <div id="page-about" class="page page-flex-height bkgr-off-white">
        <div class="content">
            <header>
                <h1>About Me</h1>
            </header>
            <h2 class="strapline">Programmer. Tinkerer. Web developer.</h2>
            <div class="section group">
                <div class="col span_1_of_2">
                    <img src="https://tommoore.me.uk/img/profile-pic.jpg" alt="Profile picture of Tom Moore" class="img-responsive" />
                </div>
                <div class="col span_1_of_2">
                    <h3>Bio</h3>
                    <p>
                        Tom Moore is an up-and-coming full stack web developer, a lover of clean, lean, readable code and simple, elegant design. A voracious learner, he is currently enrolled in <a href="https://www.freecodecamp.com/">freeCodeCamp</a>,
                        updating his skills and broadening his horizons to the world of Node.js and MongoDB.
                    </p>
                    <p>
                        As an aspirational guitarist, when he’s not coding or tinkering, Tom might be found patiently transcribing his favourite songs, or writing his own.
                    </p>
                    <h3>Skills</h3>
                    <p>
                        Bootstrap | CCS3 | Git | HTML5 | JavaScript | jQuery | SQL | PHP | Symfony 2
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!--PAGE-PORTFOLIO-->
    <div id="page-portfolio" class="page page-flex-height bkgr-off-white">
        <div class="content">
            <header>
                <h1>Portfolio</h1>
            </header>
            <h2 class="strapline">Some of my recent projects</h2>

            <!-- GROUP 1 -->
            <div class="section group">

                <div class="col span_1_of_3">
                    <div class="project">
                        <h3>Project Title</h3>
                        <a href="#" target="_blank">
                            <div class="overlay">
                                <i class="fa fa-external-link fa-2x center-vertical"></i>
                            </div>
                            <img src="http://placehold.it/800x600/212121" alt="Link to portfolio item on codepen.io" class="img-responsive" />
                        </a>
                        <p>Some text about the project.</p>
                    </div>
                </div>

                <div class="col span_1_of_3">
                    <div class="project">
                        <h3>Project Title</h3>
                        <a href="#" target="_blank">
                            <div class="overlay">
                                <i class="fa fa-external-link fa-2x center-vertical"></i>
                            </div>
                            <img src="http://placehold.it/800x600/212121" alt="Link to portfolio item on codepen.io" class="img-responsive" />
                        </a>
                        <p>Some text about the project.</p>
                    </div>
                </div>

                <div class="col span_1_of_3">
                    <div class="project">
                        <h3>Project Title</h3>
                        <a href="#" target="_blank">
                            <div class="overlay">
                                <i class="fa fa-external-link fa-2x center-vertical"></i>
                            </div>
                            <img src="http://placehold.it/800x600/212121" alt="Link to portfolio item on codepen.io" class="img-responsive" />
                        </a>
                        <p>Some text about the project.</p>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!--PAGE-CONTACT-->
    <div id="page-contact" class="page page-flex-height bkgr-off-white">
        <div class="content">
            <header>
                <h1>Contact</h1>
            </header>
            <h2 class="strapline">Connect with me!</h2>
            <ul class="social-links list-unstyled list-inline">
                <li><a href="https://www.freecodecamp.com/tomchkk" target="_blank"><i class="fa fa-fire fa-lg"></i><span> freeCodeCamp</span></a></li>
                <li><a href="https://github.com/tomchkk" target="_blank"><i class="fa fa-github fa-lg"></i><span> GitHub</span></a></li>
                <li><a href="https://twitter.com/tomchkk" target="_blank"><i class="fa fa-twitter fa-lg"></i><span> Twitter</span></a></li>
            </ul>
            <div class="section group">
                <div class="col span_1_of_2">
                    <img src="https://tommoore.me.uk/img/bridge.jpg" alt="The main span of the Humber Bridge" class="img-responsive" />
                </div>
                <div class="col span_1_of_2">
                    <p>If you'd like to find out more about any of my projects, if you'd like to collaborate, or if you just want to say "hi!", then <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#99;&#111;&#110;&#116;&#97;&#99;&#116;&#64;&#116;&#111;&#109;&#109;&#111;&#111;&#114;&#101;&#46;&#109;&#101;&#46;&#117;&#107;&#63;&#115;&#117;&#98;&#106;&#101;&#99;&#116;&#61;&#67;&#111;&#110;&#116;&#97;&#99;&#116;&#37;&#50;&#48;&#102;&#114;&#111;&#109;&#37;&#50;&#48;&#119;&#101;&#98;&#115;&#105;&#116;&#101;&#37;&#50;&#48;&#8211;&#37;&#50;&#48;&#116;&#111;&#109;&#109;&#111;&#111;&#114;&#101;&#46;&#109;&#101;&#46;&#117;&#107;"
                            target="_top">email me</a>, or find me online.</p>
                </div>
            </div>
        </div>
        <div id="page-footer" class="bkgr-lead expand-horizontal">
            <footer class="center-vertical">
                <div class="content">
                    <p class="text-off-white text-center">
                        Copyright © Tom Moore 2015. All Rights Reserved
                    </p>
                </div>
            </footer>
        </div>

    </div>

</div>
            
          
!
            
              /* # FONTS */

@font-face {
    font-family: linowrite;
    font-style: normal;
    src: url("https://tommoore.me.uk/fonts/linowrite/linowrite.ttf");
}

.linowrite {
    font-family: linowrite;
}


/* # COLOURS */

.bkgr-light-blue {
    background-color: #94b6f5;
}

.bkgr-mid-blue {
    background-color: #3c81ff;
}

.bkgr-lead {
    background-color: #212121;
}

.bkgr-off-white {
    background-color: #ebebeb;
}

.text-light-blue {
    color: #94b6f5;
}

.text-lead {
    color: #212121;
}

.text-mid-blue {
    color: #3c81ff;
}

.text-off-white {
    color: #ebebeb;
}


/* # CLASS STYLE */

.blur {
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.center-horizontal {
    margin: 0 auto;
}

.center-vertical {
    position: relative;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.clear-floats {
    clear: both;
}

.content {
    margin: 0 5% 0 5%;
}

.expand-horizontal {
    width: 100%;
}

.expand-vertical {
    height: 100%;
}

.hide {
    display: none;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}

.page p a {
    color: #3c81ff;
}

.page p a:hover {
    text-decoration: underline;
}

.page-full-height {
    height: 100%;
}

.page-flex-height {
    min-height: 100%;
    padding-bottom: 10px;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

.row:after {
    clear: both;
}

.text-align-vertical {
    vertical-align: middle;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-uppercase {
    text-transform: uppercase;
}


/* # ELEMENT STYLE */

html,
body,
.wrapper {
    height: 100%;
    font-family: 'Gill Sans';
    font-weight: 100;
    font-size: 115%;
    color: #212121;
}

a {
    color: inherit;
    text-decoration: none;
}

h2.strapline {
    color: #5e5e5e;
    font-style: italic;
    font-size: 115%;
    text-align: center;
    font-weight: 600;
}

h3 {
    margin-bottom: 5px;
}

h3 + p {
    margin-top: 0px;
}

ul {
    margin: 0;
}


/* # RESPONSIVE COLUMNS */


/* ## SECTIONS  */

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}


/* ##COLUMN SETUP  */

.col {
    display: block;
    float: left;
    margin: 1% 0 1% 0%;
}

#page-about .col:first-child,
#page-portfolio .col:first-child,
#page-contact .col:first-child {
    margin-left: 0;
}


/* ## GROUPING  */

.group:before,
.group:after {
    content: "";
    display: table;
}

.group:after {
    clear: both;
}

.group {
    zoom: 1;
    /* For IE 6/7 */
}

.span_1_of_2,
.span_1_of_3 {
    width: 100%;
}

#warning {
    position: fixed;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
    border: 1px solid rgba(60,129,255, 0.25);
    background-color: rgba(148,182,245, 0.75);
    color: white;
    text-align: center;
    z-index: 100;
}

#warning a:hover {
    color: #94b6f5;
    text-decoration: underline;
}

#warning #inner-block {
    margin: 0 15px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.75);
}

/* # PAGE STYLES: */


/* ## COMMON */

#page-about h1,
#page-portfolio h1,
#page-contact h1 {
    margin: 0;
    padding-top: 65px;
    font-size: 115%;
    text-transform: uppercase;
    color: #3c81ff;
    text-align: center;
}

#page-about h3,
#page-portfolio h3,
#page-contact h3 {
    font-weight: 400;
}


/* ## NAVIGATION */

#navbar-sticky-wrapper {
    height: 0 !important;
}

.navbar-fixed-top {
    position: fixed;
    z-index: 1030;
}

#navbar {
    height: 90px;
    width: 100%;
    font-size: 85%;
    letter-spacing: 1px;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.is-sticky #navbar {
    height: 40px;
    background-color: #ebebeb;
    opacity: 0.90;
    border-bottom: 1px solid #94b6f5;
}

#navbar #logo {
    color: #ebebeb;
}

.is-sticky #navbar #logo {
    color: #3c81ff;
}

#nav-menu-toggle {
    position: relative;
    /* element dimensions should be set equal to the pixel height of the nav text */
    height: 20px;
    width: 20px;
    overflow: hidden;
}

#nav-menu-toggle:hover {
    cursor: pointer;
}

#nav-menu-toggle .vertical-bar {
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    border: 2px solid #ebebeb;
    height: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

#nav-menu-toggle .vertical-bar.rotate {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.is-sticky #nav-menu-toggle .vertical-bar {
    border: 2px solid #3c81ff;
}

#nav-menu-toggle .horizontal-bar {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    border: 2px solid #ebebeb;
    width: 100%;
}

.is-sticky #nav-menu-toggle .horizontal-bar {
    border: 2px solid #3c81ff;
}

#nav-menu-collapsible {
    position: absolute;
    width: 100%;
    left: -150%;
    margin-top: 35px;
    background: rgba(235, 235, 235, 0.9);
    color: #94b6f5;
}

.is-sticky #nav-menu-collapsible {
    margin-top: 12px;
    background-color: #ebebeb;
}

#nav-menu-collapsible.uncollapsed {
    -webkit-animation: slideRight 0.3s 1;
    animation: slideRight 0.3s 1;
    left: 0;
}

@-webkit-keyframes slideRight {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}

@keyframes slideRight {
    from {
        left: -100%;
    }
    to {
        left: 0;
    }
}

#nav-menu-collapsible.collapsed {
    -webkit-animation: slideLeft 0.2s 1;
    animation: slideLeft 0.2s 1;
}

@-webkit-keyframes slideLeft {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

@keyframes slideLeft {
    from {
        left: 0;
    }
    to {
        left: -100%;
    }
}

#nav-menu-collapsible ul {
    margin: 15px 0 15px 0;
    text-align: right;
}

#nav-menu-collapsible ul li {
    margin: 5px 5px;
}

#nav-menu-collapsible ul li a {
    display: block;
    width: 100%;
}

#nav-menu-collapsible ul li a:hover {
    background-color: #3c81ff;
    color: #ebebeb;
}

#nav-menu-collapsible ul li a.active {
    color: #3c81ff;
}

#nav-menu-collapsible ul li a.active:hover {
    color: #ebebeb;
}


/* ## PAGE-HOME */

#page-home {
    position: relative;
    overflow: hidden;
    background-image: url('https://tommoore.me.uk/img/quad-bkgr.jpg');
    background-position: center;
    background-size: cover;
}

#page-home .content {
    display: inline-block;
}

#page-home .social-links li:hover {
    color: #94b6f5;
}

#site-header h1 {
    margin: 0;
    font-size: 400%;
    font-weight: normal;
    line-height: 60%;
    letter-spacing: 2px;
    text-shadow: 1px 1px 15px #333333;
}

#page-home .social-links li,
#page-home .social-links a {
    vertical-align: inherit;
}

#arrow-container-outer {
    position: absolute;
    top: 85%;
    height: 15%;
}

#arrow-container-inner {
    width: 80px;
    height: 100%;
}

#arrow {
    width: 30px;
    height: 30px;
    border-right: 5px solid #94b6f5;
    border-bottom: 5px solid #94b6f5;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#arrow:hover,
.arrow-state-hover {
    border-right: 6px solid #ebebeb !important;
    border-bottom: 6px solid #ebebeb !important;
    border-bottom-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    padding: 6px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}


/* ## PAGE-PORTFOLIO */

#page-portfolio {
    position: relative;
    overflow: hidden;
    background-image: url('https://tommoore.me.uk/img/stones-texture.jpg');
    background-position: center;
    background-size: cover;
}

#page-portfolio .project h3 {
    margin-bottom: 5px;
}

#page-portfolio .project > a {
    position: relative;
    display: block;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#page-portfolio .project > a:hover {
    box-shadow: 0 0 10px #3c81ff;
}

#page-portfolio .project .overlay {
    position: absolute;
    background: rgba(148, 182, 245, .5);
    opacity: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-align: center;
}

#page-portfolio .project > a:hover .overlay {
    opacity: 1;
}

#page-portfolio .project a + p {
    margin-top: 5px;
    font-size: 85%;
}


/* ## PAGE-CONTACT */

#page-contact {
    position: relative;
}

#page-contact .section {
    margin-bottom: 50px;
}

#page-contact .social-links {
    text-align: center;
    margin: 15px;
}

#page-contact .social-links li {
    margin: 5px;
    padding: 10px;
    border-radius: 50%;
}

#page-contact .social-links li:hover {
    background-color: rgba(148, 182, 245, 0.5);
    -webkit-transition: background 0.25s linear;
    transition: background 0.25s linear;
}

#page-contact .social-links li span {
    display: none;
}


/*## FOOTER */

#page-footer {
    position: absolute;
    top: 95%;
    height: 5%;
    font-size: 65%;
}

footer p {
    margin: 0;
}


/*MEDIA QUERIES*/

@media only screen and (max-width: 669px) {
    .clear-collapsed {
        clear: both;
    }
}

@media only screen and (min-width: 670px) {
    #nav-menu-toggle {
        display: none;
    }
    #nav-menu-collapsible {
        position: relative;
        width: 100%;
        left: 0;
        background: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
        color: #94b6f5;
        z-index: -1;
    }
    .is-sticky #nav-menu-collapsible {
        background: none;
        margin: 0;
    }
    #nav-menu-collapsible ul {
        margin: 0;
    }
    #nav-menu-collapsible ul li {
        display: inline-block;
        margin: 0;
        padding: 0 10px 0 10px;
    }
    #nav-menu-collapsible ul li a {
        padding: 0;
    }
    #nav-menu-collapsible ul li a:hover {
        background-color: transparent;
    }
    .is-sticky #nav-menu-collapsible ul li a:hover {
        color: #3c81ff;
    }
    #nav-menu-collapsible ul li a.active {
        color: #ebebeb;
    }
    .is-sticky #nav-menu-collapsible ul li a.active {
        color: #3c81ff;
    }
    #page-about h3 {
        margin-top: 0;
    }
    /* # RESPONSIVE COLUMNS */
    .col {
        margin: 1% 0 1% 2%;
    }
    .span_1_of_2,
    .span_1_of_3 {
        width: 49%;
    }
}

@media only screen and (min-width: 900px) {
    .span_1_of_3 {
        width: 32%;
    }
}

@media only screen and (min-width: 1400px) {
    .content {
        margin: 0 12.5% 0 12.5%;
    }
}
            
          
!
            
              $(document).ready(function() {

    /* navbar sticks to the top of the window on all pages */
    $("#navbar").sticky();

    var navMenu = $("#nav-menu-collapsible");
    var verticalBar = $("#nav-menu-toggle .vertical-bar");

    $(".wrapper").click(function() {
        if ($("#warning").hasClass("visible")) {
            $("#warning").fadeOut();
        }
    });
    
    /* toggle collapsible nav-bar */
    $("#nav-menu-toggle").click(function() {
        if (!verticalBar.hasClass("rotate")) {
            verticalBar.addClass("rotate");
            navMenu.removeClass("collapsed");
            navMenu.addClass("uncollapsed");
        } else {
            verticalBar.removeClass("rotate");
            navMenu.removeClass("uncollapsed");
            navMenu.addClass("collapsed");
        }
    });

    $("#nav-menu-collapsible a").click(function() {
        /* hide collapsible nav-bar when links are clicked */
        verticalBar.removeClass("rotate");
        navMenu.removeClass("uncollapsed");

        /* set-up event listeners for scrolling animation */
        var anchorRef = $(this).attr("href");
        $(anchorRef).animatescroll();
    });

    /* hover element to take a peek at the next page */
    $(".peek-a-boo").mouseenter(function() {
        $("#arrow").addClass("arrow-state-hover");
        window.scrollBy(0, 10);
    });
    $(".peek-a-boo").mouseleave(function() {
        window.scrollBy(0, -10);
        $("#arrow").removeClass("arrow-state-hover");
    });
    /* scrolling animation includes padding to account for peek-a-boo scroll */
    $(".peek-a-boo").click(function() {
        var peekRef = $(this).attr("href");
        $(peekRef).animatescroll({
            padding: -10
        });
    });
});
            
          
!
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