my layout

Tags: layout, gay, simple
Description:

dosent include music
Preview:

click on the image for a larger preview
Code:

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





<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-2/nat117.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2006/02/19/nat117.html" target="_blank" title="Butterfly"><img src="https://cur.cursors-4u.net/cursor.png" alt="Butterfly" style="position:absolute; top: 0px; right: 0px;"/></a>



<style>main:before {
	width: 100%;
	height: 200px ;
	display: block;
	content: ""; 
	background-image: url('  https://i.pinimg.com/564x/26/01/11/260111e9148e807c1641281b701548ed.jpg ');
	background-position: center;
	background-size: cover;
}
@media only screen and (max-width: 100px) {
	main:before{
		height: 100px;
	}
}</style>







<!-- (c) Layout created by 𝔯𝔢𝔯𝔦𝔢 ☆ (https://layouts.spacehey.com/layout?id=33426) -->
<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>



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

<style>
/*flip profile*/
.profile{
direction: rtl;

}

.blurbs, .profile .table-section .heading, .blog-preview a, .friends, .general-info, .contact, .url-info, .details-table, .details p, .mood{
direction: ltr;

}


</style>



<style>





</style>

<style>
:root {
    --topic1: "General";  /* EDIT INTEREST LABELS HERE */
    --topic2: "Music";
    --topic3: "Movies & TV";
    --topic4: "Games";
    --topic5: "Books";
    --topic6: "ETC";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
   color:var(--links) !important;
   letter-spacing:normal !important;
   text-shadow: 2px 2px black !important; /* CHANGE COLOR OF INTEREST LABELS HERE */
   filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
    content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
    content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
    content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
    content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
    content: 

</style>







<style>

table.comments-table{
display: block;
height: 400px!important;
overflow-y: scroll;
}



</style>







<style>



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;}

}



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

img:hover , .url-info: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); }

}

</style>


<!-- (c) Layout created by Crash Test Dummy (https://layouts.spacehey.com/layout?id=2758) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=News+Cycle:wght@700&family=Newsreader&display=swap');

body{filter:invert(100%) url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxmaWx0ZXIgaWQ9ImYiPjxmZUNvbG9yTWF0cml4IHR5cGU9Imx1bWluYW5jZVRvQWxwaGEiIHZhbHVlcz0iIj48L2ZlQ29sb3JNYXRyaXg+PC9maWx0ZXI+PC9kZWZzPjwvc3ZnPg==#f)}
:root{

  background-attachment: scroll;
  background-size: cover
}


.profile {
	font-family: 'Newsreader', serif;
	text-shadow:  black;
}
.profile .left h1 {
	
    font-family: 'Fredericka the Great', cursive;
	line-height:1em;
	
}

h1 {
  color: black;
  text-shadow: 1px 1px 2px black, 0 0 25px grey, 0 0 5px grey;
}

.profile .left h1 {
	text-transform: uppercase;
	font-size: 3rem;
	color: black;
	
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
    font-family: 'News Cycle', sans-serif;
	line-height:2em;
	text-shadow: 0 0 7px grey;
}

h1, h2, h3, h4,h5,a, p, nav label, .section {color: black;}

.profile .right .blurbs {
	position: relative;
}

.profile .section p, .details-table td:last-child p{
	padding:.9em;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
	border: dotted!important;
	width: 100%;
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
	text-transform: uppercase;
	font-size: 1.3rem;
}

.profile .blurbs .section h4 {
	color: black;
	font-size: 1.3rem;
	text-transform: uppercase;
}

.comments-table, .details-table {
	border: 1px solid #0000;
	border-collapse: separate;
	border-spacing: 0 .5em;
}

.comments-table tr td:last-child {
	height: 150px;
	display: block;
	overflow-y: scroll;
}

.comments-table td, .music-table td {
	background: none;
	color: #000;
}
.comments-table tr {
	border-bottom: 1px solid #000;
}
.comments-table td:first-child, .music-table td:first-child {
	background: none;
	text-align: left;
}

.blog-preview {
    border: 1px dotted crimson!important;
    background: rgba (190, 190, 190);
    background-image: url();
    opacity: 0.5
    border-radius: 10px;
    box-shadow: 1px 1px 2px rgba( 190, 190, 190,);
    height: 155px!important;
    background-position: bottom-right;
    backround-repeat: no-repeat;
}





@media only screen and (max-width: 600px) {
	.profile .left h1:before{
		transform: rotate(-4deg) scale(1.7) translateX(3.5em);
	}
	.profile .left .table-section:nth-last-child(2):before {
		transform: rotate(-4deg) scale(1.7) translateX(14em) translateY(-1.5em);
		z-index: 0;
	}	 
}


</style>

<style>


</style>

<style>
<style>
}
body {
    background: url( https://media1.tenor.com/m/7l4HC5krUzAAAAAC/sea-beach.gif )
fixed; background-size:cover;

}
</style>


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

<style>
.online{content:url(" https://gifcity.carrd.co/assets/images/gallery90/27027352.png?v=26dffab5 ");
}
</style>





<style>

.profile .friends .person:first-child img:not(.icon){
content:url(https://i.pinimg.com/564x/07/ed/df/07eddf95adcf43195dabc052be208668.jpg );
}
.profile .friends .person:nth-child(2) img:not(.icon){
content:url(https://i.pinimg.com/564x/a9/5a/16/a95a16dff24811519e21c1e220edaa68.jpg );
}
.profile .friends .person:nth-child(3) img:not(.icon){
content:url(https://i.pinimg.com/564x/1d/51/6c/1d516c88960f9ef7dee7e281f9c7e61e.jpg );
}
.profile .friends .person:nth-child(4) img:not(.icon){
content:url(https://i.pinimg.com/564x/2f/47/90/2f479045b624f626c8e42b1495af5226.jpg );
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://i.pinimg.com/564x/d2/f7/bd/d2f7bde03e6d53d87fd3299a1b882206.jpg );
}
.profile .friends .person:nth-child(5) img:not(.icon){
content:url(https://i.pinimg.com/564x/4b/71/47/4b7147b0f6432f8b936e525d75f13204.jpg );
}
.profile .friends .person:nth-child(6) img:not(.icon){
content:url(https://i.pinimg.com/564x/91/94/6d/91946dbe431d2ac7e295bfce082ed923.jpg );
}
.profile .friends .person:nth-child(7) img:not(.icon){
content:url( https://i.pinimg.com/564x/f5/98/a2/f598a20fb453d008072b0dea18ffbcb0.jpg);
}
.profile .friends .person:nth-child(8) img:not(.icon){
content:url(https://i.pinimg.com/564x/ac/6c/b8/ac6cb8d51362d760883b0d306a00c671.jpg );
</style>

<img src="https://i.pinimg.com/originals/87/09/8a/87098add6823b98c94deca399f8ff84b.gif"/>
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.