commit e4a52dd1253c92d0e6696cdb3189f72d0c271ea3
parent 25f81703e9c6d074f3643f81475c632da4fb7016
Author: Benjamin Paul <bpaul848@gmail.com>
Date: Wed, 1 Jul 2020 20:43:56 +1000
Added a nav bar and a projects page
Diffstat:
6 files changed, 208 insertions(+), 1 deletion(-)
diff --git a/index.css b/index.css
@@ -2,3 +2,56 @@ body {
background-color: #282A36;
color: #F8F8F2;
}
+
+.navbar {
+ top: 0;
+ left: 0;
+ width: 100%;
+ margin: 0;
+ height: 50px;
+ align-items: center;
+ display: flex;
+ position: fixed;
+ color: #f2f2f2;
+ box-shadow: 0 5px 10px 0 rgba(0,0,0,.15);
+}
+
+.navbar ul {
+ list-style: none;
+ padding: 0;
+}
+
+.navbar li {
+ display: inline-block;
+}
+
+.navbar li a {
+ display: block;
+ padding: 8px;
+ color: #f2f2f2;
+ text-decoration: none;
+}
+
+.navbar li a:hover {
+ color: #bd93f9;
+}
+
+.nav_projects {
+ position: relative;
+ display: inline-block;
+}
+
+.nav_projects_dropdown {
+ display: none;
+ position: absolute;
+ float: left;
+ background-color: #282A36;
+ min-width: 160px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ padding: 12px 16px;
+ z-index: 1;
+}
+
+.nav_projects:hover .nav_projects_dropdown {
+ display: block;
+}
diff --git a/index.html b/index.html
@@ -1,9 +1,22 @@
<html>
<head>
<title>What should i put on this website</title>
- <link rel="stylesheet" type="text/css" href="index.css">
+ <link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
+ <nav class="navbar">
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li class="nav_projects">
+ <a href="/projects/">Projects</a>
+ <div class="nav_projects_dropdown">
+ <a href="/projects/cubing">Cubing</a>
+ <a href="/projects/chess">Chess</a>
+ </div>
+ </li>
+ </ul>
+ </nav>
+ <br><br>
<h1>hi</h1>
<p>My name is Benjamin Paul</p>
</body>
diff --git a/projects/chess/index.html b/projects/chess/index.html
@@ -0,0 +1,20 @@
+<html>
+ <head>
+ <title>What should i put on this website</title>
+ <link rel="stylesheet" type="text/css" href="/index.css">
+ </head>
+ <body>
+ <nav class="navbar">
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li class="nav_projects">
+ <a href="/projects/">Projects</a>
+ <div class="nav_projects_dropdown">
+ <a href="/projects/cubing">Cubing</a>
+ <a href="/projects/chess">Chess</a>
+ </div>
+ </li>
+ </ul>
+ </nav>
+ </body>
+</html>
diff --git a/projects/cubing/index.html b/projects/cubing/index.html
@@ -0,0 +1,20 @@
+<html>
+ <head>
+ <title>What should i put on this website</title>
+ <link rel="stylesheet" type="text/css" href="/index.css">
+ </head>
+ <body>
+ <nav class="navbar">
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li class="nav_projects">
+ <a href="/projects/">Projects</a>
+ <div class="nav_projects_dropdown">
+ <a href="/projects/cubing">Cubing</a>
+ <a href="/projects/chess">Chess</a>
+ </div>
+ </li>
+ </ul>
+ </nav>
+ </body>
+</html>
diff --git a/projects/index.html b/projects/index.html
@@ -0,0 +1,81 @@
+<html>
+ <head>
+ <title>What should i put on this website</title>
+ <link rel="stylesheet" type="text/css" href="/index.css">
+ <link rel="stylesheet" type="text/css" href="/projects/projects.css">
+ </head>
+ <body>
+ <nav class="navbar">
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li class="nav_projects">
+ <a href="/projects/">Projects</a>
+ <div class="nav_projects_dropdown">
+ <a href="/projects/cubing">Cubing</a>
+ <a href="/projects/chess">Chess</a>
+ </div>
+ </li>
+ </ul>
+ </nav>
+ <br><br>
+ <h1>These are my projects</h1>
+ <div class="projects">
+ <div class="row">
+ <div class="item">
+ <h2>Omelette chess engine</h2>
+ <p>Uci chess engine <br>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ <div class="item">
+ <h2>Placeholder</h2>
+ <p>finish later</p>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/projects/projects.css b/projects/projects.css
@@ -0,0 +1,20 @@
+h2 {
+ margin: auto;
+ width: 80%;
+}
+
+.row {
+ display: flex;
+ height: 410px;
+}
+
+.item {
+ margin-right: 10px;
+ margin-left: 10px;
+ padding-left: 10px;
+ display: block;
+ border-style: solid;
+ border-color: rgba(0,0,0,0);
+ height: 400px;
+ width: 400px;
+}
