Untitled

<!DOCTYPE html>
<html>
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Page Title -->
        <title>Server Name - Home</title>

        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>

        <!-- Custom CSS (Main Stylesheet) -->
        <link href="css/style.css" rel="stylesheet" type='text/css'>

        <!-- Font Awesome -->
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type='text/css'>

        <!-- Custom Font (Roboto via Google.com/fonts) -->
        <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">

        <style>
            [data-sr] {
                visibility: hidden;
            }
        </style>

    <script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/126E27D4-D967-024A-B0CD-34E59EF757A8/main.js" charset="UTF-8"></script></head>

    <body data-spy="scroll" data-target="#navbar-affix">

        <!-- NAVIGATION BAR START -->
        <nav class="navbar navbar-default navbar-fixed-top" id="navbar-affix">
            <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </button>
            </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">Forums</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#blog">News</a></li>
                  </ul>
                </div>
            </div>
        </nav>
        <!-- /NAVIGATION BAR END -->

        <!-- BANNER START -->
        <div class="banner-head-top">
            <div class="container">
                <div class="banner-head-top-text" data-sr='enter top'>
                    <h1>Welcome to <span class="server-name">Server Name</span></h1>

                    <h3>We're a SA-MP Community.</h3>

                    <a href="#about" class="btn btn-default btn-outline-transparent"><i class="fa fa-angle-double-down" aria-hidden="true"></i> Learn More</a>
                </div>
            </div>
        </div>
        <!-- /BANNER END -->

        <!-- ABOUT START -->
        <div class="page-section-intro" id="about">
            <div class="container">
                <div class="row">
                    <h2 data-sr='enter left'>Welcome to, <i>Server Name</i>.</h2>

                    <a href="#" class="btn btn-default btn-outline-normal"><i class="fa fa-server" aria-hidden="true"></i> Join the Server</a>
                    <a href="#" class="btn btn-default btn-outline-normal"><i class="fa fa-users" aria-hidden="true"></i> Visit Forums</a>
                </div>
            </div>
        </div>
        <!-- /ABOUT END -->

        <!-- MAIN CONTENT -->

        <!-- FEATURES START -->
        <div class="page-section-features" id="features">
            <div class="container">
                <div class="row">
                    <h2 data-sr='enter left'>Features</h2>

                    <div class="col-md-4">
                        <i class="fa fa-pencil-square-o fa-5x" data-sr='enter left'></i>

                        <h4 data-sr='enter left'>Awesome Gamemode</h4>
                        <p data-sr='enter left'>Our gamemode is created straight from scratch. The server is regularly updated with fresh features coming in all the time!</p>
                    </div>
                    <div class="col-md-4">
                        <i class="fa fa-tachometer fa-5x" data-sr='enter top'></i>

                        <h4 data-sr='enter top'>Great Performence</h4>
                        <p data-sr='enter top'>Our servers are running on good performance hosts, therefore, you will have a great gaming experience with us.</p>
                    </div>
                    <div class="col-md-4">
                        <i class="fa fa-users fa-5x" data-sr='enter right'></i>

                        <h4 data-sr='enter right'>Awesome Community</h4>
                        <p data-sr='enter right'>A forum is the soul of a community, therefore, we put a big effort it on its development. We have a well organised forum with plenty of categories.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- /FEATURES END -->

        <!-- BLOG START -->
        <div class="page-section-blog" id="blog" data-sr='enter bottom'>
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1 blog-main">

                        <div class="blog-post">
                            <h2 class="blog-post-title">Welcome to to the new website!</h2>
                            <p class="blog-post-meta">January 23, 2018 by <a href="#">Adam</a></p>

                            <p>Hi!,</p>
                                <p>Thanks for using my free template you've downloaded. And once again it's back with another update. This a pretty big update which feels and looks better to read. Please feel free to take advantage of this theme and customize it to your liking. <b>If you decide to use it, send me a link to your website. I'd love to see how this is used!</b></p>
                                <br>
                                <p>Thanks,</p>
                                <p>Adam.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /BLOG END -->

        <!-- MAIN CONTENT END -->

        <!-- FOOTER START -->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-centered">
                        <div class="col-md-4" data-sr='enter left'>
                            <h4><strong>Follow Us</strong></h4>
                            <ul class="list-unstyled">
                                <li><a href="#"><i class="fa fa-facebook text-primary"></i> Facebook</a></li>
                                <li><a href="#"><i class="fa fa-youtube text-danger"></i> Youtube</a></li>
                                <li><a href="#"><i class="fa fa-google-plus text-danger"></i> Google+</a></li>
                            </ul>
                        </div>
                        <div class="col-md-4" data-sr='enter top'>
                            <h4><strong>Links</strong></h4>
                            <ul class="list-unstyled">
                                <li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
                                <li><a href="#"><i class="fa fa-users"></i> Forums</a></li>
                                <li><a href="#"><i class="fa fa-usd text-success"></i> Donate</a></li>
                                <li><a href="#"><i class="fa fa-ban text-danger"></i> Bans</a></li>
                            </ul>
                        </div>
                        <div class="col-md-4" data-sr='enter right'>
                            <h4><strong>Server Statistics</strong></h4>
                            <ul class="list-unstyled">
                                <li><a href="#"><i class="fa fa-level-up"></i> Top Scores</a></li>
                                <li><a href="#"><i class="fa fa-usd text-success"></i> Top Richest</a></li>
                                <li><a href="#"><i class="fa fa-plus"></i> Top Kills</a></li>
                                <li><a href="#"> <i class="fa fa-minus"></i> Top Deaths</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <div class="copyright" data-sr='enter bottom'>&copy; Copyright Server Name 2018. All Rights Reserved.</div>
        <!-- /FOOTER END -->

        <!-- JavaScript -->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

        <!-- Bootstrap Javascript -->
        <script src="js/bootstrap.min.js"></script>

        <!-- ScrollReveal.js -->
        <script src='js/scrollReveal.min.js'></script>

        <!-- Initialize ScrollReveal.js (this will not work if this is placed in custom.js) -->
        <script>
            window.sr = new scrollReveal();
        </script>

        <!-- Custom Javascript -->
        <script src="js/custom.js"></script>
    </body>
</html>