index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/png" href="assets/img/favicon.png">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>
            Nahu's Lounge
        </title>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
        <!--     Fonts and icons     -->
        <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src="https://kit.fontawesome.com/88c39f308c.js" crossorigin="anonymous"></script>
        <!-- CSS Files -->
        <link href="assets/css/material-kit.css?v=2.0.6" rel="stylesheet" />

        <link href="assets/css/index.css" rel="stylesheet"/>
    </head>

    <body class="index-page">
        <!--   Core JS Files   -->
        <script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
        <script src="assets/js/core/popper.min.js" type="text/javascript"></script>
        <script src="assets/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
        <script src="assets/js/plugins/moment.min.js"></script>
        <!--  Plugin for the Datepicker, full documentation here: https://github.com/Eonasdan/bootstrap-datetimepicker -->
        <script src="assets/js/plugins/bootstrap-datetimepicker.js" type="text/javascript"></script>
        <!--  Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
        <script src="assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
        <!-- Control Center for Material Kit: parallax effects, scripts for the example pages etc -->
        <script src="assets/js/material-kit.js?v=2.0.6" type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                //init DateTimePickers
                materialKit.initFormExtendedDatetimepickers();

                // Sliders Init
                materialKit.initSliders();
            });
        </script>
        <!-- Index JS -->
        <script src="assets/js/index.js" type="text/javascript"></script>

        <div class="page-background"></div>

        <div class="page-header">
            <div class="container">
                <div class="col-md-8 ml-auto mr-auto">
                    <div class="brand">
                        <img src="assets/img/default-monochrome.svg" alt="Nahu" width="50%" height="50%">
                        <h5><i>Developer, engineering student.</i></h5>
                    </div>
                </div>
            </div>
        </div>

        <!-- Large modal -->
        <div class="modal fade" id="modal-accounts" tabindex="-1" role="dialog" aria-labelledby="accountsModal" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="accountsModal">Accounts</h5>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="card text-center" style="width: 22rem;">
                                    <div class="card-body">
                                        <h4 class="card-title">SpigotMC</h4>
                                        <p class="card-text"><img src="assets/img/brand/spigotmc.png" alt="Spigot Logo"></p>
                                        <a href="https://bit.ly/nahuldspgt" class="btn btn-info">Go</a>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card text-center" style="width: 22rem;">
                                    <div class="card-body">
                                        <h4 class="card-title">MC-Market</h4>
                                        <p class="card-text"><img src="assets/img/brand/mcmarket.png" alt="MC-Market Logo"></p>
                                        <a href="https://bit.ly/nahuldmcm" class="btn btn-info">Go</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <footer class="footer">
            <div class="container">
                <nav class="pull-left">
                    <ul>
                        <li>
                            <a rel="tooltip" title="Contact" data-placement="top" href="mailto:contact@nahu.me" target="_blank" class="btn btn-info">
                                <i class="material-icons">email</i> Contact
                            </a>
                        </li>
                        <li>
                            <a class="btn btn-warning" rel="tooltip" title="Accounts" data-placement="top" data-toggle="modal" data-target="#modal-accounts">
                                <i class="material-icons">account_box</i> Accounts
                            </a>
                        </li>
                        <li>
                            <a onclick="copyToClipboard('Nahu#1307')" rel="tooltip" title="Discord" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to clipboard!" class="btn btn-simple btn-just-icon">
                                <i class="fab fa-discord"></i>
                            </a>
                        </li>
                        <li>
                            <a rel="tooltip" title="GitHub" data-placement="top" href="https://github.com/NahuLD/" target="_blank" class="btn btn-simple btn-just-icon">
                                <i class="fab fa-github-alt"></i>
                            </a>
                        </li>
                        <li>
                            <a rel="tooltip" title="GitLab" data-placement="top" href="https://gitlab.com/NahuLD/" target="_blank" class="btn btn-simple btn-just-icon">
                                <i class="fab fa-gitlab"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="copyright pull-right">
                    <p>&copy; <script>
                        document.write(new Date().getFullYear())
                    </script>, made with <i class="material-icons">favorite</i> by Nahu</p>
                </div>
            </div>
        </footer>
    </body>
</html>