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

62
home.html
View file

@ -16,23 +16,24 @@
<body>
<!-- The epic text at the top of the site! Remind to Fluffy, sites should only have a single (like me lol) h1 -->
<h1>
Welcome to my Amazing website!
<header>
<h1>Welcome to my 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="button_row">
<a href="#introduction_to_fluffy" id="button">&nbsp;Insert boring stuff here&nbsp;</a> <!-- Introduction -->
<a href="#about_fluffy" id="button">&nbsp;About this smelly&nbsp;</a> <!-- About -->
<a href="#more_on_fluffy" id="button">&nbsp;Even more!&nbsp;</a> <!-- More -->
<a href="#social_media" id="button">&nbsp;Stalk me!&nbsp;</a> <!-- Social Media -->
</a>
<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="#more_on_fluffy" id="navigation_button">&nbsp;Even&nbsp;more!&nbsp;</a> <!-- More -->
<a href="#social_media" id="navigation_button">&nbsp;Stalk&nbsp;me!&nbsp;Please&nbsp;don't...&nbsp;</a> <!-- Social Media -->
</div>
<!-- Welcome to this horrible horrible site -->
<h2 id="introduction_to_fluffy"> Introduction </h2>
<div id="header_two_text">
<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 reacources 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
@ -56,49 +57,60 @@
<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>
<!-- 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! :3
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! -->
<h2 id="about_fluffy">About meeeeeeeeeeeeeeeee</h2>
<div id="about_fluffy">
<h2>About meeeeeeeeeeee</h2>
<image src="images/fluffy2.jpg" alt="Fluffy Bean on pink background" class="about_image">
<div id="header_two_text">
<p>Hello! I am Fluffy Bean, or Fluffy for short,</p>
<div id="about_text">
<p>Hello! I am <span id="fluffy_color">Fluffy Bean</span>, or <span id="fluffy_color">Fluffy</span> 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, 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>
</p>
</div>
<!-- The More page!-->
<h2 id="more_on_fluffy">More!</h2>
<div id="header_two_text">
<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 bable! 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 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>
<!-- 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="header_two_text">
<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 manualy... scary: Fluffy Bean#6969 </p>
</div>
<!-- The button to take you back to the top of the site -->
<div id="back_to_top">
<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>
</div>
<!-- The cool text at the bottom UwU -->
<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>
<!-- 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 14.07.2021.2.2</p>
</footer>
</body>
</html>

105
style.css
View file

@ -1,68 +1,94 @@
/* Images make everything better! Well, depending what sort of images... */
.header_image{
width: 70px;
width: 6vw;
}
.small_icons{
width: 12px;
}
.about_image{
width: 125px;
float: left;
margin-right: 20px;
margin-left: 50px;
margin-bottom: 20px;
border-radius: 25px;
}
/* Making text look pretty :3 */
h1{
text-decoration-line: underline;
text-decoration-line: underline; /* color */
text-decoration-style: wavy;
text-decoration-color: coral;
font-size: 70px;
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{
font-size: 40px;
margin-left: 50px;
margin-right: 50px;
color: coral; /* color */
font-size: 40px; /* font */
text-align: left;
font-family: 'Rubik', sans-serif;
color: coral
}
a{
color: coral;
text-decoration: none;
color: coral; /* color */
text-decoration: none; /* animation */
transition: all 0.1s;
}
a:hover{
font-weight: bolder;
color: white;
}
#header_two_text{
font-size: 18px;
margin-left: 50px;
margin-right: 50px;
margin-bottom: 150px;
#introduction_to_fluffy,
#about_fluffy,
#more_on_fluffy,
#social_media{
font-size: 18px; /* font */
margin-left: 4vw; /* spacing */
margin-right: 4vw;
margin-bottom: 7vw;
}
/* Guess where this is */
#font_correction{
font-family: "Lato", sans-serif;
transition: all 5s;
font-family: "Lato", sans-serif; /* font */
transition: all 5s; /* animation */
}
#font_correction:hover{
color: red;
}
#bottom_text_uwu{
text-align: center;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans', sans-serif; /* font */
text-align: center; /* spacing */
}
#impotant_creature{
font-weight: bold;
font-weight: bold; /* Important! */
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{
border-radius: 30px;
transition: all 0.1s;
@ -70,11 +96,11 @@ a:hover{
#spotify_player:hover{
border-radius: 10px;
}
/* Push all the buttonsssssssssssssss */
/* I cheated a bit with the boxes and it's not code I written :p */
#button{
border-color: inherit;
color: coral;
#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;
@ -84,22 +110,37 @@ a:hover{
margin: 10px;
transition: all 0.1s;
}
#button:hover{
#navigation_button:hover{
color: white;
border-color: white;
border-radius: 10px;
}
#button_row{
position: center;
#navigation_row_top,
footer{
text-align: center;
justify-content: center;
align-items: center;
margin: 0px 2vw;
}
#back_to_top{
#footer_button{
text-align: center;
}
/* Now all the site needs is some legs, hands and a head */
body{
color: white;
color: white; /* font */
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";
}