HTML/CSS - Project | Web Design Online Editor and JavaScript Compiler

html

<!DOCTYPE html> 
<!-- JFS-Group™, Don't Steal this Code -->
<!-- Don't Forget to Leave a Like -->
 
<html> 
    <head lang="en"> 
        <meta charset="utf-8" /> 
        <title>My simple bootstrap web design</title>         
        <meta name="viewport" content="width=device-width, initial-scale=1" /> 
        <meta name="author" content="JFS" /> 
        <!-- Latest compiled and minified CSS -->         
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
        <!-- jQuery library -->         
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>         
        <!-- Latest compiled JavaScript -->         
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>         
        <noscript>
            <div class="jumbotron">
                <h1>Please activate Javascript to go ahead</h1>
            </div>
        </noscript>
    </head>     
    <body> 
        <section class="top-nav">
            <nav class="navbar navbar-default navbar-fixed-top">
                <div class="navbar-header">
                    <button class="navbar-toggle" style="margin-top: 18px" id="top-button">

css

.side-nav {
    position: fixed;
    width: 20%;
    height: 100%;
    background-color:  aliceblue;
    z-index: 100;
    animation-name: side-nav-anim;
    animation-duration: 1s;
    transition-duration: .6s;
}
.top-nav {
    display: none;
    margin-top: -20%;
    transition-duration: .6s;
}
.top-nav-menu {
    
}
.side-margin {
    margin-left: 20%;
    transition-duration: .6s;
}
.row > * {
    transition-duration: .6s;
}
.close-side-nav {
    font-size: 2.5em;
    color:  black;

alert("Welcome to my Page")
alert("Made by JFS-Group™")
// this code is make just for test
// JFS-Group™, Don't Steal this Code
// Don't Forget to Leave a Like
$(document).ready(function() {
    $('.timelines, .message, .message-content, .top-nav-menu').hide();
    $('.timelines-c').click(function() {
        $('.home, .message,.message-content').hide('slow');
        $('.timelines').show('slow');
        $('.timelines-c').addClass('active');
        $('.home-c, .message-c').removeClass('active');
    });
    $('.home-c').click(function() {
        $('.home').show('slow');
        $('.timelines, .message,.message-content').hide('slow');
        $('.home-c').addClass('active');
        $('.timelines-c, .message-c').removeClass('active');
    });
    $('.message-c').click(function() {
        $('.home, .timelines, .message-content').hide('slow');
        $('.message').show('slow');
        $('.message-c').addClass('active');
        $('.timelines-c, .home-c').removeClass('active');
    });
    $('#message-content').click(function() {

BROWSER

Console