<!DOCTYPE html>
<html>

<head>
  <!-- BASICS -->
  <meta charset="utf-8">
  <title>Aginēēk</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="/img/soccerBall.png" type="image/png">
  <link rel="stylesheet" type="text/css" href="js/rs-plugin/css/settings.css" media="screen">
  <link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen">
  <link rel="stylesheet" href="css/flexslider.css" type="text/css">
  <link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700">

  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="skin/default.css">

</head>

<body>
  <section id="header" class="appear"></section>
  <div class="navbar navbar-fixed-top" role="navigation" data-0="line-height:100px; height:100px; background-color:rgba(0,0,0,0.3);" data-300="line-height:60px; height:60px; background-color:rgba(5, 42, 62, 1);">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      	  <span class="fa fa-bars color-white"></span>
        </button>
        <div class="navbar-logo">
          <a href=""><img data-0="width:50px;" data-300=" width:50px;" src="img/sclogo1_846_icon.ico" alt=""></a>
        </div>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav" data-0="margin-top:20px;" data-300="margin-top:5px;">
          <!--<li class="active"><a href="index.html">Home</a></li>-->
          <li><a href="#">Home</a></li>
          <li><a href="#section-about">About</a></li>
          <li><a href="#section-works">Portfolio</a></li>
          <li><a href="#section-training">Training</a></li>
          <li><a href="{{ route('login') }}">LogIn</a></li>
          <li><a href="#section-contact">Contact</a></li>
        </ul>
      </div>
      <!--/.navbar-collapse -->
    </div>
  </div>

  <section id="intro">
    <div class="intro-content">
      <h1>Aginēēk</h1>
      <h3>PLAY ON <b>PLAYER</b></h3>
    </div>
  </section>

  <!-- services -->
  <section id="section-services" class="section pad-bot30 bg-grey">

    <div class = "container">
      <div class="row">

        <div class = "iCol col-lg-6 col-md-12">
          <div class="hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a mar-top35">
            <div class="float-left mar-right20">
              <a href="https://www.youtube.com/watch?v=drRTmz2cx0E" target="_blank" class="hi-icon hi-icon-screen">screen</a>
            </div>
          </div>
          <h2 class="text-bold">Video Guide</h2>
          <h3>About Aginēēk</h3>
          <div class="clear"></div>
        </div>
        <div class = "iCol col-lg-6 col-md-12">
          <video width="100%" height="100%" controls>
            <source src="img/SkillCourtVideo.mp4" type="video/mp4">
            Your browser does not support the video tag.
          </video>
        </div>

      </div>
    </div>
  </section>

  <!-- spacer section:testimonial -->
  <section id="soccer" class="section" data-stellar-background-ratio="0.5">

  </section>

  <!-- about -->
  <section id="section-about" class="section appear clearfix">
    <div class="container">

        <div class="row mar-bot40">
          <div class="col-md-offset-3 col-md-6">
            <div class="section-header">
              <h2 class="section-heading animated" data-animation="bounceInUp">ABOUT AGINĒĒK</h2>
              <p>Aginēēk makes wireless stand-alone panels that run on batteries and
                display a matrix of LED lights. A typical set up is to have 3 or more panels
                during play. Each panels acts as a target for Soccer players to strike with a ball,
                The ball then rebounds back to the player while the players have to figure out the most
                efficient way to maneuver the ball and get to the next illuminated target.</p>

              <p>The hardware system hooks up to the Aginēēk app which allows for unlimited variations of games.
                You can control the game type under a time limit and lighting sequences (random or predetermined).</p>
            </div>
          </div>
        </div>
      </div>
  </section>
  <!-- /about -->

  <!-- spacer section:stats -->
  <section id="parallax1" class="section" data-stellar-background-ratio="0.5">

  </section>

  <!-- section works -->
  <section id="section-works" class="section appear clearfix">

    <div class = "container">
      <div class="row">

        <div class = "iCol col-lg-4 col-md-6">
          <div class="portfolio-item">
            <img src="img/portfolio/img1.jpeg "alt=""/>
            <div class="portfolio-desc align-center">
              <div class="folio-info">
                <p>Pads unfolded</p>
                <a href="img/portfolio/img1.jpeg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class = "iCol col-lg-4 col-md-6">
          <div class="portfolio-item">
            <img src="img/portfolio/img2.jpeg "alt=""/>
            <div class="portfolio-desc align-center">
              <div class="folio-info">
                <p>Its a fun activity you can do with your friends at a birthday party!</p>
                <a href="img/portfolio/img2.jpeg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class = "iCol col-lg-4 col-md-6">
          <div class="portfolio-item">
            <img src="img/portfolio/img3.jpeg "alt=""/>
            <div class="portfolio-desc align-center">
              <div class="folio-info">
                <p>Pads folded and ready for next session!</p>
                <a href="img/portfolio/img3.jpeg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class = "iCol col-lg-4 col-md-6">
          <div class="portfolio-item">
            <img src="img/portfolio/img4.jpeg "alt=""/>
            <div class="portfolio-desc align-center">
              <div class="folio-info">
                <p>Training with 4 pads to enhance my responsiveness!</p>
                <a href="img/portfolio/img4.jpeg" class="fancybox"><i class="fa fa-plus fa-2x"></i></a>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

  <!-- spacer section:stats -->
  <section id="parallax1" class="section" data-stellar-background-ratio="0.5">

  </section>

  <!-- Choose a training! -->
  <section id="section-training" class="section appear clearfix">
    <div class="container">

        <div class="row mar-bot40">
          <div class="col-md-offset-3 col-md-6">
            <div class="section-header">
              <h2 class="section-heading animated" data-animation="bounceInUp">
                Choose One of Our Plans With Us Today!
              </h2>
              <h3>30 minute session- <b>$30</b></h3>
              <h3>60 minute session- <b>$50</b></h3>
              <h3>3 hour session- <b>$120</b></h3>
            </div>

          </div>
        </div>
      </div>

  </section>
  <!-- /Choose a plan! -->

  <hr class="style-two">

  <!-- contact -->
  <section id="section-contact" class="section appear clearfix">
    <div class="container">

      <div class="row mar-bot40">
        <div class="col-md-offset-3 col-md-6">
          <div class="section-header">
            <h2 class="section-heading animated" data-animation="bounceInUp">Contact Me!</h2>
            <p>Gummi Öxndal</p>
            <p>gummi@skillcourt.com</p>
            <p>(954)-610-9446</p>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <div class="cform" id="contact-form">
            <div id="sendmessage">Your message has been sent. Thank you!</div>
            <div id="errormessage"></div>
            <form action="/" method="post" class="contactForm">

              <div class="field your-name form-group">
                <input type="text" name="name" id="name" placeholder="Your Name" class="cform-text" size="40" data-rule="minlen:4" data-msg="Please enter at least 4 chars">
                <div class="validation"></div>
              </div>
              <div class="field your-email form-group">
                <input type="text" name="email" id="email" placeholder="Your Email" class="cform-text" size="40" data-rule="email" data-msg="Please enter a valid email">
                <div class="validation"></div>
              </div>
              <div class="field subject form-group">
                <input type="text" name="subject" id="subject" placeholder="Subject" class="cform-text" size="40" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject">
                <div class="validation"></div>
              </div>

              <div class="field message form-group">
                <textarea name="message" id="message" class="cform-textarea" cols="40" rows="10" data-rule="required" data-msg="Please write something for us"></textarea>
                <div class="validation"></div>
              </div>

              @csrf
              <div class="send-btn">
                <button type="submit" class="btn btn-theme" id="send_email_button">Send</button>
              </div>

            </form>
          </div>
        </div>
        <!-- ./span12 -->
      </div>

    </div>
  </section>

  <section id="footer" class="section footer">

    <div class="container">
      <div class="row align-center mar-bot20">
        <ul class="footer-menu">
          <li><a href="#">Home</a></li>
          <li><a href="#section-about">About</a></li>
          <!--<li><a href="#section-works">Check It Out!</a></li>-->
          <a href="#section-works"><img data-0="width:80px;" data-300=" width:70px;" src="img/sclogo1_846_icon.ico" alt=""></a>
          <li><a href="#section-training">Fees</a></li>
          <li><a href="#section-contact">Email</a></li>
        </ul>
      </div>

      <!--
      <div class="row align-center copyright">
        <div class="col-sm-12">
          <p>Copyright &copy; All rights reserved</p>
        </div>
      </div>
      <div class="credits">
      -->
        <!--
          All the links in the footer should remain intact.
          You can delete the links only if you purchased the pro version.
          Licensing information: https://bootstrapmade.com/license/
          Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/buy/?theme=Vlava
        -->
        <!--
        Designed by <a href="https://bootstrapmade.com/">BootstrapMade.com</a>
      </div>-->
    </div>

  </section>
  <a href="#header" class="scrollup"><i class="fa fa-chevron-up"></i></a>

  <!-- Javascript Library Files -->
  <script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
  <script src="js/jquery.js"></script>
  <script src="js/jquery.easing.1.3.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.isotope.min.js"></script>
  <script src="js/jquery.nicescroll.min.js"></script>
  <script src="js/fancybox/jquery.fancybox.pack.js"></script>
  <script src="js/skrollr.min.js"></script>
  <script src="js/jquery.scrollTo.min.js"></script>
  <script src="js/jquery.localScroll.min.js"></script>
  <script src="js/stellar.js"></script>
  <script src="js/jquery.appear.js"></script>
  <script src="js/jquery.flexslider-min.js"></script>
  <script src="js/functions.js"></script>

  <!-- Contact Form JavaScript File -->
  <script src="contactform/contactform.js"></script>

  <!-- Template Main Javascript File -->
  <script src="js/main.js"></script>

</body>

</html>
