mentally ill prismo layout

Tags: adventure time, silly, simple, layout, layouts, white, dark, pink
Description:

Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by ANALOG666 (https://layouts.spacehey.com/layout?id=102150) -->

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-1/oth3.ani), url(https://cur.cursors-4u.net/others/oth-1/oth3.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/05/17/oth3-11.html" target="_blank" title="Cigarette"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cigarette" style="position:absolute; top: 0px; right: 0px;"/></a>


<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.postimg.cc/LXXBM0xP/ezgif-5-62acd84f4f.gif "); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</style>


<div style="float:  ; max-height: 400px; position: fixed; left: 1px; top: 9px; z-index: 200;">
<img src="https://i.postimg.cc/2yD162x7/2024-03-22-0oe-Kleki.png" width="200" height="200"/></div>





<div style="float:  ; max-height: 600px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="https://i.postimg.cc/zf5GRbbD/2024-03-21-0zr-Kleki.png" width="300" height="300"/></div>





<style>

nav .top .left .logo {
    filter: invert(2);
    width: 165px;
    height: 42px;
    content: url(https://i.ibb.co/WBsnBPw/07efab96-7ea2-4bed-8e21-17fe3958ef29.png);
}
</style>




<div class="snowflakes">
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/bcff4e6df5d273c6b12db01c2c091237/e66a2bf6682f9834-fc/s75x75_c1/23eab4fce80b03cba06a3b9b4c20132d230ee837.gif"/></div>
</div>

<style>
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

<style>
body{
   background:
url( https://i.pinimg.com/564x/79/93/37/799337ab45aacc3287fd03bfec241b37.jpg) fixed; background-size:cover;
}
.profile{
   background:
url(https://i.pinimg.com/564x/27/1e/68/271e6839e45097a0357c7cd546da0293.jpg ) fixed; background-size:cover;
border: 4px dotted #2f314a;
}
</style>

<style>
 :root{
  --logo-blue:black;
  --darker-blue:grey;
  --lighter-blue:black;
  --even-lighter-blue:#1b1b1c;
  --lightest-blue:#1b1b1c;
  --dark-orange:#7b6b87;
  --light-orange:#201f21;
  --even-lighter-orange:black;
}
</style>




<style>
footer {
background: black;
border: 2px dotted #2f314a;
}
</style>

<style>
  
</style>

<style>
.online{content:url("https://media1.tenor.com/m/2bQkIQfo8TwAAAAC/fionna-and-cake-prismo.gif ");
}
</style>




<style>
/* =============== Layout =============== */
/* https://www.w3schools.com/css/css_grid.asp */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template */


/* Contains both the left and right panels */
.profile {
  display: grid;
  grid-template:
    "left"
    "right";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* normally the width is 40%, try changing back to see why this
doesn't look good */
.profile div.col.w-40 {
  width: 100%;
}

/* left column */
.col.w-40 {
  grid-area: left;
  display: grid;
  grid-template:
    "general-about contact"
    "header  table1 "
    "url-info table2 "
    "mood     table2 ";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

/* Your title/Name */
h1 {
  grid-area: header;
}

/* Your picture/online status */
.general-about {
  grid-area: general-about;
}
/* Mood/blog/pics */
.mood {
  grid-area: mood;
}
/* contact */
.contact {
  grid-area: contact;
}
/* spacehey URL */
.url-info {
  grid-area: url-info;
}
/* General/Music/etc */
.table-section:first-of-type {
  grid-area: table1;
}
/* The other table */
.table-section:last-of-type {
  grid-area: table2;
}

/* right column stuff */
/* right */
.col.right {
  grid-area: right;
  display: grid;
  grid-template:
    "blurbs blog-preview"
    "blurbs friends"
    "comments comments"
    "comments comments";
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
/* contains "View Blog" Button */
.blog-preview {
  grid-area: blog-preview;
}

/* contains about me */
.blurbs {
  grid-area: blurbs;
}
/* Friends pictures grid */
.friends:not(#comments) {
  grid-area: friends;
}

/* comments */
#comments {
  grid-area: comments;
}

/* clears margins making grid-gaps more uniform
" > *" selects all child elements */
.profile > *,
.col.w-40 > * .col.right > *,
.profile .blurbs,
.profile .contact,
div.col.w-40.left div.table-section,
div.col.w-40.left div.url-info {
  margin: 0px;
}


</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.