start new version of website

oldVersion/assets/CSS3_logo_and_wordmark.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="102.3716mm" height="144.49777mm" viewBox="0 0 362.73401 511.99998" id="svg3476" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="CSS3.svg">
+  <defs id="defs3478"/>
+  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="181.367" inkscape:cy="256" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="1366" inkscape:window-height="704" inkscape:window-x="0" inkscape:window-y="27" inkscape:window-maximized="1"/>
+  <metadata id="metadata3481">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(-193.633,-276.3622)">
+    <g id="g3013" transform="translate(119,276.3622)">
+      <polygon id="polygon2989" points="437.367,100.62 404.321,470.819 255.778,512 107.644,470.877 74.633,100.62 " style="fill:#264de4"/>
+      <polygon id="polygon2991" points="376.03,447.246 404.27,130.894 256,130.894 256,480.523 " style="fill:#2965f1"/>
+      <polygon id="polygon2993" points="150.31,268.217 154.38,313.627 256,313.627 256,268.217 " style="fill:#ebebeb"/>
+      <polygon id="polygon2995" points="256,176.305 255.843,176.305 142.132,176.305 146.26,221.716 256,221.716 " style="fill:#ebebeb"/>
+      <polygon id="polygon2997" points="256,433.399 256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 " style="fill:#ebebeb"/>
+      <path id="path2999" d="m 160,0 55,0 0,23 -32,0 0,23 32,0 0,23 -55,0 z" inkscape:connector-curvature="0"/>
+      <path id="path3001" d="m 226,0 55,0 0,20 -32,0 0,4 32,0 0,46 -55,0 0,-21 32,0 0,-4 -32,0 z" inkscape:connector-curvature="0"/>
+      <path id="path3003" d="m 292,0 55,0 0,20 -32,0 0,4 32,0 0,46 -55,0 0,-21 32,0 0,-4 -32,0 z" inkscape:connector-curvature="0"/>
+      <polygon id="polygon3005" points="311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 369.597,176.305 255.843,176.305 255.843,221.716 319.831,221.716 315.699,268.217 255.843,268.217 255.843,313.627 " style="fill:#ffffff"/>
+    </g>
+  </g>
+</svg>

oldVersion/assets/HTML5_Logo.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <title>HTML5 Logo</title>
+  
+  <polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512    "/>
+  <polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894    "/>
+  <polygon fill="#EBEBEB" points="256,268.217 195.91,268.217 191.76,221.716 256,221.716 256,176.305 255.843,176.305 142.132,176.305 143.219,188.488 154.38,313.627 256,313.627"/>
+  <polygon fill="#EBEBEB" points="256,386.153 255.801,386.206 205.227,372.55 201.994,336.333 177.419,336.333 156.409,336.333 162.771,407.634 255.791,433.457 256,433.399"/>
+  <path d="M108.382,0h23.077v22.8h21.11V0h23.078v69.044H152.57v-23.12h-21.11v23.12h-23.077V0z"/>
+  <path d="M205.994,22.896h-20.316V0h63.72v22.896h-20.325v46.148h-23.078V22.896z"/>
+  <path d="M259.511,0h24.063l14.802,24.26L313.163,0h24.072v69.044h-22.982V34.822l-15.877,24.549h-0.397l-15.888-24.549v34.222h-22.58V0z"/>
+  <path d="M348.72,0h23.084v46.222h32.453v22.822H348.72V0z"/>
+  <polygon fill="#FFFFFF" points="255.843,268.217 255.843,313.627 311.761,313.627 306.49,372.521 255.843,386.191 255.843,433.435 348.937,407.634 349.62,399.962 360.291,280.411 361.399,268.217 349.162,268.217"/>
+  <polygon fill="#FFFFFF" points="255.843,176.305 255.843,204.509 255.843,221.605 255.843,221.716 365.385,221.716 365.385,221.716 365.531,221.716 366.442,211.509 368.511,188.488 369.597,176.305"/>
+</svg>

oldVersion/contact.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Contact :: Development - janishutz.com</title>
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
+        <script defer src="/js/loader.js"></script>
+        <script defer src="/js/orderwebsite.js"></script>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Con&shy;tact</h1>
+            <h2 class="subheading text-centered">Get in touch</h2>
+        </div>
+        <div class="centered">
+            <h3>Got any questions? Feel free to contact me</h3>
+            <div id="contactForm"></div>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/css/footerstyle.css

@@ -0,0 +1,47 @@
+.footer-container {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    background-color: white;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.footer-logo-container {
+    margin: 2%;
+    height: 80%;
+}
+
+.footer-wrapper {
+    height: 40%;
+    width: 100%;
+    margin: 5%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.footer-link {
+    text-decoration: none;
+    color: black;
+    font-weight: bold;
+}
+
+.footer-title {
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+@media only screen and (min-width: 999px) {
+    .footer-container {
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: flex-start;
+    }
+
+    .footer-wrapper {
+        width: 60%;
+    }
+}

oldVersion/css/formstyle.css

@@ -0,0 +1,16 @@
+.form {
+    width: 100%;
+}
+
+.input {
+    width: 100%;
+    border-radius: 500px;
+    padding: 2%;
+}
+
+.textarea {
+    width: 100%;
+    border-radius: 10px;
+    padding: 2%;
+    resize: vertical;
+}

oldVersion/css/navstyle.css

@@ -0,0 +1,138 @@
+/*
+*
+*   navstyle.css - History project
+*
+*       Created 2023 by Janis Hutz
+*
+*/
+
+/*
+    Default rules that are set for mobile interfaces
+*/
+.nav-container {
+    width: 100%;
+    height: 100%;
+    background-color: white;
+}
+
+.toggle-wrapper {
+    display: inline-flex;
+    height: 100%;
+    width: 80%;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+
+/* Logo image and logo link (aka logo-container)*/
+.logo-container {
+    margin: 0.5%;
+    height: 80%;
+    display: inline-block;
+    width: fit-content;
+}
+
+.mobile-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+}
+
+.logo {
+    display: block;
+    width: auto;
+    height: 100%;
+}
+
+.listtoggle {
+    text-decoration: none;
+    color: black;
+    font-size: 5vh;
+    margin-right: 7%;
+    cursor: pointer;
+}
+
+.active {
+    color: rgba(184, 214, 240, 1);
+}
+
+/* Nav menu holder (contains the flex nav menu and has to exist because of jQuery */
+.nav-menu {
+    background-color: rgba(245, 245, 245, 0.9);
+    display: none;
+    width: 100%;
+}
+
+/* This is the list actually containing the menu items */
+.nav-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.navitem {
+    text-decoration: none;
+    text-align: center;
+    color: black;
+    font-size: 1.3rem;
+    padding-top: 2%;
+    padding-bottom: 2%;
+    width: 100%;
+}
+/*
+.navitem:hover {
+    background-color: rgba(184, 214, 240, 1);
+}*/
+
+
+/* 
+    Media queries to optimise for desktop
+*/
+@media only screen and (min-width: 999px) {
+    /* Top navigation bar container */
+    .nav-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    /* div containing the nav-menu unordered list */
+    .nav-wrapper {
+        height: 100%;
+        width: 80%;
+        margin: auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .listtoggle, .toggle-wrapper {
+        display: none;
+    }
+
+    .nav-menu {
+        display: flex;
+        background-color: rgba(0, 0, 0, 0);
+    }
+
+    .nav-list {
+        flex-direction: row;
+    }
+
+    .mobile-wrapper {
+        width: fit-content;
+        margin-left: 3%;
+    }
+
+    .navitem {
+        font-size: 0.9rem;
+        width: fit-content;
+        padding: 1%;
+        padding-left: 2%;
+        padding-right: 2%
+    }
+}

oldVersion/css/style.css

@@ -0,0 +1,176 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background-color: rgb(122, 188, 255);
+    font-size: calc(15pt + 0.4vw);
+}
+
+/* 
+    Centered box with slight padding & centering the content
+*/
+.centered {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 90%;
+    margin: 3%;
+    margin-top: 0%;
+    padding: 2%;
+    background-color: rgba(223, 223, 223, 0.8);
+    border-radius: 50px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+/* 
+    Title background & title
+*/
+
+.heading-wrapper {
+    width: 90%;
+    margin: 3%;
+    margin-bottom: 0%;
+    padding: 2%;
+    background-color: rgba(0, 0, 149, 1);
+    border-top-left-radius: 50px;
+    border-top-right-radius: 50px;
+    color: white;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.heading {
+    font-size: 3rem;
+}
+
+
+/* 
+    Centered text
+*/
+
+.text-centered {
+    text-align: center;
+}
+
+
+/* 
+    Buttons
+*/
+
+.button {
+    cursor: pointer;
+    display: block;
+    text-decoration: none;
+    padding: 2%;
+    background-color: rgba(0, 0, 149, 1);
+    width: fit-content;
+    color: white;
+    font-weight: bold;
+    border-radius: 50px;
+    transition: 1.5s;
+}
+
+.button:hover {
+    border-radius: 5px;
+    background-color: rgb(0, 0, 31);
+    transition: 0.2s;
+}
+
+
+.code-background {
+    background-image: url( /assets/pageStyle.png );
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    border-radius: 20px;
+}
+
+.half-height {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    height: 50vh;
+    width: 100%;
+}
+
+.light-color {
+    background-color: rgba(34, 34, 34, 0.9);
+    color: white;
+    padding: 3%;
+    width: 70%;
+}
+
+.wrap-image-right, .wrap-image-left {
+    border-radius: 20px;
+    margin-top: 3%;
+    width: 100%;
+    height: auto;
+}
+
+.wrap-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.lightly-written {
+    font-size: 0.7rem;
+    color: rgb(97, 97, 97);
+    margin-top: 7%;
+    font-style: italic;
+}
+
+/*
+    Set properties for footer & nav menu
+*/
+#nav {
+    height: 15vh;
+    position: relative;
+    z-index: 1;
+}
+
+#footer {
+    height: 80vh;
+}
+
+
+/* 
+    Media queries to optimise for mobile
+*/
+@media only screen and (min-width: 999px) {
+    .heading-wrapper, .centered {
+        width: 70%;
+        padding: 5%;
+        padding-top: 2%;
+        padding-bottom: 2%;
+        margin-left: 10%;
+    }
+
+    .wrap-image-right {
+        float: right;
+        width: 40%;
+        margin: 2%;
+    }
+
+    .wrap-image-left {
+        float: left;
+        width: 30%;
+        margin: 2%;
+    }
+
+    .wrap-container {
+        display: block;
+    }
+    #footer {
+        height: 40vh;
+        width: 100%;
+    }
+}

oldVersion/examples.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Examples :: Development - janishutz.com</title>
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
+        <script defer src="/js/loader.js"></script>
+        <meta http-equiv="X-UA-Compatible" content="IE=7">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <meta name="description" content="See examples of websites I have created so far">
+        <meta name="keywords" content="websites website-creation custom-websites affordable">
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Ex&shy;am&shy;ples</h1>
+            <h2 class="subheading text-centered">Websites I've built</h2>
+        </div>
+        <div class="centered">
+            <h4>Here's a list of the websites I have created so far.</h4>
+            <p class="lightly-written" style="margin-top: 0.3%;">Links will open in new tabs</p>
+            <ul>
+                <li><a href="https://historyproject.janishutz.com" target="_blank">historyproject.janishutz.com</a></li>
+                <li><a href="https://testing.janishutz.com" target="_blank">booking.languageschoolhossegor.com (currently late beta on my testing website)</a></li>
+                <li><a href="https://janishutz.com" target="_blank">janishutz.com</a></li>
+                <li><a href="https://development.janishutz.com" target="_blank">development.janishutz.com</a></li>
+                <!-- <li><a href="https://pcbuilding.janishutz.com" target="_blank">pcbuilding.janishutz.com</a></li> -->
+                <li><a href="https://myevent.janishutz.com" target="_blank">myevent.janishutz.com</a></li>
+                <li><a href="https://impress-testing.janishutz.com" target="_blank">impress.js.org (currently not deployed yet, on my testing website)</a></li>
+            </ul>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/imprint.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Imprint :: Development - janishutz.com</title>
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer="" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script defer src="/js/loader.js"></script>
+        
+        <meta http-equiv="X-UA-Compatible" content="IE=8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Im&shy;print</h1>
+            <h2 class="subheading text-centered">About this website</h2>
+        </div>
+        <div class="centered">
+            <h2>About me</h2>
+            <p class="normal text-centered">Read more about me <a href="https://janishutz.com/about.html">here</a></p>
+
+            <h2>About this webpage</h2>
+            <p class="normal text-centered">Creating proper websites is a time consuming task if you've never done it before. Most people that run businesses don't have time to deal with all the things that are required to build a website. Therefore, many people use Wordpress or any similar tool to build websites, which still takes a lot of time and the hosting costs are very high. I try to solve this problem by offering websites at affordable prices, since I've not completed by studies yet.</p>
+
+            <h2>Image attribution</h2>
+            <ul>
+                <li><a href="https://commons.wikimedia.org/wiki/File:CSS3_logo_and_wordmark.svg">Rudloff</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>, via Wikimedia Commons, used in image <a href="/">here</a></li>
+                <li><a href="https://commons.wikimedia.org/wiki/File:JavaScript-logo.png">Ramaksoud2000 via Chris Williams</a>, Public domain, via Wikimedia Commons, used in image <a href="/">here</a></li>
+            </ul>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Home :: Development - janishutz.com</title>
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer="" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script defer src="/js/loader.js"></script>
+
+        <meta http-equiv="X-UA-Compatible" content="IE=8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <meta name="keywords" content="websites website-creation custom-websites">
+        <meta name="description" content="On the look out for a new website, custom built with performance, looks and flexibility in mind?">
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Develop&shy;ment</h1>
+            <h2 class="subheading text-centered">Get your new online presence</h2>
+        </div>
+        <div class="centered">
+            <div class="code-background half-height">
+                <h2 class="biggest text-centered light-color">Just starting a small business and looking for a website to get started?</h2>
+            </div>
+            <div class="wrap-container">
+                <a href="/imprint.html"><img src="/assets/htmlCSSJS.png" class="wrap-image-right"></a>
+                <p class="normal text-centered">Getting started with a web presence can be quite hard, especially, if you are not that well versed in technology. Therefore, I try to make it as easy as possible for you to get started with your own website. Simply name a few websites whose design you liked, tell me about some colours you'd like to use and give me your project or company's logo to get started! Websites I build are created from scratch using the programming languages that make up all of the websites, even ones created with frameworks!</p>
+            </div>
+            <div class="wrap-container">
+                <a href="https://commons.wikimedia.org/wiki/File:Node.js_logo.svg"><img src="/assets/Node.js_logo.svg" class="wrap-image-left"></a>
+                <p class="normal text-centered">Looking for more than a static website? This is not a problem! Feel free to <a href="/contact.html">contact me</a> if you have any questions. Dynamic websites can be websites that have a contact form, a user login or anything that needs to send emails, store data on a server, ...</p>
+                <p class="normal text-centered">For this purpose I usually use Node.js and Vue.js.</p>
+            </div>
+            <p class="normal text-centered">Not sure where to host your website and how to set it up? I can help you out by setting up your website directly with a hosting provider. *</p>
+            <p class="normal text-centered">Interested? Feel free to contact me below!</p>
+            <a class="button" href="/order.html">Contact me</a>
+            <p class="lightly-written">* Only for websites created by myself</p>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/indexOld.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer="" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script defer src="/js/loader.js"></script>
+
+        <meta name="keywords" content="websites website-creation custom-websites">
+        <meta name="description" content="On the look out for a new website, custom built with performance, looks and flexibility in mind?">
+        <title>Home :: Development - janishutz.com</title>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Develop&shy;ment</h1>
+            <h2 class="subheading text-centered">Get your new online presence</h2>
+        </div>
+        <div class="centered">
+            <div class="code-background half-height">
+                <h2 class="biggest text-centered light-color">Just starting a small business and looking for a website to get started?</h2>
+            </div>
+            <div class="wrap-container">
+                <a href="/imprint.html"><img src="/assets/htmlCSSJS.png" class="wrap-image-right"></a>
+                <p class="normal text-centered">I build websites from scratch using HTML, CSS & JavaScript, the languages that make up most of the web and are the foundation of well-known frameworks like wordpress. But in contrast to frameworks, websites built from scratch tend to perform better, both when it comes to loading times and when it comes to Google rankings, if given the same keywords and descriptions.</p>
+            </div>
+            <div class="wrap-container">
+                <a href="https://commons.wikimedia.org/wiki/File:Node.js_logo.svg"><img src="/assets/Node.js_logo.svg" class="wrap-image-left"></a>
+                <p class="normal text-centered">Get a website with a Node.js backend, if you require more advanced features like contact forms or a blog. If you do not require any of this, you can just get a simple static website you can host anywhere.</p>
+            </div>
+            <p class="normal text-centered">Not sure where to host your website and how to set it up? I can help you out by setting up your website directly with a hosting provider. *</p>
+            <p class="normal text-centered">Interested? Feel free to contact me below!</p>
+            <a class="button" href="/order.html">Contact me</a>
+            <p class="lightly-written">* Only for websites created by myself</p>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/js/loader.js

@@ -0,0 +1,4 @@
+$( document ).ready( function () {
+    $( '#nav' ).load( '/modules/nav.html' );
+    $( '#footer' ).load( '/modules/footer.html' );
+} );

oldVersion/js/orderwebsite.js

@@ -0,0 +1,3 @@
+$( document ).ready( function () {
+    $( '#contactForm' ).load( '/modules/contactForm.html' );
+} );

oldVersion/modules/contactForm.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link rel="stylesheet" href="/css/formstyle.css">
+    </head>
+    <body>
+        <form action="https://api.janishutz.com/contact?origin=development" method="post" class="form">
+            <label for="name" class="label">Full name *</label><br>
+            <input type="text" name="name" id="name" placeholder="Your full name" required class="input"><br>
+            <label for="mail" class="label">Your email address *</label><br>
+            <input type="email" name="mail" id="mail" placeholder="Your email address" required class="input"><br>
+            <label for="name" class="label">Your message *</label><br>
+            <textarea name="name" id="name" placeholder="Your message" required minlength="50" rows="10" cols="100" class="textarea"></textarea><br>
+            <p style="font-size: 80%;">* required</p>
+            <input type="submit" value="Submit" class="button"><br>
+        </form>
+    </body>
+</html>

oldVersion/modules/footer.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link rel="stylesheet" href="/css/footerstyle.css">
+    </head>
+    <body>
+        <div class="footer-container">
+            <div class="footer-logo-container"><img class="logo" src="https://static.janishutz.com/Logo.png" alt="Logo"></div>
+            <div class="footer-wrapper">
+                <p class="footer-title">Development</p>
+                <a href="/imprint.html" class="footer-link">Imprint</a>
+                <a href="/privacy.html" class="footer-link">Privacy policy</a>
+            </div>
+            <div></div>
+        </div>
+    </body>
+</html>

oldVersion/modules/nav.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <link rel="stylesheet" href="/css/navstyle.css">
+    </head>
+    <body>
+        <div class="nav-container">
+            <div class="mobile-wrapper">
+                <a class="logo-container" href="/"><img class="logo" src="https://static.janishutz.com/Logo.png" alt="Logo"></a>
+                <div class="toggle-wrapper">
+                    <a class="listtoggle" onclick="togglelist()">&#9776</a>
+                </div>
+            </div>
+            <div class="nav-wrapper">
+                <div class="nav-menu">
+                    <div class="nav-list">
+                        <a class="navitem" href="/order.html" id="order">Order</a>
+                        <a class="navitem" href="/examples.html" id="examples">Examples</a>
+                        <a class="navitem" href="/contact.html" id="contact">Contact me</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <script>
+            $( document ).ready(function () {
+                $( '.navitem' ).mouseenter( function () {
+                    if ( window.location.pathname.slice( 1, window.location.pathname.length - 5 ) == this.id ) {} else {
+                        $( this ).stop();
+                        $( this ).animate( { 'color':'rgba(184, 214, 240, 1)' }, 200);
+                    };
+                } );
+                $( '.navitem' ).mouseleave( function () {
+                    if ( window.location.pathname.slice( 1, window.location.pathname.length - 5 ) == this.id ) {} else {
+                        $( this ).stop();
+                        $( this ).animate( { 'color':'black' }, 200 );
+                    };
+                });
+                setTimeout( highlightTab, 300 );
+            });
+
+            function highlightTab () {
+                $( `#${ window.location.pathname.slice( 1, window.location.pathname.length - 5 ) }`).css( 'color', 'rgba(184, 214, 240, 1)' );
+            }
+
+            let previous = 1;
+            function togglelist() {
+                $( '.nav-menu' ).slideToggle(300);
+                $( '.listtoggle' ).toggleClass( 'active' );
+            }
+
+            window.addEventListener( 'resize', function( event ) {
+                if ( $( window ).width() > 999 ) { 
+                    $( '.nav-menu' ).slideDown();
+                    previous = 1;
+                } else if ( $(window).width() < 999 && previous == 1 ) {
+                    $( '.nav-menu' ).slideUp();
+                    $( '.listtoggle' ).removeClass( 'active' );
+                    previous = 0;
+                };
+            }, true);
+        </script>
+    </body>
+</html>

oldVersion/order.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Order :: Development - janishutz.com</title>
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer" ></script>
+        <script defer src="/js/orderwebsite.js"></script>
+        <script defer src="/js/loader.js"></script>
+
+        <meta http-equiv="X-UA-Compatible" content="IE=7">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <meta name="description" content="Order a website that was built from scratch just for you at affordable prices!">
+        <meta name="keywords" content="websites website-creation custom-websites">
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Or&shy;der</h1>
+            <h2 class="subheading text-centered">Get your new online presence</h2>
+        </div>
+        <div class="centered">
+            <h3>Ready for your new website?</h3>
+            <div id="contactForm"></div>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/privacy.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Privacy policy :: Development - janishutz.com</title>
+        <link rel="stylesheet" href="/css/style.css">
+        <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer="" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script defer src="/js/loader.js"></script>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="heading-wrapper">
+            <h1 class="heading text-centered">Pri&shy;va&shy;cy Po&shy;li&shy;cy</h1>
+            <h2 class="subheading text-centered">How data gets processed by this website</h2>
+        </div>
+        <div class="centered">
+            <p class="text-centered">Privacy is an important factor for me. Therefore, all data that is being processed by my server is only accessible to me and will never be shared with anybody else. I do not use any third party captcha solution, except you explicitly wish the inclusion of one on your website.</p>
+            <h5 class="text-centered">What data is being processed?</h5>
+            <p class="text-centered">The data processed includes your full name, your email address and your message, you, the customer enters into the forms on this website. The data submitted is stored securely on my server and will always be sent in an encrypted form.</p>
+            <h5 class="text-centered">What is this data used for?</h5>
+            <p class="text-centered">This data is used for communicating with you in order to fulfill your order.</p>
+            <p class="lightly-written">Version 1.0.0</p>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

oldVersion/sources.md

@@ -0,0 +1,2 @@
+<a href="https://commons.wikimedia.org/wiki/File:CSS3_logo_and_wordmark.svg">Rudloff</a>, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>, via Wikimedia Commons
+<a href="https://commons.wikimedia.org/wiki/File:JavaScript-logo.png">Ramaksoud2000 via Chris Williams</a>, Public domain, via Wikimedia Commons