Katie's profile picture

Published by

published
updated

Category: Art and Photography

Cute Kawaii layout


.
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>
 


21 Kudos

Comments

Displaying 3 of 3 comments ( View all | Add Comment )

Tatiana Erickson

Tatiana Erickson's profile picture

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

Devyn Kathleen 's profile picture

oh my gosh its soon cute!! Thank you! I'm using it right now.


Report Comment

~neeSkeee**<3~

~neeSkeee**<3~ 's profile picture

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