diff --git a/newVersion/css/homeStyle.css b/newVersion/css/homeStyle.css new file mode 100644 index 0000000..2c68ad0 --- /dev/null +++ b/newVersion/css/homeStyle.css @@ -0,0 +1,39 @@ +/* + Steps style +*/ + +body { + height: 300%; +} + +.step { + font-family: Lobster; + display: flex; + flex-direction: column; + justify-content: center; + height: 100vh; + margin-left: 0; + width: 100vw; + font-size: 150%; + margin: 0; + padding: 0; +} + +.reveal { + position: fixed; + transition: 1.5s all ease; + transform: translateY(100vh); + background-color: rgb(14, 14, 14); +} + +.reveal.active { + transform: translateY(0); +} + +/* + Styles for individual steps +*/ +#step-1 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( 'https://static.janishutz.com/Logo.png'); +} \ No newline at end of file diff --git a/newVersion/css/navstyle.css b/newVersion/css/navstyle.css new file mode 100644 index 0000000..2a4e9bb --- /dev/null +++ b/newVersion/css/navstyle.css @@ -0,0 +1,158 @@ +/* +* myevent - navstyle.css +* +* Created by Janis Hutz 03/06/2023, Licensed under the GPL V3 License +* https://janishutz.com, development@janishutz.com +* +* +*/ + +/* + Default rules that are set for mobile interfaces +*/ +#nav-menu { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.85); + position: fixed; + display: block; + z-index: 10; + width: 100%; + top: 0; + bottom: 0; + left: 1; + right: 1; +} + +.nav-container { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + + +.menuActive { + overflow: hidden; +} + +.logo { + display: block; + width: 60vw; + height: auto; + margin: 0; + border-radius: 10px; +} + +.listtoggle { + text-decoration: none; + color: rgb(168, 212, 253); + font-size: 5vh; + cursor: pointer; + width: 1.7vw; + height: 1.29vw; + position: fixed; + top: 50px; + right: 50px; + z-index: 11; + transition: 0.8s; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.listtoggle:hover { + width: 2.2vw; + height: 1.68vw; +} + +.listtoggle:hover .line { + background-color: rgb(29, 69, 105); + transition: 0.4s; +} + +/* Nav-Hide-Show button idea from here: https://codepen.io/alvarotrigo/pen/wvrzPWL*/ + +.line { + display: block; + width: 100%; + height: 3px; + background-color: rgb(168, 212, 253); +} + +#line1 { + transform-origin: 0% 0%; + transition: transform 0.4s ease-in-out; +} + +#line2 { + transition: transform 0.2s ease-in-out; +} + +#line3 { + transform-origin: 0% 100%; + transition: transform 0.4s ease-in-out; +} + +.listtoggle.active #line1 { + transform: rotate( 45deg ); +} + +.listtoggle.active #line2 { + transform: scaleY(0); +} + +.listtoggle.active #line3 { + transform: rotate( -45deg ); +} + + +/* 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: rgb(107, 107, 107);; + font-size: 1.4rem; + width: fit-content; + padding: 2%; +} + +.inactive { + transition: 1s; + color: white; + font-size: 1.3rem; +} + +.inactive:hover { + font-size: 1.6rem; + color: rgb(107, 107, 107); + transition: 0.4s; +} + +/* ~ --> all next & + --> next */ +.shaded { + color: rgb(107, 107, 107); + transition: 0.3s; +} + +@media only screen and (min-width: 999px) { + .nav-container { + flex-direction: row; + } + + .logo { + width: auto; + height: 70vh; + margin-left: 10%; + } +} diff --git a/newVersion/css/style.css b/newVersion/css/style.css new file mode 100644 index 0000000..2fcbce5 --- /dev/null +++ b/newVersion/css/style.css @@ -0,0 +1,45 @@ +html, body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + font-size: calc( 16pt + 0.39vw ); +} + +body { + background-color: rgb(14, 14, 14); + font-family: sans-serif; +} + +/* + GRADIENTS +*/ + +.gradient-purple { + background-image: repeating-linear-gradient(to right, rgb(85, 19, 116), rgb(131, 28, 151), rgb(119, 77, 128)); + width: fit-content; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + + +/* + SIZES +*/ + +.huge { + font-size: 500%; +} + +.bigger { + font-size: 200%; +} + +.small-margin { + margin: 0.5%; +} + +.no-margin { + margin: 0; +} \ No newline at end of file diff --git a/favicon.ico b/newVersion/favicon.ico similarity index 100% rename from favicon.ico rename to newVersion/favicon.ico diff --git a/newVersion/index.html b/newVersion/index.html new file mode 100644 index 0000000..aebdc3f --- /dev/null +++ b/newVersion/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + Home :: Development - janishutz.com + + + +
+

Web­sites

+

Get your new online presence

+
+ +
+

Beau­ti­ful

+

yet still not expensive

+
+ +
+

In­te­res­ted?

+

contact me for an offer

+
+ + + + + + + + \ No newline at end of file diff --git a/newVersion/js/index.js b/newVersion/js/index.js new file mode 100644 index 0000000..e69de29 diff --git a/newVersion/js/scrolling.js b/newVersion/js/scrolling.js new file mode 100644 index 0000000..5274eb1 --- /dev/null +++ b/newVersion/js/scrolling.js @@ -0,0 +1,25 @@ +$( document ).ready( function () { + + document.addEventListener( 'scroll', scrolled ); + + let revealables = document.querySelectorAll( '.reveal' ); + + let currentlyShowing = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) ); + + + for ( let i = 0; i < currentlyShowing; i++ ) { + if ( i < parseInt( revealables.length ) ) { + revealables[ i ].classList.add( 'active' ); + } + } + + function scrolled() { + let regPos = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) ); + if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) { + revealables[ regPos ].classList.remove( 'active' ); + } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) { + revealables[ currentlyShowing ].classList.add( 'active' ); + } + currentlyShowing = regPos; + } +} ); diff --git a/newVersion/nav.html b/newVersion/nav.html new file mode 100644 index 0000000..83524f2 --- /dev/null +++ b/newVersion/nav.html @@ -0,0 +1,54 @@ + + + + + + + nav + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/CSS3_logo_and_wordmark.svg b/oldVersion/assets/CSS3_logo_and_wordmark.svg similarity index 100% rename from assets/CSS3_logo_and_wordmark.svg rename to oldVersion/assets/CSS3_logo_and_wordmark.svg diff --git a/assets/HTML5_Logo.svg b/oldVersion/assets/HTML5_Logo.svg similarity index 100% rename from assets/HTML5_Logo.svg rename to oldVersion/assets/HTML5_Logo.svg diff --git a/assets/JavaScript-logo.png b/oldVersion/assets/JavaScript-logo.png similarity index 100% rename from assets/JavaScript-logo.png rename to oldVersion/assets/JavaScript-logo.png diff --git a/assets/Node.js_logo.svg b/oldVersion/assets/Node.js_logo.svg similarity index 100% rename from assets/Node.js_logo.svg rename to oldVersion/assets/Node.js_logo.svg diff --git a/assets/htmlCSSJS.png b/oldVersion/assets/htmlCSSJS.png similarity index 100% rename from assets/htmlCSSJS.png rename to oldVersion/assets/htmlCSSJS.png diff --git a/assets/htmlCSSJS.xcf b/oldVersion/assets/htmlCSSJS.xcf similarity index 100% rename from assets/htmlCSSJS.xcf rename to oldVersion/assets/htmlCSSJS.xcf diff --git a/assets/pageStyle.png b/oldVersion/assets/pageStyle.png similarity index 100% rename from assets/pageStyle.png rename to oldVersion/assets/pageStyle.png diff --git a/assets/pageStyle.xcf b/oldVersion/assets/pageStyle.xcf similarity index 100% rename from assets/pageStyle.xcf rename to oldVersion/assets/pageStyle.xcf diff --git a/assets/screenshotCode.png b/oldVersion/assets/screenshotCode.png similarity index 100% rename from assets/screenshotCode.png rename to oldVersion/assets/screenshotCode.png diff --git a/assets/screenshotPage.png b/oldVersion/assets/screenshotPage.png similarity index 100% rename from assets/screenshotPage.png rename to oldVersion/assets/screenshotPage.png diff --git a/contact.html b/oldVersion/contact.html similarity index 100% rename from contact.html rename to oldVersion/contact.html diff --git a/css/footerstyle.css b/oldVersion/css/footerstyle.css similarity index 100% rename from css/footerstyle.css rename to oldVersion/css/footerstyle.css diff --git a/css/formstyle.css b/oldVersion/css/formstyle.css similarity index 100% rename from css/formstyle.css rename to oldVersion/css/formstyle.css diff --git a/css/navstyle.css b/oldVersion/css/navstyle.css similarity index 100% rename from css/navstyle.css rename to oldVersion/css/navstyle.css diff --git a/css/style.css b/oldVersion/css/style.css similarity index 100% rename from css/style.css rename to oldVersion/css/style.css diff --git a/examples.html b/oldVersion/examples.html similarity index 100% rename from examples.html rename to oldVersion/examples.html diff --git a/oldVersion/favicon.ico b/oldVersion/favicon.ico new file mode 100644 index 0000000..2a570ef Binary files /dev/null and b/oldVersion/favicon.ico differ diff --git a/imprint.html b/oldVersion/imprint.html similarity index 100% rename from imprint.html rename to oldVersion/imprint.html diff --git a/index.html b/oldVersion/index.html similarity index 100% rename from index.html rename to oldVersion/index.html diff --git a/indexOld.html b/oldVersion/indexOld.html similarity index 100% rename from indexOld.html rename to oldVersion/indexOld.html diff --git a/js/loader.js b/oldVersion/js/loader.js similarity index 100% rename from js/loader.js rename to oldVersion/js/loader.js diff --git a/js/orderwebsite.js b/oldVersion/js/orderwebsite.js similarity index 100% rename from js/orderwebsite.js rename to oldVersion/js/orderwebsite.js diff --git a/modules/contactForm.html b/oldVersion/modules/contactForm.html similarity index 100% rename from modules/contactForm.html rename to oldVersion/modules/contactForm.html diff --git a/modules/footer.html b/oldVersion/modules/footer.html similarity index 100% rename from modules/footer.html rename to oldVersion/modules/footer.html diff --git a/modules/nav.html b/oldVersion/modules/nav.html similarity index 100% rename from modules/nav.html rename to oldVersion/modules/nav.html diff --git a/order.html b/oldVersion/order.html similarity index 100% rename from order.html rename to oldVersion/order.html diff --git a/privacy.html b/oldVersion/privacy.html similarity index 100% rename from privacy.html rename to oldVersion/privacy.html diff --git a/sources.md b/oldVersion/sources.md similarity index 100% rename from sources.md rename to oldVersion/sources.md