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

kannibal	1696626502 I'm using!! Report Comment
daria m	1690998673 I will be using it, thank you so much! Report Comment
TechRider	1688492981 I'm using it! Thank you!!! Report Comment
𖤐⭒๋࣭ ⭑karpuz	1686516600 i just started using rn. looks very cute, thank you :) Report Comment
tori ☆	1685508733 using Report Comment
𝓜𝓪𝓾𝓵𝓲𝓮	1672446543 Thanks for this! Works perfectly with my picture hehe Report Comment
Angel	1669436715 thanks!! super gorgeous Report Comment
Iraida SM	1637635619 Thanks for making this layout!! Report Comment
Annmarie Villarreal	1636695456 Hey thanks I’m gonna try to add on my Spotify playlist! Report Comment
Shaitanshammer	1627900469 This is great! Nice and clearly defined areas on the profile and pleasant on the eyes. Report Comment
JrD	1618515119 Hey! Thanks for this Amazing Layout! I was looking for something minimalistic and with no sharp edges until I catch up on my HTML and CSS knowledge (because man im super rusty) and I can't wait for the Dark mode version. If you don't mind im probably going to modify it in the upcoming days (for my own personal use) to create that sort of Apple simplified dark mode look and probably switch the font to Montserrat. But non the less Thank You! Report Comment
LIONZ LYTZ	1613457672 So clean looking, looks great! Report Comment Thanks. Work keeps me busy, so I had very little time to get into the finer details. It works though. by Brad; 1613490367; Report