RustyStriker/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

better colors and better looks

Browse source
This commit is contained in:
Aviv "RustyStriker" Romem 2022-04-16 17:40:41 +03:00
parent 26d7ec006c
commit d00b65bd1e
4 changed files with 130 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
another_page.html
View file

@ -6,56 +6,60 @@
<link rel="stylesheet" type="text/css" href="default_style.css" media="all"> <link rel="stylesheet" type="text/css" href="default_style.css" media="all">
</head> </head>
<body onscroll="onBodyScroll()"> <body onscroll="onBodyScroll()">
Oh good, the last page got really crowded,
ok, back to the nonsense!
<h1>
Links are stupid
</h1>
<h3>
"hErE's WhY"
</h3>
<p> <p>
So, if you want a hyper link in your site, Oh good, the last page got really crowded,
you need to use the &lt;a&gt; tag, but you have a &lt;link&gt; ok, back to the nonsense!
tag, which links to another file(to import it, which indeed is useful),
but like, it could have a more "correct" name, and if you want to get a hyper link
you need to use the &lt;a&gt; tag.
<br>
And, I'm not saying you need to remove/replace the link, but like,
instead of &lt;a&gt; do something like &lt;hyper&gt;
or &lt;hyperlink&gt; or even &lt;hlink&gt;
(the last one might be confusing since it looks a lot like link,
but it is still better than fucking &lt;a&gt;)
</p> </p>
<div style="width:60%; background-color: rgb(112, 26, 26); color:rgb(133, 255, 255); margin:auto;"> <div style="width: 98%;">
<h1>
Links are stupid
</h1>
<h3>
"hErE's WhY"
</h3>
<p> <p>
Boy this page looks blend only with text, So, if you want a hyper link in your site,
and KDE keeps crashing on my laptop... you need to use the &lt;a&gt; tag, but you have a &lt;link&gt;
tag, which links to another file(to import it, which indeed is useful),
but like, it could have a more "correct" name, and if you want to get a hyper link
you need to use the &lt;a&gt; tag.
<br> <br>
(in case you were wondering this div is "width:60%; margin:auto" And, I'm not saying you need to remove/replace the link, but like,
with some color values) instead of &lt;a&gt; do something like &lt;hyper&gt;
or &lt;hyperlink&gt; or even &lt;hlink&gt;
(the last one might be confusing since it looks a lot like link,
but it is still better than fucking &lt;a&gt;)
</p>
<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...
<br>
(in case you were wondering this div is "width:60%; margin:auto"
with some color values)
</p>
</div>
<p>
Any cool stuff I can try to make? Maybe an animated image
which flies in when you scroll down enough?
<br>
Sounds kinda stupid, and I hate it when websites makes scrolling
"digital"(by digital I mean it has discrete states, which I know everything
in computers are in discrete states since you cannot have the infinity in
a computer because reasons, but like, you get the point, its like having
a couple of stupid sites stitched on top of each other, which just sucks)
<br>
I will try it tho
</p> </p>
</div> </div>
<p> <div style="margin:auto;height: 360px;">
Any cool stuff I can try to make? Maybe an animated image
which flies in when you scroll down enough?
<br>
Sounds kinda stupid, and I hate it when websites makes scrolling
"digital"(by digital I mean it has discrete states, which I know everything
in computers are in discrete states since you cannot have the infinity in
a computer because reasons, but like, you get the point, its like having
a couple of stupid sites stitched on top of each other, which just sucks)
<br>
I will try it tho
</p>
<div style="margin:auto;height: 350px;">
<img src="molly.jpg" width="350px" height="350px" style="float:left;"> <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;"> <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> <p>
Please enjoy Molly's picture as I figure how to get the scroll data... Please enjoy Molly's picture as I figure how to get the scroll data...
</p> </p>
<div id="cat_par2" style="visibility: hidden;"> <div class="borderless" id="cat_par2" style="visibility: hidden;">
<p> <p>
Taadaaa! Taadaaa!
<br> <br>
@ -64,13 +68,13 @@
But things to note here, both cats are using `style="float:right;"` But things to note here, both cats are using `style="float:right;"`
(with the sliding one also being invisible until the animation appears) (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) and the animation used is with the `animate` method(and a lot of trial and error)
<br><br>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
</p> </p>
<p>
Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
</p>
</div> </div>
</div> </div>
</div> </div>
<br>
<div> <div>
<p> <p>
Anyway, some questions arise while im doing this, like Anyway, some questions arise while im doing this, like
@ -107,7 +111,7 @@
If i dont "trust" CSS i can just disable it. If i dont "trust" CSS i can just disable it.
<br> <br>
But with JavaScript, it is a fully blown scripting language(a shitty one but still), 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> <br>
Also JavaScript is a script running locally, so if the browser did a bad job sandboxing it from the system, 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 some bad things may happen
@ -119,7 +123,7 @@
var needToAnimateImage = true; var needToAnimateImage = true;
function onBodyScroll() { function onBodyScroll() {
let scrollPercent = document.body.scrollTop / document.body.scrollTopMax; let scrollPercent = document.body.scrollTop / document.body.scrollTopMax;
if (needToAnimateImage && scrollPercent > 0.99) { if (needToAnimateImage && scrollPercent > 0.50) {
needToAnimateImage = false; needToAnimateImage = false;
let img = document.getElementById("animatedImage"); let img = document.getElementById("animatedImage");
img.style.visibility = "inherit"; img.style.visibility = "inherit";

44
default_style.css
View file

@ -1,5 +1,45 @@
body { body {
background-color: #01011f; background-color: rgb(5, 0, 11);
color: rgb(255, 150, 150); color: rgb(255, 150, 150);
text-align: center; 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%;
}

62
index.html
View file

@ -13,31 +13,33 @@
<h1 style="color: crimson;"> <h1 style="color: crimson;">
Rusty's Awesome Test Site Rusty's Awesome Test Site
</h1> </h1>
<p> <div>
Welcome to my awesome test site, <p>
I will Attempt to learn html using it, Welcome to my awesome test site,
and you can view my progress here(i guess)... I will Attempt to learn html using it,
</p> and you can view my progress here(i guess)...
<p> </p>
Why am i doing this for myself? <p>
Because it is about time I learn to make websites Why am i doing this for myself?
(and i want to really know how bad js is and if ts is actually any good) Because it is about time I learn to make websites
</p> (and i want to really know how bad js is and if ts is actually any good)
<p style="background-color: whitesmoke; color: black; text-align: left;"> </p>
Imma do a lot of dumb shit here, like not centering this text. <p style="background-color: whitesmoke; color: black; text-align: left;">
<br> Imma do a lot of dumb shit here, like not centering this text.
And also giving it different colors <br>
</p> And also giving it different colors
<p> </p>
But enough with the games! <p>
<h1> But enough with the games!
I PRESENT TO YOU: &#129345;&#129345;&#129345; <h1>
</h1> I PRESENT TO YOU: &#129345;&#129345;&#129345;
</p> </h1>
<p> </p>
A button <p>
</p> A button
<button onclick="onCoolButtonClick()">This is a cool button, click me</button> </p>
<button onclick="onCoolButtonClick()">This is a cool button, click me</button>
</div>
<div id="appearing-div" style="visibility: hidden;"> <div id="appearing-div" style="visibility: hidden;">
<p> <p>
As you can see, clicking that button changes the background. As you can see, clicking that button changes the background.
@ -66,8 +68,8 @@
<br> <br>
Only one way to find out! Only one way to find out!
</p> </p>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
</div> </div>
<input type="range" min="0" max="100" value="100" id="alphaSlider" oninput="onSliderInput()">
<div id="animated"> <div id="animated">
<p> <p>
And now, I will attempt to animate this div And now, I will attempt to animate this div
@ -82,9 +84,8 @@
(I really hope it works well) (I really hope it works well)
</p> </p>
<button onclick="animateDivAgain()">I hope this is better</button> <button onclick="animateDivAgain()">I hope this is better</button>
</div> <p>
<p> This is indeed MUCH MUCH better. BUT, it is experimental
This is indeed MUCH MUCH better. BUT, it is experimental
and not supported on everything or something and not supported on everything or something
(like Safari, and also IE but that is deprecated). (like Safari, and also IE but that is deprecated).
<br> <br>
@ -99,7 +100,8 @@
<br> <br>
<a href="another_page.html">I am really not sure how it works</a> <a href="another_page.html">I am really not sure how it works</a>
</p> </p>
</div>
</body> </body>
<script> <script>
function onCoolButtonClick() { function onCoolButtonClick() {

13
template.html
View file

@ -1,18 +1,21 @@
<!DOCTYPE html>
<html> <html>
<head> <head>
<title>__PAGE TITLE__</title> <title>__PAGE TITLE__</title>
<!--Style stuff --> <!--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> </head>
<body> <body>
<!--header>__PAGE HEADER__</header--> <!--header>__PAGE HEADER__</header-->
<h1 style="color:crimson;"> <h1>
This is the actual page title! This is the actual page title!
</h1> </h1>
<p> <div>
And some paragraphs here <p>
</p> And some paragraphs here
</p>
</div>
</body> </body>
</html> </html>