Emerald Night (Layout)

Tags: dark, green, simple, modern, layout, dark mode

Description:

"Step into the captivating world of Emerald Night – a sleek and modern Spacehey layout that seamlessly blends dark sophistication with vibrant green accents. Explore a unique profile design that balances simplicity and style, providing a visually appealing experience. Immerse yourself in the depths of this dark mode layout, where shadows dance with emerald hues, creating a profile that stands out in the Spacehey cosmos. Elevate your online presence with this trendy and stylish space, crafted for those who appreciate a touch of mystique and a dash of contemporary flair. Welcome to Emerald Night, where your Spacehey journey takes on a whole new shade of cool."

- ChatGPT

this entire layout was generate by ChatGPT as a fun little "project" to see what it can come up with. turns out that the lil man rlly likes the color green cuz during my first few runs it kept giving me the most eye-bleeding green layout. also dont do what i did cuz openai blocked me from using gpt lol

the reason im making this a layout is so that ppl can just change things around and even just use it as a base or template to see what things you can change --- basically things you can do when making a layout from scratch. including changing contact icons to changing the name of the interest sections.

Preview:

click on the image for a larger preview

Code:

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

<style>
body {
    background-color: #0d0d0d !important; /* Dark background color */
}

main {
    background-color: #1a1a1a !important; /* Dark gray background color */
}

.top {
    background-color: #2c2c2c !important; /* Dark gray background color for the top bar */
}

.links {
    text-align: center;
    background-color: transparent !important; /* Transparent background for links */
}

.top input {
    background-color: #ffffff !important; /* White background for the search box */
}

button {
    border-radius: 25px !important; /* Rounded corners for the button */
    background-color: #4CAF50 !important; /* Green background color for the button */
}

h1 {
    text-align: center;
    font-size: 36px; /* Adjust the font size as needed */
    font-weight: bold; /* Bold font for emphasis */
    color: #ffffff !important; /* White text color for contrast */
    background-color: #333333 !important; /* Dark background color for the profile name */
}

.online {
    color: #4CAF50 !important; /* Green color for the online status */
}

.online img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%) !important;
}

.general-about {
    background-color: #2c2c2c !important; /* Dark gray background color for the about section */
}

.mood {
    text-align: center;
    font-size: 18px; /* Adjust the font size as needed */
    color: #ffffff !important; /* White text color for contrast */
    background-color: #333333 !important; /* Dark background color for the mood section */
}

.contact .heading {
    border-radius: 25px !important; /* Rounded corners for the heading */
    background-color: #4CAF50 !important; /* Green background color for the heading */
}

.contact {
    background-color: #2c2c2c !important; /* Dark gray background color for the contact box */
}

.table-section .heading {
    border-radius: 25px !important; /* Rounded corners for the heading */
    text-align: center;
    background-color: #4CAF50 !important; /* Green background color for the heading */
}

table.details-table {
    background-color: #2c2c2c !important; /* Dark gray background color for the interest section */
}

.profile .details-table td {
    background-color: #2c2c2c !important; /* Dark gray background color for the second box */
}

.blog-preview h4 {
    border-radius: 25px !important; /* Rounded corners for the heading */
    text-align: center;
    background-color: #4CAF50 !important; /* Green background color for the heading */
    color: #fff !important; /* White text color for contrast */
}

.blog-preview {
    background-color: #2c2c2c !important; /* Dark gray background color for the blog box */
}

.blurbs .heading {
    border-radius: 25px !important; /* Rounded corners for the heading */
    text-align: center;
    background-color: #4CAF50 !important; /* Green background color for the heading */
    color: white !important; /* White text color for contrast */
}

.blurbs {
    background-color: #2c2c2c !important; /* Dark gray background color for the blurbs section */
}

.blurbs .section h4 {
    display: none !important; /* Hide the headers */
}

.friends .heading {
    border-radius: 25px !important; /* Rounded corners for the heading */
    text-align: center;
    background-color: #4CAF50 !important; /* Green background color for the heading */
    color: white !important; /* White text color for contrast */
}

.friends {
    background-color: #2c2c2c !important; /* Dark gray background color for the friends section */
}

.comments-table td {
    background-color: #2c2c2c !important; /* Dark gray background color for the comments box */
}

table.comments-table{
    display: block;
    border-radius: 25px !important; /* Rounded corners for the comments box */
    overflow: auto !important; /* Add a scrollbox to handle overflow */
    max-height: 300px; /* Set the maximum height for the scrollbox, adjust as needed */
}

::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

nav img.logo {
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%) !important;
}

footer {
    background-color: #2c2c2c !important; /* Dark gray background color for the footer */
}

.top {
    color: #4CAF50; /* Green text color for the navigation bar */
}

main {
    color: #ffffff !important; /* White text color for the main content */
}

footer {
    color: #4CAF50; /* Green text color for the footer */
}

a,
a:hover,
a:visited {
    color: #4CAF50 !important; /* Green link color */
}

.top a,
.top a:hover,
.top a:visited {
    color: #4CAF50 !important; /* Green link color for the navigation bar */
}

.links a,
.links a:hover,
.links a:visited {
    color: #4CAF50 !important; /* Green link color for the links section */
}

.friends-grid p {
    color: #4CAF50 !important; /* Green link color for the friends grid */
}

footer .links a,
footer .links a:hover,
footer .links a:visited {
    color: #4CAF50 !important; /* Green link color for the footer links */
}

table, th, td {
    border: 0px transparent;
    text-align: center;
    border-radius: 15px;
}

:root {
    --topic1: "Galaxies";
    --topic2: "Melodies";
    --topic3: "Cinematics";
    --topic4: "Episodes";
    --topic5: "Stories";
    --topic6: "Legends";
}

.table-section:not(:last-child) .details-table tr td:first-child p {
    color: transparent !important;
    text-shadow: none !important;
    letter-spacing: -100px;
}

.details-table tr td:first-child p::after {
    color: var(--links) !important;
    letter-spacing: normal !important;
    text-shadow: 2px 2px black !important;
    filter: brightness(95%) !important;
}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after {
    content: var(--topic1);
}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after {
    content: var(--topic2);
}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after {
    content: var(--topic3);
}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after {
    content: var(--topic4);
}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after {
    content: var(--topic5);
}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after {
    content: var(--topic6);
}

/* Contact Icons */
.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
    /* Add to Friends */
    content: "🌟";
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
    /* Add to Favorite */
    content: "🎉";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
    /* Send a Message */
    content: "💬";
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
    /* Forward to Friend */
    content: "🚀";
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
    /* Instant Message */
    content: "💡";
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
    /* Block User */
    content: "🚫";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
    /* Add to Group */
    content: "🌈";
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
    /* Report */
    content: "🚨";
}

/* Change Header Text (Contact, About Me, Who I'd Like To Meet, etc) */

/* "Contacting You" Box Title */
.contact .heading {
    font-size: 0;
    text-align: center;
}

.contact .heading:before {
    content: "Get in Touch"; /* Updated Contact Box Title */
    font-size: 0.8rem;
    font-weight: bold;
}

/* "Latest Blogs Entries" Title */
.blog-preview h4 {
    font-size: 0;
    text-align: center;
}

.blog-preview h4 a {
    font-size: 0.8rem;
    margin-left: 5px;
}

.blog-preview h4:before {
    content: "Explore My Blogs"; /* Updated Blog Entries Title */
    font-size: 0.8rem;
}

/* "Your Blurbs" Title */
.blurbs .heading {
    font-size: 0;
    text-align: center;
}

.blurbs .heading:before {
    content: "Express Yourself"; /* Updated Blurbs Title */
    font-size: 0.8rem;
    font-weight: bold;
}

/* "Your Friend Space" Title */
.friends .heading {
    font-size: 0;
    text-align: center;
}

.friends .heading:before {
    content: "Meet My Friends"; /* Updated Friends Space Title */
    font-size: 0.8rem;
    font-weight: bold;
}

/* "Your Friend Comments" Title */
.friends#comments .heading {
    font-size: 0;
    text-align: center;
}

.friends#comments .heading:before {
    content: "Friends' Comments"; /* Updated Friends Comments Title */
    font-size: 0.8rem;
    font-weight: bold;
}

/* Contact Box Border Removal */
.contact {
    border: 1px transparent !important;
    border-radius: 15px;
}

/* Removes Boxes Around Interests/Links Table */
body {
    --lighter-blue: none;
}

/* Background Image for URL Info Box */
.url-info {
    background: url('https://source.unsplash.com/800x400/?nature'); /* Example: Nature image from Unsplash */
    background-position: center;
    border: var(--borders) !important;
    border-radius: 15px;
    height: 200px;
}

.url-info p {
    opacity: 0.0;
}

.table.comments-table {
    border-color: 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 19 of 19 comments ( View all | Add Comment )

Billie / Hazza	1713820655 using :3 Report Comment
# kenny / john	1710467409 using! I lav green so idk if I'm gonna change enything Report Comment
JessiexRazit	1710443357 I'm using it as a base for my profile. I'm changing the green parts to blue. Report Comment
★ — Nath′·.	1709602767 Using:3 Report Comment
valencia	1708311072 using Report Comment
medi🌱	1708240235 I'll be using this!! Thank you for the cool base <3 Report Comment
s4mmy the jam¡son! (actual ray toro)	1707791274 using! :) Report Comment
💫	1707447791 using Report Comment
matitu𖤐	1707183513 usandoo Report Comment
⊱ ꒰Frank!	1706340350 Usando Report Comment
ct8	1706308768 using! :D Report Comment
M4tteo_meow:P	1706036130 usando :D! Report Comment
Rina Ryukami	1705972718 Using! Report Comment
Crikos	1705008382 usiiing Report Comment
Cass	1704698792 Using Report Comment
Marno	1704551405 using the layout :3 Report Comment
wukknot!	1704350914 using! put tweaked a lil :3 Report Comment
AngelFries	1704266385 probably using :D Report Comment
appak	1704252558 prolly using a modded version of this :3 Report Comment