Sam Page

<html lang="en" >
<head>
<meta name="p:domain_verify" content="226739b90b7a2d47f3dd3d6b6d7a75ce"/>
<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="2Qonstruct" content="">
  <meta name="N. Roelofsen, J.v. Ooijen." content="">

  <title>2Qonstruct</title>

  <link rel="stylesheet" href="./css/accordian.css">
  <link rel="stylesheet" href="./css/carousel.css">
  <link href="./vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./css/selftext.css">
  <link rel="stylesheet" href="./css/socialmedia.css">	
  <link rel="icon" href="./img/2qonstruct_favicon.png" type="image/gif" sizes="16x16">
  <link rel="stylesheet" href="./css/policyline.css">
  <link rel="stylesheet" href="./css/photobook.css">

   <link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:500,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,800,800i" rel="stylesheet">

  <link href="./css/resume.min.css" rel="stylesheet">
  <style>.banner {  overflow: auto;  overflow: hidden !important; }</style>
  <style type="text/css">  h1 { font-size:80px; } </style>

	<style>
	table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	}
	th, td {
	padding: 15px;
	text-align: left;
	}
	table#t01 {
	width: 100%;    
	background-color: #f1f1c1;
	}
	</style>

  <style type="text/css">#videohome { position: top; height: auto;width: 100%;top:50%;  left:0;  right:0;  bottom:0;	}</style>  
  <style type="text/css">
	.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	}

	.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
	</style>
	<style>
	.button {
  background-color: none;
  border: none;
  color: white;
  padding: 7px 7px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
	}
	.button1 {
  background-color: transparent;
  color: black;
  border: 2px solid #e5e5e5;
	}

	.button1:hover {
  background-color: #d66c42;
  color: none;
	}
	</style>
    <script>
        ! function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>
	<script async defer crossorigin="anonymous" src="https://connect.facebook.net/nl_NL/sdk.js#xfbml=1&version=v4.0"></script>
    <script type="text/javascript" src="./js/selftext.js"></script>



	</head>
	<body id="page-top" class="bg-secondary">

  <nav class="text-left navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav">
    <a class="navbar-brand js-scroll-trigger" href="#page-top">
      <span class="d-block d-lg-none"><img class="float-left img-fluid mx-auto mb-0" src="./img/2qonstruct_logo1.png" alt="">
      </span>
      <span class="d-none d-lg-block">
        <img class="img-fluid mx-auto mb-1" src="./img/2qonstruct_logo.png" alt="">
      </span>
    </a>
	<h3 align="text-center"><span class="text-tertiary">2</span><span class="text-secondary">Qonstruct</span></h3>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
	<footer class="text-left float-bottom mb-1 text-secondary"><a href="./index"><img src="./img/uk_flag.png" href="./index" class="float-center"></a><b> / </b><a href="./nl/"><img src="./img/nl_flag.png" href="./nl/" class="float-center"></a></footer>
    <div class="collapse navbar-collapse text-left" id="navbarSupportedContent">
      <ul class="navbar-nav">
		<li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#news">News</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger mb-2" href="#about">About us</a>
        </li>
		<li class="nav-item text-secondary mb-0 text-left">
		  <b>&nbsp; GAMES</b>
		</li>
		<li class="nav-item mb-0">
          <a class="nav-link js-scroll-trigger" href="#ghost_hunter">❖ Ghost Hunter</a>
        </li>
        <li class="nav-item mb-0">
          <a class="nav-link js-scroll-trigger" href="#blockhead_survival">❖ Blockhead Survival</a>
        </li>
        <li class="nav-item mb-0">
          <a class="nav-link js-scroll-trigger" href="#bricktopia">❖ Bricktopia</a>
        </li>
        <li class="nav-item mb-0"> 
          <a class="nav-link js-scroll-trigger mb-1" href="#bird_angular">❖ Bird Angular</a>
        </li>    
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#gallery">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#future">Future</a>
        </li>
        <li class="nav-item mb-5">
          <a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
        </li>
	   
	<footer>
		<center class="text-center text-secondary"><a class="text-center text-tertiary" href="../policy/">Privacy</a> / <a class="text-center text-tertiary" href="../terms/">Terms</a></center>
		<p class="text-center text-secondary">© 2Qonstruct 2020, Inc.</p>
	</footer>   
   </ul> </div>
  </nav>
  
<style>#picture {    max-width:65%;}</style>

<body class="bg-tertiary">
	<br><br>
<center><img src="./img/2qonstruct_long.png" style="width:200px" class="float-top mb-0" id="picture" alt="...">
	<br><h3 class="mb-2">Game development</h3></center>
	


    
</section>



<!-- <header>
    <video autoplay loop muted poster="./img/wait.png" id="videohome">
        <source class="fixed-top" src="./mov/ìdeevoorlaterbreed10.mp4">
    </video>
    </div>
</header> ----> 
<center>   
  </body> 

<body class="bg-primary">

  <div class="container-fluid p-0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<section>
 <div id="slider-animation" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active float-center">
      <a class="js-scroll-trigger" href="#ghost_hunter"><img src="./img/bar1.png" class="float-top" alt="Ghost Hunter"></a>
        <div class="text-box text-center">
            <h2 class="wow slideInRight" data-wow-duration="2s">Ghost Hunter</h2>
            <p class="wow slideInLeft" data-wow-duration="2s">Ghosts get inflicted by the light, but you have to hold tight. Keep them in your sight and make them fade in the night!. </p>
        </div>
    </div>
    <div class="carousel-item">
      <a class="js-scroll-trigger" href="#blockhead_survival"><img src="./img/bar2.png" class="responsive" alt="Blockhead Survival"></a>
        <div class="text-box text-center">
            <h2 class="wow slideInRight" data-wow-duration="2s">Blockhead Survival</h2>
            <p class="wow slideInLeft" data-wow-duration="2s">Blockhead Survival is an 3D survival game. Try to eliminate the zombies before they eliminate you! </p>
        </div>
    </div>
    <div class="carousel-item">
      <a class="js-scroll-trigger" href="#bricktopia"><img src="./img/bar3.png" class="responsive" alt="Bricktopia"></a>
        <div class="text-box text-center">
            <h2 class="wow slideInRight" data-wow-duration="2s">Bricktopia</h2>
            <p class="wow slideInLeft" data-wow-duration="2s">A flashy arcade game at a high pace. Draw a paddle with your fingers on the screen! </p>
        </div>
    </div>
    <div class="carousel-item">
      <a class="js-scroll-trigger" href="#bird_angular"><img src="./img/bar4.png" class="responsive" alt="Bird Angular"></a>
        <div class="text-box text-center">
            <h2 class="wow slideInRight" data-wow-duration="2s">Bird Angular</h2>
            <p class="wow slideInLeft" data-wow-duration="2s">Do you have the patience and concentration to become the best survivour? This game is to put your awareness to the test. It is all about the hand-eye coordination. Try it out! </p>
        </div>
    </div>
  
</div>
  <a class="carousel-control-prev" href="#slider-animation" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#slider-animation" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

</div>
</section>
 <hr class="m-0">
    <section class="resume-section p-3 p-lg-8 d-flex align-items-center" id="news">
      <div class="w-100">
        <h1 class="mb-0">News</h1><br>

		<div class="none">
      <img src="./img/newstop.jpg" class="img-fluid shadow-lg center" alt="Responsive image">
	  </div>
	  

<br><p class="text-subheading">✎<u> JUNE 12, 2020</u></p>
		  		    <h3 class="mb-0 text-center">	Akhil's Entertainments promoted our game Ghost Hunter again, but now from our latest upload. </h3><br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content"><br>
      <div class="none">
      <img src="./img/akhils2.png" style="width:600px" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>  
			<h3 class="text-left mb-0">			</h3>
            <div class="text-left subheading mb-3">The partnership between Akhil and us</div>
            <p class="text-left">				Akhil's Entertainments promoted Ghost Hunter for the second time. This time he showed the updated version of Ghost Hunter. He clearly liked it alot!<br> 
												We would like to thank Akhil for good partnership so far! Maybe we'll meet again. <br>
												Click on the link underneath to watch the video.<br>
												<a class="text-left" href="https://www.youtube.com/watch?v=P1nL7hMCC1o" target="_blank"><b>- Ghost Caught on tape -</b></a></p><br>
				<h3 class="text-left mb-0">			</h3>
            <div class="text-left subheading mb-3">About Akhil's Entertainments</div>
			            <p class="text-left">	A rising star in the world of paranormal activities!<br>
												First Paranormal Investigating channel in Youtube Malayalam. 
												Watch Akhil's video's here:
												<br>
												<a class="text-left" href="https://www.youtube.com/channel/UCPcoWwxch9wp6phzJqB5ijg" target="_blank"><b>- Akhil's Entertainments -</b></a></p><br><br>								
       </div>
	   </div>

<p class="text-subheading">✎<u> JUNE 1, 2020</u></p>
		  		    <h3 class="mb-0 text-center">A big update for our game Ghost Hunter  </h3><br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content"><br>
      <div class="none">
      <img src="./img/functie_ghost_hunter.png" style="width:600px" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">			</h3>
            <div class="text-right subheading mb-3">Ghost Hunter v2.0</div>
            <p class="text-right">				The time has finally come! After months of designing and programming its time for the big update! There are significant changes between this update the old version<br> 
												For more information about the update, click on the link underneath.<br>
												<a class="js-scroll-trigger" href="#ghost_hunter"><b>- Information about Ghost Hunter -</b></a></p><br>
				<h3 class="text-right mb-0">			</h3>
            <div class="text-right subheading mb-3">Updated on Playstore</div>
			            <p class="text-right">	Our game is ready to download on the Playstore.
												Click the link underneath to download Ghost Hunter.
												<br>
												<a href="https://play.google.com/store/apps/details?id=com.twoqonstruct.GhostHunter" target="_blank"><b>- Playstore -> Ghost Hunter -</b></a></p>							
       </div>
	   </div>

<p class="text-subheading">✎<u> MAY 12, 2020</u></p>
		  		    <h3 class="mb-0 text-center">	Akhil's Entertainments promoted our game Ghost Hunter in a video. </h3><br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content"><br>
      <div class="none">
      <img src="./img/akhils.png" style="width:600px" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>  
			<h3 class="text-left mb-0">			</h3>
            <div class="text-left subheading mb-3">Ghost Hunter promoted</div>
            <p class="text-left">				Akhil's Entertainments promoted our game Ghost Hunter in one of his videos. He is making videos about paranormal activities. Ghost Hunter suited his profile perfectly.<br> 
												Click on the link underneath to watch the video.<br>
												<a class="text-left" href="https://www.youtube.com/watch?v=P1nL7hMCC1o" target="_blank"><b>- You can see God in this way | This man Challenge -</b></a></p><br>
				<h3 class="text-left mb-0">			</h3>
            <div class="text-left subheading mb-3">Akhil's Entertainments</div>
			            <p class="text-left">				First Paranormal Investigating channel in Youtube Malayalam.
												Watch Akhil's video's here:
												<br>
												<a class="text-left" href="https://www.youtube.com/channel/UCPcoWwxch9wp6phzJqB5ijg" target="_blank"><b>- Akhil's Entertainments -</b></a></p><br><br>								
       </div>
	   </div>
	  
			

	  
<p class="text-subheading">✎<u> APRIL 1, 2020</u></p>
		  		    <h3 class="mb-0 text-center">	Gameskeys.net chose our game Ghost Hunter as the best underrated arcade game at the moment. </h3><br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content"><br>
      <div class="none">
      <img src="./img/gamekeys.png" style="width:600px" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">			</h3>
            <div class="text-right subheading mb-3">Ghost Hunter on the list</div>
            <p class="text-right">				Gameskeys.net chose our game Ghost Hunter as the best underrated arcade game at the moment<br> 
												For more information about this article, click the link.<br>
												<a href="https://gameskeys.net/underrated-arcade-games-to-play/" target="_blank"><b>- Underrated Arcade Games To Play -</b></a></p><br>
				<h3 class="text-right mb-0">			</h3>
            <div class="text-right subheading mb-3">Looking for game keys and info?</div>
			            <p class="text-right">				GamesKeys.net is a comparison site of cd keys, we compare game cd keys prices. 
												At GamesKeys, you can also find walkthroughs and reviews of games
												<br>
												<a href="https://gameskeys.net/" target="_blank"><b>- GamesKeys.net -</b></a></p><br><br>								
       </div>
	   </div>
	   


	  
    </section>
 <hr class="m-0">
    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="about">
      <div class="w-100" id="bg-primary">
   <!--    <h1 class="mb-0">2
          <span class="text-primary">Qonstruct</span>
	  </h1>
       	<h2 class="text-center">is 
		<span
		class="txt-rotate font-family:Constania"
		data-period="4000"
		data-rotate='[  "Gaming.", "Designing.", "Programming.", "Sharing!" ]'></span>
	</h2> -->
			   

			
			<h1 class="mb-5">About us</h1>	

	<h3 class="mb-0 text-left"></h3>
        <p class="lead mb-0 text-left">		2Qonstruct is a company constructed by two partners who wanted to startup their own business as game developers.
											We produce game applications, which are only playable on Android-devices.<br>
											It is established in The Netherlands in the city of Utrecht.<br><br>
											We know eachother since primary school and used to play a lot of videogames together.
											A few years ago (2015), we came up with the idea to make a platform game, different from the other platform games.<br>
											Our first game came out on the first of Februari 2016.<br>
											After completing our first application, we started to work on the next apps.
											At this moment, we have 4 games available on Google Playstore.<br /><br /></p>
											
											<h3 class="text-center">		<b>
											<a class="js-scroll-trigger" href="#ghost_hunter"> <img src="./img/gh_logo.png" style="width:70px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;⋐ Ghost Hunter ⋑ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><br /><br />
											<a class="js-scroll-trigger" href="#blockhead_survival"> <img src="./img/bhs2.png" style="width:70px">⋐ Blockhead Survival ⋑</a></b><br><br>
											<a class="js-scroll-trigger" href="#bricktopia"> <img src="./img/logo1.png" style="width:70px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⋐ Bricktopia ⋑ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><br /><br />
											<a class="js-scroll-trigger" href="#bird_angular"> <img src="./img/logo_bird.png" style="width:70px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ⋐ Bird Angular ⋑ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></b>
											
											</h3>
											<br />
											
											

		<p class="lead mb-0 text-left">		Our fifth game will be an "Untouchable" app.<br>
											More information can be found in the <a class="js-scroll-trigger" href="#future">future</a> tab.<br><br>
											
											All the specific information you might need for the games we produced, are shown underneath this tab.<br><br>
										
											Help us spreading our apps by sharing our games with friends in exchange for goodies or free Pro version games.<br>
											We are giving away small presents for those who succesfully recruit people.<br>
											Don't hasitate to send us an e-mail!<br>
											Stay in contact by following us on socialmedia, found in the <a class="js-scroll-trigger" href="#contact">contact</a> tab.<br>
											<br>
											Help us grow the community!<br><br>
											
											
		</p>
      </div>
    </section>

<hr class="m-2">

    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="ghost_hunter">
      <div class="w-100">
        
<h1 class="mb-2">Ghost Hunter</h1>
     
	 
<div class="container">
  <div id="carousel1" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view">
                <img class="d-block w-100" src="./img/functie_ghost_hunter.png" alt="First slide">
                <div class="mask rgba-black-light"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/brick_car3.png" alt="Second slide">
                <div class="mask rgba-black-strong"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/brick_car9.png" alt="Third slide">
                <div class="mask rgba-black-slight"></div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div> 
	  
	  
	  <br>
	<h3 class="mb-0 text-center">					Ghosts get inflicted by the light, but you have to hold tight.<br>
													Keep them in your sight and make them fade in the night!</h3>	<br>
		<div class="subheading mb-0 text-center">	Start now with this one-of-a-kind ghost hunting game to become the best ghost hunter!
									Defeat all different kind of ghosts in the campaign mode. 
									Each level harder than the one before. <br>
									Try to be as fast a possible to collect all the stars to progress in the campaign. 
									There are different types of ghosts which all have their own strength. 
									Make sure to fend off all the ghosts before you battery dies!</div>
													<br><br>
		 

		 <h3 class="mb-0 text-left">What makes Ghost Hunter different from other games?</h3><br>
            <p class="text-left">	A real flashlight. With the unique lighting of the flashlight, you will be able see all the ghosts in front of you and fade them.<br>
									Including challenging levels. With the different kind of ghosts in the campaign mode you can’t just fade them away that easy. Ghost Hunter is easy to play, but hard to master.<br>
									Ghost Hunter has an unique movement system consisting twin joysticks, one for moving and one for turning, makes it easy to walk around and lure the ghosts in the light.</p>
		<br><br>
       <br>
     
										
				
  <div class="collapse" id="collapse2">
  <div class="box">
  <br>

<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="">
      <img src="./img/map_scroll.gif" class="rounded float-left" style="width:250px" id="picture" alt="...">
	  </div>
		   

		   
		   <h3 class="mb-0 text-right">Let's start with Campaign mode</h3>
            <div class="subheading mb-3 text-right">Level overview is a map scroll</div>
            <p class="text-right">All levels are shown on the map scroll.
								The map tells you how far you've climbed the ladder so far. 
								Press the pulsing level and start the game.
								Earn at least one star to unlock the next level.
								The scroll reaches till level 30.<br><br>
								
								
								But for some levels, you'll need a required amount of stars to enter.</p>
													
							<p class="text-right">		<b>Amount of stars needed to unlock these levels:</b><br />
									- Level 11 requires <i>15 stars</i><br />
									- Level 21 requires <i>40 stars </i><br />
									- Level 30 requires <i>87 stars</i><br /></p><br>
									
			 <p class="text-right">After a while you'll notice that it becomes harder to get 3 stars.
									Level 30 can be entered after finishing all previous levels with 3 stars.<br>
									So, sometimes a player have to retry the same level over again and over again to achieve 3 stars.
									More levels will be added to the scroll in the future.</p>						
									
									
	
					       </div>
        </div>
										
			

  <br>
  
	   </br>
	   	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/joysticks.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>  
			<h3 class="text-left mb-0">				Working with joysticks in different axis</h3>
            <div class="text-left subheading mb-3">	Learn how to control the flashlight</div>
            <p class="text-left">					The player will have 5 seconds to prepare itself in the beginning of each level.
													Face the ghosts to fend them off.
													There are 2 different joysticks on the bottom of the screen as seen underneath here:</p>
													
													<div class="text-left">
							<img src="./img/rotate.png" style="width:40px">	<b>Turning</b> - <i>Rotate around the axis of the character.</i><br />
							<img src="./img/stamina2.png" style="width:40px">	<b>Moving</b> - <i>Walk forward or backwards with the character.</i><br /></div>													<br>
							<p class="text-left">	We created an option to change the joysticks (for left handed people).
													Swap the domination in Main menu -> Settings -> Domination.<p/>
 </p>
       </div>
       </div>
	   </br>	 
	   
	   
	   
	   
	 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/lives.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">What lives are for</h3>
            <div class="text-right subheading mb-3">And how it works</div>
            <p class="text-right">Lives are getting regeneraded. It generates 1 life every 15 minutes with a total amount of 10 lives. (5 minutes for PRO version owners)
									It will cost 1 life when a player starts a level. <br>
									Survival mode doesn't cost a life.<br>
									You can also earn some lives bij watching some advertisement videos:</p>
									<img src="./img/camera2.png" class="float-right" style="width:100px">
						<div class="text-right">
							<p class="text-right">		<br><br><b>Free lives</b> - <i>Get maximal 3 lives for free per day. </i><br /><br></div>
       </div>
       </div>

	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/ghosts.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>  
			<h3 class="text-left mb-0">There are different ghosts</h3>
            <div class="text-left subheading mb-3">What can I expect from them</div>
            <p class="text-left">	Ghosts are coming to get you, unless you fend them off.
									There are five different ghosts that your character can face. Each ghost has it's own strength. Their powers are shown in a table underneath here:</p>
<h1><table  id="picture">
		<tr>
			<th><img src="./img/ghost_red.png" style="width:40px"></th>
			<th><img src="./img/ghost_blue.png" style="width:40px"></th>
			<th><img src="./img/ghost_green.png" style="width:40px"></th>
			<th><img src="./img/ghost_yellow.png" style="width:45px"></th>
			<th><img src="./img/ghost_boss.png" style="width:50px"></th>  
		</tr>	
		<tr>
			<th>Level 1+</th>
			<th>Level 6+</th>
			<th>Level 11+</th>
			<th>Level 21+</th>
			<th>Level 5+</th>
		</tr>
		<tr>
			<th>1 second</th>
			<th>1 second</th>
			<th>1 second</th>
			<th>3 second</th>
			<th>5 second</th>
		</tr>
		<tr>
			<th>10 Damage</th>
			<th>5 Damage</th>
			<th>10 Damage</th>
			<th>20 Damage</th>
			<th>50 Damage</th>
		</tr>
		<tr>
			<th>Normal size</th>
			<th>Normal size</th>
			<th>Normal size</th>
			<th>Bigger</th>
			<th>Biggest</th>
		</tr>
		<tr>
			<th>Normal speed</th>
			<th>Normal speed</th>
			<th>x1.5</th>
			<th>x1.25</th>
			<th>x1.5</th>
		</tr>
		<tr>
			<th>No</th>
			<th>5 Drain per hit</th>
			<th>No</th>
			<th>No</th>
			<th>No</th>
		</tr>
		</table></h1>						
						
       </div>
       </div>
	   </br>	   

 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/renew.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>  
			<h3 class="text-left mb-0">Back to survival again</h3>
            <div class="text-left subheading mb-3">It's time to pick up some stuff</div>
            <p class="text-left">After each round, a MEDIC-kit together with a Battery-pack will appear.<br />
						When both items are taken, next level will begin. <br />
						Items you found during the waves:</p> <br />
									<br />
						<div class="text-left">
							<p>	<img src="./img/lifeicon.png" style="width:40px">	<b>MEDIC-kit</b> - <i>Spawns at the end of each round and will refill your health.</i><br />
								<img src="./img/battery.png" style="width:40px">	<b>Battery-pack</b> - <i>Spawns at the end of each round and will charge some of your battery power.</i><br />
								<img src="./img/presenticon.png" style="width:40px">	<b>Present</b> - <i>Spawns uncommonly by killing ghosts, with 3 different kind of specialitys, but will run out of time and will disappear in a short while.</i></p>
						</div>
       </div>
       </div>
	   </br>	   



<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/special.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-right">Presents can come in handy</h3>
            <div class="subheading mb-3 text-right">The special is active for 10 seconds</div>
            <p class="text-right">Present can make your gameplay more fun.
									Once every 100 ghosts contain such a present.
									A present will spawn on the floor after lighting one who contained it.</br>
									Don't wait to long, because it will disappear after a while.<br><br><br></p>
						<div class="text-right">
									<p><b>Types of presents:</b><br />
									<i>
									-	Run twice as fast<br />
									-	Turn the lights on. No ghost will survive this<br />
									-	Red glowing spotlight, for instandly destroying ghosts<br /><br><br></i></p>
						</div>
			<p class="text-right">	Each special lasts just for 10 seconds.<br>
									The more ghosts will spawn, the more ofter you get a present.
       </div>
       </div>
	   </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/boss.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>  
			<h3 class="text-left mb-0">				Each level ends with a Boss Ghost</h3>
            <div class="text-left subheading mb-3">	They are harder to destroy</div>
            <p class="text-left">					After each level, the Boss Ghost takes more and more time to light it.
													When you succesfully light the Boss Ghost, there is a 10% chance of giving 10 credits.<br>
													If you are that lucky, it will add an additional 10 credits to your creditpile.<br><br>
													After finishing each level you will receive an 'X' amount of coins.<br> 
													The amount of credits depends on what level you reached.</p>
       </div>
       </div>
	   </br>	   

<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/upgrades.jpg" class="rounded float-left" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-right">				Upgrade your character by spending your coins</h3>
            <div class="subheading mb-3 text-right">You can become quicker by upgrading</div>
						<p class="text-right">		Upgrades play an important part of this game. This means that the diffrence to reach the top is easier by upgrading your character to the highest level. </p>
									<br />
					<div class="text-right">	<p><b>	There are 4 specific upgrades:	</b></br>
									<b>- Health</b><br />
									<i>The more health, the more hits you can take</i><br />
									<b>- Battery strength</b>	<br />
									<i>The more battery strength, the longer your light will shine</i><br />
									<b>- Walking speed</b>	<br />
									<i>The faster you walk, the easier you get away by the ghosts</i><br />
									<b>- Turning speed</b>	<br />
									<i>The faster you turn, the easier to make fast corners<br /></i></p>
							</div>			<br />
									<p class="text-right">	Save your credits for the specific upgrades.<br />
															Each upgrade is getting more expensive.<br />
															The upgrades are automatically saved on your device.</p>
	   </div>
       </div>
	   <br> 
	   	 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
		   <h3 class="mb-0 text-center">The PRO version</h3>
            <div class="subheading mb-3 text-center">What does it bring me?</div>
            <p class="text-center">   	We give the PRO version users a little advantage compared to free version users.
										However, the average highscore will not be higher then a Free version user.
										This will be unfair for others.<br><br>
										The advantages are shown in the table underneath here.
										<br></p>
			
	<h2><table>
		<tr>
			<th> </th>
			<th>Free version</th>
			<th>PRO version</th> 
		</tr>
		<tr>
			<td>Advertisement banner</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Second chance vid</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Upgrade prices</td>
			<td>100%</td>
			<td>50% ✔</td>
		</tr>
		<tr>
			<td>Free credits</td>
			<td>0</td>
			<td>500 ✔</td>
		</tr>
		<tr>
			<td>Life regeneration</td>
			<td>15 min</td>
			<td>5 min ✔</td>
		</tr>
		</table></h2>
			<p class="text-center">   	You can not buy the PRO version elsewhere but in-game.<br>
										It's is also possible to buy lives and coins in the Store.</p>
       </div>
       </div>
	   
	   </div>
	   </div> 
	       <button class="button button1 js-scroll-trigger" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2" id="fold1">
	<h3 id="h3">┌ More info ┐</h3>
	</button>		 <br> <br>
	   <h2 class="mb-2">Ghost Hunter Game trailer</h2>
	   <div class="video-container"><iframe src="https://www.youtube.com/embed/SSzyavFyU1Y?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></br>
	  <center><a href="https://play.google.com/store/apps/details?id=com.twoqonstruct.GhostHunter&hl=en" class="center">
      <img src="./img/google_play.png" class="center shadow-lg rounded" align="middle" alt="...">	  </a>
	  </center>
	  
</section>	
   
 <hr class="m-2">

    <section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="blockhead_survival">
      <div class="w-100">
	  
        <h1 class="mb-2">Blockhead Survival</h1>	

<div class="container">
  <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view">
                <img class="d-block w-100" src="./img/bh1.png" alt="First slide">
                <div class="mask rgba-black-light"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/bh2.png" alt="Second slide">
                <div class="mask rgba-black-strong"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/bh3.png" alt="Third slide">
                <div class="mask rgba-black-slight"></div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div> 

</br>
</br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	

	  <h3 class="mb-0 text-center">Don't get eliminated by the zombies!</h3>	<br><br>
		<div class="subheading mb-3 text-center">	Blockhead Survival is an 3D survival game. Try to eliminate the zombies before they eliminate you!<br>
													Every upcomming wave will be a lot harder to survive. There will be more zombies each wave, and they are getting faster.<br>
													Earn coins by surviving waves to buy better characters. They will come in handy to survive longer, and reach a better highscore!<h3></div>
										<br><br>


		
		   <h3 class="mb-0 text-left">When you start the game for the first time</h3><br>
            <p class="text-left">	When you start the game for the first time, your device connects with your Google Play account.
									This is just for saving your highscore and achievements.<br>
									Once it's connected, a frame pops up asking if you want personalised or non-personalised advertisements. (not for PRO version users)<br><br>
									When you press the start button, a quick guidance is about to come up.
									At the start of the game you can choose your character.
									Follow the instructions for an optimal gameplay.<br>
									These are the steps shown underneath "More info".		
       </div>
        </div>
										
				
  <div class="collapse" id="collapse0">
  <div class="box">


 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/characterview.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">Choose your character</h3>
            <div class="subheading mb-3 text-left">Survive longer by using a more expensive character!</div>
            <p class="text-left">	This survival game has 14 different characters to play with. 
									The first character is for free, but a more skilled character will cost some coins. <br>
									An expensive character survives longer due the hitpoints and stamina.
									Every character has its own maximum amount of space per weapon ammunition. 
									Spare as much ammunition to reach the best highscore!

									</p>
       </div>
       </div>
	   </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/zombieinfo.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">About the zombies</h3>
            <div class="text-right subheading mb-3">Watch out for them!</div>
            <p class="text-right">Zombies will spawn in several locations on the map, and they will search for you.
								Try to defeat them before they defeat you!
								There are three different kinds of zombies.</br><br></p>
						<div class="text-right">				
							<p>	<b><u>Zombies:</u></b></br>
								<b>Normal zombie :</b> <i>		<br>100 hit points and will be faster each wave. Does 10 damage per second (each wave, except Boss waves)<br /></i>
								<b>Suicide zombie :</b> <i>		<br>75 hit points and will destroy itself as he is near you. Does 100 damage (even waves, except Boss waves)<br /></i>
								<b>Boss zombie :</b> <i>		<br>1125 hit points, and will be getting half more hit points after each 5 waves . Does 50 damage per second.<br>
								<br /></i>
								</p></div>
            <p class="text-right">	All zombies become faster after each wave. </p>
       </div>
       </div>
	   </br>	   
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	 <div class="float-right">
	  <img src="./img/wavesinfo.jpg" class="shadow-lg rounded float-right" alt="..."> </br>	 
	 </div>
			<h3 class="mb-0 text-left">Waves become harder and harder</h3>
            <div class="subheading mb-3 text-left">What means that you have to keep your eyes open</div>
            <p class="text-left">  				Each next wave will be a lot harder to survive. You have to take care of your ammunition, stealth and hitpoints.
												There is a formula for zombie spanw times:<br><br>
												<b>-</b> Current wave X 2 (for amount of Normal Zombies) <br>
												<b>-</b> Each 2 waves +1 Suicide Zombie<br>
												<b>-</b> Each 5 waves just 1 Boss Zombie<br><br>
											
												Try to score as high as you can!</p>
       </div>
       </div>
       </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	         <div class="float-right text-right">									
		<h4>						Refillers:</h4>
		<p class="lead">	<b>		
									Stamina	 		<img class="shadow-lg" style="width:70px" src="./img/stamina.png"></br><br>
									Ammunition			<img class="shadow-lg" style="width:70px" src="./img/ammo.png"></br><br>
									Medic-kit		 	<img class="shadow-lg" style="width:70px" src="./img/health.png"></br></b>
      </div>
		   <h3 class="mb-0 text-left">Take care of your stuff</h3>
            <div class="subheading mb-3 text-left">Be smart</div>
            <p class="text-left">There are 3 different kinds of refillers:<br> 
								<b>Stamina</b>: Be aware of your stamina. It will slow down your movement speed every 10 seconds. Refill your stamina after each wave (shown on the minimap) to keep your movement speed steady. Take after each wave.<br><br> 
								<b>Ammunition</b>: Spare as much ammunition as possible to survive long enough to set a highscore. There are several ammunition spawn points (shown on the minimap). Take ammunition at wave 10, 12, 14, 16 etc.<br><br> 
								<b>Medic-kit</b>: If you are low on Hitpoints, take a first aid kid (shown on the minimap) to refill it. Take in wave 10, 12, 14, 16 etc.</p>
       </div>
       </div>
	   </br>	 


 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
	  	  <div class="float-right text-right">	
      <img src="./img/minimap.gif" style="width:270px"  class="rounded float-right" id="picture" alt="...">

	  </div></div>
		   <h3 class="mb-0 text-left">The handy minimap</h3>
            <div class="subheading mb-3 text-left">This feature will help you a lot</div>
            <p class="text-left">The minimap will come in handy to find refills and zombies.<br> 
								After each next wave, you'll find directly where to go to. <br><br> 
								There are three different kinds of zombies, 3 different kinds of refills and the character that you play with, that can be shown on the minimap.
								It's shown underneath here:</p>
				<div class="text-center"><p>
					<img style="width:40px" src="./img/player.png" class="mb-1"><b><i> &nbsp;&nbsp;Current Player</b></i><br>
					<img style="width:40px" src="./img/zombie.png" class="mb-1"><b><i> &nbsp;Normal Zombie</b></i><br>
					<img style="width:40px" src="./img/bombzombie.png" class="mb-1"><b><i> &nbsp;Suicide Zombie</b></i>	<br>
					<img style="width:40px" src="./img/bosszombie.png" class="mb-1"><b><i> &nbsp;&nbsp;Boss Zombie &nbsp;&nbsp;</b></i><br />
					<img style="width:40px" src="./img/ammo.png" class="mb-1"><b><i> &nbsp;&nbsp; Ammunition &nbsp;&nbsp;</b></i><br>
					<img style="width:40px" src="./img/health.png" class="mb-1"><b><i> &nbsp;&nbsp;&nbsp;&nbsp; Medic-kit &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></i> <br>
					<img style="width:40px" src="./img/stamina.png" class="mb-1"><b><i> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Stamina &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></i><br>
					
					</p>

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

 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	         <div class="float-right text-right">									
		<img class="" style="width:270px" src="./img/bhsguns.jpg"></br><br>
      </div>
		   <h3 class="mb-0 text-left">Shoot the zombies down</h3>
            <div class="subheading mb-3 text-left">Here are the weapons</div>
            <p class="text-left">There are 4 different kinds of weapons: (<b>in order</b>)<br><br>
								<b>Claymore</b>: Throws the claymore underneath you, and will explode in 5 seconds. Run away before it hits you. Does 100 damage in a small area. (one at the time)<br><br> 
								<b>Assault rifle</b>: A full automatic weapon. Does 75 damage per bullet<br><br>
								<b>Pistol</b>: A single shot weapon. Does 50 damage per bullet<br><br>
								<b>Shotgun</b>: A semi-automatic weapon. Bullet does 150 damage and hit multiple targets</p>
       </div>
       </div>
	   </br>	 


	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/secondchance.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">Can I try again?</h3>
            <div class="text-right subheading mb-3">A second chance to proof your skills</div>
            <p class="text-right">	The game is over when you don't have anymore hitpoints, but there is always a second chance for everybody.
									There for you have to watch a video to resume the gameplay. (the PRO version doesn't contain videos)<br><br>
									Continue the game by pressing the "Go" button. Go for it!<br>
									You are invincible for 5 seconds to run away.<br><br>
									The game will be definitely over if your hitpoints hit the zero again.<br>
									Your score will be submitted. Even if you quit the game.</p>
       </div>
       </div>
	   	   </br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/achiev.png" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">Connect your account</h3>
            <div class="subheading mb-3 text-left">Dominate your friends</div>
            <p class="text-left">	Log in with your google account to record your highscores.<br><br>
									Ranks are seen in the Leaderboards tab, in the main menu. See if your highscore fits the top of the Day, Month or All time.
									Switch from global to social to match your score with your friends.<br>
									Challenge with them and try to become the best survivor!<br><br>
									Achievements are rewarded while playing the game. They can be seen in the Achievents tab (left top corner).
									There are 40 achievements you can earn a lot of Google Play Games experience:<br><br>
									<div class="text-left">
									<b>- Start game for the first time</b><br>
									<b>- Connect with Google Play</b><br>
									<b>- Kill zombies -</b> 100 times/ 1000 times / 10000 times / 50000 times<br>
									<b>- Fire assault rifle bullets -</b> 100 times/ 1000 times / 10000 times<br>
									<b>- Fire shotgun bullets -</b> 100 times/ 1000 times / 10000 times<br>
									<b>- Fire pistol bullets -</b> 100 times/ 1000 times / 10000 times<br>
									<b>- Drop claymore -</b> 10 times/ 100 times / 1000 times<br>
									<b>- Gather stamina -</b> 10 times/ 100 times / 1000 times<br>
									<b>- Gather ammunition -</b> 10 times/ 100 times / 1000 times<br>
									<b>- Gather health -</b> 10 times/ 100 times / 1000 times<br>
									<b>- Unlock characters -</b> 2 till 14<br>
					</p>
      </div>
       </div>
       </div>	   </br>
	 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
		   <h3 class="mb-0 text-center">The PRO version</h3>
            <div class="subheading mb-3 text-center">What does it bring me?</div>
            <p class="text-center">   	We give the PRO version users a little advantage compared to free version users.
										However, the average highscore will not be higher then a Free version user.
										This will be unfair for others.<br><br>
										The advantages are shown in the table underneath here.
										<br></p>
			
	<h2><table>
		<tr>
			<th> </th>
			<th>Free version</th>
			<th>PRO version</th> 
		</tr>
		<tr>
			<td>Advertisement banner</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Watch videos</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Character prices</td>
			<td>100%</td>
			<td>50% ✔</td>
		</tr>
		<tr>
			<td>Free cash</td>
			<td>0</td>
			<td>500 ✔</td>
		</tr>
		</table></h2>
			<p class="text-center">   	You can not buy the PRO version elsewhere but in-game.</p>
       </div>
       </div>
  </div> </div>

  <button class="button button1 js-scroll-trigger" data-toggle="collapse" data-target="#collapse0" aria-expanded="false" aria-controls="collapse0" id="fold0">
	<h3 id="h3">┌ More info ┐</h3>
	</button>	
   <br>
  <br>
	   <h2 class="mb-2">Blockhead Survival Game trailer</h2>
	<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/AHImj4D6l0U" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    	   	   </br><center><a href="https://play.google.com/store/apps/details?id=com.TwoQonstruct.BlockheadSurvival&hl=en" class="center">
      <img src="./img/google_play.png" class="center shadow-lg rounded" align="middle" alt="...">
	  </a></center>
   </div>

  
</section>



   <hr class="m-2">

    <section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="bricktopia">
      <div class="w-100">
	  
        <h1 class="mb-2">Bricktopia</h1>	

<div class="container">
  <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view">
                <img class="d-block w-100" src="./img/fuj.png" alt="First slide">
                <div class="mask rgba-black-light"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/brick_car1.png" alt="Second slide">
                <div class="mask rgba-black-strong"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/brick_car2.png" alt="Third slide">
                <div class="mask rgba-black-slight"></div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div> 

</br>
</br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	

	  <h3 class="mb-0 text-center">A flashy arcade game at a high pace!</h3>	<br><br>
		<div class="subheading mb-3 text-center">	Bricktopia is equal to one of the earliest games, called Pong. This is a game with a ball and a moving 'paddle'<br>
													It isn't possible to move your 'paddle' in Bricktopia.
													Place a paddle by drawing one with your finger.<br>
													When the ball touches the paddle, it will shetter into pieces.
													Now you have to draw a new one.<h3></div>
										<br><br>


		
		   <h3 class="mb-0 text-left">The first time playing Bricktopia</h3><br>
            <p class="text-left">	When you start the game for the first time, the game connects your device with your Google Play account.
									This is just for saving your highscore and achievements. Otherwise it can not remember any of your progress.<br>
									Once it's connected, The game asks if you want personalised or non-personalised advertisements. (not for PRO version users)<br><br>
									When you press the start button, a short guidance will come up.
									This will tell you all specific features in the game.
									Follow the instructions for an optimal gameplay.<br>
									These are the steps shown underneath "More info".		
       </div>
        </div>
										
				
  <div class="collapse" id="collapse1">
  <div class="box">


 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/draw_a_line.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">Keep the balls in the air!</h3>
            <div class="subheading mb-3 text-left">Draw a paddle</div>
            <p class="text-left">Such a paddle can be made by drawing a line on your screen with your finger. 
									The paddle can only be placed underneath the laser beam. 
									Place the paddle in the right direction, to aim the ball in a certain direction.</br> </br> 
									The maximum number of paddles that you can deploy at the same time is 2.
									However, the first deployed paddle will be replaced when you add an additional paddle to the game.
									This will cost you '1 Extra Paddle'.</br>
									5 Extra paddles are given at the start of each game. (10 for PRO version)<br><br>
									No Extra Paddle means, you can not replace anymore paddles.
									An Extra Paddle is rewarded by reaching a combo of 50, and goes on each +50. So also 100, 150, 200 etc. will be rewarded
									</p>
       </div>
       </div>
	   </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/toucher.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">Bump your balls into the bricks</h3>
            <div class="text-right subheading mb-3">Earn points by breaking them</div>
            <p class="text-right">When a brick gets hit by a ball within 3 seconds, the points you get are based on the number of combos.
								10 points are rewarded by hitting the brick once.<br />
								You recieve 30 points by 2 hits, and 60 points by 3 hits.</br><br></p>
						<div class="text-right">				
							<p>	<b>	Example :</b></br>
								<i>	1x10 = 10<br /></i>
								<i>	1x10 + 2x10 = 30<br /></i>
								<i>	1x10 + 2x10 + 3x10 = 60<br>
								    1x10 + 2x10 + 3x10 + 4x10 = 100<br>
								and so on...<br /><br /></i>
								</p></div>
            <p class="text-right">	The combo counter can be seen in the middle of the screen.</br>
									The remaining points will be added to the score at the end of a combo, </p>
       </div>
       </div>
	   </br>	   

 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	         <div class="float-right text-right">									
		<h4>						Hits to break:</h4>
		<p class="lead">	<b>		Red 		1<img class="shadow-lg" src="./img/brick_red.png"></br>
									Orange 		2<img class="shadow-lg" src="./img/brick_orange.png"></br>
									Yellow 		3<img class="shadow-lg" src="./img/brick_yellow.png"></br>
									Light green 4<img class="shadow-lg" src="./img/brick_green.png"></br>
									Green 		5<img class="shadow-lg" src="./img/brick_dgreen.png"></br>
									Mint		6<img class="shadow-lg" src="./img/brick_mint.png"></br>
									Light blue 	7<img class="shadow-lg" src="./img/brick_lblue.png"></br>
									Navy blue 	8<img class="shadow-lg" src="./img/brick_navy.png"></br>
									Cobalt blue 9<img class="shadow-lg" src="./img/brick_cobalt.png"></br>
									Indigo 		10<img class="shadow-lg" src="./img/brick_indigo.png"></br>
									Purple 		11<img class="shadow-lg" src="./img/brick_purple.png"></br>
									Pink 		12<img class="shadow-lg" src="./img/brick_pink.png"></b></p>
      </div>
		   <h3 class="mb-0 text-left">Colored bricks</h3>
            <div class="subheading mb-3 text-left">Count how many hits your brick needs, to break</div>
            <p class="text-left">A red colored brick breaks by ons single hit.<br> 
								The pink colored brick needs 12 hits to break. <br><br> 
								The colors of the bricks are in sequence, based on the number of hits to break.
								The amount of hits needed to destroy the brick are also printed in the middle of the brick.<br>
								The color will change overtime by hitting them.</p>
       </div>
       </div>
	   </br>	 
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
	 <div class="float-right">
	  <img src="./img/special_brick_2.gif" class="shadow-lg rounded float-right" alt="..."> </br></br>
	  <img src="./img/special_brick_3.gif" class="shadow-lg rounded float-right" alt="..."></br></br>	 
	  <img src="./img/special_brick.gif" class="shadow-lg rounded float-right" alt="..."></br></br>	 
      <img src="./img/special_brick_4.gif" class="shadow-lg rounded float-right" alt="..."></br>	 
	 </div>
			<h3 class="mb-0 text-left">These are not 'just' bricks</h3>
            <div class="subheading mb-3 text-left">Some of them contain specials</div>
            <p class="text-left">  				One in 12 bricks contains a special. These bricks are marked with a red blinking border,
												instead of a solid white one.
												The special will be activated intandly by breaking a brick.<br>
												Multiple specials can be active at the same time.</p>
       </div>
       </div>
       </br>

 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/bouncer.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">Talking about specials?</h3>
            <div class="subheading mb-3 text-left">To be exact, there are 5 of them</div>
            <p class="text-left">				Spicals will improve the gameplay. This is only for a short amount of time.
												There are 5 different specialities, but only 4 can be activated by destroying bricks.:</p>
				<div class="text-left"><p>
					<img src="./img/5_balls_icon.png" class="mb-1"><b><i> Ball multiplication:</b> 5 more balls are added</i><br />
					<img src="./img/lava_ball_icon.png" class="mb-1"><b><i> Lava ball: </b>Can go through everything and hit bricks twice</i><br />
					<img src="./img/shooting_paddle_icon.png" class="mb-1"><b><i> Paddle turrets: </b>The paddles have turrets that shoot small balls</i><br />	
					<img src="./img/wider_paddle_icon.png" class="mb-1"><b><i> Paddle enlargement: </b>You can make the paddle 1.5 times wider</i><br />
					</p>
      </div>
			<p class="text-left">				The fift special will be activated by crossing the laserbeam 80 times. It is indicated by a rising bar on the right bottom corner. </p>
				<div class="text-left"><p>
					<img src="./img/slomo_ball_icon.png"><b><i> Slomotion ball: </b>The ball becomes 2 times slower for 5 seconds</i><br /> 
      </div>
 </div>
       </div>
	   </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/second_chance.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">Can I try again?</h3>
            <div class="text-right subheading mb-3">A second chance to proof your skills</div>
            <p class="text-right">	The game is over when the ball accidently hits the bottom of your screen, but there is always a second chance for everybody.
									There for you have to watch a video to resume the gameplay. (the PRO version doesn't contain videos)<br><br>
									Congratulations! You've been rewarded with 5 Extra Paddles seen on the left bottom.(PRO version users are awarded with 10 Extra Paddles)<br>
									Continue the game by drawing a paddle.
									The ball spawns at the top of your screen, to gain a small advantage.<br><br>
									After hitting the bottom for the second time, the game will be definetly over.<br>
									Your score will be uploaded if it is your new highscore.</p>
       </div>
       </div>
	   	   </br>
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/achieve_leader2.png" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">Connect your account</h3>
            <div class="subheading mb-3 text-left">Dominate your friends</div>
            <p class="text-left">	Log in with your google account to record your highscores.<br><br>
									Ranks are seen in the Leaderboards tab, in the game menu. See if your highscore fits the top of the Week, Month or All time.
									Switch from global to social to match your score with your friends.<br>
									Challenge with them, or try to become the best Bricktopier!<br><br>
									Achievements are rewarded throughout the game. They can be seen in the Achievents tab.
									There are 21 achievements you can earn a lot of Google Play Games experience:<br><br>
									<div class="text-left">
									<b>- Start game for the first time</b><br>
									<b>- Connect with Google Play</b><br>
									<b>- Use special "Paddle shooter"</b> 10 times/ 100 times / 1000 times<br>
									<b>- Use special "Wider Paddle"</b> 10 times/ 100 times / 1000 times<br>
									<b>- Use special "Special Ball"</b> 10 times/ 100 times / 1000 times<br>
									<b>- Use special "5 Ball launcher"</b> 10 times/ 100 times / 1000 times<br>
									<b>- Use special "Slomo Ball"</b> 10 times/ 100 times / 1000 times<br>
									<b>- Use all specials in 1 game</b><br>
					</p>
      </div>
       </div>
       </div>	   </br>
	 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
		   <h3 class="mb-0 text-center">The PRO version</h3>
            <div class="subheading mb-3 text-center">What does it bring me?</div>
            <p class="text-center">   	We give the PRO version users a little advantage compared to free version users.
										However, the average highscore will not be higher then a Free version user.
										This will be unfair for others.<br><br>
										The advantages are shown in the table underneath here.
										<br></p>
			
	<h2><table>
		<tr>
			<th> </th>
			<th>Free version</th>
			<th>PRO version</th> 
		</tr>
		<tr>
			<td>Advertisement banner</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Watch videos</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Extra Paddles Start</td>
			<td>5</td>
			<td>10 ✔</td>
		</tr>
		<tr>
			<td>Extra Paddles Second chance</td>
			<td>5</td>
			<td>10 ✔</td>
		</tr>
		</table></h2>
			<p class="text-center">   	You can not buy the PRO version elsewhere but in-game.</p>
       </div>
       </div>
  </div> </div>

  <button class="button button1 js-scroll-trigger" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1" id="fold">
	<h3 id="h3">┌ More info ┐</h3>
	</button>	
   <br>
  <br>
	   <h2 class="mb-2">Bricktopia Game trailer</h2>
	<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/0OIYbkH_83o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
    	   	   </br><center><a href="https://play.google.com/store/apps/details?id=com.TwoQonstruct.Bricktopia&hl=en" class="center">
      <img src="./img/google_play.png" class="center shadow-lg rounded" align="middle" alt="...">
	  </a></center>
   </div>

  
</section>
   
	       <hr class="m-2">

    <section class="resume-section p-3 p-lg-5 d-flex justify-content-center" id="bird_angular">
      <div class="w-100">
        <h1 class="mb-2">Bird Angular</h1>	  
	
<div class="container">
  <div id="carousel2" class="carousel slide carousel-fade" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <div class="view">
                <img class="d-block w-100" src="./img/bird_angular_afb.png" alt="First slide">
                <div class="mask rgba-black-light"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/brick_car5.png" alt="Second slide">
                <div class="mask rgba-black-strong"></div>
            </div>
        </div>
        <div class="carousel-item">
            <div class="view">
                <img class="d-block w-100" src="./img/brick_car6.png" alt="Third slide">
                <div class="mask rgba-black-slight"></div>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel2" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel2" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</div> 
	
<br>
	<h3 class="mb-0 text-center">					It’s a bird game from a new perspective</h3>	<br><br>
		<div class="subheading mb-0 text-center">	Do you have the patience and concentration to become the best survivour?
													This game is to put your awareness to the test.
													It is all about the hand-eye coordination. Try it out!
													</div>
													
													<br><br>
		<h3 class="mb-0 text-left">Trying out the Bird Angular for the first time </h3><br>
            <p class="text-left">	By starting the game for the first time, it connects your device with your Google Play account.
									This is just for saving your highscore and achievements. Otherwise it can not remember any of your progress.<br>
									Once it's connected, The game asks if you want personalised or non-personalised advertisements. (not for PRO version users)<br><br>
									Start game, tab to continue and rotate your device.
									The further you come, the more stars you'll earn.
									It is possible to watch some videos for extra stars a few times per day.
									This is because of the skins which are available<br><br>
									We made a list of instructions to improve your gameplay.
									These are the steps shown underneath "More info".<br>
		
       <br>
     
										
				
  <div class="collapse" id="collapse3">
  <div class="box">

													
													<br>
<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/bird_angular_1.png" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">				How to move the bird?</h3>
            <div class="subheading mb-3 text-left">	No hate, just rotate!</div>
            <p class="text-left">					The bird has a constant speed with up and down movement by rotating your phone. 
													By rotating your phone to the right, the bird goes downwards. 
													By rotating your phone to the left, the bird goes upwards. 
													The more you angle your phone, the more rotation has been given to the bird.</p>
       </div>
       </div>
	   </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/the_run.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">			Follow the random track</h3>
            <div class="text-right subheading mb-3">See for yourself</div>
            <p class="text-right">					Fly inbetween the wooden pillars to get one point. 
													The longer you survive, the higher your score will be. 
													Beat your friends and show off, who has the highest points, and maybe even worldwide!</p>
       </div>
	   </div>
	   </br>	

<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/collect_the_star.gif" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">				Collect the stars</h3>
            <div class="subheading mb-3 text-left">	They will be worth it!</div>
            <p class="text-left">					Stars can be collected by flying inbetween the pillars throughout the endless game. 
													They can also be earned by watching advertisements, found on the main menu.</p>
       </div>
       </div>
	   </br>
	   
 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/choose_a_bird.gif" class="shadow-lg rounded float-left" id="picture" alt="...">
	  </div>  
			<h3 class="text-right mb-0">			Are there more birds?</h3>
            <div class="text-right subheading mb-3">It's time for some optical changes!</div>
            <p class="text-right">					It is possible to buy new visuals for birds with the collected stars you own. These are only optical changes, so not in speed or other kind of buffers.</p>
       </div>
	   </div>
	   </br>	

<div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
      <div class="none">
      <img src="./img/bird_angular_5.png" class="shadow-lg rounded float-right" id="picture" alt="...">
	  </div>
		   <h3 class="mb-0 text-left">One more time please?</h3>
            <div class="subheading mb-3 text-left">Revive yourself to go further into the endless</div>
            <p class="text-left">	If you fail to pass the pillars, you can extend your run for 1 more time. 
									The reset time is three seconds, to take you back in the run. 
									So don't hesitate to long!
									The high score will be automatically be linked to your GooglePlay account.</p>
       </div>
       </div>
	   </br> </br> 
	   	 <div class="resume-item d-flex flex-column flex-md-row justify-content-between mb-5">
    <div class="resume-content">
		   <h3 class="mb-0 text-center">The PRO version</h3>
            <div class="subheading mb-3 text-center">What does it bring me?</div>
            <p class="text-center">   	We give the PRO version users a little advantage compared to free version users.
										However, the average highscore will not be higher then a Free version user.
										This will be unfair for others.<br><br>
										The advantages are shown in the table underneath here.
										<br></p>
			
	<h2><table>
		<tr>
			<th> </th>
			<th>Free version</th>
			<th>PRO version</th> 
		</tr>
		<tr>
			<td>Advertisement banner</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Watch videos</td>
			<td>Yes</td>
			<td>No ✔</td>
		</tr>
		<tr>
			<td>Upgrade prices</td>
			<td>100%</td>
			<td>50% ✔</td>
		</tr>
		<tr>
			<td>Free starts</td>
			<td>0</td>
			<td>250 ✔</td>
		</tr>
		</table></h2>
			<p class="text-center">   	You can not buy the PRO version elsewhere but in-game.</p>
       </div>
       </div>
	   
	   </div>
       </div>
	       <button class="button button1 js-scroll-trigger" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3" id="fold2">
	<h3 id="h3">┌ More info ┐</h3>
	</button>	 <br> <br>
       <h2 class="mb-2">Bird Angular Game trailer</h2>
	   <div class="video-container"><iframe src="https://www.youtube-nocookie.com/embed/PKtn7wuxJbY?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
	   	 </br>  <center><a href="https://play.google.com/store/apps/details?id=com.TwoQonstruct.BirdAnglularP&hl=en" class="center">
      <img src="./img/google_play.png" class="center shadow-lg rounded" align="middle" alt="...">
	  </a></center>
	   
    </section>

<hr class="m-2">


    <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="gallery">
      <div class="w-100">
        <h1 class="mb-2">Gallery</h1><br>
	


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="container">
	<div class="row">
		<div class="row">
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Ghost Hunter the game"
                   data-image="./img/c4.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/c4.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The store"
                   data-image="./img/c1.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/c1.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Map scroll"
                   data-image="./img/c2.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/c2.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Try to get many stars!"
                   data-image="./img/c3.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/c3.jpg"
                         alt="Another alt text">
                </a>
            </div>
			<div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Bricktopia on fire!"
                   data-image="./img/b1.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b1.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Bricktopia's main menu"
                   data-image="./img/b2.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b2.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Draw a line to start the game"
                   data-image="./img/b3.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b3.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Multiple specials active at the same time"
                   data-image="./img/b4.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b4.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="All birds can fly, right?"
                   data-image="./img/b5.png"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b5.png"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Drop for the STARS!"
                   data-image="./img/b60.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b60.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Angle your device in a certain direction"
                   data-image="./img/b7.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b7.jpg"
                         alt="Another alt text">
                </a>
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Unlock all characters!"
                   data-image="./img/b8.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/b8.jpg"
                         alt="Another alt text">
                </a>
            </div>




            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Blockhead Survival the game"
                   data-image="./img/bh1.png"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/bh1.png"
                         alt="Another alt text">
                </a>
            </div>
			<div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="RUN now you can!"
                   data-image="./img/bh2.png"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/bh2.png"
                         alt="Another alt text">
                </a>
            </div>
			<div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="BOSS Zombies will destroy you!"
                   data-image="./img/bh3.png"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/bh3.png"
                         alt="Another alt text">
                </a>
            </div>
			<div class="col-lg-3 col-md-4 col-xs-6 thumb">
                <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The weapons in a row"
                   data-image="./img/bhsguns.jpg"
                   data-target="#image-gallery">
                    <img class="img-thumbnail"
                         src="./img/bhsguns.jpg"
                         alt="Another alt text">
                </a>
            </div>
        </div>


        <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="image-gallery-title"></h4>
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">X</span><span class="sr-only">Close</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <img id="image-gallery-image" class="img-responsive col-md-12" src="">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary float-left" id="show-previous-image"><i class="fa fa-arrow-left"></i>
                        </button>

                        <button type="button" id="show-next-image" class="btn btn-secondary float-right"><i class="fa fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
	</div>
</div>

<h2 class="text-center">Socials</h2>
<div class="container row align-items-center">
		<div class="twitterborder col-sm-6">
    <div class="table">
        <div class="table-cell">
<a class="twitter-timeline" data-width="400" data-height="500" data-theme="light" data-link-color="#bd5d38" href="https://twitter.com/2Qonstruct?ref_src=twsrc%5Etfw">Tweets by 2Qonstruct</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


    <script>
        ! function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0],
                p = /^http:/.test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + "://platform.twitter.com/widgets.js";
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, "script", "twitter-wjs");
    </script>

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


<div class="fb-page col-sm-6" 
  data-tabs="timeline,videos,messages"
  data-href="https://www.facebook.com/2Qonstruct"
  data-width="400" 
  data-hide-cover="false"></div>

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

    <hr class="m-0">
    <body class="bg-primary">
        <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="future">
            <div class="w-100">
                <h1 class="mb-2">Future</h1><br>
                <div class="none">
                    <img src="./img/programming.png" class="img-fluid shadow-lg center" alt="Responsive image">
                </div>
                <br>
                <br>
                <h3 class="mb-0 text-left">	What can you expect from us in the future?</h3><br>
                <p class="text-left">
                    First of all, we started with a new game. A game you don't need hands for to play.<br>
                    Try to survive as long as you can to set a great highscore.<br>
                    This game will come in Q4 2020.<br>
                    <b>More soon....</b><br><br>

                    We began with a new project. It's a time based game. The faster you are, the better your score.
                    The bèta version will be first presented around Q3 2020.
                    We'll keep you updated on our website and socialmedia, and will show some "sneak-peaks" around Q1 2020.</br>
                    Follow us on socialmedia and try to become our Bèta tester!
                </p>
                <br>
                <br>


                <h3 class="mb-0 text-left">	Extending the existing games</h3><br>
                <p class="text-left">
                    It is always fine when you play a game for a while and it keep getting updated, so small upgrades are always welcome.</br><br>
                    Our first goal to update is <a class="js-scroll-trigger" href="#blockhead_survival">Blockhead Survival</a>.
                    First off all, the map will get a complete new makeover! With new zombies, characters and real 3D shades. Including new weapons and differend modes!<br>
                    <b>More soon....</b><br><br>
                </p>
                <br>
                <br>

                <h3 class="mb-0 text-left">	Keeping you updated</h3><br>
                <p class="text-left">
                    We don't have a newletter system at the moment.
                    We are working on such systems. We will send any kind of progress and news on our website or socialmedia platforms for now.<br>
                    Don't hasitate to mail us about our progress if you're searching for answers about our games!<br>
                    Help us grow the community!
                </p>

            </div>
        </section>

        <hr class="m-2">
        <section class="resume-section p-3 p-lg-5 d-flex align-items-center" id="contact">
            <div class="w-100">
                <h1 class="mb-2 text-top">Contact</h1>
                <div class="none">
                    <img src="./img/contact.png" class="img-fluid shadow-lg center" alt="Responsive image">
                </div><br><br>
                <div class="resume-content">
                    <div class="none">

                        <h3 class="mb-0 text-left">	Any questions?</h3><br>
                        <p class="text-left mb-5">
                            Leave a message if an applicition doesn't work properly, or crashes. This way you help us find bugs, so we can solve it afterwards.
                            When you helped us out, you can become béta tester in the future.<br>
                            Share your opinion with us what you like about our games, and what we can do better. <br>
                            We keep you updated on this website and socialmedia, if we update or launch new apps. We try to answer as many e-mails as we can.
                        </p>

                        <div class="social-box">
                            <div class="container">
                                <div class="row">

                                    <div class="col-lg-4 col-xs-12 text-center mb-5" style="border-radius:15px;">
                                        <div class="box">
                                            <i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
                                            <div class="box-title">
                                                <h3>Twitter</h3>
                                            </div>
                                            <div class="box-text">
                                                <span>For the recent updates</span>
                                            </div>
                                            <div class="box-btn">
                                                <a href="https://twitter.com/2Qonstruct" target="_blank"><b>- Follow us now -</b></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-xs-12 text-center mb-5">
                                        <div class="box">
                                            <i class="fa fa-youtube fa-3x" aria-hidden="true"></i>
                                            <div class="box-title">
                                                <h3>Youtube</h3>
                                            </div>
                                            <div class="box-text">
                                                <span>For the game Trailers</span>
                                            </div>
                                            <div class="box-btn">
                                                <a href="https://www.youtube.com/channel/UC7-xeJSfBPqOiPVtnkloIUg" target="_blank"><b>- Watch us now -</b></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-xs-12 text-center mb-5">
                                        <div class="box">
                                            <i class="fa fa-instagram fa-3x" aria-hidden="true"></i>
                                            <div class="box-title">
                                                <h3>Instagram</h3>
                                            </div>
                                            <div class="box-text">
                                                <span>For the most recent images</span>
                                            </div>
                                            <div class="box-btn">
                                                <a href="https://www.instagram.com/2qonstruct/?hl=en" target="_blank"><b>- Check us out -</b></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-xs-12 text-center mb-5">
                                        <div class="box">
                                            <i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
                                            <div class="box-title">
                                                <h3>Facebook</h3>
                                            </div>
                                            <div class="box-text">
                                                <span>To tell us your questions</span>
                                            </div>
                                            <div class="box-btn">
                                                <a href="https://www.facebook.com/2Qonstruct-526283237545676" target="_blank"><b>- Ask us -</b></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-xs-12 text-center mb-5">
                                        <div class="box">
                                            <i class="fa fa-tumblr fa-3x" aria-hidden="true"></i>
                                            <div class="box-title">
                                                <h3>Tumblr</h3>
                                            </div>
                                            <div class="box-text">
                                                <span>Our story</span>
                                            </div>
                                            <div class="box-btn">
                                                <a href="http://2qonstruct.tumblr.com" target="_blank"><b>- Read it now -</b></a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-xs-12 text-center mb-5">
                                        <div class="box">
                                            <i class="fa fa-pinterest fa-3x" aria-hidden="true"></i>
                                            <div class="box-title">
                                                <h3>Pinterest</h3>
                                            </div>
                                            <div class="box-text">
                                                <span>For our newest ideas</span>
                                            </div>
                                            <div class="box-btn">
                                                <a href="https://pinterest.com/2qonstruct/boards" target="_blank"><b>- Look for tips -</b></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="subheading mb-5 text-center">
                            V.O.F. 2Qonstruct · Netherlands · Utrecht ·
                            <a href="mailto:2.qonstruct@gmail.com">						2.qonstruct@gmail.com</a>
                        </div>

                        <div>
                            <p>© 2Qonstruct 2020, Inc. · <a href="./policy/">Privacy</a> · <a href="./terms/">Terms</a></p>
                        </div>

                        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
                    </div>

                </div>
        </section>
        </div>
        </div>
        </center>
        <script src="vendor/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="vendor/jquery-easing/jquery.easing.min.js"></script>
        <script src="js/resume.min.js"></script>
        <script src="js/photobook.js"></script>
		<script src="js/accordian.js"></script>
        <script>
            $(document).ready(function () {
                $("#fold0").click(function () {
                    if ($(this).hasClass("helperClass")) {
                        $(this).find("h3").text("┌ More info ┐");

                    } else {
                        $(this).find("h3").text("└ Less info ┘");
                    }
                    $(this).toggleClass("helperClass");
                });
            });
        </script>
        <script>
            $(document).ready(function () {
                $("#fold").click(function () {
                    if ($(this).hasClass("helperClass")) {
                        $(this).find("h3").text("┌ More info ┐");

                    } else {
                        $(this).find("h3").text("└ Less info ┘");
                    }
                    $(this).toggleClass("helperClass");
                });
            });
        </script>
        <script>
            $(document).ready(function () {
                $("#fold1").click(function () {
                    if ($(this).hasClass("helperClass")) {
                        $(this).find("h3").text("┌ More info ┐");

                    } else {
                        $(this).find("h3").text("└ Less info ┘");
                    }
                    $(this).toggleClass("helperClass");
                });
            });
        </script>
        <script>
            $(document).ready(function () {
                $("#fold2").click(function () {
                    if ($(this).hasClass("helperClass")) {
                        $(this).find("h3").text("┌ More info ┐");

                    } else {
                        $(this).find("h3").text("└ Less info ┘");
                    }
                    $(this).toggleClass("helperClass");
                });
            });
        </script>

    </body>
</html>