Trisha

<style>
@import url('https://www.themonster.xyz/styles/fancy-fonts.css');
::-webkit-scrollbar{width:0.5vh;height:0.1vh;}
 ::-webkit-scrollbar-track{border-radius:0;background:transparent;}
 ::-webkit-scrollbar-thumb{border-radius:0;background:transparent;}


/*
The stream of text you see above is the portion of CSS that defines the source of the font, and below that with the 'webkit' tags are what establish whether or not the scrollbars are visible or not.
You can change their visibility by adding a hex color code in place of the word 'transparent'.
For example, background: #000; as opposed to background:transparent;
*/


body{
background: linear-gradient(to right, #f07592, #f794ac, #fa527b);
}

/*
This piece of code above covers the entirety of your profile. The 'Body' tag is one of the four base parts of a webpage, and more often than not will only be tampered with involving the background color and/or image.

If you'll look, you'll see that the background has been defined as a linear-gradient, this meaning that the color of the background gradually changes in a linear pattern. This is a favorite effect of mine, and it appears in a lot of my layouts, since it can give certain effects when applied in the right areas.

If you want to remove this effect, you can just delete the whole 'linear-gradient()' stream, and replace it with a single color code.
*/

#image{
position: fixed;
bottom: 5vh;
left: 15vw;
box-shadow: -1vh 1vh 1vh #000;
}

#image img{
height: 90vh;
}
/*
The most recent sections, both labeled 'image' are what define the placing and details of - you guessed it - the main image. The first block defines the positioning, and how far from the bottom and left it is, as well as the shadowing you see on your profile.
The 'img' bit is what defines the image itself. The top part defines the container for the image, but the img is the photo itself. This defines how tall the image is.
Sometimes you'll see formatting for an image where the entirety of the CSS for the image is one block. When the Image CSS is in this format, the designer, like myself, has to define both the height and the width of the image's container.
Having it in the format you see above makes it easier, as the container adjusts automatically to fit the image's height and width, depending on the height assigned.
*/

#box{
position: fixed;
padding: 1%;
overflow: auto;
background: radial-gradient(#ffc4d3, #ffc4d3, #ffd4df);
box-shadow: 1vh 1vh 1vh #000;
text-align: center;
height: 30vh;
width: 25vw;
right: 15vw;
bottom: 10vw;
text-shadow: 0 .25vh .75vh #000;
font-family: 'Gotham';
font-size: 2.25vh;
}

#title{
position: fixed;
text-align: right;
z-index: 5;
width: 25vw;
right: 15vw;
bottom: 46vh;
height: 20vh;
font-family: 'Ambar Pearl';
font-size: 7vh;
color: #fff;
text-shadow: .5vh .5vh .75vh #000;
}

h1{
font-family: 'Beautiful People';
font-size: 4vh;
color: #c28f3e;
}

/*
Now, the above blocks of CSS code determine the logistics of the box, the title, and the font in between.
Let's first look at the #box block.
The text in this block of text defines how it's positioned, sized, colored, and how the text inside is defined.
If you look at it from a perfectly logical standpoint, and read it as it is, it's quite simple to decipher just what does what.
The height controls the height of the box, width controls width of the box.
Now, looking at the multiple tags regarding font, I'm sure you're asking yourself 'where are these fonts coming from?'
If you'll recall, I had put a stream of text up top along the lines of '@import url(https://monsterdxyzpdq something or another.'
That is the link to The Monster's font page which they've put up for public use by way of that import URL. It links to a text page listing the multiple sourcings for all of the fonts on Deum's page. Deum being The Monster, of course.
*/



#credit {
z-index:1;
position:fixed;
height:20vh;
bottom:0%;
right: 1vw;
filter: drop-shadow(0 0 1vh #fff);
}




</style>

<div id="image">
<a href="https://imgur.com/a/zgbjw0B"><img src="https://i.imgur.com/SAWoqjw.jpg"></a>
</div>
<div id="title">Trisha</div>
<div id="box">
<h1>Header One.</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim eu turpis egestas pretium aenean pharetra magna. Massa id neque aliquam vestibulum morbi blandit. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Commodo ullamcorper a lacus vestibulum sed arcu non odio euismod.
</box>

<a target="_blank" href="https://roleplay.chat/profile.php?user=From+Shadows+Codes" target="_blank" title="Thanks so much for using this layout! Please inform me of any issues.">
<img src="https://i.imgur.com/4Lo0fbN.png" id="credit"/>
</a>