As Long As I'm With You - Dark version

Tags: tragiictayy, compact, simple, dark, black

Description:

I've made a 'dark' version of my As Long As I'm With You layout.

Profile is flipped.

This layout hides name, status, info, url, interests, blog posts, friends and comments.

Screenshot taken on mobile, in landscape mode.

If you use this, please comment below, or add me on here. Thank you! :)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Unicase:wght@400;700&display=swap');
</style>


<style>

:root {--logo-blue: #fff;
--darker-blue: #00000;
--lighter-blue: #fff;
--even-lighter-blue: #fff;
--lightest-blue: #00000;
--dark-orange: #00000;
--light-orange: #fff;
--even-lighter-orange: #fff;
}

.nav{background-color:var(--box_color_and_seethru); !important;}
nav ul{background:black!important; font-size: 8px; text-align: center;}
nav ul a img, .mood a img{display:none !important;}
.top{background:
black!important;background-color:rgba(0, 0, 0, 0.0); !important;}

.hr{  border: 1px solid var(--names) !important;filter: brightness(55%) !important;
}

.table {direction:rtl;}
.table table table {direction:ltr;}

.col.w-40 {
      width: 40%;
    }

.general-about .profile-pic {
    height: 100%;
    width: 100%;
    background-color: black;
    border-radius: 0px;
    padding-top: 0%;
  }

.general-about .profile-pic img {
    max-width: 100%;
    max-height: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 0px;
    display: block;
  }

.details {
    display: none!important;
    font-size: 11px;
    border-top-left-radius: 0px;
    width: 100%;
    border-top-right-radius: 0px;
    background-color: black;
    color: White;
    margin-bottom: -16px;
  }

.mood {
    font-size: 11px;
    text-align: center;
    direction: ltr;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 100%;
    background-color: black;
    color: white;
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-top: 0%;
  }

a:link {
        color: white!important;
        font-family: Cormorant Unicase;
        text-transform: uppercase;
        background:none;
}

a:hover { 
        text-transform: uppercase;
        text-decoration-style: none!important;
        color: black!important;
        border: none;
        filter: opacity(100%);
}

a:visited {
        color: white! important;
}

.w-40 h1{
    display: none;
}


.w-40 >  p {
    display: none;
  }

main {
        border-radius: 0 0 0px 0px;
        border: none;
        background: url("")!important;
        background-color: black!important;
        font-color: white!important;
}

.profile {
   background-color: black;
   font-color: white!important;
   font-family: Cormorant Unicase!important;
   font-size: 11px;
   direction: rtl;
   border: none;
   border-color: ;
   padding-top: 0px;
   padding-bottom: 0px;
}

body {
background-image: url("https://images.unsplash.com/photo-1497076888581-9acaad5f74cc?ixid=MXwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NXwxMjc4MDU0fHxlbnwwfHx8&ixlib=rb-1.2.1&w=1000&q=80")!important; background-attachment: fixed; background-size: cover;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
   display: none;
}

.online { visibility: hidden; }

.url-info {display: none;}

.profile-info {display:none !important;}

.profile .contact .f-row {
    margin: 0;
}

main {
        border-radius: 0 0 0px 0px;
        background: rgba(000, 000, 000, 0.0) !important;
}

.contact {
        display: block;
        font-size: 9px;
        font-family: arial;
        text-align: center;
        direction: ltr;
        border: none 0px!important;
        background-image: url("")!important;
        background: ;
}

.contact .inner a img {
        font-size: 0;
}

.contact .inner a img:before {
        font-size: 1em;
        display: block;
}

.details-table td:first-child{display:none;}

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

.table.details-table {
border-collapse: collapse;
}

table.details-table td {
background-color: !important;
visibility:hidden; display:none;
}

.profile .table-section p{
        color: white;
}

.section
        p {color: white!important;}

.blurbs .inner .section h4{
  display:none;
}

.blurbs .heading {
        display: none;
}

.right .section h4{display:none !important;}

.blurbs {
    text-align: left;
    direction: ltr;
    background:;
    font-color: white! important;
    border-radius: 0px;
}

.profile .friends .heading, .profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
display: none;
background: rgba(156,56,206,1);
border-radius: 10px;
box-shadow: 2px 2px 7px #000;
color: #fff;
font-family: 'Brush Script MT', cursive;
font-size:35px;
text-transform; uppercase!important;
padding: 2px 7px;
}

.table-section:nth-last-child(2) .details-table {display:none;}

.blog-preview {
  display: none;
  grid-area: blog-preview;
}

.friends
{display:none;
}

.table.comments-table td {
        display: none;
        background-color: black!important;
        border:none;
        width: 10px!important;
        font-size: 11px;
}

.comments-table td:first-child img {
        width: 60px!important;
        border-radius: 50px;
}



main {
        border-radius: 0 0 0px 0px;
        border: none;
        background: url("")!important;
        background-color: black!important;
        font-color: white!important;
}


.container {
        border-radius: 0px 0px 0 0;
        border: none;
        overflow: hidden;
        padding: 70px;
        margin-top: -60px;
}

footer {
        border-radius: 0px;
        border: none;
        background: url("")!important;
        background-color: black;
        display: none !important;
        line-height: 0px;
        height: 83px;
        margin-top: -1px!important;
}

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

𝒜𝓁𝓎𝓍 𝑅𝓎𝒹𝑒𝓇	1622139584 love it usingggg Report Comment
Kat	1617626858 this is awesome. definitely going to use :) Report Comment Thank you! :) by TRaGiiCTaYY; 1617627699; Report
♡Jess♡	1617424504 sets the perfect mood. thank you Report Comment You're welcome, :) by TRaGiiCTaYY; 1617455623; Report
Katie	1616699832 Love this. Thank you. Report Comment You're welcome, :) by TRaGiiCTaYY; 1616701168; Report Thank you so much! :D by Vince; 1621098281; Report