My Current Layout!

Zoomed out preview:

As you can tell, there's some problems with text visibility but it mainly affects the interest subheadings so i personally don't really mind. :]

Feel free to take bits and pieces of the code because that what I did to make this :]

<style>

/*Background*/

body{background:url(https://img.freepik.com/premium-photo/black-white-photo-roses-with-white-background_854727-159423.jpg)

</style>

<style>

 .profile {

 background: url(https://i.etsystatic.com/33710523/r/il/c6ad1e/5395136360/il_fullxfull.5395136360_fq2v.jpg);

 }

</style>

<style>

  /*box backgrounds- blurbs*/

.profile .blurbs .heading,

.profile .friends .heading {background:url(https://i.pinimg.com/736x/0a/7b/5a/0a7b5ae2f882deb3dbc69ae42ba2a67a.jpg);}

.blurbs{background:url(https://media.istockphoto.com/id/1404199199/photo/beautiful-black-grey-bird-feathers-pattern-texture-background.jpg?s=612x612&w=0&k=20&c=NIRgxuHRpgeqLpK4jfU_jczzDHTP0HmxljpbjZtdV6U=);

}

</style>

<style>

/*Box Colors- Blue headings*/

.profile .contact .heading,

.profile .table-section .heading{

background:url(https://i.pinimg.com/736x/0a/7b/5a/0a7b5ae2f882deb3dbc69ae42ba2a67a.jpg);

}

  /*box background- Interests lists & links*/

.details-table td{

background:url(https://t4.ftcdn.net/jpg/06/18/53/25/360_F_618532500_jSoNXZOwh9M4tUgRlsTlAJV3xElzWV4i.jpg);

opacity: 0.8;}

  /*box backgrounds- Interest & links subheadings*/

.details-table td:first-child{

  background:url(https://media.istockphoto.com/id/1404199199/photo/beautiful-black-grey-bird-feathers-pattern-texture-background.jpg?s=612x612&w=0&k=20&c=NIRgxuHRpgeqLpK4jfU_jczzDHTP0HmxljpbjZtdV6U=);

opacity: .9;}

</style>

<style>

.container {

width: 90%;

max-width: 1000px;

}

footer{

width: 100%;

max-width: 1000px;

}

</style>

<style>

nav .top{background-image:url(https://media.istockphoto.com/id/1404199199/photo/beautiful-black-grey-bird-feathers-pattern-texture-background.jpg?s=612x612&w=0&k=20&c=NIRgxuHRpgeqLpK4jfU_jczzDHTP0HmxljpbjZtdV6U=);}

nav .links {

background-image:url(https://media.istockphoto.com/id/1404199199/photo/beautiful-black-grey-bird-feathers-pattern-texture-background.jpg?s=612x612&w=0&k=20&c=NIRgxuHRpgeqLpK4jfU_jczzDHTP0HmxljpbjZtdV6U=);}

.comments-table td {

background: rgb(0,0,0,0.6);}

footer {background-image:url(https://media.istockphoto.com/id/1404199199/photo/beautiful-black-grey-bird-feathers-pattern-texture-background.jpg?s=612x612&w=0&k=20&c=NIRgxuHRpgeqLpK4jfU_jczzDHTP0HmxljpbjZtdV6U=)}

.profile .table-section {

border: dotted 3px black;

  border-radius: 15px;}

.comments-table td {

background: rgb(0,0,0 0.7);}

.profile .contact{

background:url(https://t4.ftcdn.net/jpg/06/18/53/25/360_F_618532500_jSoNXZOwh9M4tUgRlsTlAJV3xElzWV4i.jpg);

  opacity: .8;

border: dotted 3px black;

  border-radius: 15px;}

.profile .url-info {

border: dotted 3px black;

  border-radius: 15px;}

.friends{

border: dotted 3px black;

  border-radius: 15px;}

.blurbs{

border: dotted 3px black;

  border-radius: 15px;}

</style>

<style>

/*rounded corners*/

.profile .blurbs .heading,

.profile .friends .heading{

  border-radius: 9px

}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{

  border-radius: 9px 9px 9px 9px;

}

</style>

<style>

/*Text- Blue box headers*/

@import url('https://fonts.cdnfonts.com/css/biergarten?styles=9680');

h1, h3 , h4, h5, .url-info b{font-family: 'Bierg', sans-serif;

font-size: 20px;

letter-spacing: 2px;

-webkit-text-stroke-width: .04px;

  -webkit-text-stroke-color: black;

}

h1, h3 , h4, h5, .url-info b{color: #d00606;}

/*Links*/

a {

     color: #942929;

}

/*Normal text*/

p, h2 {

     color: red;

}

/*About Me and Who Id Like to Meet*/

.blurbs .inner .section:first-of-type h4{

color: #9c0101;

}

.blurbs .inner .section:last-of-type h4{

color:#9c0101;}

</style>

<style>

@import url('https://fonts.cdnfonts.com/css/sibila');

p, h2 {font-family: 'Sibila', sans-serif;

font-size: 17px;

letter-spacing: 1px;

-webkit-text-stroke-width: .6px;

  -webkit-text-stroke-color: black;

}

</style>

<style>

p.online {font-size: 0px;}

p.online::after{content: "🥀 I'M ONLINE";

color: black;

font-size: 15px;

-webkit-text-stroke-width: 0px;

  -webkit-text-stroke-color: ;

</style>

<style>

img:hover {

  animation: shake 0.5s;

  animation-iteration-count: infinite;

}

@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

</style>

<style>

/*intro animation*/

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExbmdleDFlMmY5eDhoamd3YXozemVyZDk2MzB2dTV2YzVybndtdGk4YyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/7LvNO2XoCLOzm/giphy.webp);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 3s ease 0s 1 normal forwards;

pointer-events: none;

}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

<style>

:root {

--logo-blue: url(https://media.istockphoto.com/id/1404199199/photo/beautiful-black-grey-bird-feathers-pattern-texture-background.jpg?s=612x612&w=0&k=20&c=NIRgxuHRpgeqLpK4jfU_jczzDHTP0HmxljpbjZtdV6U=);

--darker-blue:black;

--lighter-blue:#4f0074;

--even-lighter-blue:#b287f3;

--lightest-blue: red;

--dark-orange: blue;

--light-orange:#4a3f3f;

--even-lighter-orange:#2c0141;

--green:black;

}

</style>

<style>

/*Banner*/

main:before {

width: 100%;

height: 170px;

display: block;

content: "";

background-image: url(https://i.pinimg.com/736x/10/55/28/105528d825d12210613c696e3806c319.jpg);

background-position: center center;

background-size: cover;

}

@media only screen and (max-width: 600px) {

main:before{

height: 200px;

}

}

</style>

<style>

.profile-pic img{

-webkit-mask-image: url(https://i.postimg.cc/yN0kDxpg/pfpborder.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;

}

</style>

<style>

html:before {

  animation: grain 8s steps(10) infinite;

  background-image: url(https://motionarray.imgix.net/2503532-EldgicMFqh-high_0005.jpg);

  content: "";

  height: 300%;

  left: -50%;

  opacity:.1;

  position: fixed;

  top: -110%;

  width: 300%;

  pointer-events:none;

}

@keyframes grain {

  0%, 100% { transform:translate(0, 0) }

  10% { transform:translate(-5%, -10%) }

  20% { transform:translate(-15%, 5%) }

  30% { transform:translate(7%, -25%) }

  40% { transform:translate(-5%, 25%) }

  50% { transform:translate(-15%, 10%) }

  60% { transform:translate(15%, 0%) }

  70% { transform:translate(0%, 15%) }

  80% { transform:translate(3%, 35%) }

  90% { transform:translate(-10%, 10%) }

}

</style>

<style>

}

.contact .inner a img {

    font-size: 0;

}

.contact .inner a img:before {

    font-size: 1em;

    display: block;

 }

    .contact .inner a img {

        font-size: 0;

    }

    .contact .inner a img:before {

        font-size: 1em;

        display: block

    }

    .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {

    /* add to friends */

    content: url("https://gifs.crd.co/assets/images/gallery22/415d0c10.gif")

    }

    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

    /* add to favorites */

    content: url("https://gifs.crd.co/assets/images/gallery25/f4ac7993.png")

    }

    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

    /* send Message */

    content: url("https://gifs.crd.co/assets/images/gallery25/cc152050.gif")

    }

    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

    /* forward to friend */

    content: url("https://gifs.crd.co/assets/images/gallery24/3ff2fc91.gif")

    }

    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

    /* instant message */

    content: url("https://gifs.crd.co/assets/images/gallery25/5a37df2e.gif")

    }

    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

    /* block user */

    content: url("https://supplies.ju.mp/assets/images/gallery04/8cfbe7b8.png")

    }

    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

    /* add to group */

    content: url("https://watermelon.crd.co/assets/images/gallery05/d52d9690.gif")

    }

    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

    /* report user */

    content: url("https://watermelon.crd.co/assets/images/gallery05/04baf863.gif")

    } </style>

<style>

/*Custom Cursor*/

* {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=183742), auto !important;}

</style>