JSFiddle - React, Tailwind, and code Playground

by Kitson Broadhurst

HTML

<link rel="stylesheet" href="http://enhanceddd.com/css/bootstrap.min.css">
<script src="http://enhanceddd.com/java/jquery.js"></script>
<script src="http://enhanceddd.com/images/logo500-transparent.png"></script>
<script src="http://enhanceddd.com/images/to-the-articles.png"></script>
<body>
    <div class="slider">
        <!--Landing Page-->
        <div class="slide active-slide landing">
            <div class="container">
                <div class="row">
                    <div class="logo col-xs-6 col-xs-offset-3">
                        <img class="img-logo" src="images/logo500-transparent.png" alt="Chasing ED" />
                    </div>
                    <div class="continue col-xs-2 col-xs-offset-1 col-">
                        <img class="to-the-articles" src="images/to-the-articles.png" alt="To the Articles! ->" />
                    </div>
                </div>
            </div>
        </div>
        <!--Homepage-->
        <div class="slide home">
            <div class="container">
                <div class="row">
                    <div class="logo col-xs-6 col-xs-offset-3">
                        <img class="img-logo" src="images/logo500-transparent.png" alt="Chasing ED" />
                    </div>
                    <div>
                        <ul>
                            <li class="nav-level" data-level="1">Up</li>
                            <li class="nav-level" data-level="2">Right</li>
                            <li class="nav-level" data-level="3">Down</li>
                            <li class="nav-level" data-level="4">Left</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--Slide Up - Level 1-->
        <div class="slide level1">
            <div class="container">
                <div class="row">
                    <div class="logo col-xs-6 col-xs-offset-3">
                        <img class="img-logo"...

CSS

/* CSS Document */
 html, body {
    height: 100%;
    margin: 0;
}
.slider {
    height: 100%;
}
.landing {
    min-height: 100%;
    margin: 0;
    background-color: #5fdb5f;
}
.logo {
    margin-top:20%;
    width: 50%;
    height: 20%;
}
.img-logo {
    width: 100%;
}
.continue {
    height: 100px;
    margin-top: 50%;
}
.to-the-articles {
    width: 100%;
}
.slide {
    display: none;
}
.active-slide {
    display: block;
}
/* -----HOME----- */
 .home {
    background-color: #fff;
    min-height: 100%;
}
/* -----LEVEL1----- */
 .level1 {
    background-color: #c5f369;
    min-height: 100%;
}
/* -----LEVEL2----- */
 .level2 {
    background-color: #4fb6b6;
    min-height: 100%;
}
/* -----LEVEL3----- */
 .level3 {
    background-color: #ffb06f;
    min-height: 100%;
}
/* -----LEVEL4----- */
 .level4 {
    background-color: #5fdb5f;
    min-height: 100%;
}

JavaScript

var fade = function (target) {
        var nextSlide = $(target);
        $('.active-slide').fadeOut(0).removeClass('active-slide');
        nextSlide.fadeIn(1200).addClass('active-slide');
    };

    var main = function () {
        $('.to-the-articles').on("click", function () {
            fade('.home')
        });

        $('.nav-level').on("click", function () {
            fade('.level' + $(this).data("level"))
        });

        $('.back-home').on("click", function () {
            fade('.home')
        });
    };

    $(document).ready(main);