fabrice HTML

<html>

    <head>

        <!-- Basic Page Needs
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <meta charset="utf-8">
        <title>fabrice.</title>
        <meta name="description" content="fabrice - official website">
        <meta name="author" content="Daniel Pölzgutter">

        <!-- Mobile Specific Metas
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- CSS
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <link rel="stylesheet" type="text/css" href="/style.css">

        <!-- favicon
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->
        <link rel="shortcut icon" type="image/png" href="/res/icons/favicon.png"/>

    </head>


    <body>


        <!-- PAGES
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->

        <!--featured-->
        <div id="js_featured" class="page">
            <div class="container">


                <div class="row">

                    <div class="twelve columns" style="margin-top: 5%">
                        <h4 align="center" style="font-family: aileron-heavy; font-size: 50px">featured</h4>
                    </div>

                    <div class="twelve columns">
                        <p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
                    </div>

                </div>


            </div>
        </div>


        <!--releases-->
        <div id="js_music" class="page" style="display:none">
            <div class="container">


                <div class="row">

                    <div class="twelve columns" style="margin-top: 5%">
                        <h4 align="center" style="font-family: aileron-heavy; font-size: 50px">releases</h4>
                    </div>

                    <div class="twelve columns">
                        <p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
                    </div>

                </div>


            </div>
        </div>


        <!--contact-->
        <div id="js_contact" class="page" style="display:none">
            <div class="container">


                <div class="row">

                    <div class="twelve columns" style="margin-top: 5%">
                        <h4 align="center" style="font-family: aileron-heavy; font-size: 50px">contact</h4>
                    </div>

                    <div class="twelve columns">
                        <p align="center" style="font-family: aileron-thin; font-size: 25px">...</p>
                    </div>

                </div>


            </div>
        </div>


        <!-- NAVIGATION BAR
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->

        <div id="navbar_box">
            <div class="navbar">

                <div id="brand_box">
                    <div class="brandtext">fabrice.</div>
                </div>

                <div id="textbutton_box">
                    <button class="textbutton" onclick="openPage('js_featured')">featured</button>
                    <button class="textbutton" onclick="openPage('js_music')">releases</button>
                    <button class="textbutton" onclick="openPage('js_contact')">contact</button>
                </div>

                <div id="icon_box">
                    <a href="https://www.facebook.com/danielfabricem/" class="icon" id="facebook" target="_blank"></a>
                    <a href="https://twitter.com/danielfabricem" class="icon" id="twitter" target="_blank"></a>
                    <a href="https://www.instagram.com/danielfabricem/" class="icon" id="instagram" target="_blank"></a>
                    <a href="https://www.snapchat.com/add/danielfabricem" class="icon" id="snapchat" target="_blank"></a>
                    <a href="https://www.youtube.com/channel/UCNGXQlfrPtou-CpHSJDiicQ" class="icon" id="youtube" target="_blank"></a>
                    <a href="https://open.spotify.com/artist/4qpNXA2Fz4VjjzPAvoK9Uc" class="icon" id="spotify" target="_blank"></a>
                    <a href="https://soundcloud.com/danielfabricem" class="icon" id="soundcloud" target="_blank"></a>
                </div>

            </div>
        </div>


        <!-- JAVASCRIPT
        –––––––––––––––––––––––––––––––––––––––––––––––––– -->

        <script>
            /*switch sites*/
            function openPage(name) {
                var i;
                var x = document.getElementsByClassName("page");

                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }

                document.getElementById(name).style.display = "block";
            }
        </script>


    </body>

</html>