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

Vicki	1 month ago using! Report Comment
HotPeppers	2 months ago Use Report Comment
KIƬƬIΣ ☆	3 months ago using !! Report Comment
Chev	4 months ago using Report Comment
Katana (Aalyx)	8 months ago Using! Report Comment
sun_veil	8 months ago using >:] Report Comment
MagicalGirlVibes	9 months ago Using ! Report Comment
Ruby	9 months ago 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	10 months ago LOVE IT!! Report Comment
DeryckEleven	11 months ago Using. Thanks! Report Comment
Emil	11 months ago Cool layout! Enjoying it so far. Goes well with "Nightcall" in the background. Report Comment
NeoNio99	1 year ago 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 ♥	3 years ago this is exactly what i was looking for. i love cyberpunk themes Report Comment
ybvet	3 years ago awesome! Report Comment
Richard	3 years ago This is amazing. Report Comment
Kairu Wolfe	3 years ago Love it! had to use it. Report Comment
Silenced Voice	4 years ago This is REALLY cool. Report Comment
Austin	4 years ago looks cool Report Comment