diff --git a/assets/CSS3_logo_and_wordmark.svg b/assets/CSS3_logo_and_wordmark.svg new file mode 100644 index 0000000..99e7d06 --- /dev/null +++ b/assets/CSS3_logo_and_wordmark.svg @@ -0,0 +1,28 @@ + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/HTML5_Logo.svg b/assets/HTML5_Logo.svg new file mode 100644 index 0000000..65d77ba --- /dev/null +++ b/assets/HTML5_Logo.svg @@ -0,0 +1,14 @@ + + HTML5 Logo + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/JavaScript-logo.png b/assets/JavaScript-logo.png new file mode 100644 index 0000000..7b5ffab Binary files /dev/null and b/assets/JavaScript-logo.png differ diff --git a/assets/Node.js_logo.svg b/assets/Node.js_logo.svg new file mode 100644 index 0000000..41d044a --- /dev/null +++ b/assets/Node.js_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/htmlCSSJS.png b/assets/htmlCSSJS.png new file mode 100644 index 0000000..8bdbabb Binary files /dev/null and b/assets/htmlCSSJS.png differ diff --git a/assets/htmlCSSJS.xcf b/assets/htmlCSSJS.xcf new file mode 100644 index 0000000..789a5fc Binary files /dev/null and b/assets/htmlCSSJS.xcf differ diff --git a/assets/pageStyle.png b/assets/pageStyle.png new file mode 100644 index 0000000..e3f15aa Binary files /dev/null and b/assets/pageStyle.png differ diff --git a/assets/pageStyle.xcf b/assets/pageStyle.xcf new file mode 100644 index 0000000..2f55e59 Binary files /dev/null and b/assets/pageStyle.xcf differ diff --git a/assets/screenshotCode.png b/assets/screenshotCode.png new file mode 100644 index 0000000..9faf5e4 Binary files /dev/null and b/assets/screenshotCode.png differ diff --git a/assets/screenshotPage.png b/assets/screenshotPage.png new file mode 100644 index 0000000..04e340e Binary files /dev/null and b/assets/screenshotPage.png differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..708acb7 --- /dev/null +++ b/contact.html @@ -0,0 +1,24 @@ + + + + Contact :: Development - janishutz.com + + + + + + + +
+

Develop­ment

+

Get your new online presence

+
+
+
+

Contact

+
+
+
+ + + \ No newline at end of file diff --git a/css/footerstyle.css b/css/footerstyle.css new file mode 100644 index 0000000..1d2d92c --- /dev/null +++ b/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%; + } +} \ No newline at end of file diff --git a/css/navstyle.css b/css/navstyle.css new file mode 100644 index 0000000..32ea68f --- /dev/null +++ b/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% + } +} diff --git a/css/style.css b/css/style.css index 959e72a..9a2dffe 100644 --- a/css/style.css +++ b/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%; + } } \ No newline at end of file diff --git a/examples.html b/examples.html new file mode 100644 index 0000000..8fb21dc --- /dev/null +++ b/examples.html @@ -0,0 +1,32 @@ + + + + Examples :: Development - janishutz.com + + + + + + + +
+

Develop­ment

+

Get your new online presence

+
+
+
+

Examples

+
+

Here's a list of the websites I have created so far.

+ +
+ + + \ No newline at end of file diff --git a/imprint.html b/imprint.html new file mode 100644 index 0000000..9ed5197 --- /dev/null +++ b/imprint.html @@ -0,0 +1,28 @@ + + + + Home :: Development - janishutz.com + + + + + + + +
+

Develop­ment

+

Get your new online presence

+
+
+
+

Imprint

+
+

Image attribution

+ +
+ + + \ No newline at end of file diff --git a/index.html b/index.html index ca817a6..898464c 100644 --- a/index.html +++ b/index.html @@ -3,21 +3,33 @@ Home :: Development - janishutz.com + + +
-

Development

-

Get your new online presence

+

Develop­ment

+

Get your new online presence

-

Just starting a small business and looking for a website to get started?

-

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.

-

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.

-

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.

+
+

Just starting a small business and looking for a website to get started?

+
+
+ +

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.

+
+
+ +

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.

+
+

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. *

Interested? Feel free to contact me below!

-

Order your new website here today!

Contact me +

* Only for websites created by myself

+ \ No newline at end of file diff --git a/js/loader.js b/js/loader.js index e69de29..666903f 100644 --- a/js/loader.js +++ b/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'} ); + } ); +} ); \ No newline at end of file diff --git a/modules/footer.html b/modules/footer.html index e69de29..c5edb4a 100644 --- a/modules/footer.html +++ b/modules/footer.html @@ -0,0 +1,18 @@ + + + + + + + +
+
+
+

Development

+ Imprint + Privacy policy +
+
+
+ + diff --git a/modules/nav.html b/modules/nav.html index e69de29..9093130 100644 --- a/modules/nav.html +++ b/modules/nav.html @@ -0,0 +1,65 @@ + + + + + + + +
+
+ +
+ ☰ +
+
+
+
+
+ Order + Examples + Contact me +
+
+
+
+ + + diff --git a/order.html b/order.html index 126a2db..3f50328 100644 --- a/order.html +++ b/order.html @@ -2,12 +2,24 @@ Order :: Development - janishutz.com + + -

Contact me for an offer

-
+ +
+

Develop­ment

+

Get your new online presence

+
+
+
+

Contact me for an offer

+
+
+
+ \ No newline at end of file diff --git a/sources.md b/sources.md new file mode 100644 index 0000000..173a3f0 --- /dev/null +++ b/sources.md @@ -0,0 +1,2 @@ +Rudloff, CC BY 3.0, via Wikimedia Commons +Ramaksoud2000 via Chris Williams, Public domain, via Wikimedia Commons \ No newline at end of file