DC BLACK/WHITE/RED LAYOUT (MOBILE)

Tags: simple, black, 2000s, dark, hacksaw, emo

Description:

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Geostar+Fill&family=Lexend+Peta:wght@100&family=Orbitron:wght@900&display=swap');
p{font-family: 'Anton', sans-serif;
font-size: 100%;
color: white;
text-shadow:white; 
text-shadow: 1px 1px black;
}

h1, h2, h3, h4, h5{
font-family:'Anton', sans-serif;
font-family: 'Anton', sans-serif;
font-size: 100%;
color: white;
text-shadow: 1px 1px black;
}

.general-about .profile-pic img {
border: 10px solid #bf0407;
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 5px solid #bf0407;
 }   

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border: 5px solid #bf0407;
}

.friends {
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 300px; 
}

body{
background:url(https://images2.imgbox.com/a6/49/SBtMooaI_o.jpeg);
}

main {
background:transparent;
border: none;
}

:root {
--logo-blue: transparent;
--darker-blue: white;
--lighter-blue:transparent;
--even-lighter-blue:transparent ;
--lightest-blue: transparent ;
--dark-orange: white;
--light-orange:transparent;
--even-lighter-orange:transparent;
--green:transparent;
}

p {
font-family: 'Anton', sans-serif;
color: white;
}

a:hover {
     color: #bf0407; 
}

.profile .friends .person p {
color: white;  
text-shadow: black;
}

.profile .friends .person p:hover {
color: #bf0407;
}



.count {
color: white;
text-shadow: black;
}

body { cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur117.cur), auto; 
}

.online {
content: url('http://dl.glitter-graphics.net/pub/2876/2876881do3vxvyp2y.png');
}

.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
content:;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
content:;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
content:;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
content:;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
content:;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
content:;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
content:;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
content:;
}   


:root {
    --topic1: "General";  
    --topic2: "Music";
    --topic3: "Movies & TV";
    --topic4: "Video Games";
    --topic5: "Hobbies";
    --topic6: "Quote";

 }

.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: 1px 1px #bf0407;

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




nav .top{
background-image: linear-gradient(to bottom right,#bf0407,#b33739,#bf0407);
margin: 1em 0;
text-align: center;
border-radius: 25px;
}

nav .links{
background-image: linear-gradient(to bottom right,#bf0407,#b33739,#bf0407);
border-radius: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

.profile .contact .heading,
.profile .table-section .heading{
color: #FFFFFF;
background-image: linear-gradient(to bottom right,#bf0407,#b33739,#bf0407);
border-radius: 25px;
text-align: center;
padding: .1em;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #FFFFFF;
background-image: linear-gradient(to bottom right,#bf0407,#b33739,#bf0407);
border-radius: 25px;
text-align: center;
padding: .1em;
}

footer{
background-image: linear-gradient(to bottom right,#bf0407,#b33739,#bf0407);
border-radius: 25px;
font-style: italic;
color: #FFFFFF;
}

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