start home page

2 years ago · 2902266a61
parent cd626cbc38
commit 2902266a61
2 changed files with 125 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>HyperSet</title>
+    <link rel="stylesheet" type="text/css" href="./styles/style.css">
+</head>
+
+<body>
+<header>
+    <ul id="nav-bar">
+        <li><a href="./index.html">Home</a></li> <!-- maybe put a logo -->
+        <li><a href="./views/tutorial.html">Tutorial</a></li>
+        <li><a href="./views/leaderboard.html">Leaderboard</a></li>
+        <li><a href="./views/about.html">About</a></li>
+    </ul>
+</header>
+
+<div id="master">
+    <div id="left" class="column">
+        <h1>HyperSet</h1>
+        <span id="slogan">Find all the Sets !</span>
+
+        <div id="random-set">
+            <!-- cards added by script at page load -->
+        </div>
+
+        <div id="info">
+            <span>Connected players: 1345</span>
+            <span>Total Played Games: 1,455,896</span>
+        </div>
+
+    </div>
+    <div id="right" class="column">
+
+    </div>
+</div>
+
+</body>
+
+</html>
--- a/styles/style.css
+++ b/styles/style.css
@ -0,0 +1,83 @@
+:root {
+    --font : Helvetica;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    font-family: var(--font);
+}
+
+/* Nav Bar */
+
+#nav-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 7vh;
+    list-style-type: none;
+    background-color: black;
+}
+
+#nav-bar li a {
+    font-size: 2rem;
+    font-weight: bold;
+    font-family: var(--font);
+    text-decoration: none;
+    color: white;
+    border: none;
+    padding: 0.7rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+}
+
+/* Main */
+
+#master {
+    display: flex;
+    flex-direction: row;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - 7vh - 6em);
+}
+
+#left {
+    background-color: red;
+    width: 60%;
+    padding: 3em;
+}
+
+#right {
+     background-color: blue;
+     width: 40%;
+     padding: 3em;
+}
+
+h1 {
+    color: black;
+    font-size: 5em;
+    font-weight: bold;
+}
+
+#slogan {
+    margin-top: 1em;
+    margin-bottom: 1.5em;
+    color: black;
+    font-size: 2em;
+}
+
+#random-set {
+    height: 40vh;
+    background-color: green;
+}
+
+#info {
+    display: flex;
+    flex-direction: column;
+    margin-top: 4em;
+}