Added a basic structure and layout

6 files changed, 161 insertions, 0 deletions

diff --git a/website/about.html b/website/about.html
new file mode 100644
index 0000000..9c5b19b
--- /dev/null
+++ b/website/about.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <title>About Me</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+
+    <body>
+        <body>
+            <div class=header>
+                <a href="./tutorials/index.html" class="other-tab"``>Tutorials</a>
+                <a href="./projects/index.html" class="other-tab">Projects</a>
+                <a href="./index.html" class="other-tab">Home</a>
+                <a href="" class="selected-tab">About</a>
+                <a href="./resume.html" class="other-tab">Resume</a>
+            </div>
+
+            <div class=page>
+                I am a programmer
+            </div>
+    </body>
+</html>
diff --git a/website/index.html b/website/index.html
new file mode 100644
index 0000000..4835f00
--- /dev/null
+++ b/website/index.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <title>Welcome</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+
+    <body>
+        <body>
+            <div class=header>
+                <a href="tutorials/index.html" class="other-tab"``>Tutorials</a>
+                <a href="projects/index.html" class="other-tab">Projects</a>
+                <a href="" class="selected-tab">Home</a>
+                <a href="./about.html" class="other-tab">About</a>
+                <a href="./resume.html" class="other-tab">Resume</a>
+            </div>
+
+            <div class=page>
+                <h2>Welcome to my website</h2>
+            </div>
+    </body>
+</html>
diff --git a/website/projects/index.html b/website/projects/index.html
new file mode 100644
index 0000000..d31be0e
--- /dev/null
+++ b/website/projects/index.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <title>About Me</title>
+        <link rel="stylesheet" href="../styles.css">
+    </head>
+
+    <body>
+        <body>
+            <div class=header>
+                <a href="../tutorials/index.html" class="other-tab"``>Tutorials</a>
+                <a href="" class="selected-tab">Projects</a>
+                <a href="../index.html" class="other-tab">Home</a>
+                <a href="../about.html" class="other-tab">About</a>
+                <a href="../resume.html" class="other-tab">Resume</a>
+            </div>
+
+            <div class=page>
+                Coming soon
+            </div>
+    </body>
+</html>
diff --git a/website/resume.html b/website/resume.html
new file mode 100644
index 0000000..c62b10b
--- /dev/null
+++ b/website/resume.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <title>Resume</title>
+        <link rel="stylesheet" href="styles.css">
+    </head>
+
+    <body>
+        <body>
+            <div class=header>
+                <a href="./tutorials/index.html" class="other-tab"``>Tutorials</a>
+                <a href="./projects/index.html" class="other-tab">Projects</a>
+                <a href="./index.html" class="other-tab">Home</a>
+                <a href="./about.html" class="other-tab">About</a>
+                <a href="" class="selected-tab">Resume</a>
+            </div>
+
+            <div class=page>
+                I can code in c# and a bit in HTML and CSS
+            </div>
+    </body>
+</html>
diff --git a/website/styles.css b/website/styles.css
new file mode 100644
index 0000000..88c2431
--- /dev/null
+++ b/website/styles.css
@@ -0,0 +1,56 @@
+:root {
+    --page-bg-color: #707070;
+    --tab-bg-hover: #636363;
+    --tab-other-bg: #5c5c5c;
+    --tab-color: white;
+    --page-color: white;
+}
+
+body {
+    background-color: #474747;
+}
+
+.header {
+    font: 21px Arial;
+    text-align: center;
+    border-collapse: collapse;
+    margin-top: 17px;
+    min-width: 450px;
+}
+
+.selected-tab, .other-tab {
+    margin: -3px;
+    padding: 10px;
+    border-collapse: collapse;
+    color: var(--tab-color);
+
+    text-decoration: none;
+}
+
+.selected-tab {
+    border-top: 3px solid var(--page-bg-color);
+    border-left: 3px solid var(--page-bg-color);
+    border-right: 3px solid var(--page-bg-color);
+    background-color: var(--page-bg-color);
+    cursor: default;
+}
+
+.other-tab {
+    background-color: var(--tab-other-bg);
+    cursor: pointer;
+}
+
+.other-tab:hover {
+    background-color: var(--tab-bg-hover);
+}
+
+.page {
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    color: var(--page-color);
+    min-width: 450px;
+    background-color: var(--page-bg-color);
+    margin-top: 10px;
+    border: 15px solid var(--page-bg-color);
+}
diff --git a/website/tutorials/index.html b/website/tutorials/index.html
new file mode 100644
index 0000000..a9ed418
--- /dev/null
+++ b/website/tutorials/index.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <title>About Me</title>
+        <link rel="stylesheet" href="../styles.css">
+    </head>
+
+    <body>
+        <body>
+            <div class=header>
+                <a href="" class="selected-tab"``>Tutorials</a>
+                <a href="../projects/index.html" class="other-tab">Projects</a>
+                <a href="../index.html" class="other-tab">Home</a>
+                <a href="../about.html" class="other-tab">About</a>
+                <a href="../resume.html" class="other-tab">Resume</a>
+            </div>
+
+            <div class=page>
+                Coming soon
+            </div>
+    </body>
+</html>