better colors and better looks
This commit is contained in:
parent
26d7ec006c
commit
d00b65bd1e
4 changed files with 130 additions and 81 deletions
|
|
@ -6,8 +6,11 @@
|
|||
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
|
||||
</head>
|
||||
<body onscroll="onBodyScroll()">
|
||||
<p>
|
||||
Oh good, the last page got really crowded,
|
||||
ok, back to the nonsense!
|
||||
</p>
|
||||
<div style="width: 98%;">
|
||||
<h1>
|
||||
Links are stupid
|
||||
</h1>
|
||||
|
|
@ -27,7 +30,7 @@
|
|||
(the last one might be confusing since it looks a lot like link,
|
||||
but it is still better than fucking <a>)
|
||||
</p>
|
||||
<div style="width:60%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
|
||||
<div class="borderless" style="width:80%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;">
|
||||
<p>
|
||||
Boy this page looks blend only with text,
|
||||
and KDE keeps crashing on my laptop...
|
||||
|
|
@ -48,14 +51,15 @@
|
|||
<br>
|
||||
I will try it tho
|
||||
</p>
|
||||
<div style="margin:auto;height: 350px;">
|
||||
</div>
|
||||
<div style="margin:auto;height: 360px;">
|
||||
<img src="molly.jpg" width="350px" height="350px" style="float:left;">
|
||||
<img id="animatedImage" src="louise.jpg" width="350px" height="350px" style="float:right; visibility: hidden;">
|
||||
<div style="width: 50%; margin:auto;">
|
||||
<div class="borderless" style="width: 40%; margin:auto; height: 300px;">
|
||||
<p>
|
||||
Please enjoy Molly's picture as I figure how to get the scroll data...
|
||||
</p>
|
||||
<div id="cat_par2" style="visibility: hidden;">
|
||||
<div class="borderless" id="cat_par2" style="visibility: hidden;">
|
||||
<p>
|
||||
Taadaaa!
|
||||
<br>
|
||||
|
|
@ -64,13 +68,13 @@
|
|||
But things to note here, both cats are using `style="float:right;"`
|
||||
(with the sliding one also being invisible until the animation appears)
|
||||
and the animation used is with the `animate` method(and a lot of trial and error)
|
||||
</p>
|
||||
<p>
|
||||
<br><br>
|
||||
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<p>
|
||||
Anyway, some questions arise while im doing this, like
|
||||
|
|
@ -107,7 +111,7 @@
|
|||
If i dont "trust" CSS i can just disable it.
|
||||
<br>
|
||||
But with JavaScript, it is a fully blown scripting language(a shitty one but still),
|
||||
people made countless things with js, from fully featured web games, to a bloody backend system(why?).
|
||||
people made countless things with js, from fully featured web games, to a bloody server backend(why?).
|
||||
<br>
|
||||
Also JavaScript is a script running locally, so if the browser did a bad job sandboxing it from the system,
|
||||
some bad things may happen
|
||||
|
|
@ -119,7 +123,7 @@
|
|||
var needToAnimateImage = true;
|
||||
function onBodyScroll() {
|
||||
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
|
||||
if (needToAnimateImage && scrollPercent > 0.99) {
|
||||
if (needToAnimateImage && scrollPercent > 0.50) {
|
||||
needToAnimateImage = false;
|
||||
let img = document.getElementById("animatedImage");
|
||||
img.style.visibility = "inherit";
|
||||
|
|
|
|||
|
|
@ -1,5 +1,45 @@
|
|||
body {
|
||||
background-color: #01011f;
|
||||
background-color: rgb(5, 0, 11);
|
||||
color: rgb(255, 150, 150);
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
h1 {
|
||||
color : rgb(255, 40, 60);
|
||||
}
|
||||
div {
|
||||
width: 90%;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
border-color: rgb(60, 0, 90);
|
||||
border-width: thick;
|
||||
border-style: double;
|
||||
background-color: rgb(21,0,31);
|
||||
padding: 5px;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a {
|
||||
color:rgb(150, 150, 255);
|
||||
}
|
||||
|
||||
.borderless {
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
text-align: center;
|
||||
clear: left;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
text-align: center;
|
||||
clear: right;
|
||||
width: 25%;
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@
|
|||
<h1 style="color: crimson;">
|
||||
Rusty's Awesome Test Site
|
||||
</h1>
|
||||
<div>
|
||||
<p>
|
||||
Welcome to my awesome test site,
|
||||
I will Attempt to learn html using it,
|
||||
|
|
@ -38,6 +39,7 @@
|
|||
A button
|
||||
</p>
|
||||
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
|
||||
</div>
|
||||
<div id="appearing-div" style="visibility: hidden;">
|
||||
<p>
|
||||
As you can see, clicking that button changes the background.
|
||||
|
|
@ -66,8 +68,8 @@
|
|||
<br>
|
||||
Only one way to find out!
|
||||
</p>
|
||||
</div>
|
||||
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
|
||||
</div>
|
||||
<div id="animated">
|
||||
<p>
|
||||
And now, I will attempt to animate this div
|
||||
|
|
@ -82,7 +84,6 @@
|
|||
(I really hope it works well)
|
||||
</p>
|
||||
<button onclick="animateDivAgain()">I hope this is better</button>
|
||||
</div>
|
||||
<p>
|
||||
This is indeed MUCH MUCH better. BUT, it is experimental
|
||||
and not supported on everything or something
|
||||
|
|
@ -99,6 +100,7 @@
|
|||
<br>
|
||||
<a href="another_page.html">I am really not sure how it works</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>__PAGE TITLE__</title>
|
||||
|
||||
<!--Style stuff -->
|
||||
<link ref='stylesheet' type='text/css' href='default_style.css' media='all'>
|
||||
<link rel="stylesheet" type="text/css" href="default_style.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
<!--header>__PAGE HEADER__</header-->
|
||||
<h1 style="color:crimson;">
|
||||
<h1>
|
||||
This is the actual page title!
|
||||
</h1>
|
||||
<div>
|
||||
<p>
|
||||
And some paragraphs here
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue