lets go back
This commit is contained in:
parent
d0dce86e57
commit
e03f3b5e0c
@ -3,18 +3,4 @@
|
|||||||
<h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
|
<h1 class="user-index-h1">Hello, <span class="outlined-text"><template name="username"></template></span>.</h1>
|
||||||
<h2 class="user-index-h2">What would you like to watch?</h2>
|
<h2 class="user-index-h2">What would you like to watch?</h2>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<script>
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
const headerText = document.getElementById("headerText");
|
|
||||||
|
|
||||||
window.addEventListener("scroll", function () {
|
|
||||||
const scrollPosition = window.scrollY;
|
|
||||||
const opacity = 1 - scrollPosition / 500;
|
|
||||||
|
|
||||||
headerText.style.opacity = opacity.toFixed(2);
|
|
||||||
headerText.style.transform = `translateX(${100 - opacity * 100}%)`;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
@ -1,16 +1,12 @@
|
|||||||
/* Common styles for all pages */
|
/* Common styles for all pages */
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: #161c21;
|
background-color: #161c21;
|
||||||
color: aliceblue;
|
color: aliceblue;
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -30,26 +26,24 @@ a {
|
|||||||
border-radius: 50px;
|
border-radius: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.user-index-header-text {
|
.user-index-header-text {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
opacity: 0;
|
|
||||||
transform: translateX(100%);
|
|
||||||
transition: opacity 0.8s ease, transform 1s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-index-h1 {
|
.user-index-h1 {
|
||||||
font-size: 4rem;
|
font-size: 4rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-index-h2 {
|
.user-index-h2 {
|
||||||
font-size: 3.3rem;
|
font-size: 3.3rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.outlined-text {
|
.outlined-text {
|
||||||
-webkit-text-fill-color: transparent;
|
-webkit-text-fill-color: transparent;
|
||||||
-webkit-text-stroke: 2.2px #8c00ff;
|
-webkit-text-stroke: 2.2px #8c00ff;
|
||||||
|
Loading…
Reference in New Issue
Block a user