Space

Tags: space, outerspace, cute, cartoon, drawing, colorful, dark, simple, stars, planets

Description:

layout by cristiana

A cute space-themed layout for your profile.

Click here to view it live on my blog and give kudos if you feel like it.

Leave a comment somewhere if you like it and you think I should know.

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Turret+Road:wght@200&display=swap');
:root {
    --darkblue: #13243e;
    --lightblue: #69a4c1;
    --purple: #8a7394;
    --green: #83BB4F;
    --orange: #e9b53c;
}
body {
    background: url("https://i.postimg.cc/zXbCvQfp/color-seamless-space-pattern-102902-2360.jpg");
    font-family: 'Turret Road', cursive;
    letter-spacing: 2px;
}
main {
    color: white;
}
a {
    color: var(--lightblue)!important;
    text-transform: uppercase;
    font-size: 9px!important;
    font-weight: bold;
}
a:hover {
    text-decoration: none!important;
    color: var(--green)!important;
}
main, nav .top, nav .links {
    background: var(--darkblue);
}
nav .top, nav .links a, .logout-btn, .logout-form {
    color: var(--orange);
    font-family: 'Turret Road';
    letter-spacing: 2px;
    font-size: 13px;
}
.search-wrapper input, button {
    background: #454545;
    color: white;
    font-family: 'Turret Road';
    letter-spacing: 1px;
    font-size: 12px;
}
button:hover, a:hover {
    cursor: pointer;
}
.edit-info {
    background: transparent;
    border: 0;
}
.profile-info {
    border-color: var(--lightblue);
}
.profile .blurbs .section h4 {
    color: var(--purple);
}
.url-info {
    color: var(--orange);
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    border-color: var(--orange);
    border-width: 1px;
}
.profile .friends .person p {
    color: var(--purple);
}
.details-table td:first-child, .details-table td {
    background: transparent;
    color: rgb(233,181,60);
}
.details-table td:not(td:first-child) {
    color: var(--lightblue);
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading  {
    background: var(--orange);
    color: var(--darkblue);
}
.profile .blurbs .heading, .profile .friends .heading {
    background: var(--green);
    color: var(--darkblue);
    font-weight: bold;
}
.blog-preview h4 {
    color: var(--lightblue);
}
table.comments-table {
    border: 0;
}
.comments-table td:first-child, .music-table td:first-child, .comments-table td, .music-table td {
    background: transparent;
}
.comments-table td:first-child, .music-table td:first-child {
    border-right: 0;
}
.comment-replies {
    border-width: 1px 0 0;
}
.count {
    color: var(--purple)!important;
}
footer {
    background: transparent;
}
#credit {
    position: fixed;
    bottom: 3px;
    left: 3px;
    font-family: sans-serif;
    font-size: 10px;
    color: black;
    background: white;
    padding: 2px;
    border-radius: 2px;
    z-index: 5;
    letter-spacing: 1px;
}

@media screen and (max-width: 800px) {
    main {
        color: white;
        background: transparent;
    }
    .col > div {
        background: var(--darkblue);
        padding: 5px;
        margin-bottom: 15%;
    }
}
</style>
<div id="credit">
    layout by <a href="https://www.spacehey.com/cristiana">cristiana</a>
</div>

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.