my summer layout !

Tags: summer, vibrant

Description:

ummm it is mostly just for me to save it here , you can use it if you want ! its based off the img of yuuji thats set as the profile picture ? the code stuff itself is so messy god im aorry
the scroll boxes in the interests have to be done separately , but it can be achieved with div style="height:200px;overflow-y:scroll;" then whatever you want inside /div adding the little closing thing to finish it off ! you have to add little less than greater than symbols to the bits though !
the song playing is a nightcore cover of california girls by nightcore ichiban !

Preview:

click on the image for a larger preview

Code:

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

<style>

.general-about{

  position: relative;
 margin-top: 10px;

}

.general-about .profile-pic::before{

  content: '';

  background: url('https://i.ibb.co/Bj22B4C/508d10ac44e181912793e2e12a0168ab-removebg-preview.png') no-repeat;

  background-size: cover;

  display: block;
  width: 105px;
  height: 105px;
  z-index: 999;
  position: absolute;
  top: -45px;
  left: -70px;

</style>
<!---rename interests--->
<style>
table, th, td {
border: 0px solid; }
:root { --topic1: "gnrl"; --topic2: "music"; --topic3: "movies/tv";
  --topic4: "books"; --topic5: "art"; --topic6: "heroes"; }
.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 #34632e !important;
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: var(--topic5); }
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content: var(--topic6); }
</style>

<!---profile picture replacement/sizing--->
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.pinimg.com/564x/3e/67/5b/3e675b243031e29ef489a19288403e1f.jpg"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 100px; height: 100px; } /* profile */ 
</style>

<!---comments scroll box--->
<style>
table.comments-table{
display: block;
height: 800px!important;
overflow-y: scroll; }
</style>

<!---scrollbox bg transparency--->
<style>
#style-3::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent; }

#style-3::-webkit-scrollbar{
width: 6px;
background-color: transparent; }

#style-3::-webkit-scrollbar-thumb{
background-color: #000000; }
</style>

<!---cursor--->
<style>* {cursor: url(https://cur.cursors-4u.net/mechanics/mec-5/mec457.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/30/sega-nomad.html" target="_blank" title="Sega Nomad"><img src="https://cur.cursors-4u.net/cursor.png" alt="Sega Nomad" style="position:absolute; top: 0px; right: 0px;"/></a>

<!---making an idiot of myself :) online icon--->
<style>
.online{
content:url('https://dl.glitter-graphics.com/pub/2240/2240513m1wuo5jltc.png'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; }
</style>

<!---(offline) offline icon--->
<style>
.offline{
content:url('https://dl.glitter-graphics.com/pub/2037/2037551bwgipxzode.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; }
</style>

<!---california girls nightcore ichiban background song--->
<iframe width="0" height="0" src="https://www.youtube.com/embed/5KQhWd-pZ_M?controls=0//?&;amp;;autoplay=1&;loop=10000000&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" style="font-size: 12.8px;">
</iframe>

<!---hide url box--->
<style>
.url-info{
display: none !important; }
</style>

<div style="max-height: 300px; position: fixed; left: 3px; bottom: -5px; z-index: 99;">
<img src="https://i.ibb.co/PQ0X5vW/459cff68b04a1affb86b314feafeea35-removebg-preview.png" height="250"/></div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Murecho:wght@100..900&display=swap');
body{font-family: 'Murecho';}
</style>

<style>

@font-face {

font-family: "celebration";

src: url("https://file.garden/ZjJKMtClQA2p3XUC/Celebration.otf");

}


h1{ font-family: "celebration";}


</style>

<!---font size--->
<style>h1{font-size: 50px !important; padding: 0px;}</style>

<style>
/* background of the page (i.e. left and right of your profile) */
body{
background-color: color !important;
background-image: url('https://i.pinimg.com/originals/f2/ff/82/f2ff82037fcc5a2305be0ee82d79e893.gif') !important;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
background-position: left !important;
background-size: cover !important; }


/* your profile itself. main does not encompass the header/footer, which I prefer to leave alone */
main{
background-color: color; color: #253b6b; }


/* links within main. --green is a variable from spacehey's own CSS */
main a {color: #4681db;}
main a:hover {color: #94d7f2}


/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info{
border: 2px solid #c4de79; }


/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
background-color: #c4de79; color: #339c89; }


/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {background-color: #fffedf; color: #34632e;}
.profile .table-section .details-table {background-color: #c4de79; color: #34632e;}


/* headings on the right */
.profile .blurbs .heading, .profile .friends .heading{
background-color: #c5616d; color: #eabab9; }

.profile .friends .comments-table td{
background-color: #fac3df; }


/* red text */
.count {
color: #8f63b2; }

.blurbs .inner .section:last-of-type h4{
color: #f7cb81; }

.blurbs .inner .section:first-of-type h4{
color: #f7cb81; }


/* nav bar */
nav .links li:not(:last-child)::after{
color: #64514a !important; }

nav .links{
background-color: #f7cb81; text-align: center; 
color: #64514a;}

.top{
background-color: #f78c59 !important; color: #64514a; }

</style>


<style>.profile{ direction: rtl; } .blurbs{ direction: ltr; } .blog-preview{ direction: ltr; } .friends{ direction: ltr; } .general-info{ direction: ltr; } .contact{ direction: ltr; } .url-info{ direction: ltr; } .details-table{ direction: ltr; } .profile .table-section .heading{ direction: ltr; } .details p{ direction: ltr; } .mood{ direction: ltr; } h1{ direction: ltr; } </style>

<style>div.profile-pic{ height: 100px !important;}
</style>


<style>
/*change only notification bell*/
nav .links li .icon{
content: url('https://yokai.crd.co/assets/images/gallery02/0ecd65bb.gif?v=b4df531c');
}

</style>

<!---BANNER--->
<style>main:after {
	width: 100%;
	height: 500px ;
	display: block;
	content: "";
	background-image: url('https://i.pinimg.com/originals/e6/00/03/e60003cf7977f349cdc4df9f0039ad9a.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</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 )