index.html

﻿<!DOCTYPE html>
<html>
  <head>
<title>SypherEngine | Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://kit.fontawesome.com/330517a6a3.js" crossorigin="anonymous"></script>
</head>
<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Poppins", sans-serif}

body, html {
  height: 100%;
  line-height: 1.8;
}

/* Full height image header */
.bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: linear-gradient(to bottom right, #00ffb4, #9b05eb);
  min-height: 100%;
}

#about {
  background-color: #111111;
  color: #999999;
}

.w3-bar .w3-button {
  padding: 16px;
}

</style>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <div class="w3-bar w3-white w3-card w3-black w3-text-white" id="myNavbar">
    <!-- Right-sided navbar links -->
    <div class="w3-left w3-hide-small">
      <a href="#about" class="w3-bar-item w3-button">About</a>
    </div>
    <div class="w3-left w3-hide-small">
      <a href="https://sypherengine.github.io/javadocs/SypherEngine/module-summary.html" class="w3-bar-item w3-button">Docs</a>
    </div>
    <!-- Hide right-floated links on small screens and replace them with a menu icon -->

    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium" onclick="open()">
      <i class="fa fa-bars"></i>
    </a>
  </div>
</div>

<!-- Sidebar on small screens when clicking the menu icon -->
<nav class="w3-sidebar w3-bar-block w3-black w3-card w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidebar">
  <a href="javascript:void(0)" onclick="close()" class="w3-bar-item w3-button w3-large w3-padding-16">Close ×</a>
  <a href="#about" onclick="close()" class="w3-bar-item w3-button">About</a>
  <a href="https://sypherengine.github.io/javadocs/SypherEngine/module-summary.html" onclick="close()" class="w3-bar-item w3-button">Docs</a>
</nav>

<!-- Header with full-height image -->
<header id="header" class="bgimg-1 w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-left w3-text-white" style="padding:48px">
    <span class="w3-jumbo w3-hide-small">SypherEngine</span><br>
    <span class="w3-xxlarge w3-hide-large w3-hide-medium">SypherEngine</span><br>
    <span class="w3-large">An Open Source, Java Game Engine.</span>
    <p><a href="https://github.com/SypherEngine/SypherEngine" class="w3-button w3-white w3-padding-large w3-large w3-margin-top w3-opacity w3-hover-opacity-off">Get Started</a></p>
  </div> 
  <div class="w3-display-bottomleft w3-text-black w3-large" style="padding:24px 48px">
    <a href="https://github.com/SypherEngine/SypherEngine"><i class="fab fa-github w3-hover-opacity"></i></a>
    <a href="https://dsc.gg/sypherengine"><i class="fab fa-discord w3-hover-opacity"></i></a>
  </div>
</header>

<!-- About Section -->
<div class="w3-container" style="padding:128px 16px" id="about">
  <h1 class="w3-center">About The Engine</h2>
  <div class="w3-row-padding w3-center" style="margin-top:64px">
    <div class="w3-third">
      <i class="fa fa-desktop w3-margin-bottom w3-jumbo w3-center"></i>
      <p class="w3-large">Lightweight</p>
      <p>SypherEngine is lightweight, coming in at just below 10MB, ensuring that there's no bloat in your game.</p>
    </div>
    <div class="w3-third">
      <i class="fa fa-diamond w3-margin-bottom w3-jumbo"></i>
      <p class="w3-large">Ease of Use</p>
      <p>SypherEngine is easy to get started in, and learn. With an abundance of <a href="https://sypherengine.github.io/javadocs/SypherEngine/module-summary.html">docs</a>, with examples also on the way, you'll never get lost.</p>
    </div>
    <div class="w3-third">
      <i class="fa fa-cog w3-margin-bottom w3-jumbo"></i>
      <p class="w3-large">Cross Platform</p>
      <p>SypherEngine supports buiding games for Linux, MacOS and Windows. Targeting multiple platforms becomes a breeze with CI and jpackage</p>
    </div>
  </div>
</div>

<!-- Footer -->
<footer class="w3-center w3-black w3-padding-64">
  <a href="#header" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
  <div class="w3-xlarge w3-section">
    <a href="https://github.com/SypherEngine/SypherEngine"><i class="fab fa-github w3-hover-opacity"></i></a>
    <a href="https://dsc.gg/sypherengine"><i class="fab fa-discord w3-hover-opacity"></i></a>
  </div>
  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
  <p class="w3-small">(c) Copyright of AurumByte 2021 - 2022</p>

  <div>

  </div>
</footer>
 
<script>
// Toggle between showing and hiding the sidebar when clicking the menu icon
var mySidebar = document.getElementById("mySidebar");

function open() {
  if (mySidebar.style.display === 'block') {
    mySidebar.style.display = 'none';
  } else {
    mySidebar.style.display = 'block';
  }
}

// Close the sidebar with the close button
function close() {
    mySidebar.style.display = "none";
}
</script>

</body>
</html>