Simple Beachy Layout

Tags: beach, beachy, summer, animated, tide, sand, wave
Description:

Profile Bobs Up and Down, has Wave/Sunshine snowflakes and palm trees over the friends list! Credit to Polaroid in code. No need to say if using/ credit.
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by michael (revenge era) (https://layouts.spacehey.com/layout?id=38815) -->

<style>
/* customizable snowflake styling */
.snowflake {
  color: white;
  font-size: 1em;
  font-family: Arial, sans-serif;
  text-shadow: 0 0 5px white;
}
@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;user-select:none;cursor:default;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;animation-delay:4s,2.5s}
</style>
<div class="snowflakes">
<div class="snowflake">🌊</div>
<div class="snowflake">🌊</div>
<div class="snowflake">🌊</div>
<div class="snowflake">🌊</div>
<div class="snowflake">🌊</div>
<div class="snowflake">🌊</div>
<div class="snowflake">🌊</div>
<div class="snowflake">☀️</div>
<div class="snowflake">☀️</div>
<div class="snowflake">☀️</div>
<div class="snowflake">☀️</div>
<div class="snowflake">☀️</div>
</div>

<style>

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: "🌊"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🌊"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🌊"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "🌊"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🌊"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🌊"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "🌊"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🌊"
}




<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

<img src=""/>

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

<style>

.logo {

content:url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/eba25b73-a6ca-4a9c-a598-a68d327df772/dg67d4w-e7f1227a-0ac7-45e2-8fd3-24d48447fa31.png/v1/fit/w_828,h_212/untitled131_20230819111954_by_diredirts_dg67d4w-414w-2x.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjYyIiwicGF0aCI6IlwvZlwvZWJhMjViNzMtYTZjYS00YTljLWE1OTgtYTY4ZDMyN2RmNzcyXC9kZzY3ZDR3LWU3ZjEyMjdhLTBhYzctNDVlMi04ZmQzLTI0ZDQ4NDQ3ZmEzMS5wbmciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.i3ntOyXuNtsUtElvgxT9imnBKQXaIrv5JCbhd3gInL0");

}


<style>

  body {
        background color: white ;
        
    }</style>


<style>
    body{
color: blue !important;
background-color: #ADD8E6 !important;
    }
    .container{
border: 0px solid white !important;
    }
    main{
border: 0px solid white !important;
background-color: #ADD8E6 !important;
    }
    .profile{
border: 0px solid #ADD8E6 !important;
background-color: white !important;
    }
    a{
        color: #ADD8E6 !important;
    }
    a:hover{
        color: #ADD8E6 !important;
    }
    a:visited{
       color: #ADD8E6 !important;
    }
    button{
color: #ADD8E6 !important;
background-color: white !important;
border 0px solid white !important;
    }
    h4{
color: #ADD8E6 !important;
background-color: white !important;
    }
    .top{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .logo{
            }
    .top label{
        color: #ADD8E6 !important;
background-color: white !important;
    }
    .top input{
        color: #ADD8E6 !important;
background-color: white !important;
            }
    .top button{
        color: #ADD8E6 !important;
background-color: white !important;
            }
    .top a{
        color: #ADD8E6 !important;
            }
    .top a:hover{
        color: #ADD8E6 !important;
            }
    .top a:visited{
        color: #ADD8E6 !important;
            }
    .links{
        background-color: white !important;
border: 0px solid white !important;
            }
    .links a{
        color: #ADD8E6 !important;
            }
    .links a:hover{
        color: #ADD8E6 !important;
            }
    .links a:visited{
        color: #ADD8E6 !important;
            }
    h1{
        color: #ADD8E6 !important;
background-color: white !important;
            }
    .profile-pic{
            }
    .profile-pic img{
        border: 0px solid white !important;
            }
    .general-about{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .mood{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .mood a{
        color: #ADD8E6 !important;
            }    .mood a:hover{
        color: #ADD8E6 !important;
            }
    .mood a:visited{
        color: #ADD8E6 !important;
            }
    .mood b{
        color: #ADD8E6 !important;
            }
    .mood p{
    }
    .contact .heading{
        color:  #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .contact{
border: 0px solid white !important;
background-color: #ADD8E6 !important;
background-color: white !important;        
    }
    .contact a{        
color: #ADD8E6 !important;        
    }
    .contact a:hover{
        color: #ADD8E6 !important;        
    }
    .contact a:visited{        
color: #ADD8E6 !important;        
    }
    .url-info{        
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;     
    }
    .url-info b{        
color: #ADD8E6 !important;        
    }
    .url-info p{                
    }
    .table-section{
border: 0px solid white !important;
background-color: white !important;
    }
    .table-section .heading{        
color: white !important;
border: 0px solid #ADD8E6 !important;
background-color: #ADD8E6 !important;        
    }
    table.details-table{                
    }
    .profile .details-table td{
color: white !important;
border: 0px solid #ADD8E6 !important;
background-color: #ADD8E6 !important;
    }
    .profile-info{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .blog-preview{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .blog-preview h4{
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .blog-preview a{
        color: #ADD8E6 !important;
            }
    .blog-preview a:hover{        
color: #ADD8E6 !important;        
    }
    .blog-preview a:visited{        
color: #ADD8E6 !important;        
    }
    .blog-preview p{
    }
    .blurbs{
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .blurbs .heading{        
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .blurbs .section h4{        
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;        
    }
    .friends .heading{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .friends{        
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;        
    }
    .friends-grid{
    }
    .friends a{
        color: #ADD8E6 !important;
            }
    .friends a:hover{
        color: #ADD8E6 !important;
            }
    .friends a:visited{
        color: #ADD8E6 !important;
            }
    .friends b{
        color: #ADD8E6 !important;
            }
    .friends p{
    }
    .friends .person p{
        color: #ADD8E6 !important;        
    }
    .count{
color: #ADD8E6 !important;
    }
    .more{
color: #ADD8E6 !important;
    }
    .comments-table{
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
    }
    .comments-table td{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    .pagination{
    }
    footer{
        color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
            }
    footer a{
        color: #ADD8E6 !important;
            }
    footer a:hover{
        color: #ADD8E6 !important;
    }
    footer a:visited{
        color: #ADD8E6 !important;
    }
    footer .links{
color: #ADD8E6 !important;
border: 0px solid white !important;
background-color: white !important;
    }
    footer .links a{
color: #ADD8E6 !important;
    }
    footer .links a:hover{
color: #ADD8E6 !important;
    }
    footer .links a:visited{
color: #ADD8E6 !important;
    }
    .copyright{
color: #ADD8E6 !important;
text-decoration: none !important;
    }
main {
    background: #ADD8E6;
    color: white;
    padding: 6px 0px;
    font-size: 80%;
}
nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 0 0 7px #000000;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
}
.edit-info{
  background: none;
  background: none;
  border: none;
  border: none;
  width: 100%;
  padding: 5px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.online {
    color: white;
}
.online img {display: none !important;}
</style>

<style>
.comment-replies {
    padding: 0 5px;
    border: 5px solid white;
    margin-top: 10px;
}</style>


<style>
.general-about{
  position: relative;
  margin-top: 30px;
}

<style>
  
  .logo {
  
  content:url("")
  
  }</style>
<style>
    img{
          filter: sepia(100%) saturate(150%) brightness(100%) hue-rotate(110deg) contrast(80%);
    }
</style>

<!-- (c) Polaroid Part created by flourescent lights! (https://layouts.spacehey.com/layout?id=30594) -->

<style>
:root {
--polaroid-name: "tester layout"; /* name displayed on polaroid */
--name-size: 1.6em; /* font size of name */
--toggle-displayname: none; /* change this to "initial" to restore display name */
}
@font-face {
font-family: 'teabeer';
src: url('https://fluorescent-lights.neocities.org/teabeer.ttf') format('truetype');
}
.profile h1 {
display: var(--toggle-displayname);
}
.general-about .profile-pic {
position: relative;
filter: drop-shadow(0 0 0.25rem gray);
transform: rotate(4deg);
margin: 0 20px 8px -5px;
transition: transform .5s;
}
.general-about .profile-pic:hover {
transform: scale(1.2) rotate(-3deg);
}
.general-about .profile-pic:before {
content: var(--polaroid-name);
font-family: 'teabeer';
font-size: var(--name-size);
position: absolute;
z-index: 2;
bottom: -30px;
left: 0px;
width: 100%;
text-align: center;
}
.general-about .profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/polaroid.png');
position: absolute;
background-size: contain;
background-repeat: no-repeat;
top: -5px;
left: -5px;
width: 170px;
height: 210px;
}
.mood {
margin-top: 50px;
}
</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>
<div style="float:  ; max-height: 400px; position: fixed; right: 1px; bottom: 8px; z-index: 100;">
<img src="https://png.pngtree.com/png-clipart/20220719/original/pngtree-palm-tree-png-png-image_8371984.png" width="300" height="300"/></div>
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 0 of 0 comments ( View all | Add Comment )