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

progress on new website

Browse Source
This commit is contained in:
Janis Hutz
2023-05-19 07:53:09 +02:00
parent f659c53a64
commit d856df8e1b
7 changed files with 116 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
newVersion/css/homeStyle.css
View File

@@ -3,7 +3,7 @@
*/ */
body { body {
height: 300%; height: 400%;
} }
.step { .step {
@@ -19,6 +19,11 @@ body {
padding: 0; padding: 0;
} }
.step-content {
width: 90%;
margin-left: 2.5%;
}
.reveal { .reveal {
position: fixed; position: fixed;
transition: 1.5s all ease; transition: 1.5s all ease;

7
newVersion/css/navstyle.css
View File

@@ -15,6 +15,7 @@
height: 100%; height: 100%;
background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.822), rgba(22, 17, 65, 0.822) 5% ); background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.822), rgba(22, 17, 65, 0.822) 5% );
background-size: 150vh 150vh; background-size: 150vh 150vh;
background-position: 0px;
position: fixed; position: fixed;
display: block; display: block;
z-index: 10; z-index: 10;
@@ -123,7 +124,7 @@
.navitem { .navitem {
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
color: rgb(107, 107, 107);; color: rgb(29, 69, 105);
font-size: 1.4rem; font-size: 1.4rem;
width: fit-content; width: fit-content;
padding: 2%; padding: 2%;
@@ -137,13 +138,13 @@
.inactive:hover { .inactive:hover {
font-size: 1.6rem; font-size: 1.6rem;
color: rgb(107, 107, 107); color: rgb(29, 69, 105);
transition: 0.4s; transition: 0.4s;
} }
/* ~ --> all next & + --> next */ /* ~ --> all next & + --> next */
.shaded { .shaded {
color: rgb(107, 107, 107); color: rgb(29, 69, 105);
transition: 0.3s; transition: 0.3s;
} }

25
newVersion/css/style.css
View File

@@ -11,6 +11,15 @@ body {
font-family: sans-serif; font-family: sans-serif;
} }
::selection {
background-color: rgb(41, 37, 95);
color: white;
-webkit-background-clip: none;
background-clip: none;
-webkit-text-fill-color: currentColor;
}
/* /*
GRADIENTS GRADIENTS
*/ */
@@ -24,6 +33,14 @@ body {
} }
/*
Colours
*/
.white {
color: white;
}
/* /*
SIZES SIZES
*/ */
@@ -32,6 +49,10 @@ body {
font-size: 500%; font-size: 500%;
} }
.biggest {
font-size: 325%;
}
.bigger { .bigger {
font-size: 200%; font-size: 200%;
} }
@@ -43,3 +64,7 @@ body {
.no-margin { .no-margin {
margin: 0; margin: 0;
} }
.half-width {
width: 50%;
}

37
newVersion/index.html
View File

@@ -19,22 +19,49 @@
<body> <body>
<div id="nav"></div> <div id="nav"></div>
<div class="step" id="step-1"> <div class="step" id="step-1">
<div class="step-content">
<h1 class="gradient-purple huge small-margin">Web&shy;sites</h1> <h1 class="gradient-purple huge small-margin">Web&shy;sites</h1>
<h3 class="gradient-purple bigger">Get your new online presence</h3> <h3 class="gradient-purple bigger">Get your new online presence</h3>
</div> </div>
<div class="step reveal">
<h1 class="gradient-purple huge small-margin">Beau&shy;ti&shy;ful</h1>
<h3 class="gradient-purple bigger">yet still not expensive</h3>
</div> </div>
<div class="step reveal"> <div class="step reveal">
<div class="step-content">
<h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
<p class="white half-width">Get a website of any style you want</p>
</div>
</div>
<div class="step reveal">
<div class="step-content">
<h1 class="gradient-purple 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>
</div>
</div>
<div class="step reveal">
<div class="step-content">
<h1 class="gradient-purple biggest small-margin">Static</h1>
<p class="white half-width">Websites that display your content in a stylish, beautiful manner, like this page</p>
</div>
</div>
<div class="step reveal">
<div class="step-content">
<h1 class="gradient-purple 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>
</div>
</div>
<div class="step reveal">
<div class="step-content">
<h1 class="gradient-purple huge small-margin">In&shy;te&shy;res&shy;ted?</h1> <h1 class="gradient-purple 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-purple bigger">contact me for an offer</h3>
</div> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script defer src="js/scrolling.js"></script> <script defer src="/js/scrolling.js"></script>
<script> <script>
$( '#nav' ).load( '/nav.html' ); $( '#nav' ).load( '/nav.html' );

9
newVersion/js/scrolling.js
View File

@@ -1,11 +1,11 @@
$( document ).ready( function () { $( document ).ready( function () {
document.addEventListener( 'scroll', scrolled ); document.addEventListener( 'scroll', scrolled );
document.addEventListener( 'resize', scrolled );
let revealables = document.querySelectorAll( '.reveal' ); let revealables = document.querySelectorAll( '.reveal' );
let heights = $( document ).height() / ( revealables.length + 1 );
let currentlyShowing = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) ); let currentlyShowing = Math.round( window.scrollY / heights );
for ( let i = 0; i < currentlyShowing; i++ ) { for ( let i = 0; i < currentlyShowing; i++ ) {
if ( i < parseInt( revealables.length ) ) { if ( i < parseInt( revealables.length ) ) {
@@ -14,7 +14,8 @@ $( document ).ready( function () {
} }
function scrolled() { function scrolled() {
let regPos = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) ); heights = $( document ).height() / ( revealables.length + 1 );
let regPos = Math.round( window.scrollY / heights );
if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) { if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) {
revealables[ regPos ].classList.remove( 'active' ); revealables[ regPos ].classList.remove( 'active' );
} else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) { } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) {

8
newVersion/nav.html
View File

@@ -52,13 +52,13 @@
$( '.inactive' ).mouseenter( function () { $( '.inactive' ).mouseenter( function () {
let obj = $( this ).attr( 'id' ); let obj = $( this ).attr( 'id' );
if ( obj === 'home' ) { if ( obj === 'home' ) {
$( '#nav-menu' ).css( 'background-position', `${0 - offset}px` ); $( '#nav-menu' ).css( 'background-position', `${0 + offset}px` );
} else if ( obj == 'order' ) { } else if ( obj == 'order' ) {
$( '#nav-menu' ).css( 'background-position', `${200 - offset}px` ); $( '#nav-menu' ).css( 'background-position', `${200 + offset}px` );
} else if ( obj == 'contact' ) { } else if ( obj == 'contact' ) {
$( '#nav-menu' ).css( 'background-position', `${400 - offset}px` ); $( '#nav-menu' ).css( 'background-position', `${400 + offset}px` );
} else if ( obj == 'examples' ) { } else if ( obj == 'examples' ) {
$( '#nav-menu' ).css( 'background-position', `${600 - offset}px` ); $( '#nav-menu' ).css( 'background-position', `${600 + offset}px` );
} }
} ) } )
$( '.inactive' ).mouseleave ( function () { $( '.inactive' ).mouseleave ( function () {

38
newVersion/order/index.html Normal file
View File

@@ -0,0 +1,38 @@
<!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="/css/style.css">
<link rel="stylesheet" href="/css/homeStyle.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>Home :: Development - janishutz.com</title>
</head>
<body>
<div id="nav"></div>
<div class="step" id="step-1">
<h1 class="gradient-purple huge small-margin">Order</h1>
<h3 class="gradient-purple bigger">Ready for your new website?</h3>
</div>
<div class="step reveal">
<h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
<p class="white">Get a website of any style you want</p>
</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' );
</script>
</body>
</html>