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

almost finished website

Browse Source
This commit is contained in:
Janis Hutz
2023-05-19 21:59:00 +02:00
parent 5f69d25662
commit 8e1d803d8d
13 changed files with 351 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
newVersion/contact/index.html Normal file
View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/orderStyle.css">
<link rel="stylesheet" href="/css/fancyStyle.css">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order :: Development - janishutz.com</title>
</head>
<body>
<div id="nav"></div>
<div class="scroll-indicator" id="scroll-hint">
<div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div>
</div>
</div>
<div class="progress" id="progress">
<div class="progress-wrapper">
<span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
<span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
</div>
</div>
<div class="step" id="step-1">
<div class="step-content">
<h1 class="gradient huge small-margin">Contact</h1>
<h3 class="gradient bigger">Any questions?</h3>
</div>
</div>
<div class="step reveal" id="step-2">
<div class="step-content">
<h1 class="gradient biggest small-margin">Contact</h1>
<div id="contact"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script defer src="/js/scrolling.js"></script>
<script>
$( '#nav' ).load( '/nav.html' );
$( '#contact' ).load( '/contactForm.html' );
</script>
</body>
</html>

19
newVersion/contactForm.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/css/formstyle.css">
</head>
<body>
<form action="https://api.janishutz.com/contact?origin=development" method="post" class="form">
<label for="name" class="label">Full name *</label><br>
<input type="text" name="name" id="name" placeholder="Your full name" required class="input"><br>
<label for="mail" class="label">Your email address *</label><br>
<input type="email" name="mail" id="mail" placeholder="Your email address" required class="input"><br>
<label for="name" class="label">Your message *</label><br>
<textarea name="name" id="name" placeholder="Your message" required minlength="50" rows="7" class="textarea"></textarea><br>
<p class="label smallest-size">* required</p>
<input type="submit" value="Submit" class="submit"><br>
</form>
</body>
</html>

2
newVersion/css/examplesStyle.css
View File

@@ -50,4 +50,6 @@ body {
#step-7 { #step-7 {
position: fixed; position: fixed;
background: linear-gradient(to right, rgba( 0, 0, 0, 255 ) 30%, rgba( 0, 0, 0, 0 )), url( '/assets/screenshotPage1.png'); 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;
} }

9
newVersion/css/fancyStyle.css
View File

@@ -40,6 +40,7 @@
display: none; display: none;
} }
.scroll-wrapper { .scroll-wrapper {
color: rgb(221, 221, 221); color: rgb(221, 221, 221);
font-size: 80%; font-size: 80%;
@@ -50,6 +51,14 @@
width: 100%; width: 100%;
} }
.scroll-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
}
.scroll-symbol { .scroll-symbol {
font-size: 180%; font-size: 180%;
animation: scroll-animation infinite 4s ease-in-out; animation: scroll-animation infinite 4s ease-in-out;

41
newVersion/css/formstyle.css Normal file
View File

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

60
newVersion/css/infoStyle.css Normal file
View File

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

21
newVersion/css/orderStyle.css Normal file
View File

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

28
newVersion/css/style.css
View File

@@ -33,7 +33,7 @@ body {
GRADIENTS GRADIENTS
*/ */
.gradient-purple { .gradient {
background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214)); background-image: repeating-linear-gradient(to right, rgb(30, 36, 131), rgb(87, 66, 184), rgb(105, 115, 214));
width: fit-content; width: fit-content;
-webkit-background-clip: text; -webkit-background-clip: text;
@@ -50,6 +50,10 @@ body {
} }
.link-invisible {
text-decoration: none;
}
/* /*
SIZES SIZES
*/ */
@@ -66,6 +70,28 @@ body {
font-size: 200%; 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 { .small-margin {
margin: 0.5%; margin: 0.5%;
} }

19
newVersion/examples/index.html
View File

@@ -22,10 +22,12 @@
<div id="nav"></div> <div id="nav"></div>
<div class="scroll-indicator" id="scroll-hint"> <div class="scroll-indicator" id="scroll-hint">
<div class="scroll-wrapper"> <div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span> <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div> </div>
</div> </div>
</div>
<div class="progress" id="progress"> <div class="progress" id="progress">
<div class="progress-wrapper"> <div class="progress-wrapper">
@@ -41,50 +43,49 @@
<div class="step" id="step-1"> <div class="step" id="step-1">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple huge small-margin">Exam&shy;ples</h1> <h1 class="gradient huge small-margin">Exam&shy;ples</h1>
<h3 class="gradient-purple bigger">of websites I have created</h3> <p class="white half-width">of websites I have created. Click the title to go to the website. All links open in new tabs.</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-2"> <div class="step reveal" id="step-2">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Libre&shy;ǝvent</h1> <h1 class="gradient biggest small-margin"><a href="https://libreevent.janishutz.com" class="link-invisible" target="_blank">Libre&shy;ǝvent</a></h1>
<p class="white half-width">My flagship project - A fully free and open source event management solution</p> <p class="white half-width">My flagship project - A fully free and open source event management solution</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-3"> <div class="step reveal" id="step-3">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Per&shy;sonal web&shy;site</h1> <h1 class="gradient biggest small-margin"><a href="https://janishutz.com" class="link-invisible" target="_blank">Per&shy;sonal web&shy;site</a></h1>
<p class="white half-width">My own website, where I show off my projects</p> <p class="white half-width">My own website, where I show off my projects</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-4"> <div class="step reveal" id="step-4">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">im&shy;press.js - website</h1> <h1 class="gradient biggest small-margin"><a href="https://impress-testing.janishutz.com" class="link-invisible" target="_blank">im&shy;press.js - website</a></h1>
<p class="white half-width">A website for a JavaScript presentation framework I contribute code to</p> <p class="white half-width">A website for a JavaScript presentation framework I contribute code to</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-5"> <div class="step reveal" id="step-5">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">im&shy;press.js - docs</h1> <h1 class="gradient biggest small-margin"><a href="https://impress-testing.janishutz.com/docs" class="link-invisible" target="_blank">im&shy;press.js - docs</a></h1>
<p class="white half-width">The documentation page for impress.js, a JavaScript presentation framework</p> <p class="white half-width">The documentation page for impress.js, a JavaScript presentation framework</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-6"> <div class="step reveal" id="step-6">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Boo&shy;king</h1> <h1 class="gradient biggest small-margin"><a href="https://testing.janishutz.com" class="link-invisible" target="_blank">Boo&shy;king</a></h1>
<p class="white half-width">A fully featured booking system for Language School Hossegor</p> <p class="white half-width">A fully featured booking system for Language School Hossegor</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-7"> <div class="step reveal" id="step-7">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Ja&shy;pan</h1> <h1 class="gradient biggest small-margin"><a href="https://historyproject.janishutz.com" class="link-invisible" target="_blank">Ja&shy;pan</a></h1>
<p class="white half-width">A small research project for history class at school</p> <p class="white half-width">A small research project for history class at school</p>
</div> </div>
</div> </div>

19
newVersion/index.html
View File

@@ -23,10 +23,12 @@
<div class="scroll-indicator" id="scroll-hint"> <div class="scroll-indicator" id="scroll-hint">
<div class="scroll-wrapper"> <div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span> <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div> </div>
</div> </div>
</div>
<div class="progress" id="progress"> <div class="progress" id="progress">
<div class="progress-wrapper"> <div class="progress-wrapper">
@@ -50,44 +52,45 @@
<div class="step" id="step-1"> <div class="step" id="step-1">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple huge small-margin">Web&shy;sites</h1> <h1 class="gradient huge small-margin">Web&shy;sites</h1>
<h3 class="gradient-purple bigger">Get your new online presence</h3> <h3 class="gradient bigger">Get your new online presence</h3>
<p class="very-small half-width">This website is designed to be as fancy as possible. Yours can be more like a conventional website, if you wish.</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-2"> <div class="step reveal" id="step-2">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1> <h1 class="gradient biggest small-margin">Beau&shy;ti&shy;ful</h1>
<p class="white half-width">Get a website of any style you want</p> <p class="white half-width">Get a website of any style you want</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-3"> <div class="step reveal" id="step-3">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Cus&shy;tom</h1> <h1 class="gradient biggest small-margin">Cus&shy;tom</h1>
<p class="white half-width">Built with the technologies used by frameworks, but without the downsides that come with them</p> <p class="white half-width">Built with the technologies used by frameworks, but without the downsides that come with them</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-4"> <div class="step reveal" id="step-4">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Static</h1> <h1 class="gradient biggest small-margin">Static</h1>
<p class="white half-width">Websites that display your content in a stylish, beautiful manner, like this page</p> <p class="white half-width">Websites that display your content in a stylish, beautiful manner, like this page</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-5"> <div class="step reveal" id="step-5">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Dynamic</h1> <h1 class="gradient biggest small-margin">Dynamic</h1>
<p class="white half-width">Websites that include blogs, contact forms, registration forms and many more dynamic features, like the order page</p> <p class="white half-width">Websites that include blogs, contact forms, registration forms and many more dynamic features, like the order page</p>
</div> </div>
</div> </div>
<div class="step reveal" id="step-6"> <div class="step reveal" id="step-6">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple huge small-margin">In&shy;te&shy;res&shy;ted?</h1> <h1 class="gradient huge small-margin">In&shy;te&shy;res&shy;ted?</h1>
<h3 class="gradient-purple bigger">contact me for an offer</h3> <h3 class="gradient bigger"><a href="/order" class="link-invisible">contact me for an offer</a></h3>
</div> </div>
</div> </div>

62
newVersion/info/index.html
View File

@@ -8,7 +8,7 @@
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/homeStyle.css"> <link rel="stylesheet" href="/css/infoStyle.css">
<link rel="stylesheet" href="/css/fancyStyle.css"> <link rel="stylesheet" href="/css/fancyStyle.css">
<meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="X-UA-Compatible" content="IE=8">
@@ -16,35 +16,85 @@
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order :: Development - janishutz.com</title> <title>Details :: Development - janishutz.com</title>
</head> </head>
<body> <body>
<div id="nav"></div> <div id="nav"></div>
<div class="scroll-indicator" id="scroll-hint"> <div class="scroll-indicator" id="scroll-hint">
<div class="scroll-wrapper"> <div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span> <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div> </div>
</div> </div>
</div>
<div class="progress" id="progress"> <div class="progress" id="progress">
<div class="progress-wrapper"> <div class="progress-wrapper">
<span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span> <span class="material-symbols-outlined progress-item" id="step1">radio_button_checked</span>
<span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span> <span class="material-symbols-outlined progress-item" id="step2">radio_button_unchecked</span>
<span class="material-symbols-outlined progress-item" id="step3">radio_button_unchecked</span>
<span class="material-symbols-outlined progress-item" id="step4">radio_button_unchecked</span>
<span class="material-symbols-outlined progress-item" id="step5">radio_button_unchecked</span>
<span class="material-symbols-outlined progress-item" id="step6">radio_button_unchecked</span>
<span class="material-symbols-outlined progress-item" id="step7">radio_button_unchecked</span>
<span class="material-symbols-outlined progress-item" id="step8">radio_button_unchecked</span>
</div> </div>
</div> </div>
<div class="step" id="step-1"> <div class="step" id="step-1">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple huge small-margin">Order</h1> <h1 class="gradient huge small-margin">Details</h1>
<h3 class="gradient-purple bigger">Ready for your new website?</h3> <h3 class="gradient bigger">on how this works</h3>
</div> </div>
</div> </div>
<div class="step reveal" id="step-2"> <div class="step reveal" id="step-2">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1> <h1 class="gradient biggest small-margin">Offe&shy;ring</h1>
<p class="white">Get a website of any style you want</p> <p class="white half-width">You can get anything from a simple static website to something much more complex, like a webpage that has a blog and contact forms.</p>
</div>
</div>
<div class="step reveal" id="step-3">
<div class="step-content">
<h1 class="gradient biggest small-margin">Styles</h1>
<p class="white half-width">Whilst this website is using lots of special effects, I can create whatever kind of website you like. See my <a href="/examples" class="white">example websites</a></p>
</div>
</div>
<div class="step reveal" id="step-4">
<div class="step-content">
<h1 class="gradient biggest small-margin">Perfor&shy;mance</h1>
<p class="white half-width">Websites built from scratch usually perform better than ones created with frameworks - in both loading time and search</p>
</div>
</div>
<div class="step reveal" id="step-5">
<div class="step-content">
<h1 class="gradient biggest small-margin">Ho&shy;sting</h1>
<p class="white half-width">I can set up your new website directly with a hosting provider, if you wish so.</p>
</div>
</div>
<div class="step reveal" id="step-6">
<div class="step-content">
<h1 class="gradient biggest small-margin">SEO</h1>
<p class="white half-width">You can choose how SEO should be handled: either by an SEO expert or by me</p>
</div>
</div>
<div class="step reveal" id="step-7">
<div class="step-content">
<h1 class="gradient biggest small-margin">Pri&shy;cing</h1>
<p class="white half-width">Prices are calculated on a per-hour basis. You will receive an estimate in costs before I start developing anything - for free.</p>
</div>
</div>
<div class="step reveal" id="step-8">
<div class="step-content">
<h1 class="gradient biggest small-margin">Pri&shy;cing</h1>
<p class="white half-width small-size">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</p>
</div> </div>
</div> </div>

21
newVersion/js/scrolling.js
View File

@@ -59,7 +59,16 @@ $( document ).ready( function () {
} }
$( '.progress-item' ).click( 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++ ) { for ( let i = 0; i < future + 1; i++ ) {
$( `#step-${i + 1}` ).addClass( 'active' ); $( `#step-${i + 1}` ).addClass( 'active' );
} }
@@ -67,8 +76,14 @@ $( document ).ready( function () {
for ( let i = future + 1; i < revealables.length + 1; i++ ) { for ( let i = future + 1; i < revealables.length + 1; i++ ) {
$( `#step-${i + 1}` ).removeClass( 'active' ); $( `#step-${i + 1}` ).removeClass( 'active' );
} }
clearTimeout( timeout );
$( '#scroll-hint' ).fadeOut( 300 );
if ( future < revealables.length ) {
timeout = setTimeout( showScrollHint, 7000 );
}
currentlyShowing = future; currentlyShowing = future;
trackProgress(); trackProgress();
window.scrollTo( { top: ( parseInt( $( this ).attr( 'id' ).substring( 4 ) ) - 1 ) * heights, behavior: 'instant' } ); window.scrollTo( { top: id * heights, behavior: 'instant' } );
} ); }
} ); } );

13
newVersion/order/index.html
View File

@@ -8,7 +8,7 @@
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/homeStyle.css"> <link rel="stylesheet" href="/css/orderStyle.css">
<link rel="stylesheet" href="/css/fancyStyle.css"> <link rel="stylesheet" href="/css/fancyStyle.css">
<meta http-equiv="X-UA-Compatible" content="IE=8"> <meta http-equiv="X-UA-Compatible" content="IE=8">
@@ -22,10 +22,12 @@
<div id="nav"></div> <div id="nav"></div>
<div class="scroll-indicator" id="scroll-hint"> <div class="scroll-indicator" id="scroll-hint">
<div class="scroll-wrapper"> <div class="scroll-wrapper">
<div class="scroll-container">
Scroll to discover more Scroll to discover more
<span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span> <span class="material-symbols-outlined scroll-symbol">keyboard_double_arrow_down</span>
</div> </div>
</div> </div>
</div>
<div class="progress" id="progress"> <div class="progress" id="progress">
<div class="progress-wrapper"> <div class="progress-wrapper">
@@ -36,15 +38,15 @@
<div class="step" id="step-1"> <div class="step" id="step-1">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple huge small-margin">Order</h1> <h1 class="gradient huge small-margin">Order</h1>
<h3 class="gradient-purple bigger">Ready for your new website?</h3> <h3 class="gradient bigger">Ready for your new website?</h3>
</div> </div>
</div> </div>
<div class="step reveal" id="step-2"> <div class="step reveal" id="step-2">
<div class="step-content"> <div class="step-content">
<h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1> <h1 class="gradient biggest small-margin">Order</h1>
<p class="white">Get a website of any style you want</p> <div id="contact"></div>
</div> </div>
</div> </div>
@@ -53,6 +55,7 @@
<script> <script>
$( '#nav' ).load( '/nav.html' ); $( '#nav' ).load( '/nav.html' );
$( '#contact' ).load( '/contactForm.html' );
</script> </script>
</body> </body>
</html> </html>