almost finished website

This commit is contained in:
2023-05-19 21:59:00 +02:00
parent 5f69d25662
commit 8e1d803d8d
13 changed files with 351 additions and 40 deletions

View File

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

View File

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

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

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

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

View File

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