+
+ 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
+ +A site I used to get the cool button design was from
+
The YouTube tutorial I used to learn most of the HTML and CSS from
+
Google site I used to get a bunch of icons and fonts from
+
Codepen! I used this to get some ideas for some parts of the website
+
And thank you + Jeetix + for suggesting to try this in the first place! I'm having a lot of fun learning HTML and CSS! :3 +
+Hello! I am Fluffy Bean, or Fluffy for short,
+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!
+I also like to play games! I like rhythem games such as Beat Saber and Spin Rhythem XD, but I also enjoy Minecraft and FS2020! But I should try playing a wider range or games x3
+Here, I will put cool facts or links to websites or something, not really sure why I made this space... But it exists!
+ • The library of bable! A very interesting thing +• Live lightning map! :O
+• My and mrHDash's playlist we made last year duing lock-down!
+ +My instagram! Facebook now knows me better than I do
Twitter! The place all the arguments take place at
Telegram, the messaging app unintentionally made for furries
Discord doesn't give links to profiles so you'll have to do this manualy... scary: Fluffy Bean#6969
+If you think this is a boring website, you're right! • Site made by Fluffy Bean • No copyright 2021
+ + + + diff --git a/images/download_icon.png b/images/download_icon.png new file mode 100644 index 0000000..7c5b9a5 Binary files /dev/null and b/images/download_icon.png differ diff --git a/images/flat_arrow_icon.png b/images/flat_arrow_icon.png new file mode 100644 index 0000000..2e6da86 Binary files /dev/null and b/images/flat_arrow_icon.png differ diff --git a/images/fluffy1.png b/images/fluffy1.png new file mode 100644 index 0000000..1f19355 Binary files /dev/null and b/images/fluffy1.png differ diff --git a/images/fluffy2.jpg b/images/fluffy2.jpg new file mode 100644 index 0000000..02d3e75 Binary files /dev/null and b/images/fluffy2.jpg differ diff --git a/images/up_arrow.png b/images/up_arrow.png new file mode 100644 index 0000000..9a237c8 Binary files /dev/null and b/images/up_arrow.png differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..00d754e --- /dev/null +++ b/style.css @@ -0,0 +1,105 @@ +/* Images make everything better! Well, depending what sort of images... */ +.header_image{ + width: 70px; +} +.small_icons{ + width: 12px; +} +.about_image{ + width: 125px; + float: left; + margin-right: 20px; + margin-left: 50px; + border-radius: 25px; +} +/* Making text look pretty :3 */ +h1{ + text-decoration-line: underline; + text-decoration-style: wavy; + text-decoration-color: coral; + font-size: 70px; + text-align: center; + font-family: 'Rubik', sans-serif; +} +h2 { + font-size: 40px; + margin-left: 50px; + margin-right: 50px; + text-align: left; + font-family: 'Rubik', sans-serif; + color: coral +} +a{ + color: coral; + text-decoration: none; + 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; +} + +/* Guess where this is */ +#font_correction{ + font-family: "Lato", sans-serif; + transition: all 5s; +} +#font_correction:hover{ + color: red; +} + +#bottom_text_uwu{ + text-align: center; + font-family: 'Open Sans', sans-serif; +} +#impotant_creature{ + font-weight: bold; + color: cadetblue; +} +/* I have no clue why I added this, but it's here! */ +#spotify_player{ + border-radius: 30px; + transition: all 0.1s; +} +#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; + 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; +} +#button:hover{ + color: white; + border-color: white; + border-radius: 10px; +} + +#button_row{ + position: center; + text-align: center; +} +#back_to_top{ + text-align: center; +} +/* Now all the site needs is some legs, hands and a head */ +body{ + color: white; + font-family: "Lato", sans-serif; + background: linear-gradient(to bottom,#253652,#354c73) +}