diff options
| -rw-r--r-- | funny.js | 75 | ||||
| -rw-r--r-- | index.html | 152 | ||||
| -rw-r--r-- | static/funny.js | 143 | ||||
| -rw-r--r-- | static/index.html | 309 | ||||
| -rw-r--r-- | static/styles.css | 611 | ||||
| -rw-r--r-- | styles.css | 304 |
6 files changed, 530 insertions, 1064 deletions
diff --git a/funny.js b/funny.js deleted file mode 100644 index 5b43dcc..0000000 --- a/funny.js +++ /dev/null @@ -1,75 +0,0 @@ -var titles = [
- "i work out",
- "funny",
- "Kara Kara Kara no Kara",
- "26047",
- "Can I Friend You On Bassbook? Lol",
- "im gay",
- "cognrjatulations !!!",
- "futanari",
- "ubuntu (ew)",
- "phantoms are annoying",
- "/give @a hugs 999999",
- "please add command support vendy",
- "mrekk",
- "women fear me",
- "fish fear me",
- "men turn their eyes away from me",
- "as i walk no beast dares makes a sound",
- "i am alone in this barren earth",
- "uptown funk you up",
- "stackoverflow my beloved",
- "*thrusts into you*",
- "also what are these for?",
- "its morbing time",
- "bungling bungus",
- "rate this base.apk Architecture splits: \nconfig.arm64_v8a.apk \nconfig.armeabi_v7a.apk \nconfig.x86_64.apk \n config.x86.apk \n DPI splits: \n config.hdpi.apk \n config.xxhdpi.apk \n Language splits: \nconfig.de.apk \n config.en.apk",
- "Now explode",
- "“message logger when”",
- "A wild ⛧artificialmusik appeared.",
- "IS THAT A MOTHERUCFKCING JOJOI REFERENCE???//?",
- "Cats are not ducks",
- "just farted",
- "ReeK - Making Zurek While Getting A Flandre Fumo Shoved Up My A-",
- "what the fuck is an lsp log",
- "'ewwo evewypony",
- "also, what the fuck is a mustard",
- "727",
- "WYFSI",
- "that time i reincarnated as a toilet in another world",
- "vim >>>>>> emacs",
- "also try out archlinux.org",
- "how to print [[this, this, and, this, all, together as a single string]]?",
- "😢",
- "None.",
- "deez nuts",
- "trolley",
-
-]
-
-document.title = titles[Math.floor(Math.random()*titles.length)];
-
-//button bs
-bool = false
-var audio
-if (new Date().getMonth() === 9){
- console.log("boo")
- audio = new Audio('boo.mp3')
-} else {
- audio = new Audio('for-maeve.mp3')
-}
-function no() {
- bool = !bool
- if(bool){
- audio.play()
- } else {
- audio.pause()
- }
- }
-
-const swapElm = document.getElementById('b');
-swapElm.addEventListener('mouseover', () => {
- const prev = swapElm.style.transform;
- if (!prev || prev === 'translateX(0px)') swapElm.style.transform = 'translateX(200%)';
- else swapElm.style.transform = 'translateX(0px)';
-});
\ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index 39085df..0000000 --- a/index.html +++ /dev/null @@ -1,152 +0,0 @@ -<!DOCTYPE html>
-<html lang="en">
- <head>
- <link rel="stylesheet" href="styles.css" />
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <meta content="best website (real)" property="og:title" />
- <meta content="echo's shitty website" property="og:description" />
- <meta content="https://exhq.github.io" property="og:url" />
- <meta
- content="https://cdn.discordapp.com/attachments/832652653292027904/967009610907144223/Untitled.png"
- property="og:image"
- />
- <script src="funny.js" defer></script>
- <meta content="#43B581" data-react-helmet="true" name="theme-color" />
- </head>
- <body>
-
- <div class="topnav">
- <a class="active" href="#home">Home</a>
- <a href="#ticd">Things i <u>cant</u> do </a>
- <a href="#contact">Contact me / About me</a>
- <a onclick="no()">do you want to bless your ears?
- <a href="https://exhq.gay/neOwOfetch">try neOwOfetch :)</a>
- </a>
- </div>
-
- <div class="downnav">
- <h3 class="imsotired">copy right something smething i forgor :skull:</h3>
- </div>
- <div id="home"></div>
- <br />
- <br />
- <h1 class="header">
- have you ever wanted a "developer"<br />
- that <span class="empty"></span> nothing other than standing around being
- useless?
- </h1>
- <img
- class="me"
- src="https://cdn.discordapp.com/attachments/917977729322872853/967004653147553802/me.png"
- alt="me"
- />
- <h2 class="mebeinguseless">a picture of me being useless</h2>
- <h1 class="data">i <u>CANNOT</u> program:</h1>
-
- <div class="languages-wrapper">
- <div>
- <img
- class="javaimg"
- src="https://cdn.discordapp.com/attachments/917977729322872853/973143267677978634/clang.png"
- alt=""
- />
- <span class="notjava">its 2022, at least use c++</span>
- </div>
- <div>
- <img
- class="javaimg"
- src="https://cdn.discordapp.com/attachments/832652653292027904/973146727689379860/clang.png"
- alt=""
- style="margin-left: 0;"
- />
- <span class="notjava">its 2022, at least use java</span>
- </div>
- <div>
- <img
- class="javaimg"
- src="https://cdn.discordapp.com/attachments/917977729322872853/967023902939283456/go.png"
- alt=""
- />
- <span class="notjava">this joke was removed due to 1984</span>
- </div>
- <div>
- <img
- class="javaimg"
- src="https://cdn.discordapp.com/attachments/917977729322872853/967023935713607751/R.png"
- alt=""
- />
- <span class="notjava">this is not centered and idk how to fix it</span>
- </div>
- <div>
- <img
- class="javaimg"
- src="https://cdn.discordapp.com/attachments/917977729322872853/967009849680486410/ruby.png"
- alt=""
- />
- <span class="notjava">who the fuck unironically uses ruby?</span>
- </div>
- <div>
- <img
- class="rustimg"
- src="https://cdn.discordapp.com/attachments/917977729322872853/967024017812897883/rust.png"
- alt=""
- style="margin-left: 0;"
- />
- <span class="notjava">:sOmEOneSAIdRUst: shut the fuck up ÅĠěŜŋżųŹ¢¶Ěá</span>
- </div>
- <div style="grid-column: span 2;">
- <img
- class="javaimg jsimg"
- src="https://cdn.discordapp.com/attachments/918571703137894421/999223367750127616/Unofficial_JavaScript_logo_2.svg.png"
- alt=""
- />
- <span class="notjava">([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(!![]+[])[+[]]])[+!+[]+[+[]]]</span>
- </div>
- </div>
-
- <div id="about"></div>
- <br />
- <h1 class="data" id="ticd">i <u>CANNOT</u> be:</h1>
- <span class="being">⋅useful</span>
- <br />
- <span class="being">⋅productive</span>
- <br />
- <span class="being">⋅fun</span>
- <br />
- <span class="being">⋅smart</span>
- <br />
- <span class="being">⋅creative</span>
- <br />
- <span class="being"
- >⋅ < Dot Operator, Unicode number: U+22C5, Unicode version: 1.1
- (1993)</span
- >
- <br />
- <br />
- <h1 class="data" id="contact">
- contact me<a class="shh" href="https://pastebin.com/uuqnLybA">:</a>
- </h1>
- <div id="b"><span
- class="runaway"
- >click here for contacts</span></div>
- <br />
- <br />
- <h1 class="data">about me:</h1>
- <p class="aboutme">bored 18 yo who makes shitty stuff</p>
- <div class="tooltip">
- (hover for exact age)
- <span class="tooltiptext">2004, 06th aug</span>
- </div>
- <p class="aboutme">
- i wuv u so so so so so so so much oxi og <3 muah <br />
- i have had multiple sexual intercourses with your mother, she's hot <br />
- i'm also a big fan of
- <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> avengers </a>
- </p>
- <br />
- <br />
- <br />
- </body>
-</html>
diff --git a/static/funny.js b/static/funny.js index eff3abb..5b43dcc 100644 --- a/static/funny.js +++ b/static/funny.js @@ -1,68 +1,75 @@ -var titles = [ - "i work out", - "funny", - "Kara Kara Kara no Kara", - "26047", - "Can I Friend You On Bassbook? Lol", - "im gay", - "cognrjatulations !!!", - "futanari", - "ubuntu (ew)", - "phantoms are annoying", - "/give @a hugs 999999", - "please add command support vendy", - "mrekk", - "women fear me", - "fish fear me", - "men turn their eyes away from me", - "as i walk no beast dares makes a sound", - "i am alone in this barren earth", - "uptown funk you up", - "stackoverflow my beloved", - "*thrusts into you*", - "also what are these for?", - "its morbing time", - "bungling bungus", - "rate this base.apk Architecture splits: \nconfig.arm64_v8a.apk \nconfig.armeabi_v7a.apk \nconfig.x86_64.apk \n config.x86.apk \n DPI splits: \n config.hdpi.apk \n config.xxhdpi.apk \n Language splits: \nconfig.de.apk \n config.en.apk", - "Now explode", - "“message logger when”", - "A wild ⛧artificialmusik appeared.", - "IS THAT A MOTHERUCFKCING JOJOI REFERENCE???//?", - "Cats are not ducks", - "just farted", - "ReeK - Making Zurek While Getting A Flandre Fumo Shoved Up My A-", - "what the fuck is an lsp log", - "'ewwo evewypony", - "also, what the fuck is a mustard", - "727", - "WYFSI", - "that time i reincarnated as a toilet in another world", - "vim >>>>>> emacs", - "also try out archlinux.org", - "how to print [[this, this, and, this, all, together as a single string]]?", - "😢", - "None.", - "deez nuts", - "trolley", - -] - -document.title = titles[Math.floor(Math.random()*titles.length)]; - -//button bs -bool = false -var audio -if (new Date().getMonth() === 9){ - console.log("boo") - audio = new Audio('boo.mp3') -} else { - audio = new Audio('for-maeve.mp3') -} -function no() { - bool = !bool - if(bool){ - audio.play() - } else { - audio.pause() - } - } +var titles = [
+ "i work out",
+ "funny",
+ "Kara Kara Kara no Kara",
+ "26047",
+ "Can I Friend You On Bassbook? Lol",
+ "im gay",
+ "cognrjatulations !!!",
+ "futanari",
+ "ubuntu (ew)",
+ "phantoms are annoying",
+ "/give @a hugs 999999",
+ "please add command support vendy",
+ "mrekk",
+ "women fear me",
+ "fish fear me",
+ "men turn their eyes away from me",
+ "as i walk no beast dares makes a sound",
+ "i am alone in this barren earth",
+ "uptown funk you up",
+ "stackoverflow my beloved",
+ "*thrusts into you*",
+ "also what are these for?",
+ "its morbing time",
+ "bungling bungus",
+ "rate this base.apk Architecture splits: \nconfig.arm64_v8a.apk \nconfig.armeabi_v7a.apk \nconfig.x86_64.apk \n config.x86.apk \n DPI splits: \n config.hdpi.apk \n config.xxhdpi.apk \n Language splits: \nconfig.de.apk \n config.en.apk",
+ "Now explode",
+ "“message logger when”",
+ "A wild ⛧artificialmusik appeared.",
+ "IS THAT A MOTHERUCFKCING JOJOI REFERENCE???//?",
+ "Cats are not ducks",
+ "just farted",
+ "ReeK - Making Zurek While Getting A Flandre Fumo Shoved Up My A-",
+ "what the fuck is an lsp log",
+ "'ewwo evewypony",
+ "also, what the fuck is a mustard",
+ "727",
+ "WYFSI",
+ "that time i reincarnated as a toilet in another world",
+ "vim >>>>>> emacs",
+ "also try out archlinux.org",
+ "how to print [[this, this, and, this, all, together as a single string]]?",
+ "😢",
+ "None.",
+ "deez nuts",
+ "trolley",
+
+]
+
+document.title = titles[Math.floor(Math.random()*titles.length)];
+
+//button bs
+bool = false
+var audio
+if (new Date().getMonth() === 9){
+ console.log("boo")
+ audio = new Audio('boo.mp3')
+} else {
+ audio = new Audio('for-maeve.mp3')
+}
+function no() {
+ bool = !bool
+ if(bool){
+ audio.play()
+ } else {
+ audio.pause()
+ }
+ }
+
+const swapElm = document.getElementById('b');
+swapElm.addEventListener('mouseover', () => {
+ const prev = swapElm.style.transform;
+ if (!prev || prev === 'translateX(0px)') swapElm.style.transform = 'translateX(200%)';
+ else swapElm.style.transform = 'translateX(0px)';
+});
\ No newline at end of file diff --git a/static/index.html b/static/index.html index ab3df99..39085df 100644 --- a/static/index.html +++ b/static/index.html @@ -1,157 +1,152 @@ -<!DOCTYPE html> -<html lang="en"> - <head> - <link rel="stylesheet" href="styles.css" /> - <meta charset="UTF-8" /> - <meta http-equiv="X-UA-Compatible" content="IE=edge" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <meta content="best website (real)" property="og:title" /> - <meta content="echo's shitty website" property="og:description" /> - <meta content="https://exhq.github.io" property="og:url" /> - <meta - content="https://cdn.discordapp.com/attachments/832652653292027904/967009610907144223/Untitled.png" - property="og:image" - /> - <script src="funny.js"></script> - <meta content="#43B581" data-react-helmet="true" name="theme-color" /> - </head> - <body> - - <div class="topnav"> - <a class="active" href="#home">Home</a> - <a href="#ticd">Things i <u>cant</u> do </a> - <a href="#contact">Contact me / About me</a> - <a onclick="no()">do you want to bless your ears? - <a href="https://exhq.gay/neOwOfetch">try neOwOfetch :)</a> - </a> - </div> - - <div class="downnav"> - <h3 class="imsotired">copy right something smething i forgor :skull:</h3> - </div> - <div id="home"></div> - <br /> - <br /> - <h1 class="header"> - have you ever wanted a "developer"<br /> - that <span class="empty"></span> nothing other than standing around being - useless? - </h1> - <img - class="me" - src="https://cdn.discordapp.com/attachments/917977729322872853/967004653147553802/me.png" - alt="me" - /> - <h2 class="mebeinguseless">a picture of me being useless</h2> - <h1 class="data">i <u>CANNOT</u> program:</h1> - - <div class="languages-wrapper"> - <div> - <img - class="javaimg" - src="https://cdn.discordapp.com/attachments/917977729322872853/973143267677978634/clang.png" - alt="" - /> - <span class="notjava">its 2022, at least use c++</span> - </div> - <div> - <img - class="javaimg" - src="https://cdn.discordapp.com/attachments/832652653292027904/973146727689379860/clang.png" - alt="" - style="margin-left: 0;" - /> - <span class="notjava">its 2022, at least use java</span> - </div> - <div> - <img - class="javaimg" - src="https://cdn.discordapp.com/attachments/917977729322872853/967023902939283456/go.png" - alt="" - /> - <span class="notjava">this joke was removed due to 1984</span> - </div> - <div> - <img - class="javaimg" - src="https://cdn.discordapp.com/attachments/917977729322872853/967023935713607751/R.png" - alt="" - /> - <span class="notjava">this is not centered and idk how to fix it</span> - </div> - <div> - <img - class="javaimg" - src="https://cdn.discordapp.com/attachments/917977729322872853/967009849680486410/ruby.png" - alt="" - /> - <span class="notjava">who the fuck unironically uses ruby?</span> - </div> - <div> - <img - class="rustimg" - src="https://cdn.discordapp.com/attachments/917977729322872853/967024017812897883/rust.png" - alt="" - style="margin-left: 0;" - /> - <span class="notjava">:sOmEOneSAIdRUst: shut the fuck up ÅĠěŜŋżųŹ¢¶Ěá</span> - </div> - <div style="grid-column: span 2;"> - <img - class="javaimg jsimg" - src="https://cdn.discordapp.com/attachments/918571703137894421/999223367750127616/Unofficial_JavaScript_logo_2.svg.png" - alt="" - /> - <span class="notjava">([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(!![]+[])[+[]]])[+!+[]+[+[]]]</span> - </div> - </div> - - <div id="about"></div> - <br /> - <h1 class="data" id="ticd">i <u>CANNOT</u> be:</h1> - <span class="being">⋅useful</span> - <br /> - <span class="being">⋅productive</span> - <br /> - <span class="being">⋅fun</span> - <br /> - <span class="being">⋅smart</span> - <br /> - <span class="being">⋅creative</span> - <br /> - <span class="being" - >⋅ < Dot Operator, Unicode number: U+22C5, Unicode version: 1.1 - (1993)</span - > - <br /> - <br /> - <h1 class="data" id="contact"> - contact me<a class="shh" href="https://pastebin.com/uuqnLybA">:</a> - </h1> - <div id="a"> - <img - class="cover" - src="https://cdn.discordapp.com/attachments/917977729322872853/967060708695085136/itworks.png" - alt="" - /> - </div> - <div id="b"><span class="runaway">click here for contacts</span></div> - <br /> - <br /> - <h1 class="data">about me:</h1> - <p class="aboutme">bored 18 yo who makes shitty stuff</p> - <div class="tooltip"> - (hover for exact age) - <span class="tooltiptext">2004, 06th aug</span> - </div> - <p class="aboutme"> - i wuv u so so so so so so so much oxi og <3 muah <br /> - i have had multiple sexual intercourses with your mother, she's hot <br /> - i'm also a big fan of - <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> avengers </a> - </p> - <br /> - <br /> - <br /> - </body> -</html> +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <link rel="stylesheet" href="styles.css" />
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <meta content="best website (real)" property="og:title" />
+ <meta content="echo's shitty website" property="og:description" />
+ <meta content="https://exhq.github.io" property="og:url" />
+ <meta
+ content="https://cdn.discordapp.com/attachments/832652653292027904/967009610907144223/Untitled.png"
+ property="og:image"
+ />
+ <script src="funny.js" defer></script>
+ <meta content="#43B581" data-react-helmet="true" name="theme-color" />
+ </head>
+ <body>
+
+ <div class="topnav">
+ <a class="active" href="#home">Home</a>
+ <a href="#ticd">Things i <u>cant</u> do </a>
+ <a href="#contact">Contact me / About me</a>
+ <a onclick="no()">do you want to bless your ears?
+ <a href="https://exhq.gay/neOwOfetch">try neOwOfetch :)</a>
+ </a>
+ </div>
+
+ <div class="downnav">
+ <h3 class="imsotired">copy right something smething i forgor :skull:</h3>
+ </div>
+ <div id="home"></div>
+ <br />
+ <br />
+ <h1 class="header">
+ have you ever wanted a "developer"<br />
+ that <span class="empty"></span> nothing other than standing around being
+ useless?
+ </h1>
+ <img
+ class="me"
+ src="https://cdn.discordapp.com/attachments/917977729322872853/967004653147553802/me.png"
+ alt="me"
+ />
+ <h2 class="mebeinguseless">a picture of me being useless</h2>
+ <h1 class="data">i <u>CANNOT</u> program:</h1>
+
+ <div class="languages-wrapper">
+ <div>
+ <img
+ class="javaimg"
+ src="https://cdn.discordapp.com/attachments/917977729322872853/973143267677978634/clang.png"
+ alt=""
+ />
+ <span class="notjava">its 2022, at least use c++</span>
+ </div>
+ <div>
+ <img
+ class="javaimg"
+ src="https://cdn.discordapp.com/attachments/832652653292027904/973146727689379860/clang.png"
+ alt=""
+ style="margin-left: 0;"
+ />
+ <span class="notjava">its 2022, at least use java</span>
+ </div>
+ <div>
+ <img
+ class="javaimg"
+ src="https://cdn.discordapp.com/attachments/917977729322872853/967023902939283456/go.png"
+ alt=""
+ />
+ <span class="notjava">this joke was removed due to 1984</span>
+ </div>
+ <div>
+ <img
+ class="javaimg"
+ src="https://cdn.discordapp.com/attachments/917977729322872853/967023935713607751/R.png"
+ alt=""
+ />
+ <span class="notjava">this is not centered and idk how to fix it</span>
+ </div>
+ <div>
+ <img
+ class="javaimg"
+ src="https://cdn.discordapp.com/attachments/917977729322872853/967009849680486410/ruby.png"
+ alt=""
+ />
+ <span class="notjava">who the fuck unironically uses ruby?</span>
+ </div>
+ <div>
+ <img
+ class="rustimg"
+ src="https://cdn.discordapp.com/attachments/917977729322872853/967024017812897883/rust.png"
+ alt=""
+ style="margin-left: 0;"
+ />
+ <span class="notjava">:sOmEOneSAIdRUst: shut the fuck up ÅĠěŜŋżųŹ¢¶Ěá</span>
+ </div>
+ <div style="grid-column: span 2;">
+ <img
+ class="javaimg jsimg"
+ src="https://cdn.discordapp.com/attachments/918571703137894421/999223367750127616/Unofficial_JavaScript_logo_2.svg.png"
+ alt=""
+ />
+ <span class="notjava">([][[]]+[])[+!+[]]+(!![]+[][(![]+[])[+[]]+(![]+[])[!+[]+!+[]]+(![]+[])[+!+[]]+(!![]+[])[+[]]])[+!+[]+[+[]]]</span>
+ </div>
+ </div>
+
+ <div id="about"></div>
+ <br />
+ <h1 class="data" id="ticd">i <u>CANNOT</u> be:</h1>
+ <span class="being">⋅useful</span>
+ <br />
+ <span class="being">⋅productive</span>
+ <br />
+ <span class="being">⋅fun</span>
+ <br />
+ <span class="being">⋅smart</span>
+ <br />
+ <span class="being">⋅creative</span>
+ <br />
+ <span class="being"
+ >⋅ < Dot Operator, Unicode number: U+22C5, Unicode version: 1.1
+ (1993)</span
+ >
+ <br />
+ <br />
+ <h1 class="data" id="contact">
+ contact me<a class="shh" href="https://pastebin.com/uuqnLybA">:</a>
+ </h1>
+ <div id="b"><span
+ class="runaway"
+ >click here for contacts</span></div>
+ <br />
+ <br />
+ <h1 class="data">about me:</h1>
+ <p class="aboutme">bored 18 yo who makes shitty stuff</p>
+ <div class="tooltip">
+ (hover for exact age)
+ <span class="tooltiptext">2004, 06th aug</span>
+ </div>
+ <p class="aboutme">
+ i wuv u so so so so so so so much oxi og <3 muah <br />
+ i have had multiple sexual intercourses with your mother, she's hot <br />
+ i'm also a big fan of
+ <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"> avengers </a>
+ </p>
+ <br />
+ <br />
+ <br />
+ </body>
+</html>
diff --git a/static/styles.css b/static/styles.css index 300cada..d213064 100644 --- a/static/styles.css +++ b/static/styles.css @@ -1,309 +1,304 @@ -@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap'); - -/* Declare color variables */ -:root{ - --title-color: #ff80a4; - --text-color: #ff2674; - --background-color: #202124; - --nav-background-color: #333; -} - -/* make the scrolling smooth */ -html, body{ - scroll-behavior: smooth; - overflow-x: hidden; -} - -.header{ - color: var(--background-color); - padding: 10px; - font-size: 40px; - font-weight: bold; - text-align: center; - font-family: 'google sans', serif; - animation: colorchange 7s infinite alternate; -} - -.java{ - vertical-align: middle; - font-size: 10px; -} - -.javaimg{ - margin-left: 20%; - width: 50px; - height: 50px; - vertical-align: middle; -} - -.rustimg{ - margin-left: 2.6%; - width: 50px; - height: 50px; - vertical-align: middle; -} - -.topnav{ - /* make the navbar follow the scroll */ - position: fixed; - top: 0; - left: 0; - margin: auto; - border: 1px solid var(--background-color); - box-shadow: 0px 0px 10px var(--background-color); - z-index: 1; - background-color: var(--nav-background-color); - overflow: hidden; - width: 100%; -} - -.downnav{ - /* make the navbar follow the scroll */ - position: fixed; - bottom: 0; - left: 0; - width: 100%; - margin: auto; - overflow: hidden; - border: 1px solid var(--background-color); - box-shadow: 0px 0px 6px var(--background-color); - z-index: 1; - background-color: var(--nav-background-color); -} - -.imsotired{ - margin-left: 1%; - font-family: 'fira sans', serif; - color: var(--title-color); -} - -.topnav a{ - user-select: none; - float: left; - color: #f2f2f2; - text-align: center; - padding: 14px 16px; - text-decoration: none; - font-family: "google sans"; - font-size: 15px; -} - -.topnav a:hover{ - background-color: #ddd; - color: black; -} - -.topnav a.active{ - background-color: var(--title-color); - color: white; -} - -.java{ - width: 5%; - font-family: 'fira sans', serif; - color: var(--title-color); - padding: 10px; - font-size: 40px; - font-weight: bold; - margin-left: 10%; - margin-top: 30px; -} - -.notjava{ - margin-left: 3%; - font-family: 'fira sans'; - color: var(--text-color); -} - -.data{ - font-family: 'fira sans', serif; - color: var(--title-color); - padding: 10px; - font-size: 40px; - font-weight: bold; - margin-left: 10%; - margin-top: 30px; -} - -.header span::before{ - pointer-events: all; - content: "does "; - color: #fff; - animation: colorchange 5s infinite alternate; -} - -.being{ - margin-left: 11%; - font-family: 'fira sans'; - color: var(--text-color); - font-size: 120% -} - - -.tooltip{ - position: relative; - display: inline-block; - margin-left: 13%; - font-family: 'fira sans'; - color: var(--text-color); - font-size: 120% -} - -.tooltip .tooltiptext{ - visibility: hidden; - width: 120px; - color: var(--title-color); - text-align: center; - border-radius: 6px; - padding: 5px 0; - position: absolute; - z-index: 1; - border:0px solid black; - bottom: 100%; - left: 50%; - margin-left: -60px; - background-color:#ff267665; - opacity: 0; - transition: opacity 1s; -} - -.tooltip:hover .tooltiptext{ - visibility: visible; - opacity: 1; -} - -.shh{ -text-decoration: none; -font-family: 'fira sans'; -font-size: 120%; -color: var(--title-color); -} - -.aboutme{ - margin-left: 13%; - font-family: 'fira sans'; - color: var(--text-color); - font-size: 120% -} - -.goimg{ - width: 50px; - height: 50px; - vertical-align: middle; - margin-left: 10%; -} - -@keyframes colorchange{ - 0% { - color: #16171a; - } - 10% { - color: #7f0622; - } - 20% { - color: #d62411; - } - 30% { - color: #ff8426; - } - 40% { - color: #ffd100; - } - 50% { - color: #fafdff; - } - 60% { - color: #ff80a4; - } - 70% { - color: #ff2674; - } - 80% { - color: #94216a; - } - 90% { - color: #234975; - } - 100% { - color: pink; - } - } - -.mebeinguseless{ - color: var(--title-color); - padding: 10px; - font-size: 15px; - font-weight: bold; - text-align: center; - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; -} - -.runaway{ - color: var(--text-color); - padding: 10px; - font-size: 15px; - font-weight: bold; - text-align: center; - margin-left: 10%; - font-family: 'fira sans'; -} - -.cover{ - position: absolute; - left: 10.5%; - -} - -#a:hover + #b { - transform: translateX(40%); -} -#b{ - transform: translateX(0); - transition: transform 0 300ms linear - -} - - -.me{ - width: 50%; - margin-left: 25%; - transform: scale(0.75); - margin-bottom: -60px -} - -html{ - background-color: var(--background-color); -} - -.go{ - font-weight: 9000; - font-size: 120%; -} - - -.languages-wrapper{ - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(3, 1fr); -} - -.jsimg { - margin-left: 10%; -} - -@media only screen and (max-width: 900px) { - /* .data{ - margin-left: 0 - } */ - .javaimg{ - margin-left: 0; - } - .jsimg { - margin-left: 0; - } -} -.none{ - display: none; +@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
+
+/* Declare color variables */
+:root{
+ --title-color: #ff80a4;
+ --text-color: #ff2674;
+ --background-color: #202124;
+ --nav-background-color: #333;
+}
+
+/* make the scrolling smooth */
+html, body{
+ scroll-behavior: smooth;
+ overflow-x: hidden;
+}
+
+.header{
+ color: var(--background-color);
+ padding: 10px;
+ font-size: 40px;
+ font-weight: bold;
+ text-align: center;
+ font-family: 'google sans', serif;
+ animation: colorchange 7s infinite alternate;
+}
+
+.java{
+ vertical-align: middle;
+ font-size: 10px;
+}
+
+.javaimg{
+ margin-left: 20%;
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+}
+
+.rustimg{
+ margin-left: 2.6%;
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+}
+
+.topnav{
+ /* make the navbar follow the scroll */
+ position: fixed;
+ top: 0;
+ left: 0;
+ margin: auto;
+ border: 1px solid var(--background-color);
+ box-shadow: 0px 0px 10px var(--background-color);
+ z-index: 1;
+ background-color: var(--nav-background-color);
+ overflow: hidden;
+ width: 100%;
+}
+
+.downnav{
+ /* make the navbar follow the scroll */
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ margin: auto;
+ overflow: hidden;
+ border: 1px solid var(--background-color);
+ box-shadow: 0px 0px 6px var(--background-color);
+ z-index: 1;
+ background-color: var(--nav-background-color);
+}
+
+.imsotired{
+ margin-left: 1%;
+ font-family: 'fira sans', serif;
+ color: var(--title-color);
+}
+
+.topnav a{
+ user-select: none;
+ float: left;
+ color: #f2f2f2;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+ font-family: "google sans";
+ font-size: 15px;
+}
+
+.topnav a:hover{
+ background-color: #ddd;
+ color: black;
+}
+
+.topnav a.active{
+ background-color: var(--title-color);
+ color: white;
+}
+
+.java{
+ width: 5%;
+ font-family: 'fira sans', serif;
+ color: var(--title-color);
+ padding: 10px;
+ font-size: 40px;
+ font-weight: bold;
+ margin-left: 10%;
+ margin-top: 30px;
+}
+
+.notjava{
+ margin-left: 3%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+}
+
+.data{
+ font-family: 'fira sans', serif;
+ color: var(--title-color);
+ padding: 10px;
+ font-size: 40px;
+ font-weight: bold;
+ margin-left: 10%;
+ margin-top: 30px;
+}
+
+.header span::before{
+ pointer-events: all;
+ content: "does ";
+ color: #fff;
+ animation: colorchange 5s infinite alternate;
+}
+
+.being{
+ margin-left: 11%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+ font-size: 120%
+}
+
+
+.tooltip{
+ position: relative;
+ display: inline-block;
+ margin-left: 13%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+ font-size: 120%
+}
+
+.tooltip .tooltiptext{
+ visibility: hidden;
+ width: 120px;
+ color: var(--title-color);
+ text-align: center;
+ border-radius: 6px;
+ padding: 5px 0;
+ position: absolute;
+ z-index: 1;
+ border:0px solid black;
+ bottom: 100%;
+ left: 50%;
+ margin-left: -60px;
+ background-color:#ff267665;
+ opacity: 0;
+ transition: opacity 1s;
+}
+
+.tooltip:hover .tooltiptext{
+ visibility: visible;
+ opacity: 1;
+}
+
+.shh{
+text-decoration: none;
+font-family: 'fira sans';
+font-size: 120%;
+color: var(--title-color);
+}
+
+.aboutme{
+ margin-left: 13%;
+ font-family: 'fira sans';
+ color: var(--text-color);
+ font-size: 120%
+}
+
+.goimg{
+ width: 50px;
+ height: 50px;
+ vertical-align: middle;
+ margin-left: 10%;
+}
+
+@keyframes colorchange{
+ 0% {
+ color: #16171a;
+ }
+ 10% {
+ color: #7f0622;
+ }
+ 20% {
+ color: #d62411;
+ }
+ 30% {
+ color: #ff8426;
+ }
+ 40% {
+ color: #ffd100;
+ }
+ 50% {
+ color: #fafdff;
+ }
+ 60% {
+ color: #ff80a4;
+ }
+ 70% {
+ color: #ff2674;
+ }
+ 80% {
+ color: #94216a;
+ }
+ 90% {
+ color: #234975;
+ }
+ 100% {
+ color: pink;
+ }
+ }
+
+.mebeinguseless{
+ color: var(--title-color);
+ padding: 10px;
+ font-size: 15px;
+ font-weight: bold;
+ text-align: center;
+ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.runaway{
+ color: var(--text-color);
+ padding: 10px;
+ font-size: 15px;
+ font-weight: bold;
+ text-align: center;
+ white-space: no-wrap;
+ font-family: 'fira sans';
+}
+
+.cover{
+ position: absolute;
+ left: 10.5%;
+
+}
+
+#b {
+ width: fit-content;
+ margin-left: 10vw;
+}
+
+.me{
+ width: 50%;
+ margin-left: 25%;
+ transform: scale(0.75);
+ margin-bottom: -60px
+}
+
+html{
+ background-color: var(--background-color);
+}
+
+.go{
+ font-weight: 9000;
+ font-size: 120%;
+}
+
+
+.languages-wrapper{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: repeat(3, 1fr);
+}
+
+.jsimg {
+ margin-left: 10%;
+}
+
+@media only screen and (max-width: 900px) {
+ /* .data{
+ margin-left: 0
+ } */
+ .javaimg{
+ margin-left: 0;
+ }
+ .jsimg {
+ margin-left: 0;
+ }
+}
+.none{
+ display: none;
}
\ No newline at end of file diff --git a/styles.css b/styles.css deleted file mode 100644 index d213064..0000000 --- a/styles.css +++ /dev/null @@ -1,304 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Fira+Sans&display=swap');
-@import url('https://fonts.googleapis.com/css?family=Google+Sans&display=swap');
-
-/* Declare color variables */
-:root{
- --title-color: #ff80a4;
- --text-color: #ff2674;
- --background-color: #202124;
- --nav-background-color: #333;
-}
-
-/* make the scrolling smooth */
-html, body{
- scroll-behavior: smooth;
- overflow-x: hidden;
-}
-
-.header{
- color: var(--background-color);
- padding: 10px;
- font-size: 40px;
- font-weight: bold;
- text-align: center;
- font-family: 'google sans', serif;
- animation: colorchange 7s infinite alternate;
-}
-
-.java{
- vertical-align: middle;
- font-size: 10px;
-}
-
-.javaimg{
- margin-left: 20%;
- width: 50px;
- height: 50px;
- vertical-align: middle;
-}
-
-.rustimg{
- margin-left: 2.6%;
- width: 50px;
- height: 50px;
- vertical-align: middle;
-}
-
-.topnav{
- /* make the navbar follow the scroll */
- position: fixed;
- top: 0;
- left: 0;
- margin: auto;
- border: 1px solid var(--background-color);
- box-shadow: 0px 0px 10px var(--background-color);
- z-index: 1;
- background-color: var(--nav-background-color);
- overflow: hidden;
- width: 100%;
-}
-
-.downnav{
- /* make the navbar follow the scroll */
- position: fixed;
- bottom: 0;
- left: 0;
- width: 100%;
- margin: auto;
- overflow: hidden;
- border: 1px solid var(--background-color);
- box-shadow: 0px 0px 6px var(--background-color);
- z-index: 1;
- background-color: var(--nav-background-color);
-}
-
-.imsotired{
- margin-left: 1%;
- font-family: 'fira sans', serif;
- color: var(--title-color);
-}
-
-.topnav a{
- user-select: none;
- float: left;
- color: #f2f2f2;
- text-align: center;
- padding: 14px 16px;
- text-decoration: none;
- font-family: "google sans";
- font-size: 15px;
-}
-
-.topnav a:hover{
- background-color: #ddd;
- color: black;
-}
-
-.topnav a.active{
- background-color: var(--title-color);
- color: white;
-}
-
-.java{
- width: 5%;
- font-family: 'fira sans', serif;
- color: var(--title-color);
- padding: 10px;
- font-size: 40px;
- font-weight: bold;
- margin-left: 10%;
- margin-top: 30px;
-}
-
-.notjava{
- margin-left: 3%;
- font-family: 'fira sans';
- color: var(--text-color);
-}
-
-.data{
- font-family: 'fira sans', serif;
- color: var(--title-color);
- padding: 10px;
- font-size: 40px;
- font-weight: bold;
- margin-left: 10%;
- margin-top: 30px;
-}
-
-.header span::before{
- pointer-events: all;
- content: "does ";
- color: #fff;
- animation: colorchange 5s infinite alternate;
-}
-
-.being{
- margin-left: 11%;
- font-family: 'fira sans';
- color: var(--text-color);
- font-size: 120%
-}
-
-
-.tooltip{
- position: relative;
- display: inline-block;
- margin-left: 13%;
- font-family: 'fira sans';
- color: var(--text-color);
- font-size: 120%
-}
-
-.tooltip .tooltiptext{
- visibility: hidden;
- width: 120px;
- color: var(--title-color);
- text-align: center;
- border-radius: 6px;
- padding: 5px 0;
- position: absolute;
- z-index: 1;
- border:0px solid black;
- bottom: 100%;
- left: 50%;
- margin-left: -60px;
- background-color:#ff267665;
- opacity: 0;
- transition: opacity 1s;
-}
-
-.tooltip:hover .tooltiptext{
- visibility: visible;
- opacity: 1;
-}
-
-.shh{
-text-decoration: none;
-font-family: 'fira sans';
-font-size: 120%;
-color: var(--title-color);
-}
-
-.aboutme{
- margin-left: 13%;
- font-family: 'fira sans';
- color: var(--text-color);
- font-size: 120%
-}
-
-.goimg{
- width: 50px;
- height: 50px;
- vertical-align: middle;
- margin-left: 10%;
-}
-
-@keyframes colorchange{
- 0% {
- color: #16171a;
- }
- 10% {
- color: #7f0622;
- }
- 20% {
- color: #d62411;
- }
- 30% {
- color: #ff8426;
- }
- 40% {
- color: #ffd100;
- }
- 50% {
- color: #fafdff;
- }
- 60% {
- color: #ff80a4;
- }
- 70% {
- color: #ff2674;
- }
- 80% {
- color: #94216a;
- }
- 90% {
- color: #234975;
- }
- 100% {
- color: pink;
- }
- }
-
-.mebeinguseless{
- color: var(--title-color);
- padding: 10px;
- font-size: 15px;
- font-weight: bold;
- text-align: center;
- font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-}
-
-.runaway{
- color: var(--text-color);
- padding: 10px;
- font-size: 15px;
- font-weight: bold;
- text-align: center;
- white-space: no-wrap;
- font-family: 'fira sans';
-}
-
-.cover{
- position: absolute;
- left: 10.5%;
-
-}
-
-#b {
- width: fit-content;
- margin-left: 10vw;
-}
-
-.me{
- width: 50%;
- margin-left: 25%;
- transform: scale(0.75);
- margin-bottom: -60px
-}
-
-html{
- background-color: var(--background-color);
-}
-
-.go{
- font-weight: 9000;
- font-size: 120%;
-}
-
-
-.languages-wrapper{
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- grid-template-rows: repeat(3, 1fr);
-}
-
-.jsimg {
- margin-left: 10%;
-}
-
-@media only screen and (max-width: 900px) {
- /* .data{
- margin-left: 0
- } */
- .javaimg{
- margin-left: 0;
- }
- .jsimg {
- margin-left: 0;
- }
-}
-.none{
- display: none;
-}
\ No newline at end of file |