va-11 hall-A layout (base by nanno!)

Tags: purple, cyberpunk, dark, animation, layouts, autoplay, simple, layout, music

Description:

Time to mix drinks and save lives

-
base layout credit to Lanno!!
commenting + credit (to me and nanno) if your using would be appreciated!!

!important! the default "books" section DOES NOT APPEAR SO DONT PUT ANYTHING IN IT!!!! you can add it yourself if you want to

again, base by nanno, and you might like that more, so check them out!!! theres an anim at the start but you cant exactly show that in a screenshot. i should be on my profile rn though so go ahead and check it!!

va11 hall-a layout for all my cyberpunk bartenders out there. if you want to change the music thats playing, simply change the string at the end of the youtube embed in that section. if you want to change the topics (general, movies, books, etc), theyre in the "root" section.

---------customisation------------

if you want to remove the intro, simply remove all the code after " /* intro animation*/ --note this will not remove the jingle at the start, as that is part of the yt embed track (i'm too lazy to do it proper)

if you have any questions, know that i have no clue how any of this shit works, but feel free to message me anyway

Preview:

click on the image for a larger preview

Code:

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

<!-- (c) Layout base created by Nanno (https://layouts.spacehey.com/layout?id=34961), layout edited by redxypris -->

<style>
@import url("https://fonts.googleapis.com/css?family=Fira Code");

:root {
  --headers: #7851A9;
  --links: #A18FB7;
  --text: #f4eaff;
  --names: #543875;
  --font-family: 'Fira Code VF', 'Fira Code', 'Courier New', monospace;
  --mynamesize: 35px;
  --transparency: 0.33;
  --curve: 8px;
  --border-color: #bca5d4;
  --hue: 0;
  --topic1: "general";
  --topic2: "shows";
  --topic3: "music";
  --topic4: "games";
  --topic5: "books";
  --topic6: "now playing - your love is a drug - va-11 hall-a ost";
  --myactions: "contact me";
  --mytopics: "my interests";
  --mylinks: "my links";
  --casing: lowercase
}

code {
  font-family: 'Fira Code', monospace
}

@supports (font-variation-settings: normal) {
  code {
    font-family: 'Fira Code VF', monospace
  }
}

.url-info b,
h3,
h4,
h5 {
  color: var(--headers) !important
}

a {
  color: var(--links) !important
}

h2,
p {
  color: var(--text) !important
}

.count,
.friends a p,
h1 {
  color: var(--names) !important
}

nav label {
  color: var(--headers) !important
}

.section h4 {
  color: var(--names) !important
}

.online {
  color: var(--links) !important
}

.section {
  color: var(--text) !important
}

:root {
  --box_color_and_seethru: rgba(0, 0, 45, var(--transparency))
}

.section,
a,
h1,
h2,
h3,
h4,
h5,
nav label,
p {
  font-family: var(--font-family) !important;
  text-shadow: 2px 2px black !important;
  text-transform: var(--casing) !important
}

h1,
h2,
h3,
h4,
h5,
p {
  padding-left: 1px !important
}

h1 {
  font-size: var(--mynamesize) !important;
  text-transform: none !important;
  padding-left: 10px !important;
  text-transform: var(--casing) !important
}

body {
  background: url(https://filmdaily.co/wp-content/uploads/2021/02/Bliss-lede-1300x731.jpg) no-repeat center center
    fixed;
   -webkit-background-size: cover;
   background-size: cover;
}

.blog-preview,
.blurbs,
.contact,
.details,
.friends,
.heading,
.mood,
.table,
.table-section,
.url-info,
footer {
  background-color: var(--box_color_and_seethru) !important;
  border-radius: var(--curve) !important;
  padding: 8px !important;
  border: var(--borders) !important
}

#comments,
.blog-preview,
.blurbs,
.contact,
.friends,
.mood,
.table-section,
footer {
  backdrop-filter: blur(0.58px)
}

.table-section {
  border: none !important;
  background-color: var(--box_color_and_seethru) !important;
  border-radius: var(--curve) !important
}

.heading {
  background: none !important;
  padding-bottom: 0 !important
}

.profile-pic img {
  outline: none !important;
  border-radius: var(--curve) !important;
  filter: hue-rotate(var(--hue)) drop-shadow(2px 2px black) !important
}

.friends-grid img {
  outline: none !important;
  filter: opacity(90%) !important;
  width: 80% !important;
  height: 80% !important;
  border-radius: var(--curve) !important;
  filter: hue-rotate(var(--hue)) !important
}

.inner img {
  outline: none !important;
  filter: hue-rotate(var(--hue)) drop-shadow(1px 1px 2px midnightblue) !important;
  border-radius: var(--curve) !important
}

iframe {
  border-radius: 60px !important;
  opacity: 0.66 !important
}

nav {
  background-color: var(--box_color_and_seethru) !important;
  border-radius: 0 0 var(--curve) var(--curve) !important
}

nav ul {
  background: none !important
}

nav img {
  filter: opacity(80%) !important
}

.mood a img,
nav ul a img {
  display: none !important
}

.top {
  background: none !important;
  background-color: rgba(0, 0, 0, 0.8) !important
}

nav img.logo {
  filter: brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(2151%) hue-rotate(224deg) brightness(100%) contrast(94%) !important
}

.url-info {
  display: none !important
}

td {
  background-color: rgba(0, 0, 0, 0.0) !important;
  border-radius: var(--curve) !important
}

main {
  border-radius: var(--curve) !important
}

main {
  background-color: rgba(0, 0, 0, 0.0) !important
}

#comments,
.blog-preview,
.blurbs,
.comments-table,
.contact,
.details,
.friends,
.friends td,
.friends th,
.icon,
.mood,
.profile-info,
.profile-pic img,
.table,
.table-section,
.url-info,
main,
th,
tr {
  border: 1px solid var(--border-color) !important;
  outline: none !important
}

.icon {
  border: none !important
}

.mood {
  margin-bottom: 10px !important
}

.blurbs {
  margin-top: 10px !important
}

.friends {
  margin-top: -10px !important
}

.profile-info {
  border-radius: var(--curve) !important
}

.comments-table {
  border-radius: var(--curve) !important;
  border: none !important
}

.table-section {
  padding-bottom: 7px !important
}

#comments {
  margin-top: 15px !important;
  padding-bottom: 15px !important
}

.details p:last-child {
  color: var(--links) !important;
  filter: brightness(95%)
}

.contact,
.f-col,
.f-row {
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-right: 0 !important
}

.contact {
  padding-left: 2px !important
}

.f-row {
  margin-bottom: 3px !important;
  padding-bottom: 0 !important;
  padding-top: 2px !important;
  margin-top: 0 !important
}

.f-col a {
  margin-left: -2px !important;
  padding-left: -2px !important
}

.contact {
  padding-bottom: 12px !important
}

.search-wrapper input[type=text] {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px dotted var(--headers) !important;
  color: var(--names) !important;
  border-radius: 10px !important
}

button {
  border-radius: 10px !important;
  border: 1px dotted var(--headers) !important;
  font-family: var(--font-family) !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  color: var(--headers) !important
}

code {
  word-break: break-all !important
}

.w-40 .table-section:last-child .heading h4 {
  color: transparent !important;
  text-shadow: none !important;
  letter-spacing: -100px
}

.w-40 .table-section:last-child .heading::after {
  content: var(--mylinks);
  font-family: var(--font-family) !important;
  text-shadow: 2px 2px black !important;
  text-transform: var(--casing) !important;
  color: var(--headers) !important;
  font-weight: bold !important;
  text-decoration: underline !important
}

.w-40 .table-section:nth-last-child(2) .heading h4 {
  color: transparent !important;
  text-shadow: none !important;
  letter-spacing: -100px
}

.w-40 .table-section:nth-last-child(2) .heading::after {
  content: var(--mytopics);
  font-family: var(--font-family) !important;
  text-shadow: 2px 2px black !important;
  text-transform: var(--casing) !important;
  color: var(--headers) !important;
  font-weight: bold !important;
  text-decoration: underline !important
}

.w-40 .contact .heading h4 {
  color: transparent !important;
  text-shadow: none !important;
  letter-spacing: -100px
}

.w-40 .contact .heading::after {
  content: var(--myactions);
  font-family: var(--font-family) !important;
  text-shadow: 2px 2px black !important;
  text-transform: var(--casing) !important;
  color: var(--headers) !important;
  font-weight: bold !important;
  text-decoration: underline !important
}

.blurbs .heading {
  display: none !important
}

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

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

hr {
  border: 1px dashed var(--names) !important;
  filter: brightness(55%) !important
}
</style>

<style> 
body{
  background: url(https://cdn.discordapp.com/attachments/1069375750135894150/1128023943450738688/image.png) no-repeat center center
    fixed;
   -webkit-background-size: cover;
   background-size: cover;
}
</style>

/* intro animation*/

<style>

body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://cdn.discordapp.com/attachments/1069375750135894150/1128130288376103013/ezgif-5-7434bc4c97.gif');
	background-size: cover;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 4.3s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>

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

Garbage	1725308325 Using Report Comment
yuze	1724497350 using ^^ Report Comment
aerin	1717391749 using Report Comment
﹒𝐂 ۫ .	1712793943 using <3 !! Report Comment
Ace	1709408001 Will be using :] Report Comment
MJ	1708837532 Fs using, thanxoxo Report Comment
Hyerincore	1708374741 using!! Report Comment
Tanner	1707852182 using !! Report Comment
ivi	1706153884 Usando :) Report Comment
xX_Linux_Xx	1705944058 usando :] Report Comment
ame	1702067308 using! Report Comment
BarbwireChan!	1701415043 using! Report Comment
Anthony .	1694553428 using !! Report Comment
:3	1693129911 using :3 Report Comment
girlfromhocotate	1692925144 using Report Comment
V1NCE!:3	1692070168 using!! Report Comment
hyp3rspace0utlawz	1691825294 using Report Comment
Ram	1691590045 Using! Report Comment
TheHaragiri_	1691049248 using:3333 Report Comment
LUMI	1690829658 USING:3 Report Comment