.
If you like this style, you can use it in your profile, BUT at least, ADD ME or COMMENT BELOW and give me some kudos! I spent time for making this layout!!!
Credits are appreciated (a post, a bulletin or something else that can support me)
You have permission to use this for your Layout only, you don't have permission to post elsewhere without giving a link to the original crediting me
<style>
footer {
border-radius: 15px;
background-image: url(https://i.pinimg.com/originals/43/77/7a/43777aabdfd50ec9184e63cb07919f62.gif);
</style>
<style>
table {
border-spacing: 8px;
width: 100%;
background-image: url(https://i.pinimg.com/originals/43/77/7a/43777aabdfd50ec9184e63cb07919f62.gif);
</style>
<style>
body:before {
content: " ";
height: 50vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
background-image: url('https://i.pinimg.com/originals/43/77/7a/43777aabdfd50ec9184e63cb07919f62.gif');
z-index: 100;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
animation: doorUp 3s ease 0s 1 normal forwards;
pointer-events: none;
}
body:after {
content: " ";
height: 50vh;
width: 100vw;
display: block;
position: fixed;
bottom: 0;
left: 0;
background-image: url('https://i.pinimg.com/originals/43/77/7a/43777aabdfd50ec9184e63cb07919f62.gif');
z-index: 100;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
animation: doorDown 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes doorUp { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,-50vh); } }
@keyframes doorDown { 0.0%{ } 75%{ transform: translate(0,0); } 100%{ transform: translate(0,50vh); } }
<style>
:root {
--topic1: "Intro";
--topic2: "🎤🎧🎵";
--topic3: "Movies/TV Shows";
--topic4: "Things I like";
--topic5: "Books/Writers";
--topic6: "Misc";
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}
.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px pink !important;
filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6);
}
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://media1.tenor.com/images/9d47bdd4551877a39a7c29a870f98855/tenor.gif?itemid=15212149');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&display=swap');
*{
color: pink ;
}
Body{
background-color:ffffff;
background-image:url(https://images.squarespace-cdn.com/content/v1/55bd282ee4b0681497f83470/1546284406938-V59XZX9MM0DHMZS71FT3/ke17ZwdGBToddI8pDm48kDb8KzzF6BlGaXkZSOcDU7BZw-zPPgdn4jUwVcJE1ZvWhcwhEtWJXoshNdA9f1qD7ZLZV9jqlBnedHoWlUQpM3VFvT4a4lm2AbTKyIPZjfCiYHHPq0m3LKL0MmGOi0svTA/IMG_4330.gif);
background-position:Bottom Left;
background-attachment:fixed;
background-repeat:repeat;
}
</style>
<style>
h1, h2, h3, h4, h5, a, p, nav label, .section{
font-family: var(--font-family) !important;
text-shadow: !important;
text-transform:!important;
}
h1, h2, h3, h4,h5,a, p, nav label, .section {color: #A941B0;}
h1 {
color: #f994ff ;
text-shadow: 1px 1px 2px black, 0 0 25px yellow, 0 0 5px yellow;
}
table, th, td {
border: 1px solid #f994ff ;
}
:root {
--logo-blue: #A941B0;
--darker-blue: ;
--lighter-blue: #A941B0;
--even-lighter-blue:#A941B055 ;
--lightest-blue:#A941B055 ;
--dark-orange: purple;
--light-orange:#A941B055 ;
--even-lighter-orange:#A941B055 ;
--green: Aliceblue;
}
main {
/* sets background */
background-image: url(https://i.pinimg.com/originals/8d/54/90/8d5490a9896c79c96537a6f7df1210f9.gif);
background-repeat: repeat;
background-size: 50% ;
}
</style>
<style>
.search-wrapper input[type=text] {background-color: pink !important;border: 1px solid 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(15, 0, 0, 0.5) !important;color:var(--headers) !important;}
.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
border: green none;
}
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;
}
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;
}
</style>
<style>
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div > div > a { visibility: hidden; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner { margin: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(1) > div:nth-child(1) > a { content:url("https://media3.giphy.com/media/dCERkihZ9m7xjIvSau/giphy.gif"); visibility: visible; height: 30px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(1) > div:nth-child(2) > a { content: url("https://cdn.pixabay.com/photo/2016/08/29/13/55/heart-1628313_960_720.png"); visibility: visible; height: 30px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(2) > div:nth-child(1) > a { content: url("https://www.kindpng.com/picc/m/185-1853706_purple-envelope-icon-hd-png-download.png"); visibility: visible; height: 20px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(2) > div:nth-child(2) > a { content: url("https://icons.iconarchive.com/icons/graphicloads/100-flat-2/256/arrow-forward-icon.png"); visibility: visible; height: 20px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(3) > div:nth-child(1) > a { content: url("https://i.pinimg.com/originals/df/d0/b0/dfd0b0f00a35b820aa28aa22e3c2782f.gif"); visibility: visible; height: 30px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(3) > div:nth-child(2) > a { content: url("http://www.skamu.com/free-icons/gothic/images/sign018.gif"); visibility: visible; height: 30px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(4) > div:nth-child(1) > a { content: url("https://i.pinimg.com/originals/99/69/d2/9969d2bc836ee216a3319d0c15d8ad35.gif"); visibility: visible; height: 30px; width: 32px; }
body > div.container > main > div > div.col.w-40.left > div.contact > div.inner > div:nth-child(4) > div:nth-child(2) > a { content: url("https://66.media.tumblr.com/0121952107dcbc3e73e79001c35c8171/a0304b6053744dc7-d6/s540x810/fdf3207069b0160b57e9d507af2489dcd093f544.gif"); visibility: visible; height: 30px; width: 32px; }
#comments > div.inner > table > tbody > tr > td > p.report > a { visibility: hidden; }
#comments > div.inner > table > tbody > tr > td > p.report > a { content: url("https://i.pinimg.com/474x/1a/ec/1c/1aec1cd8c5262a3c3d5b686968806e88.jpg"); visibility: visible; height: 30px; width: 32px; float: right; }
</style>
<style>
.online{content:url("http://dl5.glitter-graphics.net/pub/369/369195adsuu9rgnl.gif");}
.friends-grid {
visibility:hidden; display:none;
}
.friends {
overflow: scroll;
overflow-x: scroll;
overflow-x: hidden;
height: 300px;
}
</style>
<style>
.comment-replies {border:5px dotted #FF00FF};
</style>
<style>
/* Hide the friends-grid */
.profile .blurbs .heading {
display:none !important;
}
.friends-grid {
display: none;
}
.top-eight {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, [col] auto ) ;
grid-template-rows: repeat(2, [row] auto );
background-color: transparent;
color: pink;
margin: 0px;
width: 100%;
}
.top-eight-header {
grid-column: col 1 / span 4;
grid-row: row 1;
background-color: rgb(19, 97, 118);
color: rgb(240, 104, 103);
font-weight: bold;
padding: 0px !important;
}
.top-eight-header p {
padding-bottom: 0px !important;
margin-botton: 0px;
}
.one-four{
grid-column: col 1 / span 4;
grid-row: row 2;
}
.five-eight{
grid-column: col / span 4;
grid-row: row 3;
}
.profile .blurbs .section p {
font-size: 15px;
text-align: center;
}
.profile .top-eight .person img {
border-radius: 50%;
width: 50px;
height: 50px;
}
.profile .blurbs .section h4 {
display: none;
}
</style>
<style>
.details-table{
display: block;
height: 200px;
overflow-y: scroll;
}
.<div style="height:200px;overflow-y:scroll;background-color:#00000055;color:#FFFFFF55;">
</style>
Comments
Displaying 3 of 3 comments ( View all | Add Comment )
Tatiana Erickson
I used some of this to add different font colors! Thank you so much! So cute !!! :)
Report Comment
Thank you
by Katie; ; Report
Devyn Kathleen
oh my gosh its soon cute!! Thank you! I'm using it right now.
Report Comment
~neeSkeee**<3~
you make the cuuuutest layouts! trying them all out. SERIOUSLY THANK YOUUU! I used to be able to do this when i was younger back on m-space. Now, im completely clueless! lol thanks again, you rock
Report Comment
Thank you!
by Katie; ; Report