Fluffy/old-website
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2024-12-28 02:06:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Goodbye old code

Browse source
This commit is contained in:
Michał 2022-05-15 00:20:33 +01:00
parent f006d4161b
commit 03c1d99567
21 changed files with 241 additions and 743 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
PHP_test/menu.php
View file

@ -1,4 +0,0 @@
<?php
$text_a='Hewwo';
$text_b=':3';
?>

62
about.html
View file

@ -1,62 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<meta content="Fluffy Bean" name="author"> <!-- I have made this site!!!! -->
<title>Awwwoooooo!</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<!-- Neck -->
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="introduction.html" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="about.html" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="pictures.html" id="navigation_button">&nbsp;Pictures!&nbsp;</a> <!-- Pictures! -->
<a href="more.html" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="social.html" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
<a href="php_test.html" id="navigation_button">&nbsp;PHP&nbsp;test&nbsp;</a>
</div>
<!-- Now you know (nearly) everything about me, have fun! -->
<div id="about_fluffy">
<h2>About meeeee<span id="extra_e">eeeeeee</span></h2>
<image src="images/fluffy2.jpg" alt="Fluffy Bean on pink background" class="about_image">
<div id="about_text">
<p>Hello! I am <span id="fluffy_color">Fluffy Bean</span>, or Fluffy for short,</p>
<p>I am a smart 16 year old who likes to learn new things, although I'm not that good at much. I like to program! I've been interested in it for a couple years, fist gained intrest in it around the age of 10, and decided to dive into it in 2019 as a part of school course and started to learn at home independently in 2021! So far I learned how to program in Python and now I am also learning HTML and CSS! I also tried my hands on other things such as blueprint code, for example Scratch. I also programmed physical hardware like MicroBits and LEGO EV3 and NXT. I tried programming on a Raspberry pi a couple years ago but did not have much time to play around with it, so hopefully soon I'll be able to get myself one!</p>
<p>Computers! They interest me a lot, electronics overall really! Recently I managed to get myself enough parts to build myself a PC, yes and I built it with my own hands! I also like to fix things, like my phones or controllers and laptops too! Please get your stuff repaired instead of buying new shit! :P</p>
<p>I also have other interests too, such as playing games! I like rhythm games such as <a href="https://beatsaber.com/" target="_blank", >Beat Saber</a> and <a href="https://www.spinrhythmgame.com/" target="_blank">Spin Rhythm XD</a>, but I also enjoy <a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a> and <a href="https://www.flightsimulator.com/" target="_blank">FS2020</a>! I should try to play more games though.</p>
<p>Another interest I have in the outdoors (very contrary to my programming indoors self), I like going on hikes all around my local woods and hills with my friends, and sometimes I manage to get some nice photos on the way too! Nature interests me as it's not confusing like people, so if I'm out and about I'm most likely going to be climbing trees or running through fields!</p>
<p>I like listening to music, I go everywhere with music. Without it I'd probably go insane... x3</p>
<p>Writing is not a strong point, I am all over the place reading this back</p>
</div>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def>
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
</footer>
</body>
</html>
<!-- Site is over! Go home! -->

BIN
images/download_icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 130 B

BIN
images/flat_arrow_icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 103 B

BIN
images/fluffy1.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 316 KiB

BIN
images/up_arrow.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 156 B

64
index.php Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Welcome to Fluffys hell!">
<link rel="shortcut icon" type="image/png" href="pfp.jpg"/>
<title>Fluffy's Epic Site</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="rootContainer">
<div class="profileContainer">
<img src="pfp.jpg">
<h2> Find me! </h2>
<div class="profileLinks">
<a href="https://twitter.com/fluffybeanUwU" class="twitterColour"> Twitter </a>
<a href="http://t.me/Fluffy_Bean" class="telegramColour"> Telegram </a>
<a href="https://github.com/Fluffy-Bean" class="githubColour"> Github </a>
<a href="https://steamcommunity.com/id/Fluffy_Bean/" class="steamColour"> Steam </a>
<p class="discord"> <span class="discordColour">Discord:</span> Fluffy&nbsp;Bean#5212 </p>
</div>
</div>
<div class="textContainer">
<div class="textBody">
<header>
<h1> Welcome to my site! </h1>
</header>
<main>
<div id="aboutText">
<h2> About Me </h2>
<p class="paragraph"> Hi! I'm <span class="fluffyColour">Fluffy Bean</span>. I'm a 17 year old who found himself on the internet one day and became a furry! </p>
</div>
<div id="interestsText">
<h2> My interests </h2>
<p class="paragraph"> Apart from the obvious, I am interested in computers, specifically the programming aspect of them and the freedom it gives me to express myself </p>
<p class="paragraph"> I also enjoy using Linux (Arch btw) which gives me access to do things such as customise my entire system! </p>
<p class="paragraph"> Another thing I enjoy doing is playing games, some of my favourite tiles are, The Witcher 3, Minecraft, Beat Saber and Spin Rhythm XD </p>
</div>
<div id="experiaceText">
<h2> Experience in programming </h2>
<p class="paragraph"> I have a decently wide range of knowledge on computers and programming </p>
<p class="paragraph"> Since I was young I delved into computers head first, and breaking a lot on the way. I started with Scratch, then progressed to Python in Secondary School where I really started my programming adventure! </p>
<p class="paragraph"> Since then I tried many programming languages and programming-related stuff, I currently know Python, HTML and CSS but am also learning PHP, C# and soon JavaScript </p>
<p class="paragraph"> I also got into Linux since the start was rough with me breaking a terminal emulator, locking a harddrive and many others. Then after a few months Manjaro gave into my messing around and I broke Gnome Display Manager along with Gnome itself. Since then I've been using Arch (btw) and happily configuring Rofi, Polybar, fish and even theming Discord, Spotify and Firefox! </p>
</div>
<div id="thanksText">
<h2> Special Thanks </h2>
<p class="paragraph"> To <span class="jeetixColour">Jeetix</span> for helping me with learning how to make websites and keeping the original site up and running! </p>
<p class="paragraph"> And to <span class="cartyColour">Carty</span> for teaching me how to run servers and the networking required to keep sites online! </p>
</div>
<!-- <div id="exampleText">
<h2> Example Header </h2>
<p class="paragraph"> Example text </p>
</div> -->
</main>
</div>
<footer>
<!-- Nothing for you to see here Carty UwU -->
</footer>
</div>
</div>
</body>
</html>

90
introduction.html
View file

@ -1,90 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<meta content="Fluffy Bean" name="author"> <!-- I have made this site!!!! -->
<title>Awwwoooooo!</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<!-- Neck -->
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="introduction.html" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="about.html" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="pictures.html" id="navigation_button">&nbsp;Pictures!&nbsp;</a> <!-- Pictures! -->
<a href="more.html" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="social.html" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
<a href="php_test.html" id="navigation_button">&nbsp;PHP&nbsp;test&nbsp;</a>
</div>
<!-- Welcome to this horrible horrible site -->
<div id="introduction_to_fluffy">
<h2> Introduction </h2>
<div id="introduction_text">
<p id="space_below">Welcome to my boring site! This is a test of my programming skills on HTML and CSS! The resources I used to make this website where the following</p>
<!-- Cool button website -->
<p>A site I used to get the cool button design was from
<img src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://fdossena.com/?p=html5cool/buttons/i.frag" target="_blank">here</a>!
</p>
<!-- Youtube tutorial -->
<p>The YouTube tutorial I used to learn most of the HTML and CSS from
<img src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" target="_blank">*click me*</a>
</p>
<!-- Fonts and icons -->
<p>Google site I used to get a bunch of icons and fonts from
<img src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://fonts.google.com/icons" target="_blank">Icons</a>
and
<a href="https://fonts.google.com/" target="_blank">Fonts</a>
</p>
<!-- Codepen -->
<p>Codepen! I used this to get some ideas for some parts of the website
<img src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://codepen.io/" target="_blank">Special Text you can click</a>
</p>
<!-- CSS Grid video -->
<p>I used this video to attempt to scale the site correctly to phones, sorta worked x3
<img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://codepen.io/" target="_blank">I'm on the grid! AAAAAA</a>
</p>
<!-- Page I used to learn how to hide images when the screen is too small! -->
<p>Page I used to learn how to hide images when the screen is too small!
<img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://www.thesitewizard.com/css/hide-images-on-mobile-website.shtml" target="_blank">I won't disappear!</a>
</p>
<!-- Thank you Jeetix for being super cool as always! -->
<p>And thank you
<span id="impotant_creature">Jeetix</span>
for suggesting to try this in the first place, I'm having a lot of fun learning HTML and CSS! And thank you for keeping the site up and running!
</p>
</div>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def>
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
</footer>
</body>
</html>
<!-- Site is over! Go home! -->

59
more.html
View file

@ -1,59 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<meta content="Fluffy Bean" name="author"> <!-- I have made this site!!!! -->
<title>Awwwoooooo!</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<!-- Neck -->
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="introduction.html" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="about.html" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="pictures.html" id="navigation_button">&nbsp;Pictures!&nbsp;</a> <!-- Pictures! -->
<a href="more.html" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="social.html" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
<a href="php_test.html" id="navigation_button">&nbsp;PHP&nbsp;test&nbsp;</a>
</div>
<!-- The More page!-->
<div id="more_on_fluffy">
<h2>More!</h2>
<div id="more_on_text">
<p>Here, I will put cool facts or links to websites or something, not really sure why I made this space... But it exists!</p>
<a href="https://libraryofbabel.info/" target="_blank">• The library of babel! A very interesting thing </a>
<p>• Live lightning map! <a href="https://www.lightningmaps.org" target="_blank">:O</a></p>
<p>• My and mrHDash's playlist we made last year during lock-down!</p>
<iframe src="https://open.spotify.com/embed/playlist/1rX4dE08fCKHdzUypDxR42" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media" id="spotify_player"></iframe>
</div>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def>
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
</footer>
</body>
</html>
<!-- Site is over! Go home! -->

140
old_home.html
View file

@ -1,140 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<title>Awwwoooooo!</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<!-- Neck -->
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="#introduction_to_fluffy" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="#about_fluffy" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="#image_gallery" id="navigation_button">&nbsp;Pictures!&nbsp;</a>
<a href="#more_on_fluffy" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="#social_media" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
</div>
<!-- Welcome to this horrible horrible site -->
<div id="introduction_to_fluffy">
<h2> Introduction </h2>
<div id="introduction_text">
<p id="space_below">Welcome to my boring site! This is a test of my programming skills on HTML and CSS! The resources I used to make this website where the following</p>
<!-- Cool button website -->
<p>A site I used to get the cool button design was from
<image src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://fdossena.com/?p=html5cool/buttons/i.frag" target="_blank">here</a>!
</p>
<!-- Youtube tutorial -->
<p>The YouTube tutorial I used to learn most of the HTML and CSS from
<image src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" target="_blank">*click me*</a>
</p>
<!-- Fonts and icons -->
<p>Google site I used to get a bunch of icons and fonts from
<image src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://fonts.google.com/icons" target="_blank">Icons</a>
and
<a href="https://fonts.google.com/" target="_blank">Fonts</a>
</p>
<!-- Codepen -->
<p>Codepen! I used this to get some ideas for some parts of the website
<image src="images/flat_arrow_icon.png" class="small_icons">
<a href="https://codepen.io/" target="_blank">Special Text you can click</a>
</p>
<!-- CSS Grid video -->
<p>I used this video to attempt to scale the site correctly to phones, sorta worked x3
<image src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://codepen.io/" target="_blank">I'm on the grid! AAAAAA</a>
</p>
<!-- Page I used to learn how to hide images when the screen is too small! -->
<p>Page I used to learn how to hide images when the screen is too small!
<image src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://www.thesitewizard.com/css/hide-images-on-mobile-website.shtml" target="_blank">I won't disappear!</a>
</p>
<!-- Thank you Jeetix for being super cool as always! -->
<p>And thank you
<span id="impotant_creature">Jeetix</span>
for suggesting to try this in the first place, I'm having a lot of fun learning HTML and CSS! And thank you for keeping the site up and running!
</p>
</div>
</div>
<!-- Now you know (nearly) everything about me, have fun! -->
<div id="about_fluffy">
<h2>About meeeeeeeeeeee</h2>
<image src="images/fluffy2.jpg" alt="Fluffy Bean on pink background" class="about_image">
<div id="about_text">
<p>Hello! I am <span id="fluffy_color">Fluffy Bean</span>, or Fluffy for short,</p>
<p>I am a smart 16 year old who likes to learn new things, although I'm not that good at much. I like to program! I've been interested in it for a couple years, fist gained intrest in it around the age of 10, and decided to dive into it in 2019 as a part of school course and started to learn at home independently in 2021! So far I learned how to program in Python and now I am also learning HTML and CSS! I also tried my hands on other things such as blueprint code, for example Scratch. I also programmed physical hardware like MicroBits and LEGO EV3 and NXT. I tried programming on a Raspberry pi a couple years ago but did not have much time to play around with it, so hopefully soon I'll be able to get myself one!</p>
<p>Computers! They interest me a lot, electronics overall really! Recently I managed to get myself enough parts to build myself a PC, yes and I built it with my own hands! I also like to fix things, like my phones or controllers and laptops too! Please get your stuff repaired instead of buying new shit! :P</p>
<p>I also have other interests too, such as playing games! I like rhythm games such as <a href="https://beatsaber.com/" target="_blank", >Beat Saber</a> and <a href="https://www.spinrhythmgame.com/" target="_blank">Spin Rhythm XD</a>, but I also enjoy <a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a> and <a href="https://www.flightsimulator.com/" target="_blank">FS2020</a>! I should try to play more games though.</p>
<p>Another interest I have in the outdoors (very contrary to my programming indoors self), I like going on hikes all around my local woods and hills with my friends, and sometimes I manage to get some nice photos on the way too! Nature interests me as it's not confusing like people, so if I'm out and about I'm most likely going to be climbing trees or running through fields!</p>
<p>I like listening to music, I go everywhere with music. Without it I'd probably go insane... x3</p>
<p>Writing is not a strong point, I am all over the place reading this back</p>
</div>
</div>
<!-- Now you know (nearly) everything about me, have fun! -->
<div id="image_gallery">
<h2>Photography of stuff and things</h2>
<p>Here, will be only the fines of my horrible photography! Click on the image to view it better :3</p>
<div id="image_text">
<a href="photos/landscape.jpg"><img src="photos/landscape.jpg" alt="Grey road leading off into wooded hills filled with heavy fog" class="photos"></a>
<a href="photos/funny.jpg"><img src="photos/funny.jpg" alt="Foot covering text on the floor to spell out Cum HD" class="photos"></a>
<a href="photos/sunset_beach.jpg"><img src="photos/sunset_beach.jpg" alt="Rocky beach with suset over the sea" class="photos"></a>
<a href="photos/corruption.jpg"><img src="photos/corruption.jpg" alt="Corrupted photo of a PC" class="photos"></a>
</div>
<p>No steal of photos please!!!!</p>
</div>
<!-- The More page!-->
<div id="more_on_fluffy">
<h2>More!</h2>
<div id="more_on_text">
<p>Here, I will put cool facts or links to websites or something, not really sure why I made this space... But it exists!</p>
<a href="https://libraryofbabel.info/" target="_blank">• The library of babel! A very interesting thing </a>
<p>• Live lightning map! <a href="https://www.lightningmaps.org" target="_blank">:O</a></p>
<p>• My and mrHDash's playlist we made last year during lock-down!</p>
<iframe src="https://open.spotify.com/embed/playlist/1rX4dE08fCKHdzUypDxR42" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media" id="spotify_player"></iframe>
</div>
</div>
<!-- Stalk me! Please don't actually -->
<div id="social_media">
<h2>Find me everywhere! Maybe even in places you wouldn't want to see me... <span id="font_correction">:3</span></h2>
<div id="social_media_list">
<p>My instagram! Facebook now knows me better than I do <image src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://www.instagram.com/fluffy_bean_/" target="_blank">You want to click me</a>!</p>
<p>Twitter! The place all the arguments take place at <image src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://twitter.com/fluffybeanUwU" target="_blank">You'll regret clicking me</a></p>
<p>Telegram, the messaging app unintentionally made for furries <image src="images/flat_arrow_icon.png" class="small_icons"> <a href="http://t.me/Fluffy_Bean" target="_blank">Fancy coral coloured text</a></p>
<p>Discord doesn't give links to profiles so you'll have to do this manually... scary <image src="images/flat_arrow_icon.png" class="small_icons"> Fluffy&nbsp;Bean#6969 </p>
<p>I play games on Steam! Go look at my cool profile <image src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://steamcommunity.com/id/Fluffy_Bean/" target="_blank">over here!</a></p>
</div>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def id="navigation_row_bottom">
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="bottom_text_uwu">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 18.07.2021.3.2</p>
</footer>
</body>
</html>
<!-- Site is over! Go home! -->

0
images/fluffy2.jpg → pfp.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
photos/corruption.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.4 MiB

BIN
photos/cum_hd.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 344 KiB

BIN
photos/funny.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 344 KiB

BIN
photos/landscape.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 4.1 MiB

BIN
photos/sunset_beach.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.1 MiB

52
php_test.html
View file

@ -1,52 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<title>Fluffy's PHP Test</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="introduction.html" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="about.html" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="pictures.html" id="navigation_button">&nbsp;Pictures!&nbsp;</a> <!-- Pictures! -->
<a href="more.html" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="social.html" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
<a href="php_test.html" id="navigation_button">&nbsp;PHP&nbsp;test&nbsp;</a>
</div>
<div id="other_sections">
<h2>PHP stuff!</h2>
<?php include "menu.php";
echo "$text_a $text_b";
?>
<p>This still doesn't work. Come back later!</p>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def>
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
</footer>
</body>
</html>

60
pictures.html
View file

@ -1,60 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<meta content="Fluffy Bean" name="author"> <!-- I have made this site!!!! -->
<title>Awwwoooooo!</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<!-- Neck -->
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="introduction.html" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="about.html" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="pictures.html" id="navigation_button">&nbsp;Pictures!&nbsp;</a> <!-- Pictures! -->
<a href="more.html" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="social.html" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
<a href="php_test.html" id="navigation_button">&nbsp;PHP&nbsp;test&nbsp;</a>
</div>
<!-- Now you know (nearly) everything about me, have fun! -->
<div id="image_gallery">
<h2>Photography of stuff and things</h2>
<p>Here, will be only the fines of my horrible photography! Click on the image to view it better :3</p>
<div id="image_text">
<a href="photos/landscape.jpg"><img src="photos/landscape.jpg" alt="Grey road leading off into wooded hills filled with heavy fog" class="photos"></a>
<a href="photos/funny.jpg"><img src="photos/funny.jpg" alt="Foot covering text on the floor to spell out Cum HD" class="photos"></a>
<a href="photos/sunset_beach.jpg"><img src="photos/sunset_beach.jpg" alt="Rocky beach with suset over the sea" class="photos"></a>
<a href="photos/corruption.jpg"><img src="photos/corruption.jpg" alt="Corrupted photo of a PC" class="photos"></a>
</div>
<p>If you want to use any of these pictures for anything, please get in contact with me!</p>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def>
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
</footer>
</body>
</html>
<!-- Site is over! Go home! -->

59
social.html
View file

@ -1,59 +0,0 @@
<!DOCTYPE html>
<html lang="en"> <!-- This site is in english! -->
<head>
<!-- Did not know all websites needed this -->
<meta charset="utf-8"> <!-- Help show text correctly! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Still don't know what this does -->
<meta name="description" content="Fluffy Bean's website"> <!-- Used to help search engins -->
<meta content="Fluffy Bean" name="author"> <!-- I have made this site!!!! -->
<title>Awwwoooooo!</title> <!-- Title -->
<link rel="shortcut icon" type="image/jpg" href="images/fluffy1.png"/> <!-- Favicon -->
<link rel="stylesheet" href="style.css"> <!-- Le CSS code :3 -->
<!-- Googly fonts to make site pretty! :3 -->
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400&display=swap" rel="stylesheet">
</head>
<!-- Neck -->
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<header>
<h1>Fluffy's amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1>
</header>
<!-- The cool buttons at the top of the site! -->
<div id="navigation_row_top">
<a href="introduction.html" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="about.html" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="pictures.html" id="navigation_button">&nbsp;Pictures!&nbsp;</a> <!-- Pictures! -->
<a href="more.html" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="social.html" id="navigation_button">&nbsp;My&nbsp;social&nbsp;media!&nbsp;</a> <!-- Social Media -->
<a href="php_test.html" id="navigation_button">&nbsp;PHP&nbsp;test&nbsp;</a>
</div>
<!-- Stalk me! Please don't actually -->
<div id="social_media">
<h2>Find me everywhere! Maybe even in places you wouldn't want to see me... <span id="font_correction">:3</span></h2>
<div id="social_media_list">
<p>My instagram! Facebook now knows me better than I do <img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://www.instagram.com/fluffy_bean_/" target="_blank">You want to click me</a>!</p>
<p>Twitter! The place all the arguments take place at <img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://twitter.com/fluffybeanUwU" target="_blank">You'll regret clicking me</a></p>
<p>Telegram, the messaging app unintentionally made for furries <img src="images/flat_arrow_icon.png" class="small_icons"> <a href="http://t.me/Fluffy_Bean" target="_blank">Fancy coral coloured text</a></p>
<p>Discord doesn't give links to profiles so you'll have to do this manually... scary <img src="images/flat_arrow_icon.png" class="small_icons"> Fluffy&nbsp;Bean#6969 </p>
<p>I play games on Steam! Go look at my cool profile <img src="images/flat_arrow_icon.png" class="small_icons"> <a href="https://steamcommunity.com/id/Fluffy_Bean/" target="_blank">over here!</a></p>
</div>
</div>
<!-- The button to take you back to the top of the site -->
<footer>
<def>
<!-- Forgive me for the mess below -->
<a href="#" id="navigation_button">&nbsp;I'm&nbsp;a&nbsp;top&nbsp;and&nbsp;I'm&nbsp;scared&nbsp;of bottoming...&nbsp;take&nbsp;me&nbsp;back&nbsp;<img src="images/up_arrow.png" class="small_icons">&nbsp;</a>
</def>
<p id="footer_text">Site kept online by <span id="impotant_creature">Jeetix</span> • Made by <span id="fluffy_color">Fluffy Bean</span> • Version 21.07.2021.4</p>
</footer>
</body>
</html>
<!-- Site is over! Go home! -->

217
style.css
View file

@ -1,217 +0,0 @@
/* Images make everything better! Well, depending what sort of images... */
.header_image{
width: 7vw;
}
.small_icons{
width: 12px;
}
.about_image{
width: 160px;
float: left;
margin-right: 15px;
border-radius: 30px;
}
.photos{
height: 500px;
width: 300px;
object-fit: cover;
border-radius: 30px;
transition-duration: 0.2s;
transition: all 0.2s;
}
@media (min-width:621px) { /* heheheheh 621... I'm so childish */
.photos:hover{
width: 500px;
margin: 0 10px;
}
}
#image_text{
border-radius: 30px;
display: flex;
overflow-x: scroll;
-ms-overflow-style: none; /* IE and EDGE */
scrollbar-width: none; /* Firefogie */
width: 100%;
}
#image_text::-webkit-scrollbar {
display: none; /* everything else */
}
@media (max-width:621px) { /* heheheheh 621... again..... :3 */
img.header_image {
display: none;
}
}
/* Making text look pretty :3 */
h1{
text-decoration-line: underline; /* color */
text-decoration-style: wavy;
text-decoration-color: coral;
font-size: 5.3vw; /* font */
text-align: center;
font-family: 'Rubik', sans-serif;
text-align: center;
justify-content: center;
align-items: center;
}
header{
margin-left: 4vw; /* spacing */
margin-right: 4vw;
}
h2{
color: coral; /* color */
font-size: 40px; /* font */
text-align: left;
font-family: 'Rubik', sans-serif;
}
a{
color: coral; /* color */
text-decoration: none; /* animation */
transition-duration: 0.1s;
}
a:hover{
font-weight: bolder;
color: white;
}
p{
/* font-family: 'Roboto Mono', monospace; */
}
#introduction_to_fluffy,
#about_fluffy,
#more_on_fluffy,
#social_media,
#image_gallery,
#other_sections{
transition-duration: 0.1s;
font-size: 18px; /* font */
margin-left: 3vw; /* spacing */
margin-right: 3vw;
margin-bottom: 6vw;
}
#about_text{
text-align: justify;
}
#font_correction{
font-family: "Lato", sans-serif; /* font */
}
#footer_text{
font-family: 'Open Sans', sans-serif; /* font */
text-align: center; /* spacing */
}
#impotant_creature{
font-weight: bold; /* Important! */
color: cadetblue;
}
#fluffy_color{
font-weight: bold; /* Not so important! */
color: #FB9645;
}
#social_media_list{
display: flex;
flex-direction: column;
}
/* Spotify player */
#spotify_player{
border-radius: 30px;
transition: all 0.1s;
}
#spotify_player:hover{
border-radius: 10px;
}
/* Push all the buttonsssssssssssssss */
#navigation_button{
border-color: coral; /* I have no clue what's going on here */
color: coral; /* Just don't touch and break anything Fluffy */
border-radius: 15px;
display:inline-block;
  padding:3px 3px;
margin:2px;
border:2px solid coral;
box-sizing: border-box;
margin: 10px;
transition: all 0.1s;
}
#navigation_button:hover{
color: white;
border-color: white;
border-radius: 10px;
}
#navigation_row_top,
footer{
text-align: center;
justify-content: center;
align-items: center;
}
#footer_button{
text-align: center;
}
@media (max-width:340px){ /* heheheheh 621... I'm so childish */
#extra_e{
display: none;
}
}
/* Now all the site needs is some legs, hands and a head */
html{
background: #354c73;
}
@media (min-width:1300px) {
body {
border-radius: 30px;
margin: 50px auto 50px auto;
background: #253652;
}
}
@media (max-width:1300px) { /* heheheheh 621... again..... :3 */
body {
border-radius: 0;
margin: 0;
background: linear-gradient(to bottom, #253652, #354c73 );
}
}
body{
border: 0px solid;
max-width: 1300px;
color: white; /* font */
font-family: "Lato", sans-serif;
display: grid;
grid-template-columns: 100%; /* grid */
grid-template-rows: auto auto auto auto auto auto auto auto;
grid-template-areas: "header"
"#navigation_row_top"
"#introduction_to_fluffy"
"#about_fluffy"
"#more_on_fluffy"
"#image_gallery"
"#social_media"
"footer";
}

177
stylesheet.css Normal file
View file

@ -0,0 +1,177 @@
/* Page style */
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@5.2/distr/fira_code.css);
:root {
font-size: 17px;
--bg: #151515;
--bg-alt: #E8E3E3;
--fg: #E8E3E3;
--rad: 20px;
-ms-overflow-style: none;
scrollbar-width: none;
}
::-webkit-scrollbar {
display: none;
}
* {
font-family: 'Fira Code', monospace;
font-weight: 369;
color: var(--fg);
transition-timing-function: ease-out;
transition: 0.1s;
}
@media (max-width:1200px) {
.rootContainer{
display: flex;
flex-direction: column;
}
body{
margin: 2vh;
}
img {
width: 169px;
}
.textContainer {
width: auto;
}
.textContainer,
.profileContainer {
padding: 1vh;
}
.paragraph {
text-align: justify;
}
}
@media (min-width:1200px) {
.rootContainer{
display: flex;
flex-direction: row;
}
body {
min-height: 86vh;
margin: 6vh;
}
img {
width: 269px;
}
.textContainer {
width: 100%;
}
.textContainer,
.profileContainer {
padding: 2vh;
}
}
img {
margin: 2em;
border-radius: 50%;
box-shadow: 0px 2px 15px #000000;
}
.profileLinks {
float: left;
}
a {
font-weight: 500;
text-decoration: none;
}
a:hover {
font-weight: 800;
}
a:visited {
text-decoration: underline;
}
a.button {
display: block;
padding: 0.35em 1.2em;
border: 0.12em solid var(--fg);
margin: 0 0.3em 0.3em 0;
border-radius: 0.5em;
box-sizing: border-box;
text-decoration: none;
text-align: center;
}
h1,
h2 {
font-weight: 450;
color: #E0863E;
}
/* Funky colours */
.cartyColour {
color: #C29356;
}
.jeetixColour {
color: cadetblue;
}
.fluffyColour {
color: #FB9645;
}
.cartyColour,
.jeetixColour,
.fluffyColour {
font-weight: 500;
}
/* Link colours */
.twitterColour {
color: #1D9BF0;
}
.telegramColour {
color: #1C93E3;
}
.githubColour {
color: #F0F6FC;
}
.steamColour {
color: #C5C3C0;
}
.discordColour {
color: #5865F2;
}
.discord,
.discordColour {
font-weight: 500;
}
.paragraph {
margin: 12px;
color: #DADADA;
}
.textContainer,
.profileContainer {
padding: 2vh;
display: flex;
flex-direction: column;
}
.profileContainer {
text-align: center;
align-items: center;
}
footer {
text-align: center;
align-items: center;
}
body {
background-color: var(--bg);
box-shadow: 0px 4px 20px var(--bg);
border-radius: 1em;
}
html {
margin: 0;
padding: 0;
background-color: var(--bg-alt);
}