a lot of progress

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>

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>

contact.html

@@ -0,0 +1,24 @@
+<!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>
+    </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">Contact</h2>
+            </div>
+            <div id="contactForm"></div>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

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%;
+    }
+}

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%
+    }
+}

css/style.css

@@ -8,7 +8,14 @@ html, body {
     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%;
@@ -19,6 +26,10 @@ html, body {
     border-top-right-radius: 0;
 }
 
+/* 
+    Title background & title
+*/
+
 .heading-wrapper {
     width: 90%;
     margin: 3%;
@@ -36,4 +47,122 @@ html, body {
 
 .heading {
     font-size: 3rem;
+}
+
+
+/* 
+    Centered text
+*/
+
+.text-centered {
+    text-align: center;
+}
+
+
+/* 
+    Buttons
+*/
+
+.button {
+    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;
+}
+
+
+.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%;
+    }
 }

examples.html

@@ -0,0 +1,32 @@
+<!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>
+    </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">Examples</h2>
+            </div>
+            <h4>Here's a list of the websites I have created so far.</h4>
+            <ul>
+                <li><a href="historyproject.janishutz.com">historyproject.janishutz.com</a></li>
+                <li><a href="booking.languageschoolhossegor.com">booking.languageschoolhossegor.com</a></li>
+                <li><a href="janishutz.com">janishutz.com</a></li>
+                <li><a href="development.janishutz.com">development.janishutz.com</a></li>
+                <li><a href="pcbuilding.janishutz.com">pcbuilding.janishutz.com</a></li>
+                <li><a href="impress.js.org">impress.js.org</a></li>
+            </ul>
+        </div>
+        <div id="footer"></div>
+    </body>
+</html>

imprint.html

@@ -0,0 +1,28 @@
+<!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>
+    </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">Imprint</h2>
+            </div>
+            <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>

index.html

@@ -3,21 +3,33 @@
     <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>
     </head>
     <body>
         <div id="nav"></div>
         <div class="heading-wrapper">
-            <h1 class="heading">Development</h1>
-            <h2 class="subheading">Get your new online presence</h2>
+            <h1 class="heading text-centered">Develop&shy;ment</h1>
+            <h2 class="subheading text-centered">Get your new online presence</h2>
         </div>
         <div class="centered">
-            <h2 class="biggest text-centered">Just starting a small business and looking for a website to get started?</h2>
-            <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>
-            <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>
-            <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>
+            <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>
-            <p class="normal bold text-centered">Order your new website here today!</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>

js/loader.js

@@ -0,0 +1,13 @@
+$(document).ready( function () {
+    $( '#nav' ).load( '/modules/nav.html' );
+    $( '#footer' ).load( '/modules/footer.html' );
+
+    $( '.button' ).mouseenter ( function () {
+        $( this ).stop();
+        $( this ).animate( { 'border-radius': '0'} );
+    } );
+    $( '.button' ).mouseleave ( function () {
+        $( this ).stop();
+        $( this ).animate( { 'border-radius': '50px'} );
+    } );
+} );

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>

modules/nav.html

@@ -0,0 +1,65 @@
+<!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 () {
+                console.log( window.location.pathname );
+                $('.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>

order.html

@@ -2,12 +2,24 @@
 <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>
     </head>
     <body>
-        <h1>Contact me for an offer</h1>
-        <div id="contactForm"></div>
+        <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">Contact me for an offer</h2>
+            </div>
+            <div id="contactForm"></div>
+        </div>
+        <div id="footer"></div>
     </body>
 </html>

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