Untitled

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Knocky Jumper</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/screen.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>

</head>

<body>
  <!-- begin laoding -->
  <div class="loaded loader_wrapper">

  <div class="loading_content">
  <div class="student_sprite"></div>
  <div class="knocky_sprite"></div>

  <div class="vs_img">
  <p class="vs_text">VS</p>
  </div>

  <div class="loadingblock">
  <div class="loadingtime"></div>
  </div>
  </div>

  </div>
  <!-- einde laoding -->
<header class="clearfix">
<img class="logo" src="images/logo.png" alt="logo">
<nav>
  <a href="#wie_ben_ik">Wie ben ik</a>
  <a href="#wat_doe_ik">Wat doe ik</a>
  <a href="#wanneer_in_gym">Wanneer in de Gym</a>
  <a href="#newsletter">Nieuwsbrief</a>
</nav>
</header>
<section class="intro">
<img class="knocky" src="images/knocky.svg" alt="knocky">
<img class="tekstballon 1" src="images/tekstballon1.png" alt="tekstballon">
<img class="tekstballon 2" src="images/tekstballon2.png" alt="tekstballon2">
<img class="tekstballon 3" src="images/tekstballon3.png" alt="tekstballon3">
<!-- afbeelding van knocky? + achtergrond + tekstballon? -->
</section>

<!-- deel over de biografie van knocky -->
<section id="wie_ben_ik" class="section">
<h2>Wie ben ik?</h2>
<p>Ik ben geboren en opgegroeid in Sydney (Australië). Toen ik afrekende met een pestkop door hem knock out te slaan, wist ik welke passie mij toebehoorde. Boksen!
In mijn jongvolwassen jaren verhuisde ik naar de VS om mijn droom als een professionele bokser waar te maken.  Ik nam het op tegen bekende boksers zoals Muhammed Ali en Mike Tyson.</p>

<p>Nu ik te oud ben, besloot ik de VS te verlaten en ging ik wonen in België. Waarom? Er werd gezegd dat ze daar het lekkerste bier ter wereld bieden. Gelijk hadden ze, want ik ben zot van bier!
Toen ik op café een pintje dronk, ontmoette ik een mens die grote fan is van mij. Hij geeft les in de opleiding Interactive multimedia design in hogeschool Thomas More. De studenten moeten grotendeels hun projecten maken op de computer. Voor mij klink dat als urenlang stil op je stoel zitten. Maken ze wel de tijd om nog genoeg te bewegen? Die computernerds van tegenwoordig hebben daar bijna de motivatie niet voor. Dus daarom besloot ik een job aan te nemen als professionele sportcoach in de Creativity Gym, de werkplek van de IMD studenten.
</p>
</section>

<!-- wat doet hij? -->
<!-- mobile => article liggen onder elkaar -->
<!-- vanaf 800px => articles liggen naast elaar -->
<section id="wat_doe_ik" class="clearfix section">
<h2>Wat doe ik?</h2>

<article>
<img src="images/box_icon.png" alt="box icon">
<h3>Ik leer je omgaan met frustratie</h3>
<p>Raak je gefrustreerd door die constante error tijdens het maken van de app? Dan heb je de boksbal nodig. Geen ervaring met boksen? Dan leer ik je hoe je een prof wordt!</p>
</article>

<article>
<div style="height: 140px">
<img src="images/shoes_icon.png" alt="schoes icon">
</div>
<h3>Samen joggen</h3>
<p>Blijven coden en designen is belangrijk, maar dagelijks bewegen is ook belangrijk! Samen kunnen we een halfuurtje joggen in de kruidtuin, en je bent weer helemaal fit!</p>
</article>

</section>

<!-- kalenderblad is background image in div -->
<section id="wanneer_in_gym" class="section">
<h2>Wanneer ben ik in de Creativity Gym?</h2>

<table>
<tr>
  <td class="day">Ma</td>
  <td>10u - 12u</td>
</tr>
<tr>
  <td class="day">Di</td>
  <td>9u - 12u, 14u - 16u</td>
</tr>
<tr>
  <td class="day">Wo</td>
  <td>13u - 16u</td>
</tr>
<tr>
  <td class="day">Do</td>
  <td>9u - 12u, 15u - 18u</td>
</tr>
<tr>
  <td class="day">Vr</td>
  <td>15u - 18u</td>
</tr>

</table>

</section>

<section id="newsletter">
<h2>Interesse? Schrijf je in voor mijn nieuwsbrief!</h2>
<div class="error"></div>
<form action="#">
<input class="email" type="text" placeholder="vb. knocky.jumper@gmail.com">
<input class="verzend" type="submit">
</form>
</section>


</body>


@import url('https://fonts.googleapis.com/css?family=Passion+One');

body
{
  background-color: #f0e8dc; /* achtergrondkleur is lichtgrijs */
  font-family: 'Arial'; /* font type op meeste tekst */
  letter-spacing: 0.8px;
}

/*-----------------LOADING ----------------------------------*/

.loader_wrapper /* achtergrond van de loading animatie */
{
  position: fixed;
  /*max-width: 100%;
  height: 800px;
  */
  width: 100%;
  height: 100%;
  /*height: 100vh;*/
  background-color: #f0e8dc;
  z-index: 1000;

}


.loaded /* wanneer de loading voltooid is, verdwijn de div waarin alle loading elementen zitten */
{
  animation-name: loaded;
  animation-delay: 7s;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}


.loading_content /* div waarin alle aniamties zitten */
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  width: 350px;
  height: 600px;
  top: 150px;
  left: 5%;
}


.student_sprite /* sprite*/
{
  width: 150px;
  height: 150px;
  display: block;
  background: transparent url("../images/student_boxer.png") 0 0 no-repeat;
  position: absolute;
  left: 0px;
  top: 30px;
  animation: student 2s steps(8) infinite;

}

.knocky_sprite /* sprite */
{
  width: 150px;
  height: 169px;
  display: block;
  background: transparent url("../images/knocky_boxer.png") 0 0 no-repeat;
  position: absolute;
  left: 200px;
  top: 30px;
  animation: knocky 2s steps(8) infinite;

}

.loadingblock /* het afgeronde balkje */
{
  width: 250px;
  height: 30px;
  border: 1px solid black;
  border-radius: 20px;
  position: absolute;
  top: 250px;
  left: 70px;
  z-index: 1;
}

.vs_img /* achtergrond afbeelding schaalt een beetje */
{
  width: 120px;
  height: 120px;
  background-image: url("../images/vs.png");
  background-repeat: no-repeat;
  background-size: 120px;
  position: absolute;
  left: 120px;
  top: 100px;
  animation: scale 3s infinite linear;
}

.vs_text /* "VS" tekst zit in de bg afbeedling */
{
  position: relative;
  left: 45px;
  top: 40px;
  font-family: 'Passion One';
  font-size: 30px;
  color: white;

}

.loadingtime /* wordt breeder wanneer de animatie begint */
{
  width: 0px;
  height: 30px;
  background-color: #c31200;
  border-radius: 20px 0px 0px 20px;
  animation: loading 8s linear 1;
  z-index: 0;

}


@keyframes loading /* animatie waarin loadingtime breeder wordt */
{
  0%{width: 2px;}
  90%{width: 240px;border-radius: 20px 0px 0px 20px;}
  100%{width: 250px; border-radius: 20px 20px 20px 20px;}
}

@keyframes scale /* vs image en text schaalt om de 1s*/
{
  0%{transform: scale(1);}
  100%{transform: scale(1.2);}
}


@keyframes student /* sprite van student */
{
  0%{background-position: 0 0;}
  10%{transform: translateX(-10px) translateY(-5px);}
  25%{transform: translateX(10px) translateY(5px);}
  100%{background-position: 0 -1204px;}
}

@keyframes knocky /* sprite van knocky */
{
  0%{background-position: 0 0;}
  10%{transform: translateX(-10px) translateY(-5px);}
  25%{transform: translateX(10px) translateY(5px);}
  100%{background-position: 0 -1352px;}
}

@keyframes loaded /*wanneer 8s voorbij zijn, verdwijnt alles van de loading_wrapper */
{
  0%{visibility: visible;}
  100%{visibility: hidden;}
}

/*----------------------EINDE LOADING--------------------*/


.logo
{
  width: 250px; /* grootte van logo */
  display: block; /*logo ligt gecentreerd */
  margin-right: auto;
  margin-left: auto;
}

nav a
{
  text-decoration: none;
  color: #7b7670;
  font-weight: 400;
  display: block;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;

}

nav a:hover
{
  color: #c31200;
  font-weight: bold;
}

.intro
{
  background-image: url("../images/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 18em;

}

h1
{
  font-family: 'Passion One';
  color: #c31200;
  font-size: 30px;
  width: 40%;
}

.tekstballon
{
  position: absolute;
  right: 100px;

}

.knocky
{
  position: absolute;
  right: -180px;
  width: 70%;
}


h2
{
  color: #c31200; /* voor elke h2 een rode kleur */
  font-size: 30px;
  font-family: 'Passion One';
  margin-top: 3em;
  margin-bottom: 0.5em;
  border-bottom: 2px solid #c31200;


}

h3
{
  color: #c31200;
  font-size: 20px;
  font-family: 'Passion One';
  margin-top: 1.2em;
  margin-bottom: 0.5em;
}

p
{
  color: #7b7670; /* grijs */
  margin-bottom: 1.5em;
  line-height: 20px;

}

section
{
  padding: 2em; /* ruimte tussen elke section */
}


article /* articles in section van "wat doe ik?" */
{

  text-align: center;
  padding: 1em;

}


table td
{
  padding: 30px;
  color: #7b7670;
}

.day /* dagen zitten in background image */
{
  font-family: 'Passion One';
  color: #f0e8dc;
  background-image: url("../images/kalenderblad.png");
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: center;
}


#newsletter
{
  background-color: #c31200;
  text-align: center;

}

#newsletter h2
{
  color: #f0e8dc;
}

.email
{
  padding: 5px 80px 5px 3px;
}

.error
{
  border: 1px solid #db514c;
  background-color: #db514c;
  opacity: 0.5;
  width: 200px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: none;
}

.verzend
{
  color: #f0e8dc;
  font-size: 20px;
  font-family: "Passion One";
  border: 1px solid #db514c;
  background-color: #db514c;
  padding: 5px 20px;
  margin-top: 15px;

}

.clearfix:after

{
  content:" ";
  display:block;
  clear:both;

}


@media screen and (min-width: 800px){

  .loading_content /* de div moet (ongeveer) in het midden van elk schermbreedte liggen */
  {
    position: absolute;
    left: 35%;

  }

nav a
{
  display: inline;
  margin-right: 1em;

}

nav
{
  text-align: center;
  margin-bottom: 1em;
  margin-top: 1em;
}


}

@media screen and (min-width: 1000px){

  nav
  {
    position: absolute;
    right: 10px;
    top: 10px;
  }

  #wie_ben_ik p
  {
    width: 75%;
  }

  #wat_doe_ik article
  {
    width: 45%;
    float: left;

  }

  .section
  {
    margin-left: 4em;
  }

  .tekstballon
  {

    position: absolute;
    right: 550px;
  }

  .knocky
  {
    position: absolute;
    right: 10px;
    max-width: 35%;
  }


}


$(document).ready(function(){
  $(".2").hide();
  $(".3").hide();
  $(".1").hide();
  $(".1").slideDown(2000).fadeOut(2000, function(){
    $(".2").slideDown(2000).fadeOut(2000, function(){
      $(".3").slideDown(2000).fadeOut(2000);
    });
    $(".verzend").click(function(){
      var email = $(".email");
      if(email.val() == 0){
        $(".error").slideDown(1000).text("Je hebt nog niks ingevuld.");
        return false;
      }
      if(email.val().indexOf("@") == -1 || email.val().indexOf(".") == -1){
        $(".error").slideDown(1000).text("Waar is het '@'' en een '.'?");
        return false;
      }
      else{
        $(".error").slideUp(1000);
        $("#newsletter h2").html("Thanks!");
        $(".email").hide();
        $(".verzend").hide();
      }

    });

  });


/ 404 page /


<!doctype html>
<html lang ="en">


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta-chartset= "UTF-8">
  <title>test 404</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/screen404.css">
</head>

<body>
  <div class="container">
  <div class="student2_sprite"></div>
  <div class="stars">
    <div class="star1">&starf;</div>
    <div class="star2">&starf;</div>
    <div class="star3">&starf;</div>
  </div>
  <div class="knock"></div>
  <div class="knocky2_sprite"></div>
</div>

<div class="message">
  <h1>Deze pagina bestaat niet, amateur!</h1>
  <p>Vooruit, bezoek <a href="index.html">Mijn Homepage</a>
    en misschien word jij binnekort een professionele bokser.</p>
</div>


</body>

</html>


body
{
  background-color:#f0e8dc;
}

.student2_sprite
{
  width: 400px;
  height: 240px;
  position: absolute;
  left: 0px;
  top: 100px;
  background:transparent url("../images/student2.png") 0 0 no-repeat;
  animation: student2 2s steps(7) 1 forwards;
}

.stars
{
  position: absolute;
  top: 220px;
  color:  #c31200;

}

.star1
{
  position: absolute;
  left: 30px;
  animation-name: star1;
  animation-duration: 4s;
  animation-delay: 3s;
  animation-iteration-count: infinite;
  opacity: 0;

}

.star2
{
  position: absolute;
  left: 60px;
  animation-name: star2;
  animation-duration: 4s;
  animation-delay: 4s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.star3
{
  position: absolute;
  left: 90px;
  animation-name: star3;
  animation-duration: 4s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.knock
{
  width: 100px;
  height: 100px;
  background-image: url("../images/knock.png");
  background-repeat: no-repeat;
  background-size: 100px;
  position: absolute;
  top: 80px;
  left: 180px;
  animation-name: knock;
  animation-duration: 0.5s;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  visibility: hidden;
}

.knocky2_sprite
{
  width: 400px;
  height: 320px;
  position: absolute;
  left: 200px;
  top: 60px;
  background:transparent url("../images/knocky2.png") 0 0 no-repeat;
  animation: knocky2 2s steps(7) 1 forwards;
}

.message{
  position: relative;
  top: 450px;
  text-align: center;
}

h1
{
  color: #c31200;
  font-size: 30px;
  font-family: 'Passion One';
}

p
{
  font-family: 'Arial';
  color: #7b7670;
  margin-top: 20px;
}

@keyframes student2
{
  0%{background-position: 0 0;}
  10%{transform: translateY(-20px);}
  20%{transform: translateY(20px);}
  30%{transform: translateY(-20px);}
  40%{transform: translateY(20px);}
  100%{background-position: 0 -1680px; }

}


@keyframes knocky2
{
  0%{background-position: 0 0;}
  10%{transform: translateY(20px);}
  20%{transform: translateY(-20px);}
  30%{transform: translateY(20px);}
  40%{transform: translateY(-20px);}
  60%{transform: translateX(0px);}
  65%{transform: translateX(-50px);}
  100%{background-position: 0 -2240px;}
}

@keyframes knock {

  100%{transform: scale(2); visibility: visible;}
}

@keyframes star1 {
  0%{transform: translateY(50px); opacity: 0;}
  50%{opacity: 1;}
  100%{transform: translateY(-20px) translateX(-10px) scale(2);opacity:0;}
}

@keyframes star2{
  0%{transform: translateY(50px); opacity: 0;}
  50%{opacity: 1;}
  100%{transform: translateY(-5px)translateX(2px) scale(2);opacity:0;}
}

@keyframes star3{
  0%{transform: translateY(50px); opacity: 0;}
  50%{opacity: 1;}
  100%{transform: translateY(-25px)translateX(10px) scale(2);opacity:0;}
}

@media screen and (min-width: 800px){

  .container
  {
    position: absolute;
    left: 30%;
  }
}