Lightning Layout 🗲

Tags: lightning, purple, animation, electric, sound effects, cursor, thunder, layout, cool, chill
Description:

Lignting is super cool and I was superised to see that there arent many layouts for it Thunder sounds in backgorund Comment is you use^^
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by  .·:*¨𝘗𝘦𝘢𝘯𝘶𝘵¨*:·. (https://layouts.spacehey.com/layout?id=26275) -->


<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/PozkDphI44EAAAAC/lightning-nature.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>


<iframe width="0" height="0" src="https://www.youtube.com/embed/V3-Ex0WOrI8?ecver=1&amp//?&;amp;;autoplay=1&;loop=1&;controls=1" title="sometimes" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>



<style>main:before {
	width: 100%;
	height: 600px ;
	display: block;
	content: "";
	background-image: url('https://media.tenor.com/PozkDphI44EAAAAC/lightning-nature.gif');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}</style>



<style>
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url('https://bestanimations.com/media/storms/383505301animated-lighning-bolt-strike-storm-gif-6.gif');
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
} </style>





<style>
body{background:url("https://i.imgur.com/sVydnQy_d.webp?maxwidth=760&fidelity=grand") no-repeat fixed; background-size:cover;}



</style>




<style>
/*Main Body Background Image*/
    body{
    background-image: url(https://i.imgur.com/dA0dHZ3_d.webp?maxwidth=760&fidelity=grand) !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
</style>
    
<style>
/*Profile Color*/
    main{
    background-color: #00000095 !important;
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;}
        
    main{
        border-radius: 25px 25px 25px 25px !important;}
</style>
        
<style>
/*Top Background Color*/
   .top{
    background-color: #00000065 !important;
</style>
    
<style>
/*Top Links Background Color*/
 .links{
     text-align:center;
    background-color: transparent !important;
</style>

<style>
/*Search Users Box Background Color*/
    .top input{
    background-color: #F4B1C2 !important;
</style>

<style>
/*Buttons*/
    button{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #FEE8FF !important;
</style>

<style>
/*Profile Name Background Color*/
    h1{
    text-align:center;
    border-radius: 25px 25px 25px 25px !important;
    background-color: #480965 !important;
</style>

<style>
/*Mood */
    .mood{
    text-align:center;
    border-radius: 25px 25px 25px 25px !important;
</style>

<style>
/*Contact Heading Background Color*/
    .contact .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: transparent !important;
</style>

<style>
/*Contact Box Background Color*/
    .contact{
    background-color: transparent !important;
</style>

<style>
/*Interests Section/Social Links Heading Background Color*/
    .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #D595ED !important;
</style>

<style>
/*Interests Table & Links Table Background Color*/
    table.details-table{
    background-color: COLOR !important;
    background-image: url('https://media.tenor.com/PozkDphI44EAAAAC/lightning-nature.gif') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
    
    .profile .details-table td{
    background-color: #00000065 !important;
    background-image: url('https://i.imgur.com/v1LwDr2.gif') !important;https://genericprofileeditor.neocities.org/profile?id=6164
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Blurbs Heading Background Color*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #9C7BB4 !important;
</style>

<style>
/*Hide "About Me" & "Who I'd Like To Meet" Headers*/
 .blurbs .section h4{display: none !important;}
</style>

<style>
/*Friends/Comments Heading Background Color*/
    .friends .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #9C7BB4 !important;
</style>

<style>
/*Comments Background/border Color*/
    .comments-table td{
    background-color: transparent !important;
    border-radius: 25px 25px 25px 25px !important;
    border-color: transparent;
    }
</style>

<style>
/*Put Your Comments In A Scroll Box*/
.comments-table {
    display: block;
    height: 300px!important;
    overflow-y: scroll;
    border: 0px solid black !important;
    outline: none !important;
    border-radius: 25pxpx;
    padding:5px;
    border-spacing: 4px;
    text-align: center;
}
.comments-table td * {
    border-radius: 25px 25px 25px 25px !important;
}
</style>

<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: rgba(255, 252, 205);}

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);}
</style>

<style>
/*spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: invert(95%) sepia(9%) saturate(1961%) hue-rotate(202deg) brightness(104%) contrast(108%);
}
</style>

<style>
/*Footer Links Background Color*/
    footer{
    background-color: #00000075 !important;
</style>

<style>
/*Change Text Colors*/
    .top{
    color: #87569D;}    
    
    main{
    color: #DBA6FD !important;}
    
    footer{
    color: #FFFFFF;}
</style>

<style>
/*Change Link Colors*/
    a{
    color: #807180 !important;}
    
    a:hover{
    color: #807180 !important;}
    
    .top a{
    color: #807180 !important;}
    https://genericprofileeditor.neocities.org/profile?id=6164
    .top a:hover{
    color: #807180 !important;}
    
    .top a:visited{
    color: #807180 !important;}
    
    .links a{
    color: #807180 !important;}
    
    .links a:hover{
    color: #807180 !important;}
    
    .links a:visited{
    color: #807180 !important;}
   
    .friends-grid p{
    color: #807180 !important;}

    footer .links a{
    color: #807180 !important;}
   
    footer .links a:hover{
    color: #807180 !important;}
   
    footer .links a:visited{
    color: #807180 !important;}
</style>

<style>
/*Change Interests Section Titles*/
table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px; }

:root {
  --topic1: " 🗲Games🗲";
  --topic2: " 🗲Music🗲";
  --topic3: " 🗲Movies🗲";
  --topic4: " 🗲TV🗲";
  --topic5: " 🗲Books🗲";
  --topic6: " 🗲Heroes🗲";}

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

.details-table tr td:first-child p::after{
color:#9C7BB4(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px #9C7BB4 !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>

<style>
/*Follow font instructions at: https://forum.spacehey.com/topic?id=6530  */
/*Change normal text font*/
.body{
font-family: 'Roboto Condensed', sans-serif;}
</style>

<style>
/*Change link font*/
a{
font-family: 'Roboto Condensed', sans-serif;}

a:hover{
font-family: 'Roboto Condensed', sans-serif;}

a:visited{
font-family: 'Roboto Condensed', sans-serif;}
</style>

<style>
/*Change Profile Name Font*/
h1{
font-family: 'Roboto Condensed', sans-serif;}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1150.png), auto;
}
* {
 cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1150.png), auto;
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgb(255, 255, 255);
}
</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: "✨"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "⚡"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "⚡"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "⚡"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "⚡"
}   
</style>

<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;}
</style>

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/
.contact .heading{ font-size:0; text-align:center; }
.contact .heading:before{ content: "⬐Click Here⬎"; font-size:.9rem; font-weight:bold;color:#D996F4 }

/*"Your Blurbs" Title*/
.blurbs .heading{ font-size:0; text-align:center;}
.blurbs .heading:before{ content: "About Me"; font-size:.8rem; font-weight:bold;color:#21012E; }

/*"Your Friend Space" Title*/
.friends .heading{ font-size:0; text-align:center;}
.friends .heading:before{ content: "My Buddies"; font-size:.8rem; font-weight:bold;color:#21012E; }

/*"Your Friend Comments" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Leave a Message"; font-size:.8rem; font-weight:bold; }
</style>

<style>
/*Unbold All Links On Your Profile*/
     a{
     font-weight: normal !important;}
     
     a:visited{
     font-weight: normal !important;}
     
     a:hover{
     font-weight: normal !important;}  
     
    .top a{
        font-weight: normal !important;}
    
    .top a:hover{
        font-weight: normal !important;}
    
    .top a:visited{
        font-weight: normal !important;}
    
    .links a{
        font-weight: normal !important;}
    
    .links a:hover{
        font-weight: normal !important;}
    
    .links a:visited{
        font-weight: normal !important;}
    
    .profile a{
        font-weight: normal !important;}
    
    .profile a:hover{
        font-weight: normal !important;}
    
    .profile a:visited{
        font-weight: normal !important;}
    
    footer a{
        font-weight: normal !important;}
    
    footer a:hover{
        font-weight: normal !important;}
    
    footer a:visited{
        font-weight: normal !important;}
    
    .supporter{
    font-weight: normal !important;}
</style>

<style>
/*contact box border*/
    .contact{
border: 1px transparent !important;
border-radius: 15px;}
</style>

<style>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5edfd430-5708-478f-b8d2-2ee3a0a57c06/d9637jn-484e66ad-9458-48d4-9bfe-977d137ec5c4.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzVlZGZkNDMwLTU3MDgtNDc4Zi1iOGQyLTJlZTNhMGE1N2MwNlwvZDk2Mzdqbi00ODRlNjZhZC05NDU4LTQ4ZDQtOWJmZS05NzdkMTM3ZWM1YzQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.znXxIPl8gqCQlshnsV2QtovCdoqxNKOZ2xIvzXXwTQk) no-repeat;
    background-position: center;
    background-size: 100%!important;
    border: var(--borders)!important;
    border-radius: 15px;
    height: 450px;}
https://genericprofileeditor.neocities.org/profile?id=6326
.url-info p{
    opacity: 0.0;}
</style>

<style>
/*removes blue boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<style>
/*Centering Text and Images in Blurbs Section*/
.blurbs .inner{

text-align: center !important;

}
</style>

<style>
/* the color of the number count of your friends/comments */
    .count {
        color: #FAEFFF;
    }
</style>

<style>
/*Interests and links table header text color*/
    .profile .table-section .heading h4 {
        color: #21012E;
    }
</style>

<style>
/*Hides "XXX is your friend" Box*/
.profile-info{display: none !important;}
</style>

<style>
/*Hides Blogs*/
.blog-preview{
color: #DAD5DA;
}
</style>

<style>
/*Change "Online Now" Icon*/
.online{

content: url(https://i.imgur.com/dPAe9Dn.gif) !important;
    height: 20px;
    width: 150px;
}
</style>


<div class="image"></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 4 of 4 comments ( View all | Add Comment )
SideWalkSurfer716	1703277498 Totally awesome layout! ⚡ Nice work Report Comment
NinjaDeath	1679788792 Used it and love it thanks! Report Comment
Heathen	1676710960 Using! Ty! Report Comment
stacey marsh	1676416606 love this! you've got a great mix of cool shit but with visual clarity so that the page is actually readable, it's cool as hell Report Comment It looks so good on your page! ^^ by *.·:¨𝘗𝘦𝘢𝘯𝘶𝘵¨:·.*; 1676421019; Report
Layout published by .·:*¨𝘗𝘦𝘢𝘯𝘶𝘵¨*:·.

Lightning Layout 🗲

Description:

Preview:

Code:

Comments

Layout published by .·:¨𝘗𝘦𝘢𝘯𝘶𝘵¨:·.
