Fluffy/WebsiteArchive
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/Fluffys-website.git synced 2025-05-14 07:42:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Version 14.07.2021.2.3

Browse source 
Fixed scaling on Chrome and Mobile
This commit is contained in:
Michal 2021-07-14 20:36:38 +01:00 • committed by GitHub
parent 86d914f3f4
commit 13b6809a68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 152 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
home.html
View file

@ -16,89 +16,101 @@
<body> <body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 --> <!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<h1> <header>
Welcome to my Amazing website! <h1>Welcome to my Amazing website!
<img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image"> <img src="images/fluffy1.png" alt="Poorly drawn image of Fluffy Bean" class="header_image">
</h1> </h1>
</header>
<!-- The cool buttons at the top of the site! --> <!-- The cool buttons at the top of the site! -->
<div id="button_row"> <div id="navigation_row_top">
<a href="#introduction_to_fluffy" id="button">&nbsp;Insert boring stuff here&nbsp;</a> <!-- Introduction --> <a href="#introduction_to_fluffy" id="navigation_button">&nbsp;Insert&nbsp;boring&nbsp;stuff&nbsp;here&nbsp;</a> <!-- Introduction -->
<a href="#about_fluffy" id="button">&nbsp;About this smelly&nbsp;</a> <!-- About --> <a href="#about_fluffy" id="navigation_button">&nbsp;About&nbsp;this&nbsp;smelly&nbsp;</a> <!-- About -->
<a href="#more_on_fluffy" id="button">&nbsp;Even more!&nbsp;</a> <!-- More --> <a href="#more_on_fluffy" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="#social_media" id="button">&nbsp;Stalk me!&nbsp;</a> <!-- Social Media --> <a href="#social_media" id="navigation_button">&nbsp;Stalk&nbsp;me!&nbsp;Please&nbsp;don't...&nbsp;</a> <!-- Social Media -->
</a>
</div> </div>
<!-- Welcome to this horrible horrible site --> <!-- Welcome to this horrible horrible site -->
<h2 id="introduction_to_fluffy"> Introduction </h2> <div id="introduction_to_fluffy">
<div id="header_two_text"> <h2> Introduction </h2>
<p id="space_below">Welcome to my boring site! This is a test of my programming skills on HTML and CSS! The reacources I used to make this website where the following</p> <div id="introduction_text">
<!-- Cool button website --> <p id="space_below">Welcome to my boring site! This is a test of my programming skills on HTML and CSS! The reacources I used to make this website where the following</p>
<p>A site I used to get the cool button design was from <!-- Cool button website -->
<image src="images/flat_arrow_icon.png" class="small_icons"> <p>A site I used to get the cool button design was from
<a href="https://fdossena.com/?p=html5cool/buttons/i.frag" target="_blank">here</a>! <image src="images/flat_arrow_icon.png" class="small_icons">
</p> <a href="https://fdossena.com/?p=html5cool/buttons/i.frag" target="_blank">here</a>!
<!-- Youtube tutorial --> </p>
<p>The YouTube tutorial I used to learn most of the HTML and CSS from <!-- Youtube tutorial -->
<image src="images/flat_arrow_icon.png" class="small_icons"> <p>The YouTube tutorial I used to learn most of the HTML and CSS from
<a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" target="_blank">*click me*</a> <image src="images/flat_arrow_icon.png" class="small_icons">
</p> <a href="https://www.youtube.com/watch?v=qz0aGYrrlhU" target="_blank">*click me*</a>
<!-- Fonts and icons --> </p>
<p>Google site I used to get a bunch of icons and fonts from <!-- Fonts and icons -->
<image src="images/flat_arrow_icon.png" class="small_icons"> <p>Google site I used to get a bunch of icons and fonts from
<a href="https://fonts.google.com/icons" target="_blank">Icons</a> <image src="images/flat_arrow_icon.png" class="small_icons">
and <a href="https://fonts.google.com/icons" target="_blank">Icons</a>
<a href="https://fonts.google.com/" target="_blank">Fonts</a> and
</p> <a href="https://fonts.google.com/" target="_blank">Fonts</a>
<!-- Codepen --> </p>
<p>Codepen! I used this to get some ideas for some parts of the website <!-- Codepen -->
<image src="images/flat_arrow_icon.png" class="small_icons"> <p>Codepen! I used this to get some ideas for some parts of the website
<a href="https://codepen.io/" target="_blank">Special Text you can click</a> <image src="images/flat_arrow_icon.png" class="small_icons">
</p> <a href="https://codepen.io/" target="_blank">Special Text you can click</a>
<!-- Thank you Jeetix for being super cool as always! --> </p>
<p>And thank you <!-- CSS Grid video -->
<span id="impotant_creature">Jeetix</span> <p>I used this video to attempt to scale the site correctly to phones, sorta worked x3
for suggesting to try this in the first place! I'm having a lot of fun learning HTML and CSS! :3 <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> </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> </div>
<!-- Now you know (nearly) everything about me, have fun! --> <!-- Now you know (nearly) everything about me, have fun! -->
<h2 id="about_fluffy">About meeeeeeeeeeeeeeeee</h2> <div id="about_fluffy">
<image src="images/fluffy2.jpg" alt="Fluffy Bean on pink background" class="about_image"> <h2>About meeeeeeeeeeee</h2>
<div id="header_two_text"> <image src="images/fluffy2.jpg" alt="Fluffy Bean on pink background" class="about_image">
<p>Hello! I am Fluffy Bean, or Fluffy for short,</p> <div id="about_text">
<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, 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 making something on a Raspberry pi a while ago and plan to try again soon!</p> <p>Hello! I am <span id="fluffy_color">Fluffy Bean</span>, or <span id="fluffy_color">Fluffy</span> for short,</p>
<p>I also like to play games! I like rhythem games such as <a href="https://beatsaber.com/" target="_blank", >Beat Saber</a> and <a href="https://www.spinrhythmgame.com/" target="_blank">Spin Rhythem 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>! But I should try playing a wider range or games x3</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, 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 making something on a Raspberry pi a while ago and plan to try again soon!</p>
<p>I also like to play games! I like rhythem games such as <a href="https://beatsaber.com/" target="_blank", >Beat Saber</a> and <a href="https://www.spinrhythmgame.com/" target="_blank">Spin Rhythem 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>! But I should try playing a wider range or games x3</p>
</div>
</div> </div>
</p>
<!-- The More page!--> <!-- The More page!-->
<h2 id="more_on_fluffy">More!</h2> <div id="more_on_fluffy">
<div id="header_two_text"> <h2>More!</h2>
<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> <div id="more_on_text">
<a href="https://libraryofbabel.info/" target="_blank">• The library of bable! A very interesting thing </a> <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>
<p>• Live lightning map! <a href="https://www.lightningmaps.org" target="_blank">:O</a></p> <a href="https://libraryofbabel.info/" target="_blank">• The library of bable! A very interesting thing </a>
<p>• My and mrHDash's playlist we made last year duing lock-down!</p> <p>• Live lightning map! <a href="https://www.lightningmaps.org" target="_blank">:O</a></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> <p>• My and mrHDash's playlist we made last year duing 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> </div>
<!-- Stalk me! Please don't actually --> <!-- Stalk me! Please don't actually -->
<h2 id="social_media">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">
<div id="header_two_text"> <h2>Find me everywhere! Maybe even in places you wouldn't want to see me... <span id="font_correction">:3</span></h2>
<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> <div id="social_media_list">
<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>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>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>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>Discord doesn't give links to profiles so you'll have to do this manualy... scary: Fluffy Bean#6969 </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 manualy... scary: Fluffy Bean#6969 </p>
</div>
</div> </div>
<!-- The button to take you back to the top of the site --> <!-- The button to take you back to the top of the site -->
<div id="back_to_top"> <footer>
<a href="#" id="button">&nbsp;I'm a top and I'm scared of bottoming... take me back <img src="images/up_arrow.png" class="small_icons">&nbsp;</a> <def id="navigation_row_bottom">
</div> <!-- 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>
<!-- The cool text at the bottom UwU --> </def>
<p id="bottom_text_uwu">If you think this is a boring website, you're right! • Site made by Fluffy Bean • No copyright 2021</p> <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 14.07.2021.2.2</p>
</footer>
</body> </body>
</html> </html>

107
style.css
View file

@ -1,68 +1,94 @@
/* Images make everything better! Well, depending what sort of images... */ /* Images make everything better! Well, depending what sort of images... */
.header_image{ .header_image{
width: 70px; width: 6vw;
} }
.small_icons{ .small_icons{
width: 12px; width: 12px;
} }
.about_image{ .about_image{
width: 125px; width: 125px;
float: left; float: left;
margin-right: 20px; margin-right: 20px;
margin-left: 50px; margin-bottom: 20px;
border-radius: 25px; border-radius: 25px;
} }
/* Making text look pretty :3 */ /* Making text look pretty :3 */
h1{ h1{
text-decoration-line: underline; text-decoration-line: underline; /* color */
text-decoration-style: wavy; text-decoration-style: wavy;
text-decoration-color: coral; text-decoration-color: coral;
font-size: 70px; font-size: 5.3vw; /* font */
text-align: center; text-align: center;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
text-align: center;
justify-content: center;
align-items: center;
} }
h2 {
font-size: 40px; header{
margin-left: 50px; margin-left: 4vw; /* spacing */
margin-right: 50px; margin-right: 4vw;
}
h2{
color: coral; /* color */
font-size: 40px; /* font */
text-align: left; text-align: left;
font-family: 'Rubik', sans-serif; font-family: 'Rubik', sans-serif;
color: coral
} }
a{ a{
color: coral; color: coral; /* color */
text-decoration: none; text-decoration: none; /* animation */
transition: all 0.1s; transition: all 0.1s;
} }
a:hover{ a:hover{
font-weight: bolder; font-weight: bolder;
color: white; color: white;
} }
#header_two_text{
font-size: 18px; #introduction_to_fluffy,
margin-left: 50px; #about_fluffy,
margin-right: 50px; #more_on_fluffy,
margin-bottom: 150px; #social_media{
font-size: 18px; /* font */
margin-left: 4vw; /* spacing */
margin-right: 4vw;
margin-bottom: 7vw;
} }
/* Guess where this is */
#font_correction{ #font_correction{
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif; /* font */
transition: all 5s; transition: all 5s; /* animation */
} }
#font_correction:hover{ #font_correction:hover{
color: red; color: red;
} }
#bottom_text_uwu{ #bottom_text_uwu{
text-align: center; font-family: 'Open Sans', sans-serif; /* font */
font-family: 'Open Sans', sans-serif; text-align: center; /* spacing */
} }
#impotant_creature{ #impotant_creature{
font-weight: bold; font-weight: bold; /* Important! */
color: cadetblue; color: cadetblue;
} }
/* I have no clue why I added this, but it's here! */
#fluffy_color{
font-weight: bold; /* Not so important! */
color: orange;
}
#social_media_list{
display: flex;
flex-direction: column;
}
/* Spotify player */
#spotify_player{ #spotify_player{
border-radius: 30px; border-radius: 30px;
transition: all 0.1s; transition: all 0.1s;
@ -70,11 +96,11 @@ a:hover{
#spotify_player:hover{ #spotify_player:hover{
border-radius: 10px; border-radius: 10px;
} }
/* Push all the buttonsssssssssssssss */ /* Push all the buttonsssssssssssssss */
/* I cheated a bit with the boxes and it's not code I written :p */ #navigation_button{
#button{ border-color: coral; /* I have no clue what's going on here */
border-color: inherit; color: coral; /* Just don't touch and break anything Fluffy */
color: coral;
border-radius: 15px; border-radius: 15px;
display:inline-block; display:inline-block;
  padding:3px 3px;   padding:3px 3px;
@ -84,22 +110,37 @@ a:hover{
margin: 10px; margin: 10px;
transition: all 0.1s; transition: all 0.1s;
} }
#button:hover{
#navigation_button:hover{
color: white; color: white;
border-color: white; border-color: white;
border-radius: 10px; border-radius: 10px;
} }
#button_row{ #navigation_row_top,
position: center; footer{
text-align: center; text-align: center;
justify-content: center;
align-items: center;
margin: 0px 2vw;
} }
#back_to_top{
#footer_button{
text-align: center; text-align: center;
} }
/* Now all the site needs is some legs, hands and a head */ /* Now all the site needs is some legs, hands and a head */
body{ body{
color: white; color: white; /* font */
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
background: linear-gradient(to bottom,#253652,#354c73) background: linear-gradient(to bottom,#253652,#354c73); /* background */
display: grid;
grid-template-columns: 100%; /* grid */
grid-template-rows: auto auto auto auto auto auto auto;
grid-template-areas: "header"
"#navigation_row_top"
"#introduction_to_fluffy"
"#about_fluffy"
"#more_on_fluffy"
"#social_media"
"footer";
} }