diff --git a/home.html b/home.html index 7a6e614..053b2fe 100644 --- a/home.html +++ b/home.html @@ -16,89 +16,101 @@ -

- Welcome to my Amazing website! - Poorly drawn image of Fluffy Bean -

+
+

Welcome to my Amazing website! + Poorly drawn image of Fluffy Bean +

+
-
-  Insert boring stuff here  -  About this smelly  -  Even more!  -  Stalk me!  - + -

Introduction

-
-

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 - - here! -

- -

The YouTube tutorial I used to learn most of the HTML and CSS from - - *click me* -

- -

Google site I used to get a bunch of icons and fonts from - - Icons - and - Fonts -

- -

Codepen! I used this to get some ideas for some parts of the website - - Special Text you can click -

- -

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 -

+
+

Introduction

+
+

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 + + here! +

+ +

The YouTube tutorial I used to learn most of the HTML and CSS from + + *click me* +

+ +

Google site I used to get a bunch of icons and fonts from + + Icons + and + Fonts +

+ +

Codepen! I used this to get some ideas for some parts of the website + + Special Text you can click +

+ +

I used this video to attempt to scale the site correctly to phones, sorta worked x3 + I'm on the grid! AAAAAA +

+ +

And thank you + Jeetix + 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! +

+
-

About meeeeeeeeeeeeeeeee

- Fluffy Bean on pink background -
-

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

+
+

About meeeeeeeeeeee

+ Fluffy Bean on pink background +
+

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

+
-

-

More!

-
-

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!

- +
+

More!

+
+

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!

+ +
-

Find me everywhere! Maybe even in places you wouldn't want to see me... :3

-
-

My instagram! Facebook now knows me better than I do You want to click me!

-

Twitter! The place all the arguments take place at You'll regret clicking me

-

Telegram, the messaging app unintentionally made for furries Fancy coral coloured text

-

Discord doesn't give links to profiles so you'll have to do this manualy... scary: Fluffy Bean#6969

+
+

Find me everywhere! Maybe even in places you wouldn't want to see me... :3

+
+

My instagram! Facebook now knows me better than I do You want to click me!

+

Twitter! The place all the arguments take place at You'll regret clicking me

+

Telegram, the messaging app unintentionally made for furries Fancy coral coloured text

+

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/style.css b/style.css index 00d754e..6546973 100644 --- a/style.css +++ b/style.css @@ -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; } -h2 { - font-size: 40px; - margin-left: 50px; - margin-right: 50px; + +header{ + margin-left: 4vw; /* spacing */ + margin-right: 4vw; +} + +h2{ + 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"; }