mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2025-01-15 02:35:13 +00:00
147 lines
3.2 KiB
CSS
147 lines
3.2 KiB
CSS
/* Images make everything better! Well, depending what sort of images... */
|
||
.header_image{
|
||
width: 6vw;
|
||
}
|
||
|
||
.small_icons{
|
||
width: 12px;
|
||
}
|
||
|
||
.about_image{
|
||
width: 125px;
|
||
float: left;
|
||
margin-right: 20px;
|
||
margin-bottom: 20px;
|
||
border-radius: 25px;
|
||
}
|
||
|
||
/* 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: all 0.1s;
|
||
}
|
||
a:hover{
|
||
font-weight: bolder;
|
||
color: white;
|
||
}
|
||
|
||
#introduction_to_fluffy,
|
||
#about_fluffy,
|
||
#more_on_fluffy,
|
||
#social_media{
|
||
font-size: 18px; /* font */
|
||
margin-left: 4vw; /* spacing */
|
||
margin-right: 4vw;
|
||
margin-bottom: 7vw;
|
||
}
|
||
|
||
#font_correction{
|
||
font-family: "Lato", sans-serif; /* font */
|
||
transition: all 5s; /* animation */
|
||
}
|
||
#font_correction:hover{
|
||
color: red;
|
||
}
|
||
|
||
#bottom_text_uwu{
|
||
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: orange;
|
||
}
|
||
|
||
#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;
|
||
margin: 0px 2vw;
|
||
}
|
||
|
||
#footer_button{
|
||
text-align: center;
|
||
}
|
||
/* Now all the site needs is some legs, hands and a head */
|
||
body{
|
||
color: white; /* font */
|
||
font-family: "Lato", sans-serif;
|
||
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";
|
||
}
|