Published by Morgan Madewell

published 1611330051
updated 1611334881

View Blog View Profile Report Blog Entry

FRIDAY THE 13th LAYOUT

So unlike all my other layouts this is a two part code with a tad bit more complexity. I recommend opening a new tab so you can have this open while you place the codes. Follow along with me! :)

Step 1,

Copy the code below and place it before any and all text you have written about yourself in your "About Me." This code is set to a height of 120px. This height is perfect for me, I don't have too much stuff written about myself but if you have a large amount of text in your about me and images, you may want to increase this number.

<div style="width: 400px; height: 120px; background-color: black; border-color: #red; border-width: 1px; border-style: dotted; color: #000000; font-size: 11px; overflow: auto;"><p>

***HERE IS WHERE YOU PLACE ALL YOUR ABOUT ME STUFF******

</div>

Step 02,

Now place this code at the end of your about me.

</div>

Step 3,

Last and final step! This is the layout code. It goes in your "Who I'd Like To Meet"

<style>

.search-wrapper input[type=text] {background-color: rgba(0, 0, 0, 0.5) !important;border: 1px dotted var(--headers) !important;color:var(--names) !important;border-radius: 10px !important;}

button{border-radius: 10px !important;border: 1px dotted var(--headers) !important;font-family: var(--font-family) !important;background-color:rgba(0, 0, 0, 0.5) !important;color:var(--headers) !important;}

.contact {

border-radius: 25px;

background: url();

background-position: left top;

background-repeat: repeat;

padding: 20px;

width: 200px;

height: 150px;

}

.profile-info {

border: 0px solid rgb(255, 0, 0);

display: flex;

align-items: center;

justify-content: center;

padding: 15px 5px;

margin-bottom: 10px;

background-image:url(https://64.media.tumblr.com/d265536c391bb43c0d821e65f5705d01/da0cdc9b5ff2b70c-a5/s400x600/0f4a44738e5de110a134bcff58e758553c2fbd84.jpg);

background-repeat: no-repeat;

}

table, tr, td {

background-color:transparent;

}

table, tr, td {

background-color:transparent;

border:none;

border-width:50px;

}

table table table {

width:80%; max-width:600px; } table table table table { width:100%;;

}

body, .bodyContent {

background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4bbe8074-2a1d-460c-a989-3a573b6014cb/de7m7g8-1523c461-ea59-404c-8b1f-9e1631c309f0.png/v1/fill/w_822,h_972,q_70,strp/jason_by_sgtmadness_de7m7g8-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xNTEyIiwicGF0aCI6IlwvZlwvNGJiZTgwNzQtMmExZC00NjBjLWE5ODktM2E1NzNiNjAxNGNiXC9kZTdtN2c4LTE1MjNjNDYxLWVhNTktNDA0Yy04YjFmLTllMTYzMWMzMDlmMC5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.uKMnkb2-Umz8W4ge2FY7q-7Ch2A4ib_Visnr5G7blI4);

background-position:fulltile;

background-attachment:fixed;

border-color:#00000000;

border-width:30px;

border-style:dotted;

scrollbar-face-color:#00000000;

scrollbar-highlight-color:#aaaaaa;

scrollbar-3dlight-color:000000;

scrollbar-shadow-color:#aaaaaa;

scrollbar-darkshadow-color:000000;

scrollbar-arrow-color:#aaaaaa;

scrollbar-track-color:000000;

}

table table {

border:0px;

}

table table table table {

border:#aaaaaa;

background-image: none;

background-color:transparent;

}

table table table {

border-style:#aaaaaa;

border-width:none;

border-color: transparent;

background-attachment:fixed;

}

table table table td {

background-color: #e3242b; }

table, tr, td, li, p, div,.text,.redtext, .blacktext12 {

color:#e3242b;

}

.whitetext12, .orangetext15 {

color: red;

}

.lightbluetext8, .blacktext10, .redbtext,.btext {

color:#FF3403;

}

.nametext {

color: #FF3403;

}

a:active, a:visited, a:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:link, a.navbar:active, a.navbar:visited, a.navbar:link, a.redlink:active, a.redlink:visited, a.redlink:link {

color: #880088;

}

a:hover, a.searchlinksmall:hover, a.navbar:hover, a.redlink:hover {

color: #e3242b;

}

</style>

<style>

nav {

overflow-x: hidden;

position: relative;

}

nav .top {

background: #000000;

}

nav .links {

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

}

nav { background-image:transparent; }

body {

/* sets background */

background-image: transparent;

background-repeat: repeat;

background-attachment: fixed;

background-size: 60% ;

}

:root {

--logo-blue: #FF7537;

--darker-blue: #000000;

--lighter-blue: #000000;

--even-lighter-blue: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FptbUFNalAnoQw%2Fgiphy.gif&f=1&nofb=1);

--lightest-blue: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FptbUFNalAnoQw%2Fgiphy.gif&f=1&nofb=1);

--dark-orange: #000000;

--light-orange: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.makeagif.com%2Fmedia%2F6-04-2015%2FKx_Uzy.gif&f=1&nofb=1);

--even-lighter-orange: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.giphy.com%2Fmedia%2FptbUFNalAnoQw%2Fgiphy.gif&f=1&nofb=1);

--green: #000000;

}

main {

/* changes made to stuff outside of columns */

background: #ffffff;

padding: 0;

font-size: 100%;

color: var(--light-orange);

}

img {

opacity: none;

}

main {

background-image:url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/1d74eadc-f0d2-4fd8-b139-1628779cfe25/daya5bz-02cfc298-bda7-40ab-bc06-48f6905edb4e.png/v1/fill/w_791,h_1011,q_70,strp/friday_night_terror_by_dandingeroz_daya5bz-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3siaGVpZ2h0IjoiPD0xMTMyIiwicGF0aCI6IlwvZlwvMWQ3NGVhZGMtZjBkMi00ZmQ4LWIxMzktMTYyODc3OWNmZTI1XC9kYXlhNWJ6LTAyY2ZjMjk4LWJkYTctNDBhYi1iYzA2LTQ4ZjY5MDVlZGI0ZS5wbmciLCJ3aWR0aCI6Ijw9ODg2In1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.DX6rkMKIDtNKXTSmNaj_RKqnbuJ9Wr8MFq2XCJAP3aI);

opacity: 0.8;

color: #ecd6c2;

}

.profile h1 {color: #900d09;}

body {

font-family: monospace;

</style>

2 Kudos