caroline cits inspired layout

Tags: cits
Description:

ermmm im just bored i used someones premade layout to make this since im not great at coding lol credits in the code
Code:

<!-- (c) Layout created by 🎪R0TT3NFLESH🥩 (https://layouts.spacehey.com/layout?id=103887) -->

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

credits to "츄 ! ✩" (zombeatz200) for creating this layout and 🎪R0TT3NFLESH🥩 for editing it a bit ^-^ 

<style>
main{
     height: 500px;
    overflow-y: scroll;
    text-align: center;
}
 
body {
  background-image: url('https://cdn.discordapp.com/attachments/1219108273765093390/1221641651823317133/839c1d76d35c06d966567aa3719fdeb1.jpg?ex=66135172&is=6600dc72&hm=be4ab436915b68f478603ce2724826f8c16c9ab0ba60879d100336619a98b41c&');
  background-attachment: fixed ;
  background-repeat: repeat;
  background-size: 100%;
  background-position: center;
  background-color: transparent!important;
}
 
/* this is the spacehey logo */
nav img.logo {
content:url("https://static.wikia.nocookie.net/logopedia/images/2/20/MySpace_logo.svg");
filter: invert(100%);
}
 
/* this is the online img*/
.online {
  content: url('https://media.discordapp.net/attachments/1218115147277795331/1231625018878857216/Tumblr_l_1848191123243003.gif?ex=66267fae&is=66252e2e&hm=62e902feeb8a48718e56da5a0859070dbb1ed552ff976644a1bed43b54c7c7f5&=&width=160&height=136'); 
  background-repeat: no-repeat; 
  background-position: -15% 75%; 
  z-index: 2; 
}
/* this is color of all the text and links */
 
a, .profile .friends .person p, p, h2, h3, h4, .count {
  color: white;
   text-shadow: -2px 2px 3px pink !important;
}
h1{
   border: 4px solid white !important;
   padding: 5px;
   background-color: rgb(255,255,255,0.4) !important;
   color: white !important;
   box-shadow: 0px 0px 10px black !important;
}
 
/* this is where you edit the search button and the Delete and Reply button */
button{
  background-color: white!important;
  border: none;
  color: white;
  font-weight: normal;
  text-shadow: -2px 2px 3px pink !important;
}
top .button {
  background-color: transparent!important;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important; 
}
.general-about {
  border: 4px solid; 
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  padding: 12px;
  box-shadow: 0px 0px 10px black !important;
}
.mood {
   background-color: rgb(255,255,255,0.4) !important;
   border: 4px solid white !important;
  padding: 3px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  box-shadow: 0px 0px 10px black!important;
}
.url-info, .table-section, .blog-preview, .blurbs, .friends, .profile-info {
  border: 4px solid white !important;
  background-color: rgb(255,255,255,0.4)!important;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  box-shadow: 0px 0px 10px black !important;
}
 
:root {
--logo-blue: white;
--darker-blue: white;
--lighter-blue: black;
--even-lighter-blue: transparent;
--lightest-blue: transparent;
--dark-orange: white;
--light-orange: transparent;
--even-lighter-orange: transparent;
--green: black;
}
 
.contact {
  border: 4px solid white !important;
  background-color: rgb(255,255,255,0.4)!important;
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
  box-shadow: 0px 0px 10px black !important;
  text-align: left !important;
}
.contact a {
  color: white !important;
}
.contact .inner a img {
font-size: 0;
}
 
.contact .inner a img:before {
font-size: 1em;
}
 
  .contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
 
}
 
.comments-table td {
   border: ;
}
.table-section td {
  border: 0px solid black;
}
/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border: 1px solid white;
   box-shadow: 0px 0px 10px black!important;
}
.comment-replies {
    border: 1px solid white;
   box-shadow: 0px 0px 10px black!important;
}
 
/* these backgrounds r usually transparent */
nav .top {
  background-color: transparent!important;
  color: rgb(255, 255, 255)!important;
  font-weight: bold;
  text-align: center;
  text-shadow: -2px 2px 3px blue !important;
}
 
nav .links {
  background-color: transparent!important;
  color: rgb(255, 255, 255)!important;
  font-weight: bold;
  text-align: center;
  text-shadow: -2px 2px 3px blue !important;
}
 
nav .links a {
  color: white !important;
  text-shadow: -2px 2px 3px blue !important;
}
 
main, footer {
  background-color: transparent!important;
}
footer{
  font-size: 0px;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: 1px solid rgb(255, 255, 255);
  border-spacing: 5px;
   box-shadow: 0px 0px 10px black!important;
}
.general-about {
   overflow: auto;
}
.profile-pic {
   object-fit: contain;
   overflow: hidden;
   border: none;
   border-radius: 90px;
   box-shadow: 0px 0px 0px black !important;
}
 
.heading {
  background-color: transparent !important;
}
td {
  background-color: transparent !important;
  border: none !important;
}
 
(bounce animation) .col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 .col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
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);
}
 
}
 
h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }
 
@keyframes type{
  0%{
    width:0ch;
  }
 
  100%{
    width:27ch;
  }
}
 
@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}
 
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
 
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
 
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
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);
}
 
<style></style>

<style>
	body{
		background-image:url('https://media.discordapp.net/attachments/1218115147277795331/1231631865035886734/Untitled2325_20240421222935.png?ex=6637a98f&is=6625348f&hm=9afe4dd67e54fad5f7382ecaa1a4ac707f4b453fab31edea298072f577d7e1a9&=&format=webp&quality=lossless&width=1073&height=662');
	}
</style>

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/t_S2XWMbFSQ?si=hXMg0DYqGWH-JG//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>
body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background-image: url('https://media.discordapp.net/attachments/1218115147277795331/1231633963748036649/Tumblr_l_1993724885966755.gif?ex=66268803&is=66253683&hm=022f773cc4af1555ccc23cd73e6391d0da2e8f0ba97fb1bb429a08503eddc226&=&width=390&height=390');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    animation: yourAnimation 3s ease 0s 1 normal forwards;
    pointer-events: none;}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0;}}
</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 0 of 0 comments ( View all | Add Comment )