index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Joyixir :: Indie Game Studio</title>
  <meta content="" name="Joyixir is an indie game studio that develops fun and
  entertaining free-to-play games on mobile platforms that
  engages thousands of people.">
  <meta content="" name="joyixir, joy, elixir, video games, game, games,
              mobile-games, studio, casual games, hc games, hyper-casual games">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <link href="assets/vendor/ionicons/css/ionicons.min.css" rel="stylesheet">
  <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <! -- Adsense code -->
  <script data-ad-client="ca-pub-3313515664896857" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

  <!-- captcha script -->
  <script>
	// javascript
	window.onload = function() { 
	  var el = document.getElementById('g-recaptcha-response'); 
	  if (el) { 
	    el.setAttribute('required', 'required'); 
	  } 
	}
  </script>

  <!-- =======================================================
  * Template Name: DevFolio - v2.4.0
  * Template URL: https://bootstrapmade.com/devfolio-bootstrap-portfolio-html-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body id="page-top">

  <!-- ======= Header/ Navbar ======= -->
  <nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
    <div class="container">
      <!-- <a class="navbar-brand js-scroll" href="#page-top">Joyixir OÜ</a> -->
      <a href="#page-top"><img src="assets/img/joyixir-logo.png" height="45px" /></a>
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault" aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll active" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#games">Games</a>
          </li>
          <!-- <li class="nav-item">
            <a class="nav-link js-scroll" href="#work">Work</a>
          </li> -->
          <!-- <li class="nav-item">
            <a class="nav-link js-scroll" href="#blog">Blog</a>
          </li> -->
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- ======= Intro Section ======= -->
  <div id="home" class="intro route bg-image" style="background-image: url(assets/img/intro-bg.jpg)">
    <div class="overlay-itro"></div>
    <div class="intro-content display-table">
      <div class="table-cell">
        <div class="container">
          <!--<p class="display-6 color-d">Hello, world!</p>-->
          <h1 class="intro-title mb-4">Joyixir</h1>
          <p class="intro-subtitle"><span class="text-slider-items">Elixir of Joy., an Indie Mobile Game Studio., Fun Games for All!</span><strong class="text-slider"></strong></p>
          <!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> -->
        </div>
      </div>
    </div>
  </div><!-- End Intro Section -->

  <main id="main">

    <!-- ======= About Section ======= -->
    <section id="about" class="about-mf sect-pt4 route">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="box-shadow-full">
              <div class="row">
                <div class="col-md-12">
                  <div class="about-me pt-4 pt-md-0">
                    <div class="title-box-2">
                      <h5 class="title-left">
                        About us
                      </h5>
                    </div>
                    <p class="lead">
                      Joyixir is an indie game studio that develops fun and
                      entertaining free-to-play games on mobile platforms that
                      engages thousands of people.
                    </p>
                    <p class="lead">
                      We are a small team but with big ambitions. Recently, we
                      founded our headquarter in Tartu, Estonia. Currently, our
                      focus is on hyper-casual games working with the biggest
                      publishers in the industry. Our long-term plan is to focus
                      on casual and mid-core games which keep people entertained
                      for years.
                    </p>
                    <p class="lead">
                      Other than being a video game company, we are a startup company
                      with entrepreneurial mindset and thirst for innovation from
                      our products to our company culture. While developing games,
                      we think about innovative game design principles that 
                      leverages machine learning and data-intensive approaches
                      to forge personalized and engaging games with mindfulness.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section><!-- End About Section -->

    <!-- ======= Counter Section ======= -->
    <div class="section-counter paralax-mf bg-image" style="background-image: url(assets/img/counters-bg.jpg)">
      <div class="overlay-mf"></div>
      <div class="container">
        <div class="row">
          <div class="col-sm-3 col-lg-3">
            <div class="counter-box pt-4 pt-md-0">
              <div class="counter-ico">
                <span class="ico-circle"><i class="ion-ios-people"></i></span>
              </div>
              <div class="counter-num">
                <p class="counter">14</p>
                <span class="counter-text">People</span>
              </div>
            </div>
          </div>
          <div class="col-sm-3 col-lg-3">
            <div class="counter-box pt-4 pt-md-0">
              <div class="counter-ico">
                <span class="ico-circle"><i class="ion-ios-game-controller-b"></i></span>
              </div>
              <div class="counter-num">
                <p class="counter">18</p>
                <span class="counter-text">Games Developed</span>
              </div>
            </div>
          </div>
          <div class="col-sm-3 col-lg-3">
            <div class="counter-box counter-box pt-4 pt-md-0">
              <div class="counter-ico">
                <span class="ico-circle"><i class="ion-ios-time"></i></span>
              </div>
              <div class="counter-num">
                <p class="counter">32.00</p>
                <span class="counter-text">Playtime (min)</span>
              </div>
            </div>
          </div>
          <div class="col-sm-3 col-lg-3">
            <div class="counter-box pt-4 pt-md-0">
              <div class="counter-ico">
                <span class="ico-circle"><i class="ion-ios-body-outline"></i></span>
              </div>
              <div class="counter-num">
                <p class="counter">39,000</p>
                <span class="counter-text">Daily Active Users (DAU)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div><!-- End Counter Section -->


    <!-- ======= Games Section ======= -->
    <section id="games" class="services-mf pt-5 route">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="title-box text-center">
              <h3 class="title-a">
                Games
              </h3>
              <p class="subtitle-a">
                Some of our recent casual and hyper-casual games.
              </p>
              <div class="line-mf"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="service-box">
              <div class="service-ico">
                <img src="assets/img/game_aurora.png" class="ico-circle"/>
              </div>
              <div class="service-content">
                <h2 class="s-title"><a href="https://aurorapuzzle.com/">Aurora</a></h2>
                <p class="s-description text-center">
                  Let them dye.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="service-box">
              <div class="service-ico">
                <img src="assets/img/game_beautysalon3d.png" class="ico-circle"/>
              </div>
              <div class="service-content">
                <h2 class="s-title"><a href="https://apps.apple.com/us/app/beauty-salon-3d/id1545813093">Beauty Salon 3D</a></h2>
                <p class="s-description text-center">
                  Make up the customers.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="service-box">
              <div class="service-ico">
                <img src="assets/img/game_blockmaster3d.png" class="ico-circle"/>
              </div>
              <div class="service-content">
                <h2 class="s-title"><a href="https://apps.apple.com/us/app/blocks-master-3d/id1547977803">Blocks Master 3D!</a></h2>
                <p class="s-description text-center">
                  Super Fun 3D Block Puzzle
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="service-box">
              <div class="service-ico">
                <img src="assets/img/game_stackdust3d.png" class="ico-circle"/>
              </div>
              <div class="service-content">
                <h2 class="s-title"><a href="https://apps.apple.com/us/app/stack-dust-3d/id1533630999">Stack Dust 3D</a></h2>
                <p class="s-description text-center">
                  Super Addictive Stacker.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="service-box">
              <div class="service-ico">
                <img src="assets/img/game_emojimaster.png" class="ico-circle"/>
              </div>
              <div class="service-content">
                <h2 class="s-title"><a href="https://apps.apple.com/us/app/emoji-master/id1538113703">Emoji Master!</a></h2>
                <p class="s-description text-center">
                  Connect Emojis, Make Words.
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="service-box">
              <div class="service-ico">
                <img src="assets/img/game_dragmaster.png" class="ico-circle"/>
              </div>
              <div class="service-content">
                <h2 class="s-title"><a href="https://apps.apple.com/us/app/drag-master/id1542735244">Drag Master!</a></h2>
                <p class="s-description text-center">
                  Fun Drag Races.
                </p>
              </div>
            </div>
          </div>
        </div>
        <p style="text-align:right;"><a href="https://apps.apple.com/us/developer/joyixir/id1534847102#see-all/i-phonei-pad-apps">View all launched games <i class="fa fa-chevron-right"></i></a></p>
      </div>
    </section><!-- End Services Section -->

    <!-- ======= Contact Section ======= -->
    <section class="paralax-mf footer-paralax bg-image sect-mt4 route" style="background-image: url(assets/img/overlay-bg.jpg)">
      <div class="overlay-mf"></div>
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="contact-mf">
              <div id="contact" class="box-shadow-full">
                <div class="row">
                  <div class="col-md-6">
                    <div class="title-box-2">
                      <h5 class="title-left">
                        Send us a Message
                      </h5>
                    </div>
                    <div>
                      <form action="https://formspree.io/f/xleoalon" method="post" role="form" class="php-email-form">
                        <div class="row">
                          <div class="col-md-12 mb-3">
                            <div class="form-group">
                              <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
			      <input type="text" name="_gotcha" style="display:none" /> <!-- honeypot to bust the spammers! -->
                              <div class="validate"></div>
                            </div>
                          </div>
                          <div class="col-md-12 mb-3">
                            <div class="form-group">
                              <input type="email" class="form-control" name="_replyto" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
                              <div class="validate"></div>
                            </div>
                          </div>
                          <div class="col-md-12 mb-3">
                            <div class="form-group">
                              <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" />
                              <div class="validate"></div>
                            </div>
                          </div>
                          <div class="col-md-12">
                            <div class="form-group">
                              <textarea class="form-control" name="message" rows="5" data-msg="Please write something for us" placeholder="Message" required></textarea>
                              <div class="validate"></div>
                            </div>
                          </div>
                          <div class="col-md-12 text-center mb-3">
                            <div class="loading">Loading</div>
                            <div class="error-message"></div>
                            <div class="sent-message">Your message has been sent. Thank you!</div>
                          </div>
			  <!-- <div class="g-recaptcha" data-sitekey="6LfpCc0aAAAAAJsPV6sm-Yn_izxfZFW58jh5ipoh"></div> --> 
                          <div class="col-md-12 text-center">
                            <button type="submit" class="button button-a button-big button-rouded">Send Message</button>
                          </div>
                        </div>
                      </form>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="title-box-2 pt-4 pt-md-0">
                      <h5 class="title-left">
                        Get in Touch
                      </h5>
                    </div>
                    <div class="more-info">
                      <p class="lead">
                        Are you a talent looking for an opportunity?
                        Are you a publisher looking for a professional team
                        producing high quality games?
                        Are you an investor seeking a high-return investment option?
                        or perhaps you have a business offer or an idea you want
                        to share with us, anyhow, we are open to talk with you :)
                      </p>
                      <ul class="list-ico">
                        <li><span class="ion-ios-location"></span> Joyixir OÜ, Tartu, Estonia</li>
			<li><span class="ion-ios-telephone"></span> (+372)-534-3666-1</li>
                        <li><span class="ion-email"></span> info[at]joyixir[dot]com</li>
                      </ul>
                    </div>
                    <!--
                    <div class="socials">
                      <ul>
                        <li><a href=""><span class="ico-circle"><i class="ion-social-facebook"></i></span></a></li>
                        <li><a href=""><span class="ico-circle"><i class="ion-social-instagram"></i></span></a></li>
                        <li><a href=""><span class="ico-circle"><i class="ion-social-twitter"></i></span></a></li>
                        <li><a href=""><span class="ico-circle"><i class="ion-social-pinterest"></i></span></a></li>
                      </ul>
                    </div>
                    -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section><!-- End Contact Section -->

  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="copyright-box">
            <p class="copyright">&copy; Copyright <strong>DevFolio</strong>. All Rights Reserved</p>
            <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=DevFolio
            -->
              Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer><!-- End  Footer -->

  <a href="#" class="back-to-top"><i class="fa fa-chevron-up"></i></a>
  <div id="preloader"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/jquery/jquery.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/jquery.easing/jquery.easing.min.js"></script>
  <!-- <script src="assets/vendor/php-email-form/validate.js"></script> -->
  <script src="assets/vendor/waypoints/jquery.waypoints.min.js"></script>
  <script src="assets/vendor/counterup/jquery.counterup.min.js"></script>
  <script src="assets/vendor/owl.carousel/owl.carousel.min.js"></script>
  <script src="assets/vendor/typed.js/typed.min.js"></script>
  <script src="assets/vendor/venobox/venobox.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

</body>

</html>