03.01.24

Tags:

Description:

CALL ME IF YOU GET LOST BLOG LAYOUT Personal blog layout I made for myself. CALL ME IF YOU GET LOST! live laugh love Tyler the creator

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Tea Party ͙͘͡★ (https://layouts.spacehey.com/layout?id=100608) -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/jfcNljD_H_c?si=3S0jymr8SwHMKHUh//?&;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>

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

}

}



.table-section:nth-last-child(1) {

  display: none;

}

</style><style>

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://media.tenor.com/D4CfVpmuzCYAAAAi/white-glitch.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}</style>

<style>
.logo {

content:url("https://files.catbox.moe/oyagbo.png");

}
</style>

<style>

.profile-pic:before {
content: url("https://www.clipartbest.com/cliparts/dc7/eyy/dc7eyybRi.png");
z-index: 2;
position: absolute;
transform: scale(0.2);
transform-origin: 15% -15%;
}

.profile-pic img {
border: 8px solid white;
border-block-end: 30px solid white;
scale: 1.1;
transform: rotate(-4deg);
transform-origin: 95% 70%;
box-shadow: 5px 5px 5px #000000B3;
}

</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Inconsolata&display=swap');
p{
   font-family: 'DotGothic16', sans-serif;
   font-family: 'Inconsolata', monospace;
   font-size: 100%
}
h1, h2, h3, h4, h5{
   font-family: 'DotGothic16', sans-serif;
   font-family: 'Inconsolata', monospace;
   font-size: 100%
   color: black
}

body{
 background: 
 url(https://i.pinimg.com/originals/e0/cf/d3/e0cfd3616e14ef8c197691616126c58b.png);

}

main{
background: url(https://i.pinimg.com/236x/6c/32/87/6c32878296d1579284ae45f2b8651cba.jpg);
    border: 1px solid white;
    border-radius: 8px;
    box-shadow: 0 0 10px white;
    color: black;
    
}

</style>



<style>
nav .top{
background: transparent;
}

nav .links{
background: transparent;
text-align: center;
}
nav{
background: url(https://i.pinimg.com/originals/6c/af/a0/6cafa005f249db61135fb7435dce7021.png);
    background-position-y: 115px;
    background-position-x: center;
    margin-top: 20px;
    margin-bottom: 15px;
    border: 1px solid white;
    box-shadow: 0 0 10px white;
    border-radius: 8px;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 8px #b1b1b1;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}

:root {
      --logo-blue: grey;
      --darker-blue: ;
      --lighter-blue: black ;
      --even-lighter-blue:  ;
      --lightest-blue:  ;
      --dark-orange: black;
      --light-orange: white ;
      --even-lighter-orange: white ;
   
}


footer{
 background: white ;
 color: black;
 border-radius: 15px;
}

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

Comments disabled.