href routing at k-kaufmann page fixed and competition page form render and validation

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;
+}

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>

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="";
+}

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>