Basic Light

Tags: basic, layout

Description:

Basic layout to allow your content to shine. Good for portfolios and photos. Will post a "Basic Dark" theme in a few days, probably. For those who like to keep it simple. I am leaving the URL for my Spotify playlist in the code. If you have Spotify and want to post a playlist, simply find a playlist you would like to put on your profile, in Spotify for desktop, click on the ellipsis, go to Share -> Copy Embed Code and replace what I have between the src="" quotation marks with the URL your Spotify Embed Code gives you. If you do not want a playlist on your page, just remove everything at the top from <iframe to the second <br />.

Preview:

click on the image for a larger preview

Code:

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

<iframe src="https://open.spotify.com/embed/album/0bO4qU98i4vCpGqTElUZDQ" width="100%" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe><br/><br/>

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

:root {
    --light-gray: #f2f0f0;
    --gray: #e3e3e3;
    --darker-gray: #edeef6;
    --logo-blue: #7f808c;
    --darker-blue: #7f808c;
    --lighter-blue: #edeef6;
    --even-lighter-blue: #edeef6;
    --lightest-blue: #edeef6;
    --dark-orange: #333333;
    --light-orange: #edeef6;
    --even-lighter-orange: #edeef6;
    --strange-yellow: #dbae2e;
    --green: #34D399;
    --dark-green: #059669;
}

body, html {
background: #f7f7f7;
color: var(--logo-blue);
font-family: 'Roboto', sans-serif; !important;
}

.f-row {
padding: 4px 7px;
}

.f-col img, .details-table img {
  -webkit-filter: grayscale(100%) contrast(100%);
  filter: grayscale(100%) contrast(100%);
}

.logout-btn {
font-size: 100%;
}

main {
background: #f7f7f7;
color: #333333;
padding-top: 0;
}

main .left, main .right {
padding: 10px 20px;
}

button {
background-color: var(--logo-blue);
border: solid 1px var(--logo-blue);
color: white;
font-family: 'Roboto', sans-serif;
padding: 4px 10px;
font-size: 90%;
border-radius: 3px;
box-shadow: none;
outline: none;
appearance: none;
}

button:hover {
background: var(--dark-orange);
border-color: var(--dark-orange);
cursor: pointer;
}

.comments-table a:hover {
text-decoration: none;
}

a:hover {
color: inherit;
}

nav .links a {
color: var(--logo-blue);
}

nav .links, footer .links {
text-align: center;
}

.col.w-40.left h1 {
margin: 0;
}

p.online img {
display: none;
}

p.online {
display: none;
}

.profile-pic img {
border-radius: 0.5em;
}

.general-about .profile-pic {
margin: 0 15px 15px 0;
}

.profile .mood p {
margin-bottom: 15px;
}

.contact .heading {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}

.table-section {
padding: 12px;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions
.contact .heading {
border-radius: 4px;
}

.profile .blurbs .heading, .profile .friends .heading {
border-radius: 4px;
padding: 12px 12px;
margin: 10px 0;
}

.profile .contact .heading {
padding: 12px;
}

.profile .table-section .heading, .home-actions .heading {
padding: 12px;
margin: -12px -12px 0 -12px;
}

.details-table td:first-child {
padding: 8px 3px 8px 0px;
background: transparent;
}

.details-table td:last-child {
padding: 8px 0px 8px 3px;
background: transparent;
}

.profile .url-info {
padding: 8px 12px;
font-size: 0.875em;
}

.url-info p:last-of-type {
margin-top: 10px;
}

table.details-table {
background: transparent;
}

.profile-info {
padding: 0;
border: none;
}

.profile-info .inner h3 {
font-weight: 400;
font-size: 0.9em;
margin: 0;
}

.profile-info .inner h3 a {
color: var(--logo-blue);
}

.profile-info .inner {
padding: 0.5em 1.3em;
border: solid 1px var(--lightest-blue);
background: var(--lightest-blue);
border-radius: 0.5em;
}

.profile {
padding-top: 10px;
background: white;
}

.heading h4 {
color: #7f808c;
}

table.comments-table {
border-top-color: #f7f7f7;
border-right-color: #f7f7f7;
border-bottom-color: #f7f7f7;
border-left-color: #f7f7f7;
margin-top: 15px;
}

.comments-table td:first-child, .music-table td:first-child {
border-bottom-left-radius: 0.5em;
border-top-left-radius: 0.5em;
padding: 6px 0 12px 0;
}

.comments-table td:last-child, .music-table td:last-child {
border-top-right-radius: 0.5em;
border-bottom-right-radius: 0.5em;
padding: 6px 10px 12px 10px;
}

.comments-table td:first-child img:not(.icon), .bulletin-table td:first-child img:not(.icon) {
border-radius: 0.5em;
}

.profile .blurbs .section h4 {
margin-bottom: 10px;
}

.count {
color: inherit;
}

.person img {
border-radius: 0.5em;
}

.comment-replies {
padding: 0;
border: none;
margin-top: 0;
}

.comment-reply {
padding: 0;
}

footer {
background: transparent;
}
</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 20 of 27 comments ( View all | Add Comment )

K4NADE	1 month ago Using!!! Report Comment
Emma :3	2 months ago Using! Report Comment
melisa	2 months ago using Report Comment
— A.R ୨୧	4 months ago this is awesome :3 using ! ! Report Comment
4NDR3	4 months ago using the spotify, tysm!! Report Comment
Jay	4 months ago Using <3 Report Comment
chloe	4 months ago using Report Comment
ARANCIA!!! >_<	8 months ago using js spotify part <_< Report Comment
bridge	9 months ago Using! Report Comment
animatic	9 months ago just usin the spotify 1 Report Comment
Nixzy_Drawz	9 months ago Using just the Spotify part :3 Report Comment
AARON ALCIDE CEREZO’S MUSEUM	9 months ago Might using. Report Comment
AARON ALCIDE CEREZO’S MUSEUM	9 months ago Might using. Report Comment
1☆	11 months ago using Report Comment
𝐫𝐨𝐜𝐤𝐰𝐞𝐥𝐥 ☕️	11 months ago using-! Report Comment
Jam ✩	1 year ago using!! Report Comment
kannibal	1 year ago I'm using!! Report Comment
daria m	1 year ago I will be using it, thank you so much! Report Comment
TechRider (Mélange)	1 year ago I'm using it! Thank you!!! Report Comment
𖤐⭒๋࣭ ⭑karpuz	1 year ago i just started using rn. looks very cute, thank you :) Report Comment