The Moon and the Stars

Tags: tragiictayy, compact, layout, cute, column, black, dark

Description:

Single column layout, with drop-down contact box!

This layout hides: status, original contact box, url, interests, blog posts, friends and comments.

Add your profile ID for an already made contact-link-section.

If you 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=2863) -->

~ PASTE THIS CODE INTO YOUR ABOUT ME ~

<div class="dropdown">
  CONTACT
  <div class="dropdown-content">
    <a href="https://spacehey.com/addfriend?id=">Add me</a>
    <a href="https://spacehey.com/block?id=">Block me</a>
    <a href="https://im.spacehey.com/?user=">Message me</a>
    <a href="https://spacehey.com/unfriend?id=">Remove me</a>
    <a href="https://spacehey.com/report?type=user&amp;id=">Report me</a>
    <a href="https://spacehey.com/addcomment?id=">Leave a comment</a>
    <a href="https://spacehey.com/comments?id=">View my comments</a>
  </div>
</div>


~ PASTE THIS CODE INTO YOUR INTEREST SECTION ~


<style>
@import url('https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&family=Homemade+Apple&family=Indie+Flower&display=swap');
</style>

<style>

:root{
    --headers: Black;
    --text: white; 
    --names: white;
    --links: gray;
    --hover white;
}

nav{
    border: dotted 1px gray;
    border-bottom: transparent!important;
    background-color: black;
}
nav .top{
    background: transparent;
}

nav .top a, nav .links a{
    color: var(--text);
}
nav .links{
    color: var(--text);
    font-family: 'Annie Use Your Telescope', cursive;
    background-color: transparent;
    text-align: center;
    font-size: 7px;
}

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

nav img.logo{
   filter: invert(91%) sepia(7%) saturate(193%) hue-rotate(131deg) brightness(90%) contrast(87%);!important;
}

search-wrapper input[type=text] {
    background-color: transparent!important;
    font-family: 'Indie Flower', cursive;
    color:var(--text) !important;
}

button{
    background-color: transparent !important;
    font-family: 'Indie Flower', cursive;
    color:var(--text) !important; border: none!important;}

hr{  
border: 1px dotted gray!important;
}

b {
  color: gray;
  font-family: 'Indie Flower', cursive;
  letter-spacing: -2px;
}

i {
  color: gray;
  font-family: 'Indie Flower', cursive;
  letter-spacing: 2px;
}

a:link {
  color: gray;
}

a:hover {
  color: white;
  text-transform: uppercase!important;
}

a:visited {
   color: gray;
}

main {
    background: black;
    overflow: scroll;
    overflow-x: scroll;
    overflow-x: hidden;
    height: 400px;
}

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

.details {
    display: none!important;
}

.mood {
    display: none!important;
    visibility: hidden;
}

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

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

.blurbs .heading{display:none !important;}

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

.profile .contact, .profile .url-info, .home-actions {
display: none;
}

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

.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details
{
border: 0px solid black !important;
outline: none !important;
}

.blog-preview {
  display: none;
}

main {
        border-left: dotted 1px!important;
        border-right: dotted 1px!important;
        border-bottom: dotted 1px!important;
        border-top:transparent;
        border-color: gray!important;
        background-color: black!important;
        font-color: white!important;
}

h1{ 
  color: white;
  font-family: 'Homemade Apple', cursive;
  font-size: 20px!important;
  margin-left: 150px!important;
  text-align: center!important;
}

.table.details-table td {
visibility:hidden; display:none;
}

.friends
{display:none;
}

.table.comments-table td {
        display: none;
}

body {
   background-image: url("https://i.pinimg.com/236x/3e/ec/d6/3eecd616486ab27205698ce30bb3060b.jpg");
   background-attachment: fixed;
   background-size: contain;
   background-repeat: repeat!important;
}

.profile {
   display: flex;
   flex-direction: column;
   text-transform: lowercase!important;
}

.profile-pic img{
    width: 300px;
    height: 300px;
    border: dotted 1px gray;
    border-radius: 500px !important;
    padding:5px;
    margin-left: 150px!important;
}

.contact {
   display: none!important;
   visibility: hidden;
}


.blurbs {
   text-align: center!important;
   background-color: black;
   color: var(--text);
   font-family: 'Annie Use Your Telescope', cursive;
   margin-top: -160px!important;
}

.container {
   padding: 150px;
   margin-top: -130px;
}

footer { 
   background-color: transparent 
}

</style>


<style>
.dropbtn {
  background-color: black!important;
  color: white!important;
  padding: 16px;
  font-size: 10px;
  border: solid 1px gray;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: black!important;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: black;}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: black;
}
</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 )