hawaii part ii layout

Tags: tallyhall, css

Description:

name is pretty self-explanatory. pls credit me if used. does NOT come with any decorations

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');


body {
  background-image: url('https://i.imgur.com/kQ00mOl.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

main {
background-color: black;
opacity: 0.8;
font-family: 'Kosugi', sans-serif;
color: white;
border: 1px outset gray;
}

/* links within main. --green is a variable from spacehey's own CSS */
main a {
      background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
  

}
.profile .contact, .profile .table-section, .profile .url-info {
   background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
  
}

/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
  border: 1px outset gray;
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
 background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
  border: 1px outset gray;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: black;
background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
  border: 1px outset gray;
}

.profile .blurbs .heading, .profile .friends .heading {
  background-color: #444;
 background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
  border: 1px outset gray;
}
.profile .friends .comments-table td {
  background-color: black;
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);   -webkit-background-clip: text;
  color: transparent;
    border: 1px outset gray;
}
nav .links {
background-color: transparent;
font-size: 13px !important;
font-family: 'Kosugi', sans-serif;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}


.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: "i"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "v"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "ii"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "vi"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "iii"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "vii"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "iv"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "️viii"
}   
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    
 @keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }  
}
.profile-pic{
    animation: spin 5s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
nav .top{
background-color: transparent;
}
.online { visibility: hidden; } .online img { content: url("https://pixelbank.neocities.org/text/9516460.gif"); animation-name: none; visibility: visible;
}
.scroll {
overflow: auto;
height: 250px;
}
#scroll {
    width: 334px;
    height: 250px;
    font-size: 2em;
    overflow-y: scroll;
    float: left;
    background-image: url("https://zanarkand.neocities.org/backgrounds/red1.jpg");
    border: 5px groove rgb(153, 153, 153);
    background-color: rgb(255, 255, 255);
  }
 
  ::-webkit-scrollbar {
    width: 16px;
    height: 10px;
  }
 
  ::-webkit-scrollbar-thumb {
    background-color: #fff;
    background-image: url(https://i.imgur.com/Qtm9Z60.png);
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
 
  ::-webkit-scrollbar-track {
    background-color: #fff;
    background-image: url(https://i.imgur.com/IGXGYKz.png);
  }
 
  ::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://i.imgur.com/WhC8iy3.png);
    width: 14px;
    height: 16px;
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
  }
 
  ::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://i.imgur.com/fQ18mrR.png);
    border-top: 1px solid #bdbdbd;
    border-left: 1px solid #bdbdbd;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    width: 14px;
    height: 16px;
  }
</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 19 of 19 comments ( View all | Add Comment )

スタンリー	1730602089 USINGGGG Report Comment
Deadboy_marcuz	1725721328 Using!! Report Comment
FlipperFlopper	1723694882 yooo using Report Comment
𝙎𝙖𝙢𝙢𝙞 ʕ⁠·⁠ᴥ⁠·⁠ʔ	1722907883 ussing Report Comment
jingills	1712023173 using RAHHHHHHH Report Comment
Scavvvy	1710104818 Using sjiritjinetgientg[no Report Comment
jules ˚. ୭ 📕	1709687056 Using!!! Report Comment
ClaritinD	1709453698 is it just me or does the background image also not pop up for anyone else? Report Comment
Cerati	1706402490 USINGGG :3 Report Comment
glorber ^_^	1701453294 USING CUZ HAWAII PART II IS MY CURRNET HYPERFIX AND I FUCKIGN LOVE IT SO MUCH ^o^^^^ Report Comment
SOL_>:]	1694778469 Omg this layer is incredible,i'm using it !ty for making it ! Report Comment
luv4dirt	1692185144 USING!! ^_^ Report Comment
Roboltics	1686793375 This is awesome! Using =D Report Comment
† Jolene †	1681338977 AWESOME !!!!! THANK YOU FOR MAKING THIS !!!! Report Comment
MATT🫀🥃	1681233676 i'm probably gonna use thiz 4 my blog entries :33 ty!! Report Comment
Melrose	1675317916 This is so pretty! I wish there were more styles like this on here. Report Comment Figured out how to disable the spin, I like the floaty effect though. Well done. ^.^ by Melrose; 1675320878; Report Tyyysmmm ^_^ by Aya; 1675962840; Report
✿✿✿☆☆☆✰☻M3D1C☻✰☆☆☆✿✿✿	1671221874 thks love it Report Comment YWW!! by Aya; 1671294349; Report just please make sure to credit me to me on ur page :3 tysm by Aya; 1671294709; Report