diff --git a/beer.css b/beer.css
new file mode 100644
index 0000000..cc0a137
--- /dev/null
+++ b/beer.css
@@ -0,0 +1,277 @@
+@keyframes filling {
+  0% {
+    background-position: 0 160px;
+    background-size: 170px 300px;
+  }
+  
+  100% {
+    background-position: 500px -18px;
+    background-size: 250px 200px;
+  }
+}
+
+#beer-page {
+    font-family: 'Baloo Tamma', cursive;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    background: #FFFBEF;
+}
+
+.navbar-nav .nav-link {
+    font-size: 1.6rem;
+}
+
+.headline {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30vh;
+    width: 100%;
+    /* background-color: #00C0FF; */
+}
+
+.box {
+    position: relative;
+    width: 500px;
+    height: 500px;
+    background: none;
+    display: block;
+    margin: 40px auto 0;
+}
+
+.beer {
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    background: none;
+    transform: translate(15%, 20%);
+    z-index: 1;
+}
+
+.cup {
+    position: absolute;
+    left: 15%;
+    bottom: 0;
+    width: 60%;
+    height: 75%;
+    background: none;
+    border: 20px solid #777;
+    border-bottom-right-radius: 50px;
+    border-bottom-left-radius: 50px;
+    border-top-right-radius: 10px;
+}
+
+.liquid {
+    position: absolute;
+    bottom: 5%;
+    left: 5%;
+    width: 90%;
+    height: 70%;
+    border-bottom-right-radius: 50px;
+    border-bottom-left-radius: 50px;
+    background: transparent repeat-x 0 100px/150px 300px url('../images/light.png');
+    z-index: 2;
+    animation: filling 1s ease-out forwards;
+}
+
+.stripe-1 {
+    position: absolute;
+    bottom: 10%;
+    left: 15%;
+    width: 10%;
+    height: 60%;
+    border-radius: 50px;
+    z-index: 3;
+    background: #5D4241;
+}
+
+.stripe-2 {
+    position: absolute;
+    bottom: 10%;
+    left: 45%;
+    width: 10%;
+    height: 60%;
+    border-radius: 50px;
+    z-index: 3;
+    background: #5D4241;
+}
+
+.stripe-3 {
+    position: absolute;
+    bottom: 10%;
+    right: 15%;
+    width: 10%;
+    height: 60%;
+    border-radius: 50px;
+    z-index: 3;
+    background: #5D4241;
+}
+
+.cup-holder {
+    position: absolute;
+    top: 35%;
+    right: 5%;
+    width: 50%;
+    height: 45%;
+    background: none;
+    border: 25px solid #777;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 50%;
+    -webkit-clip-path: polygon(56% 0, 100% 0, 100% 100%, 56% 100%);
+    clip-path: polygon(56% 0, 100% 0, 100% 100%, 56% 100%);
+}
+
+.foam {
+    position: absolute;
+    left: 15%;
+    top: 0;
+    width: 60%;
+    height: 25%;
+    transform: scale(1.1);
+}
+
+.foam-1 {
+    position: absolute;
+    left: 8%;
+    bottom: -2%;
+    width: 32%;
+    height: 70%;
+    border-radius: 50%;
+    border-bottom-left-radius: 0;
+    border: 20px solid #D1BEBD;
+    -webkit-clip-path: polygon(0 65%, 0 0, 75% 0, 75% 25%);
+    clip-path: polygon(0 65%, 0 0, 75% 0, 75% 25%);
+}
+
+.foam-2 {
+    position: absolute;
+    left: 29%;
+    bottom: 0;
+    width: 40%;
+    height: 85%;
+    border-radius: 50%;
+    border: 20px solid #D1BEBD;
+    -webkit-clip-path: polygon(0 45%, 0 0, 100% 0, 100% 45%);
+    clip-path: polygon(0 45%, 0 0, 100% 0, 100% 45%);
+}
+
+.foam-3 {
+    position: absolute;
+    right: 10%;
+    bottom: -2%;
+    width: 32%;
+    height: 70%;
+    border-radius: 50%;
+    border-bottom-left-radius: 0;
+    border: 20px solid #D1BEBD;
+    -webkit-clip-path: polygon(0 65%, 0 0, 75% 0, 75% 25%);
+    clip-path: polygon(0 65%, 0 0, 75% 0, 75% 25%);
+    transform: scaleX(-1);
+}
+
+.bubbles-1 {
+    position: absolute;
+    top: 5%;
+    right: 38%;
+    width: 8%;
+    height: 8%;
+    background: #D1BEBD;
+    border-radius: 50%;
+    transition: all 0.5s;
+    animation: bubbling 2s infinite linear;
+}
+
+.bubbles-2 {
+    position: absolute;
+    top: 0%;
+    left: 38%;
+    width: 8%;
+    height: 8%;
+    background: #D1BEBD;
+    border-radius: 50%;
+    transition: all 0.5s;
+    animation: bubbling 1s infinite linear;
+}
+
+.bubbles-3 {
+    position: absolute;
+    top: 0%;
+    left: 25%;
+    width: 8%;
+    height: 8%;
+    background: #D1BEBD;
+    border-radius: 50%;
+    transition: all 0.5s;
+    animation: bubbling 2s infinite linear;
+}
+
+@keyframes bubbling {
+    0% {
+        transform: scale(1) tanslateY(0);
+    }
+    100% {
+        transform: scale(0) translate(0, -250px);
+    }
+}
+
+.button-container {
+    display: flex;
+    justify-content: space-around;
+}
+
+
+a {
+    text-decoration:none!important;
+    color:rgb(83, 80, 80);
+    font-size: 1vh;
+}
+.drink {
+    width:calc(20vw + 6px);
+    height:calc(8vw + 6px);
+    background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 80%, #00C0FF 100%);
+    border-radius:5px;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+    text-transform:uppercase;
+    font-size: 16px;
+    font-weight:bold;
+}
+.drink:after {
+    content:attr(alt);
+    width:20vw;
+    height:8vw;
+    background-color:#fffbef;
+    display:flex;
+    align-items:center;
+    justify-content:center;
+}
+.drink:hover {
+    animation:slidebg 2s linear infinite;
+}
+
+@keyframes slidebg {
+    to {
+        background-position:20vw;
+    }
+}
+
+.table {
+    padding: 0;
+    margin: 0;
+    height: 40vh;
+    width: 100%;
+    background-color: #803408;
+    position: absolute;
+    bottom: -60%;
+    z-index: 0;
+}
+
+.dropdown-item {
+        font-size: 12px;
+}
\ No newline at end of file
diff --git a/beer.html b/beer.html
index 4fbd47a..f0e2348 100644
--- a/beer.html
+++ b/beer.html
@@ -39,8 +39,8 @@
                   <a class="nav-link dropdown-toggle" href="#" id="navbar-dropdown" role="button" data-toggle="dropdown" data-target="#dropdown-events" aria-haspopup="true" aria-expanded="false">
                     Events<i class="material-icons right"></i>
                   </a>
-                  <div id="dropdown-events" class="dropdown-menu">
-                    <a class="dropdown-item" href="beachtime.html">BEACH TIME WOOHOO</a>
+                  <div id="dropdown-events" class="dropdown-menu" >
+                    <a class="dropdown-item" href="beachtime.html" >BEACH TIME WOOHOO</a>
                     <a class="dropdown-item" href="./neighbour.html">Hey Neighbour!</a>
                     <a class="dropdown-item" href="./beer.html">I &#x2665; Beer</a>
                     <a class="dropdown-item" href="contributors.html">Contributors</a>
diff --git a/boxar.js b/boxar.js
new file mode 100644
index 0000000..8268952
--- /dev/null
+++ b/boxar.js
@@ -0,0 +1,30 @@
+function myFiddle(){
+    
+    var x = event.pageX;
+    var y = event.pageY;
+    
+    
+    
+    var cords = "X: " + x + " Y: " + y ;
+    
+    document.getElementById("values").innerHTML = cords;
+    var data = getDate();
+    var datavar = data*10;
+
+    document.getElementById("checkthis").innerHTML = "Find this: " + datavar;
+    
+    if(x === datavar || y === datavar){
+            document.getElementById("changethis").innerHTML = "Happy Hacktober!";
+        }
+    
+}
+
+function getDate(){
+    var date = new Date();
+    var seconds = date.getSeconds();
+    return seconds;
+}
+
+function emptyString(event){
+    document.getElementById("changethis").innerHTML="";
+}
\ No newline at end of file
diff --git a/boxarea.html b/boxarea.html
new file mode 100644
index 0000000..4fc0b0a
--- /dev/null
+++ b/boxarea.html
@@ -0,0 +1,58 @@
+
+<html>
+
+    <head>
+        <script type="text/javascript" src="boxar.js"></script>
+        <title>
+        Find The Point | Hacktober 2019
+        </title>
+        <h2><a class="navbar-brand" href="index.html">Happy Hacktoberfest 2019!</a></h2>
+        <h3>Move your cursor into the red box to start the game</h3>
+        <p>Keep moving your cursor inside the red box area and see as the counter increments. The goal is to move the cursor towards the counted number. To restart the game just click on the win message!</p>
+    </head>
+
+    <script src="js.js"></script>
+    
+    <body >
+        
+        <div class="box" onmousemove="myFiddle(this)"><p id="changethis" onclick="emptyString(event)"></p></div>
+        
+    <p id="values"></p>
+        
+        <h2 id="checkthis"  ></h2>
+                
+        
+        
+        
+    </body>
+</html>
+
+<style>
+
+    body{
+        background-color: aqua;
+    }
+    
+    p{
+/*        background-color: blue;*/
+    }
+    
+    #changethis {
+        font-size: 20px;
+        font-family: cursive;
+        background-color: white;
+        
+        
+    }
+    
+    .box {
+        width: 300px;
+        position: inherit;
+        height: 201px;
+        background-color: red;
+        margin: 25px 0px 0 400px;
+        text-align: center;
+        background-color: red;
+        text-align: center;
+    }
+</style>
\ No newline at end of file
diff --git a/competition.html b/competition.html
index 8f4404b..0f6c616 100644
--- a/competition.html
+++ b/competition.html
@@ -3,30 +3,36 @@
   <head>
     <meta charset="utf-8">
     <title>Competition!</title>
-    <a href="index.html"> Home </a>  </head>
+    <a href="index.html"> Home </a>  
+    <script type="text/javascript" src="competitionValidation.js"></script>
+    </head>
+    
+    
+    
   <body>
     <h1>Competition Time!</h1>
     <h2>Enter below...</h2>
     <div class="container">
-    <form action="action_page.php">
+    <form onsubmit="return ValidateForm()">
 
-      <label for="fname">First Name</label>
-      <input type="text" id="fname" name="firstname" placeholder="Your name..">
-
-      <label for="lname">Last Name</label>
-      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
-
-      <label for="country">Country</label>
+      <label for="frname">First Name</label>&nbsp;
+      <input type="text" id="fname" name="firstname" placeholder="Your name..">&nbsp;
+        
+      <label for="lsname">Last Name</label>&nbsp;
+      <input type="text" id="lname" name="lastname" placeholder="Your last name..">&nbsp;
+        
+      <label for="country">Country</label>&nbsp;
       <select id="country" name="country">
         <option value="australia">Australia</option>
         <option value="canada">Canada</option>
         <option value="usa">USA</option>
       </select>
-
-      <label for="question">What is the best halloween costume and why?</label>
-      <textarea id="question?" name="subject" placeholder="Write something..." style="height:200px"></textarea>
-
-      <input type="submit" value="Submit">
+        <br><br>
+      <label for="Question">What is the best halloween costume and why?</label>
+        <br>
+      <textarea id="question" name="subject" placeholder="Write something..." style="height:200px; width:500px"></textarea>
+        <br>
+      <input type="submit" value="Submit" required>
 
     </form>
   </div>
diff --git a/competitionValidation.js b/competitionValidation.js
new file mode 100644
index 0000000..f940b90
--- /dev/null
+++ b/competitionValidation.js
@@ -0,0 +1,25 @@
+function ValidateForm(){
+
+    var fname = document.getElementById("fname").value;
+    var lname = document.getElementById("lname").value;
+    var question = document.getElementById("question").value;
+    
+    
+    
+    if(fname === ""){
+        alert("First Name cannot be null");
+        return false;
+    }
+    else if(lname === ""){
+        alert("Last name cannot be null");
+        return false;
+    }
+    else if(question === ""){
+        alert("Question cannot be left blank");
+        return false;
+    }
+    else
+        return true;
+    
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 14e967e..e63f224 100644
--- a/index.html
+++ b/index.html
@@ -51,6 +51,7 @@
                 <a class="dropdown-item" href="contributors.html">Contributors</a>
                 <a class="dropdown-item" href="pages/k-kaufmann.html">k-kaufmann</a>
                 <a class="dropdown-item" href="./halloween.html">Hallowe'en</a>
+                <a class="dropdown-item" href="../boxarea.html">Find The Point</a> 
                 <a class="dropdown-item" href="./about.html">About</a>
                 <a class="dropdown-item" href="https://github.com/Evie-Skinner18/happy_hacktoberfest_19" class="btn waves-effect waves-light blue accent" target="_blank">GitHub</a>
               </div>
@@ -191,12 +192,12 @@ <h2 class="text-center mt-0">Things we write</h2>
               <h4>Hacktoberfest is presented by</h4>
                 <div class="row mr-0 m-4">
                     <div class="col-sm-6">
-                        <a class="icon-link" href="https://www.digitalocean.com/">
+                        <a class="icon-link" target="_blank" href="https://www.digitalocean.com/">
                             <i title="Digital ocean" class="fab fa-digital-ocean fa-3x iconLinks"></i>
                         </a>
                     </div>
                     <div class="col-sm-6">
-                        <a class="icon-link" href="https://dev.to/">
+                        <a class="icon-link" target="_blank" href="https://dev.to/">
                             <i title="Dev.to" class="fab fa-dev fa-3x iconLinks"></i>
                         </a>
                     </div>
diff --git a/pages/k-kaufmann.html b/pages/k-kaufmann.html
index a8ccbea..36accba 100644
--- a/pages/k-kaufmann.html
+++ b/pages/k-kaufmann.html
@@ -28,15 +28,15 @@
         <nav class="blue darken-3">
             <div class="nav-wrapper">
                 <div class="container">
-                    <a href="index.html" class="brand-logo">Hacktoberfest</a>
-                    <a href="index.html" class="sidenav-trigger" data-target="mobile-menu">
+                    <a href="../index.html" class="brand-logo">Hacktoberfest</a>
+                    <a href="../index.html" class="sidenav-trigger" data-target="mobile-menu">
                         <i class="material-icons">menu</i>
                     </a>
                     <a href="#!" class="sidenav-trigger right" data-target="slide-out">
                         <i class="material-icons">more_vert</i>
                     </a>
                     <ul class="right hide-on-med-and-down">
-                        <li><a href="#!">Home</a></li>
+                        <li><a href="k-kaufmann.html">Home</a></li>
                         <li><a href="#!" class="dropdown-trigger" data-target="dropdown1">Events<i class="material-icons right">arrow_drop_down</i></a></li>
                         <li><a href="#!">Blog</a></li>
                         <li><a href="#!">About</a></li>