janishutz-website/development-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a lot of progress

Browse Source
This commit is contained in:
janis
2023-01-22 17:44:42 +01:00
parent 237a20c8cc
commit e65b58e5bb
22 changed files with 572 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
assets/CSS3_logo_and_wordmark.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

14
assets/HTML5_Logo.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
assets/JavaScript-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

1
assets/Node.js_logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

BIN
assets/htmlCSSJS.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
assets/htmlCSSJS.xcf Normal file
View File

Binary file not shown.

BIN
assets/pageStyle.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 525 KiB

BIN
assets/pageStyle.xcf Normal file
View File

Binary file not shown.

BIN
assets/screenshotCode.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
assets/screenshotPage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

24
contact.html Normal file
View File

@@ -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>

47
css/footerstyle.css Normal file
View File

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

138
css/navstyle.css Normal file
View File

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

129
css/style.css
View File

@@ -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%;
@@ -37,3 +48,121 @@ 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%;
}
}

32
examples.html Normal file
View File

@@ -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>

28
imprint.html Normal file
View File

@@ -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>

26
index.html
View File

@@ -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>

13
js/loader.js
View File

@@ -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'} );
} );
} );

18
modules/footer.html
View File

@@ -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>

65
modules/nav.html
View File

@@ -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>

16
order.html
View File

@@ -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>

2
sources.md Normal file
View File

@@ -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