Cyber Punky Stuff

Tags: cyber, cyberpunk, techno, retro, synthwave, electronic, cool
Description:

Cyber punky, lit techno 80's vibe.
Synth paradise
lmk if yall like it
Preview:

click on the image for a larger preview
Code:

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

Just a dude doin stuff ya dig?
<style> 

/*============= cursors  ===================*/
a:hover{
 cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat924.cur'), auto;
}
body {
 cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat924.cur'), auto;
}
</style>
<style>
/*============= font style ===================*/
@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
</style>
<style>
/*============= layout details ===================*/
:root{
 --headers: cyan;
 --text: white;
 --names: Fuchsia;
 --links: cyan;
 --hover: #FF00FF;
 --borders: 5px double cyan !important;

 --background_image: url("https://i.redd.it/8mn4p369li331.png");

 --font-family: 'Orbitron', sans-serif;
 --mynamesize: 50px;
 --transparency: .55;
 --curve: 0px;
 --hue: 0deg;
 --simple_bg: #ffffff;
}
main .left{
 padding-right: 20px;
}
.url-info{display:none !important;} /* to hide the url */
.blurbs .heading{display:none !important;} /* to hide the blurbs heading */
h3, h4, h5, .url-info b{ color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, h2{color: var(--text) !important;} /* color of text */
h1, .friends a p{color: var(--names) !important;} /* color of names, and friends counter */
h1, .friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers) !important;text-align:center;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */
.comment-reply:not(:first-child){border-top: 3px double magenta;} /* line in bewtween comment replies*/
.count{color:#00FFFF;}
/*============= text decoration ===================*/
a:hover,
a:active,
.blog-entry .kudos-btn:hover,
.blog-entry .kudos-btn:active{
 text-decoration: underline;
 text-decoration-style: double;
}
.logout-btn:hover,
.logout-btn:active{
 text-decoration: underline;
 text-decoration-style: double;
}
nav .top a:hover{
 text-decoration: underline;
 text-decoration-style: double;
}
nav .links a:hover{
 text-decoration: underline;
 text-decoration-style: double;
}
/*============= font family ===================*/
h2, h3, h4, h5, a, p, nav label, .section{
 font-family: var(--font-family) !important;	
 text-shadow: 0px 0px 0px black !important;
 font-size: 12px;
}
/*============= padding and margin ===================*/
.icon{border:none !important;}
.blurbs{margin-top:10px !important;margin-bottom:30px !important}
.friends{margin-top:-10px !important;margin-bottom:30px !important}
.profile-info{border-radius: var(--curve) !important;}
.comment-replies{border:10px double magent;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.table-section{padding-bottom:7px !important;margin-top:30px!important}
#comments{margin-top:5px !important;padding-bottom:5px !important}
.details p:last-child{color:var(--links) !important; filter: brightness(95%);}
.mood{margin-top:20px;}
/*============= background image ===================*/
body {
 background-image: var(--background_image) !important;
 background-color: #000000 !important;
 background-repeat: no-repeat;
 background-size: 1920px 1080px;
}
/*============= navigation ===================*/
/* change logo color at https://codepen.io/sosuke/pen/Pjoqqp */
nav{
 background-image: url(https://cdn.statically.io/img/i1.wp.com/windowscustomization.com/wp-content/uploads/2018/10/cyberpunk-night-city.gif?fit=750%2C364&quality=80&strip=all&ssl=1);
 box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #FF00FF;
 margin-bottom: 10px;
 border: var(--borders);
}
nav .top {
 background: rgba(0,0,0,0.0);
}
nav .top a{
 color: magenta!important;
}
nav .links {
 background: transparent!important;background-size: 100%100%!important;}
nav img.logo{filter: brightness(0) saturate(100%) invert(76%) sepia(42%) saturate(432%) hue-rotate(155deg) brightness(100%) contrast(105%); !important;}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " | ";
 color: var(--headers);
}

<div>
Nhfgva'f gurzr. 
jjj.fcnprurl.pbz/yvg
Qba'g gel naq fgrny perqvg jurer vgf qhr

/*============= color the search bar and button ===================*/
.search-wrapper input[type=text] {
background-color: rgba(0, 0, 0, 0.0) !important;
border:2px magenta !important;
border-radius: 0px !important;
}
button{
border-radius: 0px !important;
border: 2px magenta!important;
font-family: var(--font-family) !important;
background-color:rgba(0, 0, 0, 0.0) !important;
color:magenta!important;
}
/*============= online icon  ===================*/
.online {content: url(https://static.spacehey.net/icons/tick.png);}

/*============= profile name ===================*/
h1{
padding-left: 20px !important;
font-family: 'Orbitron', sans-serif;
text-shadow:2px 2px #FF00FF;
font-size:35px !important;
margin-top: -10px!important;
color: var(--headers)!important;
}
/*============= box shadows ===================*/
.mood, .blog-preview, .contact{
margin-bottom: 30px;
box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #FF00FF;
}
.table-section, .blurbs, .friends{
margin-bottom: 30px !important;
box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #FF00FF;
}
.friends{
margin-top: 10px!important;
}
/*============= profile info ===================*/
.profile-info{
 background:#060606;
 border: var(--borders)!important;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 15px 5px;
 margin-bottom: 30px;
 box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #FF00FF;
 
}
.profile-info .inner{
 font-weight: bold;
 text-align: center;
}
/*============= contact  ===================*/
.contact {
 background: #060606;
 padding: 20px;
 margin-bottom:40px!important;
}
 /*============= images ===================*/
main{
 background: transparent;
 padding: 6px 0px;
}
.profile-pic img{
outline:none !important;
border: var(--borders)!important;
filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black)!important;
box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #FF00FF;
}
.profile .friends .person img{
transform: skew(0deg, 0deg);
border-radius: 0px;
filter:hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !important;
}
.friends-grid img{
outline:none !important;
filter: opacity(90%) !important;
border-radius: var(--curve) !important;
}
.inner img{
outline:none !important;
filter: hue-rotate(var(--hue)) drop-shadow(0px 0px 0px black) !important;
border-radius: var(--curve) !important;
}
/*============= box color for interests and social media. change 0.0 to 0.5 to see a difference ===================*/
:root{--box_color_and_seethru: rgba(0, 0, 0, 0.0);}
/*============= interest table background color. replace transparent with any color to see the change ===================*/
td {background-color: transparent!important;}
hr{
 border-top: 1px magenta;
}
/*============= boxes ===================*/
.heading, .url-info, .blurbs, .friends, .table, .table-section, footer{
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}
.friends, .blurbs{
background: #060606;
}
.mood, .contact, .blog-preview{
border-radius: var(--curve) !important;
padding: 2px !important;
border: var(--borders) !important;
}
.mood, .blog-preview {
text-align: center;
background: #060606;
border: var(--borders) !important;
}
.table-section{
border:var(--borders) !important;
background-color:#060606!important;
border-radius: var(--curve) !important;}
.heading{
background:transparent!important;
padding-bottom: 4px !important;
background-size:100%100%!important;
text-align: center;
border:none!important ;
}
.comments-table {
display: block;
height: 500px!important;
overflow-y: scroll;
border: var(--borders) !important;
outline: none !important;
}
.comments-table td {
background-image: url('') !important;
background-size: cover;
}
.comments-table td:first-child img {
/* you can clip images at https://bennettfeely.com/clippy and add the code here */
}
/*============= footer ===================*/
footer{
 color:red;
 text-align: center;
 font-size: 60%;
 margin: 10px 0 10px;
 padding: 10px 5px;
 background: #060606;
 box-shadow:calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) #FF00FF;
}
</style>

<style>
/* Force scrollbars onto browser window */
body {
margin-bottom: 10%;
}
/* Box styles */
.myBox {
border: double;
padding: 5px;
font: 24px/36px sans-serif;
width: 200px;
height: 200px;
overflow: scroll;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
width: 2px;
border: 1px double cyan;
}
::-webkit-scrollbar-thumb {
background: magenta;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: magenta;
}

.left-wall {
  z-index: -3;
  margin-top: -20%;
  margin-left: -60%;
  position: fixed;
  max-width:70%;
  height:auto;
  background-color: transparent;
  border-color: cyan;
  transform: rotate(-22.5deg);

}

.left-wall-text  {
	z-index: -3;
  line-height: 3;
  font-family: Orbitron !important;
  color: yellow !important;

  /* transform: rotate(9.5deg); */
}

.left-wall .left-wall-text p {
	  z-index: -3;
    font-size: 40px !important;
    letter-spacing: 30px !important;
    font-family: Orbitron !important;
    color: #000000 !important;
    text-shadow: 2px 2px #F8F862;
}

.left-wall-two {
  z-index: -3;
  margin-top: 11%;
  margin-left: -40%;
  position: fixed;
  max-width:50%;
  height:auto;
  background-color: transparent;
  border-color: magenta;
  transform: rotate(-12.5deg);

}

.left-wall-two .left-wall-text-two p {
	  z-index: -3;
    font-size: 40px !important;
    letter-spacing: 30px !important;
    font-family: Orbitron !important;
    color: #000000 !important;
    text-shadow: 2px 2px #000000;
}

.right-wall {
  z-index: -3;
  margin-top: -25%;
  margin-left: -50%;
  position: fixed;
  /* max-width:50%; */
  height:auto;
  background-color: transparent;
  border-color: cyan;


}

.right-wall-text  {
	z-index: -3;
  line-height: 2;
  font-family: Orbitron !important;
  color: yellow !important;
	transform: rotate(9.5deg);

  /* transform: rotate(9.5deg); */
}

.right-wall .right-wall-text p {
	  z-index: -3;
    font-size: 70px !important;
    letter-spacing: 30px !important;
    font-family: Orbitron !important;
    color: #000000 !important;
    text-shadow: 2px 2px #FF00FF;
}

.ground-background {
	z-index: -3;
  display: block;
  z-index: -2;
  margin-top: -28%;
  margin-left: -10%;
  position: fixed;
  width:25%;
  height:200%;
  background:
  background-color: black;
  border-color: cyan;
  transform: rotate(55.5deg);
}

.ground {
	z-index: -3;
  margin-bottom: -10%;
  margin-left: -46%;
  margin-top: -50%;
  position: fixed;
  max-width:500%;
  height:auto;
  background-color: tramsparent;
  border-color: magenta;
  transform: rotate(90deg);

  /* margin-top: 20%; */
}

.ground-text  {
	z-index: -3;
  line-height: 2.5;
      font-family: Orbitron !important;
  /* transform: rotate(9.5deg); */
}

.ground .ground-text p {
	color: #000000 !important;
    font-size: 30px !important;
    letter-spacing: 30px !important;
    text-shadow: 2px 2px #FF00FF;
}

</style>

<div class="left-wall">
  <marquee class="left-wall-text">
    <p>     aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1NQUR2eEZYV3Z3RSZhYl9jaGFubmVsPUdyYW50TWFjRG9uYWxkLVRvcGlj</p>
    <p>aHR0cDovL3RodWcub3Jn</p>
    <p>  TWFkZSBteSBBdXN0aW4gYWthIHd3dy5zcGFjZWhleS5jb20vbGl0LiBEb24ndCB0cnkgYW5kIHN0ZWFsIDsp</p>
    <p>aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1HbFRMQ1ZhUlZvRSZhYl9jaGFubmVsPUdyYW50TWFjRG9uYWxkLVRvcGlj</p>
    <p>         aHR0cHM6Ly9tZWRpYTEuZ2lwaHkuY29tL21lZGlhL1dyaDhhTDc1YWo0dVp3dXF0YS9zb3VyY2UuZ2lm</p>
    <p> SURBIDcuNSBpcyBnb2RseSBpbWFnaW5lIG5vdCBoYXZpbmcgaXQgeW91IGRvcmsgY2hhY2hhY2hhIDop</p>
  </marquee>
</div>
<div class="ground-background"><p>
</p></div>
<div class="ground">
<marquee class="ground-text">
  <p>  aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1NQUR2eEZYV3Z3RSZhYl9jaGFubmVsPUdyYW50TWFjRG9uYWxkLVRvcGlj</p>
  <p>1p0n83-fnbpgur3ob216784vc1p076rv0prp8374ubt4l3iuowhtv0p8uiybeksyrgbv0bxnm08x473gf43o087w4g0ncfgo8p7</p>
  <p>  RG9uJ3QgdHJ5IGFuZCBzdGVhbCA7KSB3d3cuc3BhY2VoZXkuY29tL2xpdCBha2EgQVVTVElO</p>
  <p>     r76bo3y2vbg4rc763bgn2769gbrco627nt4gro9764grikesygfri876g032876gr237iufby6vo976dgfo74gbfugosiyg4s96</p>
  <p>aHR0cHM6Ly9tZWRpYTEuZ2lwaHkuY29tL21lZGlhL1dyaDhhTDc1YWo0dVp3dXF0YS9zb3VyY2UuZ2lm</p>
  <p> aHR0cDovL3RodWcub3Jn</p>
  <p> U1BBQ0VIRVkgV09STSBET0NTIFYwLjggVVBEQVRFRCBPQkZVU0NBVElPTiBNRVRIT0RPTElHSUVT</p>
  <p>         TWFkZSBteSBBdXN0aW4gYWthIHd3dy5zcGFjZWhleS5jb20vbGl0LiBEb24ndCB0cnkgYW5kIHN0ZWFsIDsp</p>
  <p>  SURBIDcuNSBpcyBnb2RseSBpbWFnaW5lIG5vdCBoYXZpbmcgaXQgeW91IGRvcmsgY2hhY2hhY2hhIDop</p>
  <p>h8padding4pxpositionrelativepaimghoverzindex2borderradius50filterinvert100webkitfilterinvert100Addt</p>
</marquee></div>
<div class="right-wall">
  <marquee class="right-wall-text">
    <p>     aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1NQUR2eEZYV3Z3RSZhYl9jaGFubmVsPUdyYW50TWFjRG9uYWxkLVRvcGlj</p>
    <p>eft40pxma  rginright40pxmarginbottom40pxba  ckgroundurlhttpsrescloudinarycomdzbqfft7rimageuploadv160991</p>
    <p> TWFkZSBteSBBdXN0aW4gYWthIHd3dy5zcGFjZWhleS5jb20vbGl0LiBEb24ndCB0cnkgYW5kIHN0ZWFsIDsp</p>
    <p>aHR0cDovL3RodWcub3Jn</p>
    <p> SURBIDcuNSBpcyBnb2RseSBpbWFnaW5lIG5vdCBoYXZpbmcgaXQgeW91IGRvcmsgY2hhY2hhY2hhIDop</p>
    <p>     aHR0cHM6Ly9tZWRpYTEuZ2lwaHkuY29tL21lZGlhL1dyaDhhTDc1YWo0dVp3dXF0YS9zb3VyY2UuZ2lm</p>
  </marquee>
</div>


<div>
 <iframe frameborder="0" width="0" height="0" src="https://www.youtube.com/embed/zLAfTaCFXk4?autoplay=1;fs=0&amp;iv_load_policy=3&amp;showinfo=0&amp;rel=0&amp;cc_load_policy=0&amp;start=1&amp;end=270&amp;vq=large&amp;origin=https://youtubeembedcode.com"><div>youtubeembedcode de</div><div> </div></iframe>
</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 7 of 7 comments ( View all | Add Comment )
NeoNio99	1709253719 Synthwave ftw! Using this on my profile with "The Driver" by Ollie Wride. Had to remove the marquees since they were slowing down my browser. Report Comment
(っ◔◡◔)っ ♥ Pixelily ♥	1638061244 this is exactly what i was looking for. i love cyberpunk themes Report Comment
ybvet	1637822159 awesome! Report Comment
Richard	1635640789 This is amazing. Report Comment
Kairu Wolfe	1633998833 Love it! had to use it. Report Comment
Silenced Voice	1614444173 This is REALLY cool. Report Comment
Austin	1613488143 looks cool Report Comment