Report Blog Entry
DO NOT DELETE THIS SENTENCE PLS
*nom!* Anyways, lets start off with the body of your layout. Now, its time for where it says main {. Under main, there is section that says "background color". This is not the same background image we spoke about earlier. This is the same as where you are reading this text; where its a dark lavender color. This will hold everything in your profile. Anyways, search color picker on google, and then start trying to find a cute color for your profile. But if you want a specific color, and you have an image of that color, go to HTML color picker and open that cute lil file from your computer! Now, you can use a # color type, or a rgba color type. or a rgb color type. There are alot of color types. So copy and paste that color to replace where it says "rgba(219, 232, 245, 0.8)". Next, lets pay attention to where it says border radius. If you look at the screen surrounding this, you can see a black border. If you change border radius, the corners of the border will change. It will be sharp, or bended. I prefer bended, but you can prefer whatever you want. Next, look at border. If you want a plain white border, you can keep it at white. If you want a different color, then pull up the color picker websites i previously mentioned, and replace "white" with that color. Now look at where it says "5px". Do you want the border to be bigger? Skinnier? Then decrease or increase the color. Go to where it says double. Do you not want there to be two borders? remove double. Want there to be more than double? put whatever word that come after double. Now, is the border color the wrong color? even after you changed it to the prefered one, like i said? Go down to the next section, where it says "color". Copy and paste (Ctrl+V) the color, and that should remove where it says "white". make sure not to remove the ";". Now go to height. Do you not like the height? Want it bigger? Smaller?.. okay, then change it. Go down to width. It originally says 'auto'which i reccomend to keep, but if you dont want to: change it to "900px" or whatever number you want it to be. Just keep px. Padding.. I'm not sure what it is: but i think its to control how far the contents inside your border is. Like, your profile, and your blurb section. I could be wrong.
(please dont straight up copy the layout below, just copy it, paste it, and then change the stuff in it. Don't just copy it, and then use it. lmao.)
Look at code under this as you read.
Under body {, is where there is a text reading backround url, filll that in with a image link. You can do that by right clicking on your prefered image, pressing "open in new tab" and then by going over to the link on the top of your screen, you can copy the url by pressing Ctrl+c at the same time. Then go to the code below, remove where it says "link" and then copy and paste the link by pressing Ctrl+v at the same time. Make sure not to remove the ();, or else it wont work. If your image is too small, it will look as though its repeating itself, or is has a empty void surronding it. Fix this by going to background size, where it says "1500px" and start to raise or lower the number. repeatedly check you layout while doing this, so you know your getting your prefered size. Fyi, if you dont want the text to be centered, put left or right where it says centered.
Now, lets go to ".profile .blurbs .section p {". Don't like how big, or small the blurbs section is? Change where it says "20px." Don't like the color? Change where it says "rgba(255, 225, 241, 0.8)".
Second to last, if you go to my profile, You can see a gif of cinnamonroll? If you dont want that, then delete where it says ".profile .url-info {" to "display: yes;
}" and that should get rid of it. Do you want that, but with a different gif / img? Then copy the url of the image, and then paste it to remove "https://media1.tenor.com/m/OczjDy0QFKkAAAAd/sanrio.gif". Do you not want a border on this image? Okay, set the border px to 0. Want to keep the border, but not the way its doubled? Remove where it says doubled, or put single. Don't like the color of the border? Okay. Change where it says white, and put your color in.
Want a different font? Change the url. Want a different font family for your new font? change where it says righteous, and put the font family name. Doesn't work? replace where it says cursive, and put whatever the font actually is. Don't like the size? Change the font-size.
Don't like the color of the blurbs? [not the font color,but the color behind the font]? then change it.
<style>
body {
background: url(link);
background-size: 1500px;
background-position: center;
backdrop-filter: invert(0);
text-align: center;
overflow: hidden;
}
main {
background-color: rgba(219, 232, 245, 0.8);
border-radius: 50px;
border: white 5px double;
color: white;
height: 980px;
width: auto;
padding: 10px;
overflow: auto;
}
nav .top,
nav .links,
footer {
background-color: transparent;
}
.profile .blurbs .heading,
.profile .friends .heading,
.profile .contact .heading,
.profile .table-section .heading {
background: none;
}
.profile .blurbs .section p {
border-radius: 20px;
background: rgba(255, 225, 241, 0.8);
}
.profile .blurbs .section h4 {
display: yes;
color: white;
}
.profile .contact,
.profile .table-section {
border: white 5px double;
}
.comments-table td:first-child,
.comments-table td,
.comments-table {
border: none;
background: none;
}
.details-table,
.details-table td:first-child {
border: none;
background: none;
}
.details-table td {
border: none;
border-radius: 20px;
background: rgb(255, 225, 241, 0.8);
}
.profile .url-info {
background-image: url(https://media1.tenor.com/m/OczjDy0QFKkAAAAd/sanrio.gif);
background-position: -1500px;
background-size: 300px;
font-size: 0;
height: 150px;
border: white 5px double;
text-align: center;
display: yes;
}
.mood p:first-child {
display: yes;
}
<style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
body{font-family: 'Righteous', cursive;;
font-size: 16px;}
.profile .blurbs .section p{
color: #4b5972;
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )