diff --git a/newVersion/contact/index.html b/newVersion/contact/index.html new file mode 100644 index 0000000..02d489e --- /dev/null +++ b/newVersion/contact/index.html @@ -0,0 +1,61 @@ + + + + + + + + + + + + + + + + + + + Order :: Development - janishutz.com + + + +
+
+
+ Scroll to discover more + keyboard_double_arrow_down +
+
+
+ +
+
+ radio_button_checked + radio_button_unchecked +
+
+ +
+
+

Contact

+

Any questions?

+
+
+ +
+
+

Contact

+
+
+
+ + + + + + + \ No newline at end of file diff --git a/newVersion/contactForm.html b/newVersion/contactForm.html new file mode 100644 index 0000000..89c358e --- /dev/null +++ b/newVersion/contactForm.html @@ -0,0 +1,19 @@ + + + + + + + +
+
+
+
+
+
+
+

* required

+
+
+ + diff --git a/newVersion/css/examplesStyle.css b/newVersion/css/examplesStyle.css index 74ed1ea..14204f7 100644 --- a/newVersion/css/examplesStyle.css +++ b/newVersion/css/examplesStyle.css @@ -50,4 +50,6 @@ body { #step-7 { position: fixed; background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.png'); + background-repeat: no-repeat; + background-size: cover; } diff --git a/newVersion/css/fancyStyle.css b/newVersion/css/fancyStyle.css index 89965d3..0c8bd95 100644 --- a/newVersion/css/fancyStyle.css +++ b/newVersion/css/fancyStyle.css @@ -40,6 +40,7 @@ display: none; } + .scroll-wrapper { color: rgb(221, 221, 221); font-size: 80%; @@ -50,6 +51,14 @@ width: 100%; } +.scroll-container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + cursor: pointer; +} + .scroll-symbol { font-size: 180%; animation: scroll-animation infinite 4s ease-in-out; diff --git a/newVersion/css/formstyle.css b/newVersion/css/formstyle.css new file mode 100644 index 0000000..b514e41 --- /dev/null +++ b/newVersion/css/formstyle.css @@ -0,0 +1,41 @@ +.form { + width: 75%; +} + +.input { + width: 100%; + border-radius: 500px; + padding: 20px; + color: white; + border: none; + background-color: rgb(44, 44, 44); +} + +.textarea { + width: 100%; + border-radius: 10px; + padding: 20px; + resize: vertical; + color: white; + border: none; + background-color: rgb(44, 44, 44); +} + +.label { + color: white; +} + +.submit { + background: linear-gradient(90deg, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214), rgb(30, 36, 131), rgb(41, 128, 109), rgb(146, 50, 47)); + background-size: 300px; + padding: 10px 20px; + border: none; + border-radius: 20px; + cursor: pointer; + transition: all 3s; +} + +.submit:hover { + background-size: 200%; + background-position: -100%; +} \ No newline at end of file diff --git a/newVersion/css/infoStyle.css b/newVersion/css/infoStyle.css new file mode 100644 index 0000000..a3b0834 --- /dev/null +++ b/newVersion/css/infoStyle.css @@ -0,0 +1,60 @@ +body { + height: 600%; +} + + +/* + 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'); +} + +#step-2 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage6.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-3 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage2.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-4 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage3.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-5 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage5.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-6 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage4.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-7 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-8 { + 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'); +} diff --git a/newVersion/css/orderStyle.css b/newVersion/css/orderStyle.css new file mode 100644 index 0000000..d822e29 --- /dev/null +++ b/newVersion/css/orderStyle.css @@ -0,0 +1,21 @@ +body { + height: 200%; +} + +/* + 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( '/assets/screenshotPage2.png'); + background-repeat: no-repeat; + background-size: cover; +} + +#step-2 { + position: fixed; + background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage3.png'); + background-repeat: no-repeat; + background-size: cover; +} diff --git a/newVersion/css/style.css b/newVersion/css/style.css index 08fe10f..7be4246 100644 --- a/newVersion/css/style.css +++ b/newVersion/css/style.css @@ -33,7 +33,7 @@ body { GRADIENTS */ -.gradient-purple { +.gradient { background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214)); width: fit-content; -webkit-background-clip: text; @@ -50,6 +50,10 @@ body { } +.link-invisible { + text-decoration: none; +} + /* SIZES */ @@ -66,6 +70,28 @@ body { font-size: 200%; } +.medium-size { + font-size: 175%; +} + +.small-size { + font-size: 90%; +} + +.smaller-size { + font-size: 75%; +} + +.smallest-size { + font-size: 60%; +} + +.very-small { + font-size: 30%; + font-family: sans-serif; + color: rgb(107, 107, 107); +} + .small-margin { margin: 0.5%; } diff --git a/newVersion/examples/index.html b/newVersion/examples/index.html index 2170553..0e98da4 100644 --- a/newVersion/examples/index.html +++ b/newVersion/examples/index.html @@ -22,8 +22,10 @@
- Scroll to discover more - keyboard_double_arrow_down +
+ Scroll to discover more + keyboard_double_arrow_down +
@@ -41,50 +43,49 @@
-

Exam­ples

-

of websites I have created

+

Exam­ples

+

of websites I have created. Click the title to go to the website. All links open in new tabs.

-
-

Libre­ǝvent

+

Libre­ǝvent

My flagship project - A fully free and open source event management solution

-

Per­sonal web­site

+

Per­sonal web­site

My own website, where I show off my projects

-

im­press.js - website

+

im­press.js - website

A website for a JavaScript presentation framework I contribute code to

-

im­press.js - docs

+

im­press.js - docs

The documentation page for impress.js, a JavaScript presentation framework

-

Boo­king

+

Boo­king

A fully featured booking system for Language School Hossegor

-

Ja­pan

+

Ja­pan

A small research project for history class at school

diff --git a/newVersion/index.html b/newVersion/index.html index 9b918fb..2fe0ca7 100644 --- a/newVersion/index.html +++ b/newVersion/index.html @@ -23,8 +23,10 @@
- Scroll to discover more - keyboard_double_arrow_down +
+ Scroll to discover more + keyboard_double_arrow_down +
@@ -50,44 +52,45 @@
-

Web­sites

-

Get your new online presence

+

Web­sites

+

Get your new online presence

+

This website is designed to be as fancy as possible. Yours can be more like a conventional website, if you wish.

-

Beau­ti­ful

+

Beau­ti­ful

Get a website of any style you want

-

Cus­tom

+

Cus­tom

Built with the technologies used by frameworks, but without the downsides that come with them

-

Static

+

Static

Websites that display your content in a stylish, beautiful manner, like this page

-

Dynamic

+

Dynamic

Websites that include blogs, contact forms, registration forms and many more dynamic features, like the order page

-

In­te­res­ted?

-

contact me for an offer

+

In­te­res­ted?

+

contact me for an offer

diff --git a/newVersion/info/index.html b/newVersion/info/index.html index 19d4801..9192b38 100644 --- a/newVersion/info/index.html +++ b/newVersion/info/index.html @@ -8,7 +8,7 @@ - + @@ -16,14 +16,16 @@ - Order :: Development - janishutz.com + Details :: Development - janishutz.com
- Scroll to discover more - keyboard_double_arrow_down +
+ Scroll to discover more + keyboard_double_arrow_down +
@@ -31,20 +33,68 @@
radio_button_checked radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked + radio_button_unchecked
-

Order

-

Ready for your new website?

+

Details

+

on how this works

-

Beau­ti­ful

-

Get a website of any style you want

+

Offe­ring

+

You can get anything from a simple static website to something much more complex, like a webpage that has a blog and contact forms.

+
+
+ +
+
+

Styles

+

Whilst this website is using lots of special effects, I can create whatever kind of website you like. See my example websites

+
+
+ +
+
+

Perfor­mance

+

Websites built from scratch usually perform better than ones created with frameworks - in both loading time and search

+
+
+ +
+
+

Ho­sting

+

I can set up your new website directly with a hosting provider, if you wish so.

+
+
+ +
+
+

SEO

+

You can choose how SEO should be handled: either by an SEO expert or by me

+
+
+ +
+
+

Pri­cing

+

Prices are calculated on a per-hour basis. You will receive an estimate in costs before I start developing anything - for free.

+
+
+ +
+
+

Pri­cing

+

You can expect a website to cost more, the fancier it gets. A website like this one is one of the most expensive kinds of websites I offer

diff --git a/newVersion/js/scrolling.js b/newVersion/js/scrolling.js index a51b80f..d0ff23e 100644 --- a/newVersion/js/scrolling.js +++ b/newVersion/js/scrolling.js @@ -59,7 +59,16 @@ $( document ).ready( function () { } $( '.progress-item' ).click( function () { - let future = parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1; + moveTo( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) ); + } ); + + $( '.scroll-wrapper' ).click( function () { + moveTo( currentlyShowing + 1 ); + } ); + + function moveTo ( id ) { + $( '#scroll-hint' ).fadeOut( 300 ); + let future = id - 1; for ( let i = 0; i < future + 1; i++ ) { $( `#step-${i + 1}` ).addClass( 'active' ); } @@ -67,8 +76,14 @@ $( document ).ready( function () { for ( let i = future + 1; i < revealables.length + 1; i++ ) { $( `#step-${i + 1}` ).removeClass( 'active' ); } + + clearTimeout( timeout ); + $( '#scroll-hint' ).fadeOut( 300 ); + if ( future < revealables.length ) { + timeout = setTimeout( showScrollHint, 7000 ); + } currentlyShowing = future; trackProgress(); - window.scrollTo( { top: ( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1 ) * heights, behavior: 'instant' } ); - } ); + window.scrollTo( { top: id * heights, behavior: 'instant' } ); + } } ); diff --git a/newVersion/order/index.html b/newVersion/order/index.html index 19d4801..bb99000 100644 --- a/newVersion/order/index.html +++ b/newVersion/order/index.html @@ -8,7 +8,7 @@ - + @@ -22,8 +22,10 @@
- Scroll to discover more - keyboard_double_arrow_down +
+ Scroll to discover more + keyboard_double_arrow_down +
@@ -36,15 +38,15 @@
-

Order

-

Ready for your new website?

+

Order

+

Ready for your new website?

-

Beau­ti­ful

-

Get a website of any style you want

+

Order

+
@@ -53,6 +55,7 @@ \ No newline at end of file