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 17 of 17 comments ( View all | Add Comment )

Jay	1730511512 Using Report Comment
🎀🖤Leon🖤🎀	1729023831 Using Report Comment
🎀🖤Leon🖤🎀	1729023830 Using Report Comment
Katana (Aalyx)	1721333830 Using! Report Comment
sun_veil	1721016150 using >:] Report Comment
MagicalGirlVibes	1720166915 Using ! Report Comment
Ruby	1719049291 Is there anyway to remove the letters floating around? its not an overly big deal but it kinda distracts me from what im doing Report Comment
XwX	1715419893 LOVE IT!! Report Comment
DeryckEleven	1715213476 Using. Thanks! Report Comment
Emil	1714301217 Cool layout! Enjoying it so far. Goes well with "Nightcall" in the background. Report 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