Dark Suburbs Layout (click to see image preview)

Tags: black, red, dark, dreamcore
Description:

This was the first completed layout that I made for myself before the Blue Night Stars layout.
- Can be used as a base for your own layouts
- Please credit if you're using this layout as is
- Comes with "Darling Young Boyz" by Mindless Self Indulgence as BGM
Code:

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

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap');
p{
font-family: 'Gideon Roman', serif;
  font-size: 17px;
  color: #a568b0;
}

h1,h2,h3,h4,h5{
font-family: 'Gideon Roman', serif;
  font-size: 18px;
  color: #b81c30;
  text-shadow: 0 0 1px red;
}

a{
font-family: 'Gideon Roman', serif;
  font-size: 16px;
  color: #8c1b2a;
}

a:hover{
  text-decoration: none;
  color: red;
  text-shadow: 0 0 4px;
  font-weight: bold;
}

main{ 
  background-color: black;
  border: 7px double #8c1b2a;
  border-radius: 9px;
  margin: 9px;
  background: url("https://i.pinimg.com/564x/6c/29/7f/6c297f2c8a41f652aa45e06a2396b0af.jpg");
  background-repeat: no-repeat, repeat!important;
  background-size: 300px!important;
  background-position: 0px 2158px;!important;
  background-color: black!important;
}

main:before{
  width: 100%;
  height: 200px;
  display: block;
  content: "";
  background-image: url('https://i.pinimg.com/564x/73/28/d0/7328d031be804aa63348969317c22b6c.jpg');
  background-position: center center;
  background-size: cover;
}
@media only screen and (max-width: 600px){
  main:before{
  height: 200px;
}
}

nav .top{
  background-color: black;
  border: 7px double #8c1b2a;
  border-radius: 9px 9px 0px 0px;
  margin-right: 10px;
  margin-left: 10px;
}

.top a:hover{
  color: #a568b0;
  text-shadow: 0 0 9px #470bd4;
}

nav .links {
  background-color: #a568b0;
  border-bottom: 4px solid transparent;
  border-radius: 0px 0px 4px 4px;
  margin-right: 10px;
  margin-left: 10px;
}

nav .links a{
  color: #470bd4;;
  font-size: 12px;
  text-align center;
  text-shadow: 0 0 9px blue;
}

nav .links a:hover{
  text-decoration: none;
  color: #b81c30;
  text-shadow: 0 0 4px red;
  font-weight: bold;
}

nav .links .special a{
  color: #b81c30;
  text-shadow: 0 0 1px #470bd4;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
  content: " ✦ ";
  color: black;
}

.logo{
  content:url("https://files.catbox.moe/ukv6hf.png");
  display: block;
}

button, input {
  background: #b81c30;
  border: none;
  box-shadow: 0 0 10px red;
  color: black;
}

li.active .icon{ 
content:url("https://64.media.tumblr.com/71aa9c4278c44beb19a01232038bfb1a/649b431168fc9fa4-43/s75x75_c1/5bd74ba29623525d325f09536b41db95b30555ef.gifv"); 
  width: 20px;
  height: 20px;
}

body{
  background-image: url("https://64.media.tumblr.com/27f31be9cacea88e757a349525304b36/1e9b029c672111ca-b2/s400x600/cc2fad0691baaf901fb04c943e4b39568d48a8ef.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 711px;
  background-attachment: fixed;
}

.profile-info{
  color: #a568b0;
  border: 5px double #8c1b2a;
  box-shadow: 0 0 10px #470bd4;
  border-radius: 8px;
  background: url("https://i.pinimg.com/564x/9e/87/96/9e8796f95d04988701285a25f668bbe4.jpg");
  background-size: 500px;
  background-position: 0px 240px;
}

.profile-pic{
  background: #e4d3f0;
  padding: 5px 5px 196px;
  transform: rotate(deg); 
  filter: grayscale(8%);
}

.online{
  color: #b81c30;
  text-shadow: 0 0 3px red;
}

.online img{
content: url("https://cdn140.picsart.com/debeb331-4db7-4bf6-aca8-75dd8b6bcb13/376403557022211.png");
}

.profile .url-info{
  padding: 2px 7px;
  font-size: 0;
  border: 1px solid #470bd4;
  height: 410px;
  width: 290px;
  border-radius: 8px;
  background: url("https://i.pinimg.com/236x/fb/d8/bc/fbd8bcb8b4649e26477aa6671b2c0adf.jpg");
  background-size: contain;
}

.award a{
  color: #8c1b2a;
  text-shadow: 0 0 1px red;
}

.award a:hover{
  color: red;
  text-shadow: 0 0 4px;
  font-weight: bold;
}

.profile .friends .person img:not(.icon){
  border top: 6px solid #e4d3f0;
  border-left: 7px solid #e4d3f0;
  border-right: 7px solid #e4d3f0;
  border-bottom: 18px solid #e4d3f0;
  filter: grayscale(8%);
}

.profile .friends .person p{
  color: #b81c30;
  text-shadow: 0 0 5px purple;
}

.profile .friends .person p:hover{
  color: red;
  text-shadow: 0 0 5px red;
}

.count{
  color: #b81c30;
  text-shadow: 0 0 3px red;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions{
  border: none;    
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading, .profile .blurbs .heading, .profile .friends .heading{
  background: #a568b0;
  text-align: center;
  margin-bottom: 5px!important;
  border: 5px double #470bd4;
  border-radius: 8px;
}

table.comments-table{
  display: block;
  border: 5px double #8c1b2a;
  border-radius: 9px;
  box-shadow: 0 0 5px #470bd4;
  height: 560px!important;
  overflow-y: scroll;
}

.comment-replies{
  border: 4px solid #8c1b2a;
  border radius: 3px;
  box-shadow: 0 0 5px #470bd4;
}

.blog-preview h4{
  background-color: #a568b0;
  border: 5px double #470bd4;
  padding: 2px 7px;
  border-radius: 8px;
  text-align: center;
}

.blog-preview p{
  border-bottom: 2px dotted #470bd4;
  margin: 2px;
}

.profile .blurbs .section h4{
  color: #b81c30;
  text-shadow: 0 0 3px #470bd4;
}

.blurbs{
height: 900px;
overflow-y: auto;
border: none!important;
}

.details-table td:first-child, .comments-table td:first-child, .music-table td:first-child{
  background: #0e081a;
  border: 5px double #a568b0;
  border-radius: 3px;
  font-weight: bold;
}

.details-table td, .comments-table td, .music-table td{
  background: #150e33;
  border: 5px double #a568b0;
  border-radius: 3px;
}

table, th, td{
  border: none;
}

.table-section{
height: 600px;
overflow-y: auto;
border: none!important;
}

table.comments-table td .icon{
  content: url("https://64.media.tumblr.com/897c81c7be197898e44332b786946c0d/4d9ab15404ddfee1-cd/s75x75_c1/3f17315502213543bc2f847738eb65c5960973cb.gifv");
  width: 25px;
  height: auto;
}

:root{
  --topic1: "General";
  --topic2: "Music";
  --topic3: "Anime, Manga & Comics";
  --topic4: "Games";
  --topic5: "Hyperfixations";
  --topic6: "Ppl I like";
 }

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

.details-table tr td:first-child p::after{
  color: #b81c30;
  letter-spacing: normal !important;
  text-shadow: 0 0 2px red;
}

.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);
}

footer{
  text-align: center;
  border: 7px double #8c1b2a;
  border-radius: 9px;
  margin: 9px;
  background-color: #0e081a;
}

*{
  cursor: url(https://cur.cursors-4u.net/others/oth-2/oth110.cur), auto !important;
}

html:before{
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgb(2 3 37 / 58%) 50%, rgb(0 0 0 / 0%) 50%);
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

body:before{

  content: " ";
  height: 100vh;
  width: 100vw;
  display: block;
  position: fixed; 
  top: 0; 
  left: 0; 
  z-index: 100;
  background-image: url('https://i.ibb.co/5TgwzSY/vhs-overlay.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
  animation: yourAnimation 3s ease 0s 1 normal forwards;
  pointer-events: none;
}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
::-webkit-scrollbar {
    width: 12px;
    background-color: #180d2e;
}

::-webkit-scrollbar-thumb{
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 6px #470bd4;
  background-color: #b81c30;
}

::-webkit-scrollbar-track{
  background-color: #180d2e;
}

.contact img.icon{ 
display: none; 
}

.contact{background-color:  !important;}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{ 
 /* add to friends */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/ce9e1a93e1a248966d53c67a5cb76f0a/35a8c1a92b03cef1-77/s100x200/b4a5fdcf5a087e8fceef2e4bb8edc1ea14441038.pnj'); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{ 
 /* add to favorites */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/b8c3506cf92985814f0d71ad09349d17/b4746bdbb4997815-af/s75x75_c1/bdf3f1abbc6351d0323d02a374bf96c61e1cad8c.gifv'); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{ 
 /* send message */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/86d21b7b7cd180d4f18e16e2963a5177/f7c576b80d110491-24/s75x75_c1/809199d4e5bff8bfa4b9ff1d25c559e82dd994f3.gifv'); 
 background-size: 100% 100%;
} 


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
 /* forward to friend */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px;  
 background-image: url('https://64.media.tumblr.com/8261e363f610b5bb8122fac0b3b5b595/52bc904368f8588c-d5/s75x75_c1/fb528bea782e62ffe306224752bdf26de7b22f16.gifv'); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
    /* instant message */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/5a3293d8bebed08cf1c222aa9e8468b7/52bc904368f8588c-2a/s75x75_c1/e58e6fd84e89870d7f40cb83b1a169f172138169.gifv'); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* block user */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/1c659155c71c641bf147de4829e6a000/4a13a04828e62c99-82/s75x75_c1/ba5cafe28b1834a2665a0fcfdc2f466e8544d73d.gifv'); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before{
    /* add to group */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/678e66958573d2b03a498b0605c86e1e/d7e373807f4b1d57-d7/s75x75_c1/a3f86c2cf22c9e1cb6a1b47d9c8c01f25be73818.gifv'); 
 background-size: 100% 100%;
} 

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before{
    /* report user */
 content: " "; 
 display: inline-block; 
 width: 20px; 
 height: 20px; 
 background-image: url('https://64.media.tumblr.com/897c81c7be197898e44332b786946c0d/4d9ab15404ddfee1-cd/s75x75_c1/3f17315502213543bc2f847738eb65c5960973cb.gifv'); 
 background-size: 100% 100%;
} 
</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 2 of 2 comments ( View all | Add Comment )
Lnizzy
1708726912
using!!
Report Comment