Terezi Pyrope Layout

Tags: homestuck, terezi, terezipyrope

Description:

Terezi Pyrope-themed layout with some homestuck blinkies, terezi gifs, her theme music, an intro, and a spinning pfp! Comment if using!! :]

Preview:

click on the image for a larger preview

Code:

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

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

<img src="https://64.media.tumblr.com/bc68c0d86136080747f44792b144137a/fc5e4d8695ed81e9-2f/s1280x1920/658b565a493fedf9c853a59edf3dc5ee8bb92a33.png"/>

<img src="https://i.pinimg.com/originals/7d/c9/5f/7dc95f29558b63897ad2f16435940b5b.gif"/>

<img src="https://64.media.tumblr.com/bc68c0d86136080747f44792b144137a/fc5e4d8695ed81e9-2f/s1280x1920/658b565a493fedf9c853a59edf3dc5ee8bb92a33.png"/>




<img src="https://external-media.spacehey.net/media/sPYdCeK8GEHYx2af3lbAo8wmtNSGWt08W6vfS8L5D2WA=/https://pixelsafari.neocities.org/dividers/more/stripe2.gif"/>


<img src="https://blinkies.cafe/b/display/0052-cancer.gif"/>

<img src="https://blinkies.cafe/b/display/0042-aries.gif"/>

<img src="https://blinkies.cafe/b/display/0043-taurus.gif"/>

<img src="https://blinkies.cafe/b/display/0040-gemini.gif"/>

<img src="https://blinkies.cafe/b/display/0046-leo.gif"/>

<img src="https://blinkies.cafe/b/display/0047-virgo.gif"/>

<img src="https://blinkies.cafe/b/display/0048-libra.gif"/>

<img src="https://blinkies.cafe/b/display/0045-scorpio.gif"/>

<img src="https://blinkies.cafe/b/display/0049-sagittarius.gif"/>

<img src="https://blinkies.cafe/b/display/0050-capricorn.gif"/>

<img src="https://blinkies.cafe/b/display/0041-aquarius.gif"/>

<img src="https://blinkies.cafe/b/display/0041-aquarius.gif"/>

<img src="https://blinkies.cafe/b/display/0051-pisces.gif"/>

<img src="https://blinkies.cafe/b/display/0057-ophiuchus.gif"/>


<style>
body{background:url("https://i.pinimg.com/originals/01/15/45/011545e32495288dedac76a0d4c4c94d.gif") no-repeat fixed; background-size:cover;}
}

/* go to https://codepen.io/sosuke/pen/Pjoqqp to edit from the invert(0%) to the contrast(105%). Where it says "Target color", put in the hex code of the color you want */

/* this is the spacehey logo */
nav img.logo {
  filter: brightness(0) saturate(100%) invert(0%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%) !important;
}
.online{
  content: url(https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c);
  padding: 5px 0px;
}
/* this is the online img*/
.online img{
    filter: brightness(0) saturate(100%) invert(0%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%)!important;
}


/* this is color of all the text and links */

a, .profile .friends .person p, p, h2, h3, h4, .count, nav .links a{
  color: white!important;
}
.url-info{display:none !important;}

h1{
   border: 5px solid black;
   background-color: black!important;
   padding:5px;
}

/* this is where you edit the search button and the Delete and Reply button */
button {
  background-color: transparent!important;
  border: none;
  color: black;
  font-weight: bold;
}
  body {

text-align: center;

}
.general-about .details {
  border: 5px solid black;
  background-color: black!important;
  padding-bottom: 110px;
}
.mood {
  background-color: black;
  border: 5px solid black;
  padding: 3px;
  margin-bottom: 10px;
}
.profile-info{
background:url();
  border: 5px solid black;
}
.contact, .url-info, .table-section, .blog-preview, .blurbs, .friends, .profile-info {
  background-color: black;
  border: 5px solid black!important;
}
.comments-table td {
  border: 3px solid transparent;
}
.table-section td {
  border: 3px solid #12ccaa;
}

.comment-reply:not(:first-child) {
    border-top: 2px solid gray;
}
.comment-replies {
    background-color: black!important;
    border: 4px solid #4bd943;
}

/* these backgrounds are usually transparent */
nav .top, nav .links {
  background-color: black;
  color: black;
  font-weight: bold;
}
.contact .inner a img{
  font-size: 0;
}
.contact .inner a img:before{
  font-size: 1em;
  display: block
}

.contact {
  border-radius: 8px;
  background-image: url();
  background-position: left top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 300px;
Height:180px;

color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px pink, 0 0 3px Darkblue; }

main, footer {
  background-color: transparent;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
footer {
background-color: black;
}
.comments-table td {
  background:url();
  border: 3px solid black;
}
.profile-pic {
  padding: 15px;
}
.heading {
  background-color: transparent!important;
}
@import url("https://fonts.googleapis.com/css?family=Creepster");

.w-40 h1{
font-family: Creepster;
font-size: 40px;
text-align: center;
background: -webkit-linear-gradient(#008697,#00E4E1);
background-color: black!important
-webkit-background-clip: text;
-webkit-text-fill-color: black;
-webkit-text-stroke: 1px black;
}
td {
  background-color: transparent!important;
}

</style>


<style>
/* contact icons */
.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://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://mikejima.crd.co/assets/images/shadow/80e39d63_original.gif?v=16e7e82c") 

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/IIw4NDK7j4w//?&;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>main:before {
	width: 100%;
	height: 125px ;
	display: block;
	content: "";
	background-image: url('https://pa1.aminoapps.com/6464/7d63e0b28e61461438cb1f51c145b8b6e357d001_hq.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>


<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 9px; z-index: 200;"><img src="https://media.tenor.com/R6bkSPW5ZfUAAAAi/terezi-homestuck.gif" width="300" height="300"/></div>


<div style="float:  ; max-height: 200px; position: fixed; left: 1px; top: 9px; z-index: 200;"><img src="https://64.media.tumblr.com/0e01f00684121d4073ad260192a30910/c11ad86e0ca6c5e9-77/s250x400/015232a8e2f6cd20b829b6e5e15230f30b49a5ef.gifv" width="300" height="200"/></div>


<style>
body:before {

content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media.tenor.com/sz5PGIaFe0UAAAAC/terezi-terezipyrope.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 5s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

<style>
  @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
  body{font-family: 'VT323', monospace;}
p{
  font-size: 150%;
<style/></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 20 of 45 comments ( View all | Add Comment )

(=゜ω゜)	1748997620 USING!! >:] Report Comment
KK	1748594672 USING!!!!!!!!!!!! Report Comment
Jad3	1748127718 USIIIIIINNNGGGGGGGG!!!!!! :3 Report Comment
Jad3	1748127717 USIIIIIINNNGGGGGGGG!!!!!! :3 Report Comment
Remzer	1745776161 Using Report Comment
Alex XD	1745608759 Using!! Report Comment
Gabriel	1738785559 US1NG >:] Report Comment
iki	1738117222 using nyehehe Report Comment
fay 𐕣 jane	1737489827 US1NG! >:] Report Comment
HopeDesignPro	1736799308 Heh using Report Comment
HopeDesignPro	1736799306 Heh using Report Comment
HopeDesignPro	1736799305 Heh using Report Comment
W1lb-rz_f!tzz	1736365863 Us!ng! Report Comment
W1lb-rz_f!tzz	1736365863 Us!ng! Report Comment
SIMON	1736089786 using!! Report Comment
kyle	1733354615 USING!!!!!! >:] Report Comment
Amaia ; Azi	1733332362 using ;3 Report Comment
E.C	1731943428 Usiing !! Report Comment
M30Wz	1730950403 using!!!!!!!! Report Comment
!! QUINN !!	1730742229 using !! :3 Report Comment