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-level1">Up</li>
                            <li class="nav-level2">Right</li>
                            <li class="nav-level3">Down</li>
                            <li class="nav-level4">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" src="images/logo500-transparent.png" alt="Chasing ED" />
                    </div>
...

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 main = function () {
    $('.to-the-articles').click(function () {
        var currentSlide = $('.active-slide');
        var nextSlide = $('.active-slide').next();

        currentSlide.fadeOut(1200).removeClass('active-slide');
        nextSlide.fadeIn(1200).addClass('active-slide');
    });

    $('.nav-level1').click(function () {
        var currentSlide = $('.active-slide');
        var nextSlide = $('.active-slide').next();

        currentSlide.fadeOut(0).removeClass('active-slide');
        nextSlide.fadeIn(1200).addClass('active-slide');
    });

    $('.nav-level2').click(function () {
        $('.active-slide').fadeOut(0).removeClass('active-slide');
        $('.level2').fadeIn(1200).addClass('active-slide');
    });

    $('.nav-level3').click(function () {
        $('.active-slide').fadeOut(0).removeClass('active-slide');
        $('.level3').fadeIn(1200).addClass('active-slide');
    });

    $('.nav-level4').click(function () {
        $('.active-slide').fadeOut(0).removeClass('active-slide');
        $('.level4').fadeIn(1200).addClass('active-slide');
    });

    $('.back-home').click(function () {
        $('.active-slide').fadeOut(0).removeClass('active-slide');
        $('.home').fadeIn(1200).addClass('active-slide');
    });
};

$(document).ready(main);