A Cat (and blue) Lover Layout!!

Tags: cats kitty heaven blue cute lovely gato gatos
Description:

Hii! This is my first Layout! Oh, if you don't want the music, you can just go to the "about me", where will you put the layout code, and press Crtrl + F, now search for: "https://www.youtube.com" Now, just delet the first "
Preview:

click on the image for a larger preview
Code:

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

<div style="float:  ; max-height: 100px; position: fixed; left: 13px; top: 12px; z-index: 200;">
<img src="https://media.tenor.com/wCf-QCRfwmkAAAAi/%D0%BA%D0%BE%D1%82%D0%B8%D0%BA-playing-guitar.gif" height="100"/></div>
<style></style>

<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;">
<img src="https://media.tenor.com/wYX-3ET5qrEAAAAi/cat-dancing.gif" width="200" height="200"/></div>


<div style="float:  ; max-height: 400px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="https://64.media.tumblr.com/984e8c2dfb5e950618dedba9f7ddaca9/c1d6ff4173b9ca5c-f1/s100x200/d4e88eaea7a4c73e76452fa283603d1086b4a796.gifv" width="150" height="150"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/588KWuXVAFA//?&;amp;;autoplay=1&;loop=1&;controls=1&quot;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<div style="float:  ; max-height: 200px; position: fixed; left: -550px; top: -115px; z-index: 00;"><a href="https://spacehey.com/lunikk"><img src="https://i.postimg.cc/hPrygLK1/cdcaca82022e61be69663a5e589f0c35-removebg-preview.png" title="&lt;3" width="auto" height="165"/></a></div>

<div style="float:  ; max-height: 200px; position: fixed; right: -245px; center: -5px; z-index: 200;"><img src="https://gifcity.carrd.co/assets/images/gallery121/e6598212.png?v=4415fedf" width="180" height="auto"/></div>


<style>
@font-face {
font-family: sant joan; src: url(https://dl.dropbox.com/s/iwvkrg8ccgd1pf4/SantJoanDespi-Regular.otf);}

 
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

 
 .col, main, footer, nav::before, .online, nav .links, nav .top, .container {
  animation: float 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
 .col, main, footer, nav::before, .online, nav .links, nav .top, .container {
  animation: float 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

 @keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
  }
}

   body {
 background-color: #f9dae9;
 background-image: url('https://i.pinimg.com/564x/6b/96/38/6b96382dac2c06dfa5907b532d6b7d10.jpg');
 background-attachment: fixed;
 background-size: cover;
 font-family: 'courier new';
}
   .container{
 padding-top: 30px;
 width: 850px;
 text-align: center;
}
   main {
 background-color: rgb(124 185 232 / 50%);
 box-shadow: 0 0 7px black;
 padding: 15px;
}

 ::-webkit-scrollbar {
   width: 15px;
}
 ::-webkit-scrollbar-track {
   background: rgb( 0 0 0 / 0% );
}
 ::-webkit-scrollbar-thumb {
   background-color: #212121;
   border-radius: 10px;
   border: 3px groove #ffffff;
}
 ::-webkit-scrollbar-thumb:hover {
   background: gray;
   box-shadow: 1px 1px 9px white;
}
  
  img:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite; }

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

   nav .top {
 background-color: transparent;
 background-image: url('https://i.pinimg.com/564x/8a/8c/4f/8a8c4f12ba326f3c545cb8ba902a3a21.jpg');
 background-size: cover;
 background-position: center;
 box-shadow: 0 0 10px black;
 border: 1px solid black;
 height: 145px;
 padding: 53px;
}
   .logo {
 content: url("https://64.media.tumblr.com/df0a7c36bdb9cd682f24177dee270d4b/ae81b69156002fc7-de/s400x600/2956c31014f407da772d2b7eef648a4d53dce651.gifv");
}
   .top label, .top button {
 color: white !important;
}
    .top input {
 color: white !important;
 background-color: black !important; 
}
   button, input {
 font-family: 'courier new';
 overflow: visible;
 background: black;
 border: 1px solid pink;
 box-shadow: 0 0 10px pink;
}
   .logout-btn, .logout-form {
 color: white;
 display: inline-block;
 font-size: 100%;
 font-family: 'courier new';
 box-shadow: none;
}
   .top a {
 color: white !important;
 font-weight: bold;
}
   .top a:hover {
 color: red !important;
 text-decoration: none !important;
 text-shadow: 1px 1px 3px red, 0px 0px 5px black;
}
 nav .links li .icon {content: url('https://gifcity.carrd.co/assets/images/gallery11/44d1b015.gif?v=26dffab5');
}
   nav .links {
 background-color: transparent;
 background-image: url('https://gifcity.carrd.co/assets/images/gallery39/6130186d.gif?v=5bf8fcf7');
 background-size: cover;
 text-align: center;
 margin-bottom: 1em;
}
    .links a {
 color: white !important; 
 font-weight: bolder !important;
}
    .links a:hover { 
 color: black !important; 
 text-decoration: none !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 2px black, 1px 0px 5px white;
}
   .contact .heading, .table-section .heading , .blurbs .heading , .friends .heading {
 font-family: Sant Joan;
 font-size: 15px;
 font-weight: bolder;
 background: linear-gradient(#300809, #5f0c0e, #b41010) !important;
 box-shadow: 0px 0px 5px 1px white;
 margin-bottom: 15px;
 text-align: center;
}
   .heading h4 {
 color: black !important;
 text-shadow: 0px 0px 3px white, 1px 1px 5px white;
}
   .general-about {
 color: white !important;
 padding: 10px 10px 14px 10px;
}
   .online {
 padding-top: 5px;
 margin: auto;
 content:url('https://gifcity.carrd.co/assets/images/gallery85/77459acf.png?v=5bf8fcf7');
}
   h1{
 color: white;
 font-family: Sant Joan;
 font-size: 30px! important;
 text-shadow: 1px 1px 3px black;
}
   .profile-pic {
 position: relative;
 width: 180px;
}
      .profile-pic img {
 max-width: inherit;
 box-shadow: 0px 0px 10px black;
}

     .contact {
 background-image: url('https://64.media.tumblr.com/be7583fdc8deaea662c35ba8caeba42e/e16d9c3fd8438e13-7e/s250x400/0991ba283b956b7a05feeb63c6add0dfc200123b.gifv');
 background-position: center;
 background-size: cover;
 box-shadow: 0px 0px 10px black;
 border: 1px solid black !important;
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 text-shadow: 1px 1px 5px black;
 margin: 10px auto;
}
    .contact a {
 color: black !important;
 text-decoration: none;
}
    .contact a:hover {
 color: pink !important;
 text-shadow: 1px 1px 2px black, 1px 0px 5px white;
}
 .contact .inner a img {
    font-size: 0;
}
 .contact .inner a img:before {
    font-size: 1em;
    display: block
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
 /* Add to Friends */
 content:url("https://gifcity.carrd.co/assets/images/gallery31/d5b44a43.gif?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
 /* Add to Favorites */
 content:url("https://gifcity.carrd.co/assets/images/gallery148/c0701a74.png?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
 /* Send Message */
 content:url("https://gifcity.carrd.co/assets/images/gallery75/b4e367b4.gif?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
 /* Forward to Friend */
 content:url("https://gifcity.carrd.co/assets/images/gallery31/caf4075a.gif?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
 /* Instant Message */
 content:url("https://gifcity.carrd.co/assets/images/gallery157/5eb34f56.gif?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
 /* Block User */
 content:url("https://gifcity.carrd.co/assets/images/gallery08/f1ec6e1c.gif?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
 /* Add to Group */
 content:url("https://gifcity.carrd.co/assets/images/gallery08/4d6085fa.gif?v=5bf8fcf7")}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
 /* Report Profile */
 content:url("https://gifcity.carrd.co/assets/images/gallery01/91efdbd6.gif?v=5bf8fcf7")}

   .url-info {
 border: 0px !important;
 background-image: url(https://gifcity.carrd.co/assets/images/gallery39/57111abe.gif?v=4b72c168);
 background-position: 20% 0;
 background-size: cover;
 margin: 1px auto !important;
 font-size: 0px;
 height: 60px;
}

   .profile .table-section {
 border: 0px solid white;
 box-shadow: 0px 0px 10px black;
 background-color: rgb( 0 0 0 / 50% ) !important;
}
   .profile .details-table td {
 color: white !important;
 font-weight: bold !important;
 background-color: transparent !important;
}
    a {
 color: white !important;
 text-decoration: none;
}
    a:hover { 
 color: red !important; 
 text-decoration: none;
 font-weight: bolder !important;
 text-shadow: 1px 1px 2px red, 1px 0px 5px red;
}

    .profile-info {
 color: white !important;
 background-image: url('https://i.pinimg.com/564x/6b/96/38/6b96382dac2c06dfa5907b532d6b7d10.jpg');
 background-size: cover;
 background-position: center;
 border: 0px solid white;
 box-shadow: 0px 0px 10px black;
      height: 100px
}
    .blog-preview {
 color: white !important;
 font-weight: bold !important;
 padding: 5px;
}
    .blog-preview a {
 color: white !important;
 font-weight: bold !important;
}
    .blog-preview a:hover {
 color: red !important;
 font-weight: bold !important;
 text-shadow: 1px 1px 2px red, 1px 0px 5px red;
}
    .blurbs {
 color: white !important;
 background-color: rgb( 0 0 0 / 50% ) !important;
 box-shadow: 0px 0px 10px black;
}
    .blurbs .section h4{
 color: white !important;
 font-weight: bold !important;
}

   .friends {
 color: white !important;
 background-color: rgb( 0 0 0 / 50% );
 box-shadow: 0px 0px 10px black;
 font-weight: bold !important;
}
   .friends:not(#comments) {
 background: url('https://i.pinimg.com/564x/b9/df/be/b9dfbebd1c2787111e6bf7e3613a9e4a.jpg');
 background-position: center;
 background-size: cover;
 margin-bottom: 20px;
}
   .friends a {
 color: white !important;
 font-weight: bold !important;
}
   .friends a:hover {
 color: white !important;
 text-decoration: none !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 3px #FC6C85, 1px 0px 5px white;
}
   .friends .person p{
 color: white!important;
 font-weight: bolder !important;
}
   .profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
 box-shadow: 1px 1px 5px black;
 opacity: 0.8;
 max-width: 100%;
 max-height: 200%;
 display: block;
 margin: 0 auto;
}
 .profile .friends .person img:not(.icon):hover, .comments-table td:first-child img:not(.icon):hover {
 opacity: 1;
 box-shadow: 1px 1px 5px white, 0 0 10px white;
}
   .count {
 color: red !important;
 font-weight: bold !important;
}
    .more {
 color: white !important;
 font-weight: bold !important;
}

   .comments-table {
 background-color: rgb( 0 0 0 / 75% ) !important;
 box-shadow: 0px 0px 10px white !important;
}
   .comments-table a {
 color: white;
 font-style: normal;
 text-shadow: 1px 1px 1px black;
}
   .comments-table a:hover {
 text-decoration: none !important;
 text-shadow: 1px 1px 2px white, 1px 0px 5px white;
}
   .comments-table button {
 color: white;
}
   .comments-table td {
 color: white !important;
 background-color: rgb( 0 0 0 / 0% ) !important;
 border: 3px solid rgb( 0 0 0 / 0% );
 padding: 5px;
}
   table.comments-table {
 display: block;
 height: 250px !important;
 overflow-y: scroll;
}
   .comment-replies {
 padding: 0 5px;
 border: 1px solid white;
 margin-top: 10px;
}

   footer {
 color: white !important;
 text-decoration: none !important;
 font-weight: bolder !important;
 font-size: 12px;
 background: url('https://i.pinimg.com/564x/6b/96/38/6b96382dac2c06dfa5907b532d6b7d10.jpg');
 background-position: center;
 background-size: cover;
 box-shadow: 0px 0px 10px black;
 border: 1px solid white;
 height: 140px;
 margin-top: 2em;
 margin-bottom: 3em;
}
   footer a {
 color: pink !important;
 font-weight: bold !important;
}
   footer a:hover {
 color: white !important;
 font-weight: bold !important;
 text-shadow: 1px 1px 2px white, 0px 0px 5px white;
}
   footer .links {
 color: white !important;
}
   footer .links a {
 color: white !important;
}
   footer .links a:hover {
 color: pink !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 2px black, 0px 0px 5px white;
}

@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}

*{cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol333.png), auto !important;}
</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.
Comments

Displaying 1 of 1 comments ( View all | Add Comment )
Nex Maire
1745057554
usingggg!
Report Comment