+ Links are stupid +
++ "hErE's WhY" +
- Boy this page looks blend only with text,
- and KDE keeps crashing on my laptop...
+ So, if you want a hyper link in your site,
+ you need to use the <a> tag, but you have a <link>
+ 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 <a> tag.
- (in case you were wondering this div is "width:60%; margin:auto"
- with some color values)
+ And, I'm not saying you need to remove/replace the link, but like,
+ instead of <a> do something like <hyper>
+ or <hyperlink> or even <hlink>
+ (the last one might be confusing since it looks a lot like link,
+ but it is still better than fucking <a>)
+
+ Boy this page looks blend only with text,
+ and KDE keeps crashing on my laptop...
+
+ (in case you were wondering this div is "width:60%; margin:auto"
+ with some color values)
+
+ Any cool stuff I can try to make? Maybe an animated image
+ which flies in when you scroll down enough?
+
+ 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)
+
+ I will try it tho
- Any cool stuff I can try to make? Maybe an animated image
- which flies in when you scroll down enough?
-
- 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)
-
- I will try it tho
-
- Please enjoy Molly's picture as I figure how to get the scroll data...
-
Taadaaa!
@@ -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)
+
+ Also, this is Louise on the right, and she purrs as soon as someone gets close to her.
- Also, this is Louise on the right, and she purrs as soon as someone gets close to her. -
Anyway, some questions arise while im doing this, like
@@ -107,7 +111,7 @@
If i dont "trust" CSS i can just disable it.
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?).
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";
diff --git a/default_style.css b/default_style.css
index 0307074..3be28c6 100644
--- a/default_style.css
+++ b/default_style.css
@@ -1,5 +1,45 @@
body {
- background-color: #01011f;
+ background-color: rgb(5, 0, 11);
color: rgb(255, 150, 150);
text-align: center;
-}
\ No newline at end of file
+ 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%;
+}
diff --git a/index.html b/index.html
index 41593cf..2ee3755 100644
--- a/index.html
+++ b/index.html
@@ -13,31 +13,33 @@
Rusty's Awesome Test Site
-- Welcome to my awesome test site, - I will Attempt to learn html using it, - and you can view my progress here(i guess)... -
-- Why am i doing this for myself? - Because it is about time I learn to make websites - (and i want to really know how bad js is and if ts is actually any good) -
-
- Imma do a lot of dumb shit here, like not centering this text.
-
- And also giving it different colors
-
- But enough with the games! -
- I PRESENT TO YOU: 🥁🥁🥁 -
- -- A button -
- ++ Welcome to my awesome test site, + I will Attempt to learn html using it, + and you can view my progress here(i guess)... +
++ Why am i doing this for myself? + Because it is about time I learn to make websites + (and i want to really know how bad js is and if ts is actually any good) +
+
+ Imma do a lot of dumb shit here, like not centering this text.
+
+ And also giving it different colors
+
+ But enough with the games! +
+ I PRESENT TO YOU: 🥁🥁🥁 +
+ ++ A button +
+ +
As you can see, clicking that button changes the background.
@@ -66,8 +68,8 @@
Only one way to find out!
And now, I will attempt to animate this div @@ -82,9 +84,8 @@ (I really hope it works well)
-- 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
(like Safari, and also IE but that is deprecated).
@@ -99,7 +100,8 @@
I am really not sure how it works