My Layout

Below I am going to post my layout code. 
To change the background image you're going to want to grab an image or gif (I got mine from gifer) and then copy the image url and paste into the " body { " sectionon your layout code. (I have bolded it in the code below for you)


To change your header, you're going to want to find an image or gif ( I got mine from pinterest) and copy the "image address" (you get this by right clicking on the image) and paste that into the "{background image" section. (Also bolded for you)


If you want your text boxes to be colored, instead of transparent --

"main {
I'm not too sure on how to change the font just yet but if I figure that out, I'll let y'all know! If you'd like a video tutorial, send me a message on instgram @bug.stpaul and I'll help you out!



<style>

.profile .contact,

    .profile .url-info,

    .profile .table-section,

    .home-actions {

        border: green none;

    }

    table.details-table {

        border-collapse: collapse;

    }

    table.details-table td {

        background-color: transparent !important;

    }

    a.ditto-link {

        display: block;

        margin: 10px 0;

        color: #cc3e3e;

        font-size: 1.4rem;

        font-weight: bold;

        animation: blinker 1s linear infinite;

    }

    .profile-pic {

        border-radius: 500px;

        overflow: hidden;

    }

    .heading {

        padding: 5px 0 !important;

        margin-top: 15px;

        margin-bottom: 10px;

        background-color: transparent !important;

        color: #2a2a2a !important;

        border-bottom: 2px solid;

    }

   

    .container {

        border-radius: 15px 15px 0 0;

        overflow: hidden;

        margin-top: 30px;

        padding: 10px;

    }

    footer {

        border-radius: 15px;

        background: rgba(255, 255, 255, 0.94) !important;

        display: block !important;

    }

    table.comments-table td {

        background-color: !important;

    }

    .comments-table td:first-child img {

        width: 80px;

        border-radius: 500px;

    }

    .profile .friends .person img {

        border-radius: 500px;

    }

    .blog-preview p {

        font-size: 1.4rem;

    }

nav {

  overflow-x: hidden;

  position: relative;

}

nav .top {

  background: transparent;

}

nav .links {

  background: rgba(0, 0, 0, 0.3);

}

nav { background-image: url(https://i.pinimg.com/564x/49/be/c9/49bec989762fe115986841a82c74115d.jpg); }

body {

  /* sets background */

    background-image: url( https://i.gifer.com/7MpT.gif );

    background-repeat: repeat;

    background-size: 50% ;

  }

:root {

        --logo-blue: ;

        --darker-blue: darkseagreen;

        --lighter-blue: mediumseagreen;

        --even-lighter-blue: ;

        --lightest-blue: ;

        --dark-orange: seagreen;

        --light-orange: ;

        --even-lighter-orange: ;

        --green: darkgreen;

    }

main {

  /* changes made to stuff outside of columns */

    background: #EEE8;

    padding: 0;

    font-size: 90%;

    color: var(--light-orange);

  }

main {

  background-color: #FFFFFF;

  color: lawngreen;

}

.profile h1 {color: seagreen;}

body { 

font-family: monospace;

</style>