ComBauen is a Java based game where you need to find parts for a Server in an open-world scenario to run the Matrix on it. Your Father comitted suicide because he failed at this task and you need to restore your families reputation!
A Pen by Luca Kiebel on CodePen.
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>ComBauen</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" href="main.css"> | |
| <link rel="shortcut icon" href="img/favicon.png"> | |
| <!-- Google Fonts --> | |
| <link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'> | |
| <link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700' rel='stylesheet' type='text/css'> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> | |
| </head> | |
| <body> | |
| <!-- @order{ | |
| | header | |
| |>| learn-more button; <download,support,social> | |
| | about | |
| |>| download button; background slideshow as gif | |
| | social | |
| |>| links to our social media pages | |
| | download | |
| |>| external links for 3 pltfrms (jar,exe,apk) | |
| | contrib | |
| |>| github,greenfoot links | |
| } | |
| --> | |
| <header> | |
| <nav class="navigation"> | |
| <a class="navl" href="/download/">Download</a> | |
| <a class="navl" href="/support/">Support</a> | |
| <a class="navl" href="#social">Social Media</a> | |
| </nav> | |
| <h1 class="header-ttl">ComBauen</h1> | |
| <p class="i">build your Server!</p> | |
| <form action="#about"><button class="title-btn" type="submit">Learn More</button></form> | |
| </header> | |
| <about id="about"> | |
| <h1 class="header-about"></h1> | |
| <div class="about-p"> | |
| <p>ComBauen is a Java based game where you need to find parts for a Server in an open-world scenario to run the Matrix on it. Your Father comitted suicide because he failed at this task and you need to restore your families reputation!</p> | |
| </div> | |
| <p> | |
| Download ComBauen now!!!! | |
| </p> | |
| <form action="#download"><button class="about-btn" type="submit">Download</button></form> | |
| </about> | |
| <social id="social"> | |
| <h1 class="social"> | |
| Visit our Social Media Sites! | |
| </h1> | |
| <div class="social-links"> | |
| <a href="https://github.com/ivrsoft/combauen" class="fa fa-github fa-5x" aria-hidden="true"></a> | |
| <a href="https://twitter.com/combauen" class="fa fa-twitter fa-5x" aria-hidden="true"></a> | |
| <a href="https://steamcommunity.com/ivrsoft/combauen" class="fa fa-steam fa-5x" aria-hidden="true"></a> | |
| <a href="https://youtube.com/ivrsoft" class="fa fa-youtube fa-5x" aria-hidden="true"></a> | |
| </div> | |
| </social> | |
| <download id="download"> | |
| <h1> | |
| Download ComBauen! | |
| </h1> | |
| <p>If you liked what you've seen so far, </p> | |
| <p class="dl-p">or just want to check out Combauen,</p> | |
| <form action="https://github.com/ivrsoft/combauen/archive/master.zip" target="_blank"><button class="realdl-btn" type="submit">Download</button> it right here!</form> | |
| </download> | |
| <contrib id="contrib"> | |
| <h1 class="contrib"> | |
| Contribute to our Project! | |
| </h1> | |
| <form action="https://github.com/ivrsoft/combauen#fork-destination-box" target="_blank"><button class="fork-btn" type="submit">Fork</button> our Repo!</form> | |
| <form action="http://combauen.org/forum/index.php" target="_blank"><button class="forum-btn" type="submit">Request</button> a Feature!</form> | |
| </contrib> | |
| <copyright id="copyright"> | |
| <p class="copyright">© 2015-2016 Luca Kiebel, Luca Hartmann, Luca Hülsmann, Marcus Dec, as IVARA Software. All rights reserved. <br> Greenfoot © Michael Kölling and Poul Henriksen <br> Made with 💻 in Münster</p> | |
| </copyright> | |
| </body> | |
| </html> |
| $(document).ready(function(){ | |
| $("a").on('click', function(event) { | |
| if (this.hash !== "") { | |
| event.preventDefault(); | |
| var hash = this.hash; | |
| $('html, body').animate({ | |
| scrollTop: $(hash).offset().top | |
| }, 800, function(){ | |
| window.location.hash = hash; | |
| }); | |
| } // End if | |
| }); | |
| }); |
| /* | |
| ComBauen Homepage | |
| */ | |
| @media only screen and (max-width: 520px) { | |
| header{ | |
| text-align: center; | |
| display: block; | |
| } | |
| about{ | |
| text-align: center; | |
| display: block; | |
| } | |
| social{ | |
| text-align: center; | |
| display: block; | |
| } | |
| download{ | |
| text-align: center; | |
| display: block; | |
| } | |
| contrib{ | |
| text-align: center; | |
| display: block; | |
| } | |
| div.forknstuff{ | |
| margin-left: 250px; | |
| } | |
| } | |
| @media only screen and (max-width: 870px){ | |
| div.forknstuff{ | |
| margin-left: 350px; | |
| } | |
| } | |
| body{ | |
| background-color: white; | |
| background-size: cover; | |
| line-height: 1.4; | |
| } | |
| header{ | |
| background: url(https://klequex.com/images/test/entry.jpg); | |
| background-size: cover; | |
| height: 100vh; | |
| color: black; | |
| margin-bottom: 10px; | |
| font-family: 'Press Start 2P', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 6px; | |
| } | |
| p.i{ | |
| font-style: italic; | |
| } | |
| nav{ | |
| margin-bottom: 30px; | |
| position: absolute; | |
| top: 40px; | |
| float: right; | |
| } | |
| .navl{ | |
| display: inline-block; | |
| margin-left: 20px; | |
| color: black; | |
| font-size: 15px; | |
| font-weight: 700; | |
| text-decoration: none; | |
| } | |
| .navl:hover{ | |
| opacity: 0.7; | |
| } | |
| /*Learn More Button*/ | |
| button.title-btn { | |
| background-color: white; | |
| border: none; | |
| border-radius: 2px; | |
| color: black; | |
| padding: 10px 15px; | |
| font-size: 14px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-family: 'Press Start 2P', sans-serif; | |
| font-size: 16px; | |
| box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); | |
| transition-duration: 0.5s; | |
| border: none; | |
| } | |
| button:hover{ | |
| background-color: black; | |
| color: white; | |
| } | |
| /*Learn More Button*/ | |
| about{ | |
| background: white; | |
| background-size: cover; | |
| height: 100vh; | |
| color: black; | |
| margin-bottom: 10px; | |
| font-family: 'Press Start 2P', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| text-align: center; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 6px; | |
| } | |
| div.about-p{ | |
| text-align: center; | |
| margin-left: 5%; | |
| margin-right: 5%; | |
| } | |
| button.about-btn { | |
| background-color: white; | |
| border: none; | |
| border-radius: 2px; | |
| color: black; | |
| padding: 10px 15px; | |
| text-align: center; | |
| text-decoration: none; | |
| font-size: 14px; | |
| display: inline-block; | |
| font-family: 'Press Start 2P', sans-serif; | |
| font-size: 16px; | |
| box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); | |
| transition-duration: 0.5s; | |
| } | |
| button:hover{ | |
| background-color: black; | |
| color: white; | |
| } | |
| social{ | |
| background: #AAA; | |
| background-size: cover; | |
| height: 100vh; | |
| color: black; | |
| margin-bottom: 10px; | |
| font-family: 'Press Start 2P', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| text-align: center; | |
| align-items: center; | |
| border-radius: 6px; | |
| } | |
| h1.social{ | |
| margin-top: 40px; | |
| } | |
| .social-links{ | |
| padding-right: 20px; | |
| max-width: 700px; | |
| margin: 0px auto 50px; | |
| display: flex; | |
| justify-content: space-around; | |
| } | |
| a.fa{ | |
| color: black; | |
| margin: 0px 50px auto; | |
| margin-top: 50px; | |
| text-decoration: none; | |
| display: block; | |
| text-align: center; | |
| transition: ease-in-out; | |
| } | |
| a.fa:hover{ | |
| opacity: 0.7; | |
| text-decoration: none; | |
| } | |
| download{ | |
| background: white; | |
| background-size: cover; | |
| height: 100vh; | |
| color: black; | |
| margin-bottom: 10px; | |
| font-family: 'Press Start 2P', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| border-radius: 6px; | |
| } | |
| p.dl-p{ | |
| margin-top: 5px; | |
| } | |
| button.realdl-btn{ | |
| margin-top: 5px; | |
| margin-bottom: 30px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| top: 0px; | |
| background-color: black; | |
| border: none; | |
| border-radius: 2px; | |
| color: white; | |
| padding: 10px 15px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-family: 'Press Start 2P', sans-serif; | |
| font-size: 16px; | |
| transition-duration: 0.7s; | |
| border: none; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| button.realdl-btn:hover{ | |
| background-color: white; | |
| color: black; | |
| transition-duration: 1.2s; | |
| } | |
| contrib{ | |
| background: #AAA; | |
| background-size: cover; | |
| height: 100vh; | |
| color: black; | |
| font-size: 17px; | |
| margin-bottom: 10px; | |
| font-family: 'Press Start 2P', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 6px; | |
| } | |
| h1.contrib{ | |
| text-align: center; | |
| } | |
| button.fork-btn { | |
| margin-top: 50px; | |
| margin-bottom: 30px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| top: 0px; | |
| background-color: white; | |
| border: none; | |
| border-radius: 2px; | |
| color: black; | |
| padding: 10px 15px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-family: 'Press Start 2P', sans-serif; | |
| font-size: 16px; | |
| transition-duration: 0.7s; | |
| border: none; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| button.fork-btn:hover{ | |
| transition-duration: 1.2s; | |
| background-color: black; | |
| color: white; | |
| } | |
| button.forum-btn { | |
| margin-left: auto; | |
| margin-right: auto; | |
| bottom: 0px; | |
| background-color: white; | |
| border: none; | |
| border-radius: 2px; | |
| color: black; | |
| padding: 10px 15px; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| font-family: 'Press Start 2P', sans-serif; | |
| font-size: 16px; | |
| transition-duration: 0.7s; | |
| border: none; | |
| text-align: center; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| button.forum-btn:hover{ | |
| transition-duration: 1.2; | |
| background-color: black; | |
| color: white; | |
| } | |
| p.copyright{ | |
| text-align: center; | |
| background-size: cover; | |
| height: 100%; | |
| width: 100%; | |
| font-family: 'Roboto', sans-serif; | |
| font-size: 14px; | |
| text-decoration: none; | |
| color: #555; | |
| align-items: center; | |
| } | |
| template{ | |
| background-size: cover; | |
| height: 100vh; | |
| color: black; | |
| margin-bottom: 10px; | |
| font-family: 'Press Start 2P', sans-serif; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| border-radius: 6px; | |
| } |
The Official Website of ComBauen! Find the Project by clicking on the Links! We will go live with our first Beta on Greenlight early next Year!