Needing help with decorating my profile

I've noticed some people have lovely layouts and such for their pages and I'd like to decorate my page too! Could anyone help me with that? I'd like a layout that's similar to https://status.cafe/users/mysardencut but I have no idea how to get started since everything is HTML-based and there are no options to choose from premade layouts. I'm pretty lost right now.

i went into 'view page source' for my profile and worked from that

here's a basic layout i made from that (if it lets me post it here)

<style>

• {cursor: url(urlhere), auto !important;}

body {

max-width: 680px;

padding: 5px;

font-family: ;

font-size: 8px;

color: #000;

background-color: #Fff;

background-image: url("urlhere");

background-repeat: repeat;

background-position: center;

}

a:link {

color: #000;

font-size: 10px;

text-decoration: none;

}

a:visited {

color: #000;

font-size: 10px;

text-decoration: none;

}

a:hover {

color: #fff;

font-size: 10px;

text-decoration-line: underline;

transition: all 0.2s ease-out;

}

a:active {

color: #000;

font-size: 10px;

text-decoration: none;

}

header {

top: 15px;

background-color: #FFF;

border: 1px solid #000;

padding-left: 8px;

padding-top: 2px;

padding-bottom: 4px;

font-size: 12px;

}

@media (min-width: 400px) {

.cols {

grid-template-columns: 1fr 2fr;

grid-gap: 10px;

margin-top: 10px;

font-size: 10px;

}

section {

background-color: #FFF;

border: 1px solid #000;

padding-left: 8px;

padding-right: 8px;

}

section:first-child {

height: 400px;

}

section:last-child {

height: 400px;

background-size: cover;

overflow-y: scroll;

}

</style>